Web Design

52

Understanding Image Optimization

E

very image you add to a page increases the time the page takes to load in a browser. Optimizing

your image is the process of reducing its file size while minimizing the impact of that reduction

on the quality of the image. Every major graphics program offers tools to optimize images, but

these generally provide an array of options that can be highly confusing, so you should gain a basic

understanding of the various ways in which graphics can be optimized in order to better understand

the process.

JPEG Optimization

JPEGs are optimized by compressing the image. Unfortunately,

this uses a technique known as lossy compression, where data is

removed from the image. Therefore, the more you optimize an

image, the worse it will look. The compression is often expressed

as a percentage, with 100% indicating that all of the original data

has been retained and thus no compression.

JPEGJPEGJPEG

GIF Optimization

You can optimize a GIF by removing unnecessary colors from it. GIFs

can contain up to 256 colors, but they do not need to use all of

those. A simple logo may be made up of only one or two colors, so

saving additional color information is nothing more than a waste of

space. However, more complex images may start to lose quality if you

remove needed colors.

PNG Optimization

PNG files can be compressed via lossy compression, just like

JPEGs, or via removing colors, like GIFs. PNGs can also contain

additional embedded data that describes the image to editing

software but is unnecessary when used on Web pages, so removing

this data can be seen as a form of optimizing for the format.

PNGPNG