Image Optimization Tips

A majority of the images used on websites and computers are based on Bitmaps (BMP). Bitmap images are created through a grid of cells known as pixels. Each of these pixels are used to represent a specific color that (when the pixels are put together in to a grid) creates your image. The problem with Bitmap images is that each pixel has to be defined with a color, causing the file size of an image to be rather large. To lower the file size of an image, designers reduce the physical size of images so there is less information to be generated. When images become too small (where they are no longer distinguishable), its time to compress the image using a compression format such as JPG, GIF and PNG.

 

The ABCs of Image Formats

The JPG or JPEG format actually stands for the Joint Photographic Experts Group. You can visit their website at http://www.jpeg.org. In a nutshell, a bunch of photographers wanted to show their pictures digitally and wanted a compression that can reduce file size of a bitmap and without compromising too much distortion in an image. When saving or exporting an image as a JPG you are using a compression called Lossy Compression, which decreases the quality of the image in order to reduce its file size. JPG also has the ability to progressively load an image gradually instead of having the user wait for the whole image to show up.

GIF, which stands for Graphic Interchange Format was developed by the now defunct Compuserve ISP. This format is based off of the LZW compression, which removes redundant information from a bitmap and limits the amount of colors used. In other words, instead of defining each pixel’s color, like in the BMP format, GIFs will define one color for several pixels. It will also reduce the number of colors (color palette) saved in the file to only 256 colors or less instead of the normal millions of colors in a BMP. GIFs also have the ability to have transparent backgrounds and animation.

1.1 PNG image with an alpha channel on top of a GIF image gradient.

PNGs (http://www.libpng.org/pub/png/) or Portable Network Graphics came a long as an alternative for GIF formats, for reasons of GIFs having licensing issues (which is a whole other KB article).  The major difference with PNG and GIF is that PNG has much more complex image capabilities like true transparencies (alpha channels ex. 1.1).

 

Which Do I Use?

So why go over all that? Simply, this will give you a better idea of when and where to use a particular format. None of these formats are best to use for all instances. Each one is better than the other in particular circumstances. For example, a complex photo (ex. 1.2)  is best saved as a JPG. It will compress the file to a smaller file size (unlike the PNG or GIF) and still look the integrity of the photo.  An image like the KAGI logo (ex. 1.3) is better off as a GIF since there are very little colors involved. A JPG will add too much degradation to simple line art like the Kagi logo. PNG files are kind of a mixed bag format. It will compress just a bit better than a GIF, however it won’t beat a JPG when it comes to complex images. I personally like using PNG formats as a staging format. It won’t degrade my images and I can then save the image at a later time as a GIF or JPG.

1.2 waterfall image saved as a jpg

1.3 Kagi logo saved as a gif

 

Saving Images

Obviously Adobe Photoshop would be the preferred method of converting graphics to these formats by using the save for web option (ex. 1.4). Fireworks is another, and sometimes better, method for making, exporting and converting images. Fireworks is also great for animated GIFs (I am not going too deep with animated GIFs because people tend to over do them on websites). GraphicConverter, Adobe Photoshop Elements (Mac|Windows), iPhoto, and other graphic applications can also be used to create these formats.

JPG format is the easiest to compress because it has the least parameters to deal with. It uses a range called quality (ex 1.5). Increasing the quality of a JPG will make it physically look better, however the file size goes up as well. Vise versa, decreasing the quality will degrade and add artifacts to your image (ex 1.6) but the file size will be small.

Another parameter you can apply (or not apply) is blurring. The JPG compression performs better on images that have smooth gradients in them. Applying blur to the images can reduce the file size further (sacrificing quality).

PNG and GIF formats have some of the same similar parameters like choosing the numbers of colors used, dither, color reduction algorithm, transparency options and a matte color (ex 1.7).

When choosing the number of colors, you want to use the least amount of colors as possible before the image begins to lose its integrity. When an image has gradients in it, adding dither will hide the gif format’s “banded” look. Color reduction has a very small affect on what colors are chosen on a particular image (I usually use adaptive).  Transparency is selecting out the background or a particular color of an image to be transparent. The matte color works along with transparency. Usually I try to pick a matte color that closely matches the background color in which the image I am creating will be placed on (ex. 1.8 & 1.9).

1.8 Kagi Logo with a matte of blue

1.9 Kagi Logo with a matte of white