Optimizing Images For The Web With Photoshop

The Save For Web command in Photoshop allows you to optimize your images for use on the web. Broadband may be allowing us to use larger images online, but it’s still important to remember the visitors who aren’t on broadband and optimize all images on a web site. One vital aspect of a successful web site is its ability to load quickly.

JPEG and GIF are the two most common formats used on the web, with the PNG format catching up. The JPEG format is designed to preserve the variations of continuous-tone images such as photographs. It can represent images using millions of colors. The GIF format is most effective at compressing solid-color images and images with blocks of repetitive color, such as line art, logos, and illustrations with type. It uses a palette of 256 colors to represent the image and supports background transparency. PNG format is a little like the best of both JPEG and GIF. It is available as PNG-8 and PNG-24, with PNG-24 being the higher quality and higher file size of the two.

If you’re new to Photoshop, you may not be aware that you can save files as JPEGs, GIFs and PNGs using the “Save For Web” command as opposed to just using the “Save As” command under the File menu. To show you the difference, I’m going to save the same image file using both commands.

Using Save As
Save As allows you to save an image file in many different formats. In this example, I want to save my photograph as a JPEG.

1. Start with an open image. I’ve resized mine to 900 pixels wide in preparation for my photo blog.

1openimage

2. Choose File > Save As and on the dialog box, choose JPEG as the file format and type in a name for your new file. Click Save and the JPEG Options dialog box opens.

jpegoptions
From here you can change the quality and file size of the file. These attributes are directly related to each other. The higher the quality, the higher the file size. So we need to make a compromise between file size and quality. Click on the Preview check box so that you can see how changing the quality will affect the image. In this case, by setting the quality to 8, the file size goes from 165.8K to 84.5K. This is a very big saving on file size, while still maintaining reasonably good quality.

Using this method when saving photos, means that the EXIF metadata is saved with the image, so it is most useful for photographers who may want to include this info on a photo blog, website or email. If this information is not required, then choosing Save For Web is a better option.

Using Save For Web (And Devices)

Photoshop offers a range of controls for compressing image file size while optimizing the on-screen quality. You use the Save For Web And Devices dialog box to compare the original image to one or more compressed alternatives, adjusting settings as you compare.

1. Again with an image open in Photoshop, choose File > Save For Web And Devices (Note: On older versions of Photoshop the command is File > Save For Web).

2. In the Save For Web and Devices dialog box, click the 4-Up tab. On the Preset drop-down menu, choose the file format you’re interested in. The upper left preview shows the original image. Photoshop automatically renders three alternatives—a high–, medium-, and low-quality JPEG preview, or three GIF options, or one PNG option. Under each preview window, you can see the file size, the quality and how long the image would take to load on a specific modem speed.

clip_image006

3. Compare the quality and size differences, and then click any optimized version to experiment with format and quality settings, continuing to judge size compared to quality. This is where you will use your eye combined with the details provided by the dialog box to make your decision.

4. When you are happy with how the preview looks, either click Cancel, or click Save to name and save your file.

That’s an overview of two methods of saving your files for the web using Photoshop. Which method do you use when optimizing files for the web with Photoshop?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.pageaffairs.com/ ralph.m

    Ah, hadn’t used the 4-up thing before, but very handy.

    When saving for web, it’s also good to set a color in the matte box if the page’s background color is anything other than white, to avoid a faint white edge around the image.

    Other thing worth mentioning is that image color can go off when saving for the web (my images often look washed out or less vibrant). I found this wonderful little article that shows how to prevent this, which has been a lifesaver.

  • Catmull

    Please DO NOT take the advice given about color profiles on that site you linked to. They couldn’t be more wrong. Under Photoshop CS4 you should always use the ‘Convert to SRGB’ checkbox and if the colors look weird when you turn it on, go back and fix your image using soft proofing before using ‘Save for Web’ so they look right beforehand!

  • http://www.pageaffairs.com/ ralph.m

    @ Catmull Problem is, they DO “look right beforehand”. It’s only after converting to sRGB that they look wrong. Guess I’ll have to look more into this. sRGB does seem to be important. (Sorry to Jennifer if this is too off topic!)

  • http://www.cafewebmaster.com/blogs/web2crawler web2crawler

    Thanks for nice article. What about JPEG like special PNG optimization?

  • http://www.crearedesign.co.uk TomBradshaw

    I too have never used the 4-up option – looks very useful. I like to use transparent PNGs in some of my designs. Just remember to use the PNG fix code to make it work in IE.

  • Ken Trueman

    Great advice, I didn’t know about the 4up comparison.
    Thank you.

  • http://www.laughingliondesign.net Jennifer Farley

    Hi Guys
    Ralph, that’s a good point about setting the matt colour when saving transparency. I’m not too sure what’s going on with the sRGB issue. Could it be the case of saving an image as a GIF when it should be a JPEG, as in there is not enough colours causing it to look wierd?

    Web2Crawler, I find that PNG-24 is the best option when saving transparancy on an object with a style applied to it. If you’ve got a drop shadow or a glow for example and you want to keep transparency, PNG-24 does a great job. It tends to give a bigger file size but looks much better than GIF.