Raster Image Optimization
Raster images are graphics using a dot matrix structure (as compared to vector images, which store the polygons necessary to draw the image instead of the per-pixel detail of the image). Because raster images need to store every pixel in an image, they tend to be significantly larger in size than corresponding vector images. On the other hand, raster images provide a significantly higher quality image for extremely detailed images such as photographs.
Popular web file formats for raster images include JPG, GIF, and PNG. Off the web Photoshop files, BPM files, TIFF files, and a number of other graphic formats are also raster.
Why optimize?
The larger a raster image gets, the larger its file size gets. The biggest driver to file size is how many pixels make up the image.
If you take a rectangular image of 800x600px, the area if the image is 480,000px. But nobody uses 800x600 anymore, so let's say our monitor doubles to 1600x1200px. Now the area of the image is 1,920,000px, which is 4x larger. Double the dimensions and you quadruple the image size.
!areaexample.png|align=center,border=1!
If all images were of the highest quality all of the time, the size of the images could literally cost our users hundreds of dollars. In 2013, the International Telecommunication Union estimated the cost of 500MB of pre-paid mobile broadband data at $85/month in the US, and in 2015 Soasta estimated the average webpage is 2MB in size. 1310kb of that 2mb is being used on images.
Unoptimized images literally cost our clients time and money. We can't make our sites performant without optimizing our images.
How to optimize?
GIF and PNG images
These files use changes in color depth and dithering to compress the size of images, by using algorithms to add noise to a picture and limit the number of colors involved in the picture. (Additionally, there are differences between how PNG files GIF files algorithmically store their data which result in GIFs being larger images than PNGs when compared still-to-still, but also allow GIFs to be animatable.
The following image is a screenshot of a Photoshop dialog that allows the user to compare different compression methods.
- Top left is the original image of a piggy bank surrounded by coins, which is 87.9kb.
- In the top right, the gradient with an 8-color palette and a diffusion dither applied to it is only 4.27kb.
- Bottom left, the same 8-color palette and a pattern dither, which brings its size down to 3.99kb.
- Finally, bottom right is the same 8-color palette and no dither, which is 2.30kb.
These are extreme examples - we would likely never publish something with so much of its image quality stripped out unless it was a stylistic design decision. However, it's clear here that the choice of number of images to display and the choice of transitions between colors have a profound effect on the size of the image, and as a result, the effect on the time and cost on the end user.
!piggybankpng.png|align=center!
JPG images
JPG files use a different approach to file compression, lossy compression. This form of compression throws out the least important data based on its algorithm. The compression method is called "lossy" because it cannot be reversed; you can't use the information in the file to recreate the original image. As a result, every single time a JPG is saved (even if it's saved at 100% quality every time) the quality of the image degrades and the file size gets smaller.
Most JPG applications score the level of quality of an image on a scale of 1 to 100 - the higher the quality, the less compression is applied, and the larger the image is. Conversely, the higher the quality, the fewer JPG visual artifacts result, so the image looks better.
The following image is another screenshot of our Save for Web Photoshop dialog, this time with JPG examples
- Top left is the original image of a piggy bank surrounded by coins, which is 87.9kb.
- In the top right, the image is displayed with "Very High" quality score of 80, and the file size is down to 5.63kb. That's less than 1/10th of the size of the original, but very few visual artifacts display. *Very high is the recommended compression level for most images* according to Una Kravets and others (see Una's talk below).
- Bottom left, the JPG at "Medium" quality - 30 - which brings its file size down to 2.02kb but begins to introduce some noticeable visual artifacts. For example, the area where the dark portion of the ear contrasts with the lighter background doesn't look as crisp, and the coins look fuzzy.
- Finally, bottom right is the image at "Low" quality - 10 - where the file size is down to 1.45kb, but the file is filled with obvious visual artifacts. A compression level this low can still work for murky images or images without sharp borders, but it struggles with crisp images.
Once again, these are extreme examples - we would likely never publish something with so much of its image quality stripped out unless it was a stylistic design decision. However, it's clear here that not only does the choice of image quality matter, but that even if it's originally saved at the 80-quality level the JPG will eventually degrade from there to the 10-quality level if it is saved too many times.
!piggybankjpg.png|align=center!
Other image formats
JPG, GIF, and PNG are not the only file formats available to the web. Other examples include WebP and FLIF. Both of these provide newer algorithms for compression and offer more options for lossy vs lossless compression, but they're not fully supported by the browsers. Until they are, we should probably steer clear -- nobody wants to have to download a Javascript polyfill just to view an image.
Image Optimizers
Applications such as ImageMagick can be used to batch compress directories of images to ensure they're as small as possible for their chosen quality traits.
ImageAlpha is a Mac application that can be used for compression.
ImageOptim is Mac, Windows, and Linux application that can crawl over a directory of images and compress sizes dramatically Una Kravets recommends using ImageOptim for every image, and rerunning it every few months, because as the open-source software's algorithms improve, the file sizes become smaller without loss of quality. "ImageOptim Always and Often - IOAO."
Techniques for improving loading without changing the file size
Only load the size you need
Often in the industry we hear to load a file twice as large as you think you need so that if the user's on a [Retina display|https://en.wikipedia.org/wiki/Retina_Display] the image still looks sharp. These days, browsers are much better at scaling images up than they were when Apple introduced Retina, so it's probably no longer worth it. Size the image to the appropriate size for what you need.
Use Compressive Images
The Compressive Images technique recommends the opposite - save a JPG at 0 quality and a size significantly larger than what's needed (such as 1024x768 for a 400x300 image) - the image is scaled down by the browser, and looks sharp even on Retina displays, while still being significantly smaller than a 400x300 image at 90 quality.
Use the <picture> element
Another approach to optimizing raster images is ensuring that only the version of the file the user needs is downloaded to their device. <Picture> allows us to specify to the browser which versions of an image to pass down according to the browser's capabilities and needs. Like <video> it allows the browser to determine which source is most appropriate, and because we can add an <img> at the end of the list of resources, even browsers that don't recognize the <picture> tag will fall back to an <img>.
An example <picture> tag:
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
The browser will analyze the list of elements and say "hey, is this screen 650px wide or higher? Yes, load the pink flowers" or "Nope, but is it 465 px wide or bigger? Yes, load the white flowers", or "Either it's smaller than that or I have no idea what this <source> tag thing is, load the orange flowers".
The Blur-Up Technique
With this approach, you load a thumbnail of the intended image at its full size with a gaussian blur applied, then pop the actual image in once it's loaded. This gives the user the understanding that an image will be in that space (and prevents screen reflow), makes it feel like the image has loaded super-fast, and still provides a high-quality image at the end. Read about the Blur-Up Technique on CSS Tricks for the details.
Black and white images with CSS Blend Modes
A high-quality black-and-white image is significantly smaller than the same high-quality photo taken in color because there's much less color data to store. Another design technique for providing interesting images is to use CSS Blend Modes (similar to layer blend modes on Photoshop). The CSS transformation costs almost nothing in terms of performance or file size, and provides the same visual effects as adding the layer blend modes in Photoshop, which result in a larger file size.
Additional resources
Una Kravets gave a talk at An Event Apart Seattle 2017 regarding image quality entitled The Joy of Optimizing
piggy bank image credit: [Morguefile|http://mrg.bz/74627b]