How to Optimize Images for the Web Using Photoshop
When we speak of image optimization, we are talking about how to make an image file size smaller without losing too much visual quality. The smaller the size of the file, the faster the Web page that contains the image will download.
The two factors that determine an image's file size are:
- The number of pixels in the image.
- The number of different colors in the image (also known as "bit-depth").
So to optimize an image we need to either reduce the number of pixels, the number of colors, or both.
Photographs
Basically, first you make the photo the size you wish it to be in pixels (perhaps cropping first), and then you reduce the colors.
1) Open the photo in Photoshop.
2) Go to:
Image > Image size ...
3) Set the width and height in pixels (ignore the resolution setting; it is irrelevant), and click OK.
4) Go to:
View > Actual Pixels
to see the size at which the photo will actually appear on the Web. If this
is not the right size, undo and resize it again.
5) Go to:
File > Export > Save for Web (Legacy) ...
to bring up the Save for Web window.
6) Set it to JPEG (because this is a photo).
7) Set the Quality setting to be a number from 0 to 100. Make it as low as possible, until the image quality starts to suffer, then back off slightly.
8) Click Save.