Posts Tagged ‘Image Optimization’

Saving Images For The Web

Monday, February 11th, 2008

There are a lot of people creating graphics for the web. A significant portion of those people have no understanding of how to optimize images. I’ll attempt to explain it.

Typically, I’d explain when to use each format by looking at the format and exposing the flaws and virtues. Most non-geeks would get lost, though. While I will discuss file formats out of necessity, my aim is to discuss styles of graphics and how to optimize them the best way.

All the instructions are given in Gimpshop, the GIMP with modifications to make it more Photoshop-like. Typically these are similar to Photoshop. I planned to do Photoshop, but I don’t have regular access to it. I tried to note differences where I could remember. I’ll try to update this eventually with Photoshop instructions.

A Quick Note About The Scope of This Article

There are two ways to display images: vector and raster. Vector images are stored as formulas that, when combined, represent an image. Raster images are stored colors and coordinates of dots (called pixels). The web-safe raster formats (the subject of this article) are JPEG, GIF, and PNG.

Vector graphics have a very strong place in the design industry. Any serious designer making logos will be making them as vector art, for example. Vector images are infinitely scalable without quality loss and are very powerful in the right hands. The web at this time, however, is raster.

While there are vector image formats for the web (SVG and Flash are two major ones), most web graphics are raster. Vector graphic support, at the time of this writing, requires plug-ins for viewing or has limited browser support. To boot, I’m not clear how much optimization can be done to vector graphics compared to the likes of raster web formats. So, I’ll be sticking to raster images.

Three Typical Scenarios

When creating art for the web, there are three typical scenarios where images are needed:

  1. Line art and Icons
  2. Photography
  3. Design Graphics

I’ll go over each scenario and explain what it is, how it is used, and the typical way to output an attractive looking, lightweight image file.

Line Art and Icons

Line art and icons are either very simple images of varying dimensions, or very complex images at a very small dimensions. The line art moniker includes graphics like clip art, comic style art, or any graphic that has very few colors with lots of solid colors. Icons, in this instance, can be things like logos, simple graphical representations of concepts (for example, a contact us link may be represented as an icon of an envelope), or very small thumbnails (say, 50 x 50) of larger images.

What line art and icons have in common is low color depth. This makes these images ripe for indexed colors. That is, by throwing out unneeded colors, the file can be reduced in size. Likewise, changing similar colors to the same value reduces the file size. Two file formats play well with indexed color: GIF and PNG. To boot, both of these formats allow for transparency.

Before you create the file, make sure your image is 72 DPI. You can do this by opening Image > Image Size in both Gimpshop and Photoshop. The resolution should be set to 72. If you are using Gimpshop, you get the odd choice of setting independent resolutions for X and Y. Make both 72. You may have to adjust your width and height after you change the DPI.

In Gimpshop, select Image > Mode > Indexed Color…. In the Indexed Color Conversion dialog, select Generate Optimum Pallet. You will need to use trial and error to pick the maximum number of colors since GIMP provides on way to preview the image. The fewer the colors, the better, though. Once you’ve figured out the optimum number of colors, click OK. Gimpshop will then do the heavy lifting of removing extraneous colors. Then select File > Save a Copy…. In the save dialog, type in your file name with the .gif or .png extension. In either format, I suggest using interlacing (since it shows a visual progressive download). I usually disable all the other options, and set the compression level to 9 on PNG images. This will yield a similar file size for either format.

Photography

Photography is typically comprised of millions of colors and / or shades and is presented at larger dimensions than icons. Due to this, a format that can handle higher colors is needed. GIF is only good for up to 256 colors and full-color PNGs are often very large. This is where JPEG comes in. It allows you to present photography at full color while offering varying levels of compression / quality.

Determining the best quality setting is a per-photo trial-and-error process. Dark colors against light colors at lower quality settings tend to look particularly bad at the edges. So, it is important to always adjust the quality to various places to finesse the best file size / quality ratio (or bang for the buck, if you will). I’ve also found that Photoshop outputs better looking JPEGs at a given quality than Gimpshop. So, if you have the option, try Photoshop.

Before you create the file, make sure your image is 72 DPI. You can do this by opening Image > Image Size in both Gimpshop and Photoshop. The resolution should be set to 72. If you are using Gimpshop, you get the odd choice of setting independent resolutions for X and Y. Make both 72. You may have to adjust your width and height after you change the DPI.

In Gimpshop, File > Save a Copy… and enter your filename with a .jpg extension. After you click Save, you will be presented with JPEG settings. Click the Show Preview in image window checkbox. Then adjust the slider until you get the best picture at the lowest file size (shown dynamically just below the slider). Under Advanced Options, turning on the Optimize checkbox will further shrink the file size. Turning off Progressive will make the file smaller, but will also make the image not appear progressively as it loads in the web browser. If the file size is already low, you may not need progressive. If it is larger, a few extra kilobytes may be worth it to pop the image content up sooner in an attempt to grab the viewers attention and keep them on your page. You’ll want to turn off the Save Thumbnail. The other options may yield subtle changes to your photo and may change the file size a little. You probably won’t need to change these from the default. Finally, click OK.

Design Graphics

The graphics that make up the design of the site are often sort of like photography and sort of like iconography. That is, they may have far more than 256 colors, but don’t show a photo. Also, these graphics tend to have drop shadows or transparency, which makes them a little more unique.

With one exception, optimizing design graphics is a trial and error between GIF / PNG and JPEG. Sometimes indexed color works best, and sometimes JPEG’s lossy compression works best. The bonus for design graphics is that you don’t have to wrestle with bang-for-the-buck as much. Due to the way browsers work, the images are cached (stored on the user’s computer) and aren’t downloaded every time the page loads. So, you can typically have a little bit heavier file sizes to make the page look better. Just don’t forget: the user still has to download the image, and long downloads irritate people.

The one exception is transparency, and that comes in two flavors: translucency and transparency. Translucency is usually referred to as alpha transparency or just alpha.

If you need an area to be fully transparent, GIF or PNG will work in the indexed mode. Follow the directions above for line art (even if it isn’t technically line art by my definition).

Things like drop shadows or antialiased edges (rounded corners, for example), however, need to be full-color (or 24-bit) PNG in order to take advantage of alpha transparency. You’ll notice if you have antialiased edges and you use an indexed PNG or GIF, your edges will be jaggy and/or you’ll have to specify a matte color. Mattes are problematic if your background color isn’t solid, as the matte may not match the color of the background. In this case, you’ll want to use 24-bit PNG. 24-bit PNGs tend to be much bigger. You may want to manually index the image or use tools such as PNGCrush.

Saving alpha PNGs differs from saving indexed PNGs in that you simply don’t index the colors before exporting. Simply File > Save a Copy… with the .png extension. If you are using Photoshop, you must select the PNG 24 option in the Save For Web dialog. Once it’s saved, drop it on PNGCrush to remove any unneeded data.

One final note about design graphics is that PNGs can store additional information about an image to specify a color space (called gamma) that can cause the colors in the image to be different than identical color values in a browser. If you are using Gimpshop, you should be able to uncheck the Save gamma option to prevent this problem. Also, if you use PNGCrush, these values should be removed automatically. Since the gamma debacle is a big topic by itself, you can see how other people remove them or read the number one article in Google at the time of this writing.

You’re Done

That is the short version of exporting graphics for the web. If you find that clarification is needed or that I missed something, please leave a comment below or e-mail me from my contact form and I’ll do my best to answer your questions.