Hrvatski

printer friendly version

Optimizing images for web

Not optimizing images properly results in extremely slow loading time. When you intend to publish your images online, you have to comprimise 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.

This is an example of a JPEG image:

Eye photograph saved in JPEG format

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.

This is an example of a GIF image:

Website layout design saved in GIF format

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.

This is an example of an 8-bit PNG image:

Phoenix vector drawing saved in PNG format

This is an example of a 24-bit PNG image with transparent background:

Colorful illustration with transparent background saved in PNG format

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, 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.
  7. Once you have found the perfect balance between quality and compression, click the button Save

Save for web window

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!

Comparison of formats

To provide a clearer overview of different formats and compressions, here is a table:

Graphic type JPEG GIF PNG-8 PNG-24
Single color
378 bytes

156 bytes

588 bytes

809 bytes
Anti-aliased text on a solid background
1876 bytes

566 bytes

1015 bytes

1791 bytes
Anti-aliased text on a transparent background no transparency
365 bytes

867 bytes

1538 bytes
Gradient
742 bytes

2331 bytes

1072 bytes

1299 bytes
Flat colors
3006 bytes

964 bytes

1237 bytes

2346 bytes
Flat-color motive on transparent background no transparency
784 bytes

1105 bytes

2007 bytes
Full-color motive
2942 bytes

2662 bytes

2270 bytes

4847 bytes
Full-color motive on transparent background no transparency
2373 bytes

2333 bytes

5211 bytes
Animation no animation
16086 bytes
no animation no animation
Photo
4208 bytes

6995 bytes

7521 bytes

23810 bytes


Enjoyed this tutorial? Read more Photoshop tutorials!



Share this tutorial with your friends!



Sign up to get notified when I add new freebies & get a BONUS brush set into your inbox!

Facebook

Friends

Copyright © 2004-2014 , all rights reserved.