Saving Images for the Web

Posted on Friday, August 21, 2009:: 1480 Views

When saving images for the web there are two main considerations: 1) make sure the file displays as accurately as possible as far as color is concerned; and 2) attempt to get the smallest file size possible to make sure the image loads quickly and takes up as little space as possible on the web server.

For the first part of this, the most important thing is that the image needs to be saved in the sRGB  color space. This is critical because most browsers are not profile aware, and will assume the image is sRGB regardless of what it really is. So if you work in Adobe 1998 or ProPhoto RGB, and simply resize the images and do a save as in Photoshop, the colors will not display properly.

For example, here is the same exact image, except that the one on the left is Adobe 1998 and the one on the right is sRGB:

 

here is another example, with the same exact image, except that the one on the left is now ProPhoto RGB and the one on the right is sRGB:

 

If you are looking at this, and the above images look the same, then you are one of the few who are using a browser that is color profile aware - try looking at this same page in Internet Explorer if you can. Apple's Safari browser is the main browser that is profile aware, and Fire Fox is right behind them. In FireFox 3.5 color management is now turned on by default, which is great, but don't forget all the people using Internet Exploder, as they are still the majority, and IE is not color managed (though it looks like maybe they are moving that way - I know 7.0 is not by default, but in reading online it looks like IE 8 might be?). Regardless of what browser you are using, you must realize that the majority of website visitors are not using a browser that will display non-sRGB images correctly, so it is important that when you have images you will be using on the web, simply make sure they are sRGB.

Part 2 - File Size Optimization and File Types

Now that we have the sRGB issue out of the way, we can focus on optimizing our files so that they render quickly - which basically means they are as small as possible while preserving as much detail as possible. The key here is to use the Save for Web dialog in Photoshop. this is simply the best way to optimize images and gives you a real time file size while you change different options such as file type and the various options for each file type.

There are three main file types you will find on the web - jpeg, gif and png.

Jpegs are the default file type for images as it does the best job (usually) of compressing the image while preserving detail.

GIF's used to be the default for logos and other images that were less photographic and more graphic if that makes sense. GIF also has support for transparency, which Jpegs do not support.

PNG's are the new GIF for the most part... they support transparency, and generally do a better job of compression.

So lets look at some things here... first, photographs. the images below are identical looking, but are different file sizes. The image on the left was saved using the Save as dialog in Photoshop, which while it does give you control over the basic quality of the compression, it is not optimizing the image for display on the web. The image on the left is 61kb. The image on the right was saved using the Save for Web dialog, and is only 30kb - that is 50% smaller! The main savings here is that Save for Web strips out all of the meta data, the preview and the profile tag (it is sRGB, and the browser will assume it is sRGB, so why embed the profile?). Also, the quality setting for jpegs in the Save for Web dialog is 0-100 rather than 1-12, so you can fine tune it a bit better.

Ok, but what about GIF and PNG? If those are so cool, why not use them here? This just has to do with the way the different file types handle compression. Jpeg does this really well for images where there is lots of detail. If you had an image that was all white or a solid color for the majority of the image, GIF and PNG might be viable choices. Below are GIF and PNG versions of the same file. The GIF version is on the left at 74kb and the PNG is on the right at 67kb. Not bad when compared to the Save As jpeg, but no where near the 30kb of the Save for Web jpeg.

Web Graphics, GIF and PNG

So we have gone over images, now for graphics that are not really photos. This would be things like logos, banners, screenshots (sometimes) and other graphics created from scratch. Generally the less detail in an image, the better off you will be saving it as a GIF or PNG. So things like photos which have lots of detail are best as jpegs, and things that are mostly text or solid colors are better as GIF or PNG. How do you know which to do - GIF or PNG? now a days I almost always use PNG. It has all of the advantages of GIF, along with a better compression algorithm.

Below is one of our graphics for our One on One Online Training service. There are 4 versions of it, all from the same file, but all with different file sizes. The first one is the worst one - it is a jpeg, saved using the Save as dialog (bad!) - it is 26kb. The one to the right of it is the best one - it is a PNG created using the Save for Web dialog and it is only 4kb. Same file, just 1/7 the size of the save as jpeg.

Next we have a jpeg created using the Save for Web dialog which is 10kb, and to the right of that a GIF created with the Save for Web dialog that is 6kb. So you can see the PNG is significantly smaller, though we are already so small it is not that big of a deal. But the smaller the file size the better.

Below is a screenshot of the Save for Web dialog in Photoshop CS3, with a graphic and the standard 4 up view with the settings set to Original, PNG, jpeg and GIF. The options on the right hand side change to reflect which options are available for the file type selected from the drop down. You can see that the PNG image is the one selected (blue line around it) so the options shown are for PNG. While there are a lot of options, it is not terribly important that you learn all of what can be done. The most important one for PNG and GIF are the number of colors used which is displaying as blank in this screenshot because I did a custom number - in the PNG image you can see that below the image it says "110 colors" which is not one of the standard options - I decreased it from 128 until I could see a slight change, which saved a fraction of 1 kb in the final size (going from 128 to 110). Not really important. Decreasing the colors from 256 to 128 did make the file around 1 kb smaller.

 

For jpeg images, the most important option is the Quality slider. This is a 1 to 100 slider, usually it seems I end up around 60 or 70, sometimes a little higher. Any lower than that and you start to see problems. One cool thing about the Save for Web dialog is the ability to try 3 different settings and see them all side by side next to the original.

 

One interesting thing about the 2 screenshots above  is the file size and quality - the first screenshot of the save for web dialog with the web graphic is much easier to compress, and a PNG is appropriate... the file size is 28 kb. The second screenshot has the 4 images in it, which are difficult to compress, and it needs to be a jpeg... the file size is 80 kb. It is almost 3 times as large, yet the overall quality is less than the first one - look at the text of the interface itself - it is completely clear in the one with the graphic, where as in the one above you can see lots of artifacts. Had I saved the file above at a high enough quality to have it be as clear as the first one, the file size would have been 160 kb. This is where you have to decide where the trade off between quality and size effects you. For this particular screenshot I don't think the quality matters enough to double the already large (80 kb) file size.

Just a final note about this... there are a lot of options and tricks within the Save for Web dialog that can save you little bits here and there... but the most important thing is to use the Save for Web dialog if you are using images for the Web even if you do not know all of the ins and outs of every option - simply using the Save for Web dialog automatically converts the image to sRGB and strips all of the extra info out of the file that you don't need. That alone makes the Save for Web dialog very important.

 

---