how to optimizing images for web

                         

I noticed how many people don't optimize their images properly, which results in extremely slow loading time. When you intend to publish your images online, you have to comprimise the quality — just face the fact you cannot use a 100KB image on a website layout. It's not fair to your visitors.

This tutorial will explain in detail how to use Photoshop's Save for web... option.

Facts about image formats

There are many image formats available, but only a few work on web. They differ in some important properties, and you should learn how to use them best.

There are two kinds of image compression, lossy and lossless.

Lossy compression means once you decompress the compressed data, you will not get the exact same image as the original. However, this will only be visible at a closer look. Lossy compression is good for web, because images use small amount of memory, but can be sufficiently like the original image.

When you decompress a lossless image, you will get exactly the same image as the original. This compression uses greater amount of memory, so at times it may not be good for web.

JPEG

JPEG is a format name, .jpg is the extension for it. This image type is lossy, and you can control the compression level in image editors.

It is good for saving images with millions of colors, like photographs, drawings with many shades, images containing gradients etc.

GIF

This format is a bitmap, which means it's a grid made of tiny pixel squares. Data about every pixel is saved (so it's lossless), and you can save up to 256 colors. Pixels may also be transparent.

GIF may contain more than one frame, so it can be animated.

Since image programs can control the exact number or colors stored in a particular image, it is a good format for saving images with less colors, like charts, small graphics (bullets, website buttons), images containing text and other important details, flat-color drawings etc.

PNG

This format was created to become the new and improved GIF, because GIF was patented, and thus not free. PNG has greater color-depth than GIF, it can store partial transparency, and can achieve greater compression.

It's best to save images in this format when it's both needed to preserve transparency and large amount of colors, or partial transparency. Since it's a lossless format, these images are often not small enough for displaying on the web.

Saving images for web

Option for exporting images for web is found under File > Save for web... — other graphic editors must have something similar, probably under File > Export.

Saving images with many colors

Original image saved at 100% quality [171KB]

1. Choose File > Save for web...
2. Since it's a photograph, choose JPEG.
3. You can check the option Progressive if you like, it's only difference is how the loading will look like. Progressive images first appear blurry, and then become clearer as the image loads. Non-progressive images load line-by-line.
4. First choose quality level, High if the image will be visible, Medium or Low if it's meant as a background.
5. To have more control over the quality, use the slider or enter number in the field Quality
6. Look at the file size and estimated loading time displayed in the lower-left corner while adjusting settings. At the same time, look at the image to decide on what quality looks good enough.
   • If it's a background, make sure file size is under 5KB, up to 2KB would be better.
   • If the image is a layout header, up to 40KB is acceptable.
   • If it's an image to be displayed on the page, 20-30KB is reasonable, depending on dimensions.
   • Artworks may be saved in better quality, since people who will look at them already expect to see large images.
7. Once you have found the perfect balance between quality and compression, click the button Save

Image saved at 60% quality [42KB]

The image above would load in about 8 seconds on 56kbps connection. Its quality is not the best, some areas appear blurry, but it's still good enough for web purposes, and we used 75% less memory than before. This is how images with lots of colors should be saved.

Saving flat-color images and charts

Original image saved in JPEG at 100% quality [177KB]

1. Choose File > Save for web...
2. Since it has less colors, choose GIF.
3. If the image contains empty (transparent) pixels, make sure Transparency is checked.
4. Select the number of colors — try to make the number the smallest you can, while at the same time the image looks decent.
5. If the image is not in the main focus (ie. background) try adding some Lossyness by dragging the slider to the right. This will reduce the file size.
6. Once you have found the perfect balance between quality and size, click the button Save

Image saved in GIF, 8 colors, 50% lossy [25KB]

The above image would load in about 5 seconds on 56kbps connection. If you take a closer look, you'll spot some differences, but the image still looks good enough to be a background — what is more important, it's only 15% of the original file size!