Not optimizing images properly results in extremely slow loading time. When you intend to publish your images online, you have to compromise the quality. This tutorial explains in detail how to use Photoshop’s “save for web” option to get the best possible quality in the smallest file possible. At the bottom of the page is a comparison table so you can see how these different formats and compressions play out in real life.
Image formats
There are many image formats available, but only a few work on the web. They differ in some important properties. 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 sometimes it may not be good for web.
JPEG
JPEG is a format with the extension .jpg. 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, flat-color drawings etc.
PNG
This format was created to become the new and improved GIF, because GIF was patented. PNG is a lossless format. There are two types of PNGs, an 8-bit and 24-bit. 8-bit can store up to 256 colors, like GIF. 24-bit can store millions of colors, and it also has partial transparency. It’s best to save images in this format when you need to preserve both transparency and a large amount of colors.
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
- Choose File > Save for web…
- Since it’s a photograph, choose JPEG.
- 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.
- First choose quality level, High if the image will be visible, Medium or Low if it’s meant as a background.
- To have more control over the quality, use the slider or enter number in the field Quality
- 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, up to 70KB is reasonable, depending on dimensions.
- Artworks and photographs for your portfolio may be saved in better quality, since people who will look at them already expect to see large images. In this case it’s normal to have file sizes from 100 to 200KB, but not more than that.
- Once you have found the perfect balance between quality and compression, click the button Save
Saving flat-color images and charts
- Choose File > Save for web…
- Since it has less colors, choose GIF.
- If the image contains empty (transparent) pixels, make sure Transparency is checked.
- Select the number of colors — try to make the number the smallest you can, while at the same time the image looks decent.
- 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.
- Once you have found the perfect balance between quality and size, click the button Save
To see a comparison of the above formats, please follow this link: Web Image Comparisons