In our previous post about image optimization, we talked about the pros and cons of the three major image formats found on the web and when each format should be used to give you the smallest file size with the most acceptable quality. The goal is to improve the performance of our web pages, so optimizing the quality/size ratio will result in better speed by reducing throughput.
Today, we’ll be going over some more general tips about things you can do to make your images smaller and easier to download while still retaining an appropriate amount of quality.
Dimensions
This one is pretty common sense: Larger images are going to have larger file sizes. So it doesn’t usually make a whole lot of sense to load a large image and then display it at much smaller than actual size on the page. Make sure your images are at the size they need to be. Cropping out excess blank space around the image will also shrink file size. If you really need the extra space, you can add it with padding or margins in CSS.
Noise
Noisy image: 80.3 kB
Noise removed with “Despeckle” and “Blur” filters in Photoshop: 43.9 kB
Image noise is random variation in brightness and color throughout a photograph, and is an unavoidable byproduct of both film and digital cameras that causes them to look grainy. A large amount of noise can really mess with the JPEG compression algorithm, resulting in files much larger than they should be and often creating ugly artifacts throughout the image. Reducing noise in your images can actually end up reducing the file size, sometimes dramatically. This has the trade off of making your images a bit blurry though, so use at your own discretion.
Resolution
You may have heard, and until very recently I was lead to believe, that all images for the web should be set to 72 or 96 ppi, as this is the average resolution of most monitors. The short answer is that this isn’t true, and any PPI value will be fine for the web. The only thing that really matters are pixel dimensions.
Photo at 72 dpi: 34.2 kB
Photo at 300 dpi: 34.4 kB
To test this, I generated two identical JPEGs of 300×225 pixels, one at 72 ppi and one at 300 ppi. The file sizes were nearly identical and both look identical on screen. PPI stands for “Pixels per inch”, and refers to the number of pixels a printer will cram into one inch of paper. Something similar you may hear in place of PPI is DPI. DPI is a similar value that stands for “Dots per inch” and refers to the number of ink dots a printer will make per inch on a piece of paper. (DPI is actually a technical aspect of a printer and is not stored inside an image file.)
As it turns out, dpi and ppi only refer to the size of the image when it is printed, and have absolutely nothing to do with how the image appears on screen. Resolution has almost no effect on file size.
Metadata
All images are branded with metadata, which is a bit of data hidden in the file containing camera information, author information, and more. It can also contain the number of times an image has been saved and a changelog of what manipulations have been done to it. There are perfectly valid reasons for keeping this data within the image, but from the standpoint of web performance optimization this metadata is mostly superfluous. Saving for web and devices in Photoshop allows you to remove some or all of it, and most other image editing software (such as Lightroom, Expression Media, PhotoMechanic, and Adobe Bridge) allow you to view and edit metadata. There also exist a few free tools online you can use to strip everything out, such as ExifTool. (http://www.sno.phy.queensu.ca/~phil/exiftool/)
While removing metadata from images WILL lower its file size, it’s worth noting that you will also be removing things that may be considered important, like copyright information. If you use a tool to get rid of metadata, make sure it allows you to look through what you’re deleting and only delete what isn’t needed. (The scalpel rather than the sledgehammer, if you catch my drift.)
Summary
Even if you’re not a designer, it’s still a good idea to know what does (and does not) affect the size of the images on your site. For most images on the web a good upper bound on image file size is 50-70 kB per image. This is only a recommendation and depends on lots of things from the dimensions of your images to how many images you have per page. Keeping these ideas in mind can help you keep your images as small as possible, cranking as much performance out of your page as possible.