This is one of those topics that seems incredibly obvious, and shouldn’t take that much explanation. Yet, I am always stunned by the amount of websites that, for whatever reason, have incredibly inefficient file types. Some images are incredibly too detailed than they need to be while others should be a much higher quality or resolution and just wind up pixilated or noisy.
To choose the most optimal file types for the web, you have to balance quality of image files with load time. While many people have fast connections these days, not everyone does, and many of those fast connections are not entirely consistent either. Fortunately, there are certain image file types that are light in size and work extremely well for specific purposes.
Difference Between Lossy and Lossless
Compressed image files can be put into one of two groups: Lossy and loss-less. Lossy images typically undergo heavy compression from the original rendering image, making them lose a bit of quality (the image will have less precise pixel information) for the price of a lower file size. This makes lossy images great for quicker load times.
Lossless images undergo a very rigorous compression so that they do not suffer from a loss of information or image quality. Of course, the fact that these images store more detailed information makes their sizes much higher than lossy images.
JPEG
JPEG image files are probably the most commonly used on the web. Although they are a lossy file format, they were designed for digital photography and are thus very capable of reproducing a variety of different colors and shapes. The best types of images to save as JPEG include:
- Photographs.
- Smooth gradients of color.
- Light, low quality images.
- Images with few sharp lines and text.
(A JPEG image zoomed in at 161%. Notice the noise around lines and text; gradients are still smooth)
When working with an image in Photoshop, you are able to choose what level of compression to perform on the image from 1-100. While choosing your level of compression, you can also preview a zoomed portion of your image to see how the compression affects the quality as well as seeing how the compression affects image size.
GIF
While GIF images are lossless, they do have a few limitations. They have trouble with smooth color gradients and areas with lots of shading and complexity. However, GIFs are great for images with the following:
- Solid colors.
- Sharp lines.
- Text.
- Logos, icons, and buttons.
(A GIF’s lack of color palette can be a considerable weakness to an image, particularly if it is saved in a color palette less than 256 colors)
Because of their lack of a color palette (only up to 256 colors), GIFs are not ideal for images with color gradients or a large variety of colors. The GIF format is particularly horrible for photographs.
PNG
The PNG file format is great for filling in the weaknesses of GIFs and JPEGs. PNGs support a larger color pallet than GIFs, and are lossless, making them ideal for images with the following:
- Smooth gradients of color.
- Images with text or sharp lines (where JPEGs would normally have trouble).
- Images with transparency.
(A PNG image zoomed 161%. The text is pixelated because of the 161% zoom, but there is no noise around the lines of the text. Gradients are smooth as well.)
PNGs have the most flexibility out of most images used for the web. Of course, this amazing file format comes at the cost of a larger image size and lower loading time. Granted, a JPEG of the highest quality compression will rival the size of that same image saved as a PNG. For most images dealing with sharp lines and text that must be readable, you will save as a PNG.
Bottom Line
While using my bulleted guidelines will definitely help in deciding which file format to use for which image, you will find there are times when you can get away with using a lower quality JPEG instead of a large PNG file. When saving to the web, I do recommend previewing a zoomed portion of the image to compare quality while also considering whether the difference in file size is worth it. Photoshop allows you to view all of this when choosing your saving options with the “Save for Web dialog.
