There are many ways to save and compress images for use on the web. This document covers the basic techniques that are used to get the right balance between small files, and image quality.
For our purposes, and broadly speaking, there are two types of images. Those types are Graphics and Photographs.
Flat Graphics / Limited Colors
- Limited detail and colors
- Often vector art or illustrations
- Has large areas of solid color
Photographs / Highly Detailed
- Detailed imagery
- Complicated gradients
The two image formats we use the majority of the time in web development are PNG and JPEG. Below are the major strengths and weaknesses of each format.
- Great for Text
- Great for Flat Graphics
- Great for Interface Elements
- Lossless Pixel Reproduction (24-bit PNGs)
- Full Alpha Channel (Transparency) Support (24-bit PNGs)
- Creates large files when working with Photographs/Detailed Images
- 8-bit PNGs are limited to 256 Colors
- Can not be animated
- Great for photographs and complicated images
- Can produce relatively small file sizes for large images
- Not good for text
- Not good for sharp edges
- Can introduce compression artifacts (lossy)
- Does not support Transparency
- Can not be animated
- Bad for wide areas of flat color
A Note About GIF
GIF files share a lot in common with 8-bit PNG files (limited to 256 colors, 1-bit transparency when exported from Photoshop, etc). The biggest difference between the two is that GIF images can be produced in an animated format, while PNG images can not. Thus, the only reason we should be using GIF images is when we need an image to be animated.
Image File Compression
There are many techniques and strategies to compress images for the web. A few are outlined below.
The steps involved in compressing images are broadly the following:
1. Select PNG or JPEG
Using the information above, decide if the image is best suited to be compressed as a JPEG or PNG.
2. Choose compression quality / Technique
For JPEG images, you have the ability to select a compression amount that ranges from 0-100. The higher the number, the less compression that happens. This means the lower the number, the lower the quality and the more compression artifacts are produced.
It is always important to have a preview of the resulting image when setting the quality/compression amount. This allows you to keep lowering it until you feel too many compression artifacts are introduced. This is the best way to balance quality and file size in a jpeg.
When compressing an image you are not trying to hit a fixed target file size, you are trying to minimize compression artifacts, while creating as small an image as possible. If you find you can’t set the quality lower/compression higher because too many artifacts are being introduced, then it might mean the dimensions or content of the image needs to be reconsidered.
When creating PNG images you will control the size by choosing to limit the number of colors in the image. This means a larger the number of unique colors leads to a larger file size. There are two types of PNG images, 8-Bit, and 24-Bit. The types are defined by how many colors they can reproduce time, and the type of Alpha Channel or Transparency it supports.
The differences we are concerned with are as follows:
8-Bit PNG (PNG-8)
- Limited to 256 Colors (also known as Palleted Color)
- Transparency is 1-bit when exporting from Photoshop. This means either a pixel is fully solid, or fully transparent. More can be read here about full 8-bit Alpha Channels in 8-bit PNGs here.
24-Bit PNG (PNG-8)
- Full color range available
- Full 8-bit alpha transparency
When creating a PNG, I recommend starting with an 8-bit PNG of the image. This will limit the number of colors to 256, thus decreasing the amount of data needed to store the image.
To further, decrease the size of the image, you can lower the number of colors being used. While looking at a preview of your PNG, keep decreasing the number of colors until you start to get unwanted changes in your image. The unwanted changes you would be looking out for are graininess in color transitions, color shifts on large areas of color, and banding in gradients. In lots of times, you can dramatically reduce the number of colors in the image because most of them are very small variations on each other.
It is important to use PNG-8 with the right types of graphics to ensure a limited number of colors and detail in the image. A PNG will compress well when there are large areas of solid colors or a limited number of colors. Sometimes you can use filters in programs like Photoshop to limit the number of colors in your image. An example would be the Posterize filter.
If you need a full alpha channel, then you will need to save the image as a 24-bit PNG (PNG-24). This means that the file will not restrict the number of colors, and thus you should try and limit the number of colors (and detail!) in your image when creating it.
If you need more than 256 colors for your PNG, then you might consider making it a JPEG.
If you go to save an image as a PNG, and you find it is much larger than you expected or desire, that may mean you should try saving it as a JPEG to see if that makes it smaller, and the artifacts are acceptable. There will be times where you find a well compressed JPEG version of an image will be about the same size as it’s PNG version. This can the case for detailed or very large images.
Save your image. We are not done working on it, so don’t upload it yet!
4. File Optimization and Meta-data removal
The final step in through image compression is to remove un-need metadata and other file information that is not strictly needed. This includes color profiles, a whole slew of metadata, and un-needed image file data. The good news is you don’t have to think about any of that, there are tools available that automatically apply the applicable techniques to remove this extra data from your PNG and JPEG files.
For the Mac, a recommended tool to do this is ImageOptm.
To use ImageOptim, just drag all of your images into the program’s main window and it will automatically start processing them. Once you see a green check next to an image, it is done processing and ready to go.
Image compression is both a bit of art and a bit of science. Once you start paying close attention to it, it can become intuitive and easy. And there are many other ways to tackle the issue of displaying images at the highest possible quality at the smallest possible size. Some of them include:
- Slicing up the image and saving it in two different formats and using those images together as one.
- Creating parts of an image in CSS instead.
- Using SVG graphics.
- Changing the actual dimensions of the image.
- Blurring less important parts of the image.
- Removing unneeded detail from the image.
Published on March 04, 2015 at 3:02:10 pm CST. Last modified on June 06, 2018 at 3:21:15 pm CST.