How to save large + high quality JPEG / PNG for website?

Forum|Forum|12 years ago
October 4, 2013
1 reply
16378 views

I use Photoshop CS3 to resize and reduce JPEG / PNG images via the "save for web". What is the standard image size in terms of KB for website?

Now, let's say the original image taken from a Nikon D3200 Camera has a standard size of 6016 px X 4000 px and the image quality is PERFECT at 6.5 MB file size.

How can I use Photoshop CS3 to save and maintain the standard size 6016 px X 4000 px, the same image quality but the file size is reduced to maybe 100kb?

Many thanks & regards

FSM

This topic has been closed for replies.

Silkrooster

Legend

Not going to happen. To reduce the file size that much, you are going to loose data.

In the save for web dialog box, there is an icon in the upper right hand corner. Click on it and you will find an option to set the desired file size. This will tell you how much data will be lost, before you save it. Also keep an eye on the value below the image it self (in the save for web dialog box), it will tell you what the file size is, when you adjust the pixel dimentions, number of colors, file format, etc.

For the web the image size only needs to be large enough for the final use. If you want the user to print it, then the original size or even as low as 3MP (1600x1200) is large enough. But for the screen only, it can be reduced even further, most monitors are HD (1920x1080) And the mac retina (2880x1800)

Keep in mind the ppi is only relevant if you plan on printing the image or you want to presize the image before importing into an app like InDesign. But for general Screen use, the ppi is not relavent, and is normally thrown out when using save for web.

A

Anonymous

Dear Silkrooster,

I totally agree with you but may I ask what is 3MP? Is it Megapixels or Megabytes? If Megabytes, don't you think 3MB will slow down the loading time of the website?

I want crispy clear images like many websites do. But I am really not sure how other websites do it. Lets refer to Apple website. It has many good quality images and the loading speed is very fast because each images weight around 40KB.

Ok. For my website, I am forced to reduce the size to 600 px X 300 px or 500 px X 350 px. To get around 40KB each i have to use the lowest quality for JPEG which is 10. The end result is TERRIBLE.

My website is also slower to load compare to others. So the question is, what is the optimum setting for resizing for photoshop to be use for web purposes?

My main website: 风水

Initially I inserted a background image with the size 1920 px X 4000 px (because scrolling). Loading time is bad. Then I cut half and inserted only for top background image with the size 1920 x 700 px but this image is still the last to load. How can I make it even smaller in size but maintain good and sharp quality?

Another page: 八字因果

At the first image, once I resized it and set a lower quality, the text "fengshuimaster8u.com" turns blurry.

The issue, is Photoshop capable of resizing images to good quality with a smaller size or do I need to use another program?

Sorry for the long post.

Thanks a lot

Silkrooster

Legend

MP=Megapixel

As for the background, you may want to think about repeatable images. That way, the image size can be extremely small, but still looks good.

A 600x300 pixel image, should look good, as long as it is an object of the entire page.

Instead of jpg, try png. It will provide a better quality image, less color degration and supports transparency, which is required for objects to look like they are part of the page.

Its a bit late here, so if you need more help, I'll be back on tomorrow night, around midnight to 1 am eastern time.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded