Image Optimization Tips for the Web ⋆ Michael B. Musgrove * Writer * Marketer * Creator * Strategist * Manager * Cecelia * Dogs * Guitars * Music * Business

Image Optimization Tips for the Web

Before Getting Started, Some Things to Know:

Why is image optimization SO important?

It’s very common for images to be the biggest weight for websites when they’re loading. They slow down page speed dramatically if not prepared for the browser correctly. Fortunately, it isn’t hard to optimize your images before uploading and posting them, but it does require some diligence and discipline. It’s important enough that it’s worth making a habit to practice each and every time, however.

Image optimization comes down to 2 criteria:

Optimizing the # of bytes to encode each image pixel
Optimizing the total # of pixels

The filesize is simply the total # of pixels multiplied by the # bytes used to encode each pixel. Therefore, posting images with no more pixels than needed to display the asset at its intended size in the browser is optimal. Don’t make the browser rescale them because it uses CPU resources and displays at a lower resolution.

SEO – Google and other search engine providers take page load speed into account in their ranking algorithms. If you want to be competitive and rank highly consistently, then making your site as light as possible must be a priority. That means, you guessed it, optimizing your images.

User experience – Your users expect your page to load as fast as possible. As in under a second. If it doesn’t, it causes them anxiety and they may very well leave your site. Obviously that’s something you don’t want. There have been studies showing how much revenue large retailers lose due to sites being fractionally slower, and while that may not be the nature of your site, it’s illustrative of the impatience users have these days.

The Basics of Imagery on the Web

There are several ways to display graphics online, for our concerns. And there are several formats we typically use these days. Some are more well-known and common, like .jpeg/.jpg and .pngs. But .gifs are making a comeback and the best way to really handle many graphics is none of these, but .svg, or scalable vector graphics, which is just code. As is CSS which, if you’re good enough, you can create animated graphics with as well pretty easily. But CSS3 can also be easily used to produce gradients and shadows that not only generate a lighter footprint, they’re easier to change on the fly if needed as well. Buttons and such UI elements are easy to make via CSS and much lighter, look better, perform better and can be edited more easily than using linked or embedded images. Web fonts are also a good choice to improve usability and performance.

Vector and Raster Images

Vector images are created with a series of points and lines, code really, that are ideal when dealing with geometric shapes because they’re zoom and resolution-independent, and look sharp and crisp at any size on any screen. They also can be a considerably smaller file size than a raster counterpart.

Raster images are created by encoding the values of each pixel within a grid, and at small or large sizes can look very choppy and jagged. Pixelated, in fact. They take the formats of jpeg, png, gif, tiff and jpeg-xr and WebP, which are newer.

Generally, vectors are great for logos, text, icons, etc… and raster is better for intricate images like a photo of a landscape, for example. Often, you’ll need to save several versions of raster images at different resolutions to deliver the best user experience.

Note: When we double the resolution of the physical screen the total number of pixels increases by a factor of four (double the # of horizontal pixels times double the # of vertical pixels) So a “2x” screen doesn’t just double, but quadruples the number of needed pixels.

Screen Resolution	Total Pixels	Uncompressed file size (4 bytes/pixel)
1x	100 x 100 = 10,000	40,000 bytes
2x	100 x 100 x 4 = 40,000	160,000 bytes
3x	100 x 100 x 9 = 90,000	360,000 bytes

Optimizing Vector Images

This is something that I, as your designer/developer will handle and worry about more than you but it’s good to be knowledgeable about what’s going on, and the usage of svg is becoming more widespread, so you’re more likely to cross its path than in the past. So I won’t go into major depth here, because it’s a large, complex subject, but you should at least be able to recognize it when you see it in the wild.

SVG is an XML-based image format. They should be minified to keep their size as small as possible, and they should be compressed with GZIP. All modern browsers support svg files, and they’re created using vector software like Adobe Illustrator, or you could code it up by hand if you wanted in a text editor. Illustrator is easier. There’s a lot of unnecessary metadata that’s created however, that can be cleaned up by running it through a tool like SVGO. There’s a plugin for Illustrator as well that I personally use.

Optimizing Raster Images

A raster image is a grid of pixels, and each pixel encodes color and transparency info in RGBA form (red, green, blue and alpha, which is transparency).

You’ll see “Lossless” and “Lossy” used a lot when trying to decide how to optimize raster images, but what do they mean? They look made up (and probably were, like “performant” and “canonicalization” and other words developers just dream up).

Lossless – describes an image that’s processed with a filter that compresses the pixel data.
Lossy – Processing an image with a filter that eliminates pixel data.

Any image can go through a Lossy compression process to reduce its file size. But there is no “optimal” configuration for all images. It depends on the contents of the unique image and your own criteria.

You’ll usually see lossy methods being applied with jpeg images in Photoshop, for example, when you’re saving the image for the web, and are given the option to customize the “quality” setting with a slider or set of numbers. The best way to determine this is really to just experiment and see what looks best with the largest file size savings, which in Photoshop may be seen in the bottom left corner of the screen.

This is as good a place as any to mention that when you upload an image in WordPress, it automatically is saved at 80% quality and at various sizes, which can be controlled in the admin panel. Out of the box, WordPress saves three other versions for you at a thumbnail size (150×150), Medium (300×300), and a large (1024×1024). But that can be changed to be anything and number you like of course, as can the 80% quality setting. Image file size is but one easy way to speed up your WordPress site. If you’re looking for other ways, here’s a very good pdf guide on ways to speed up your WP site:

Optimize WordPress Speed eBook

Here’s another good article I came across that helps explain best image optimization practices for the web.

Selecting the Correct Image Format

OK, this is what I believe what most people are intereested in. In addition to Lossy and Lossless considerations, different image formats support different features like transparency and animation, increasingly important things for the web. So the “right format” depends on the desired visual results and functionality.

Format	Transparency	Animation	Browser
GIF	Yes	Yes	All
PNG	Yes	No	All
JPEG	No	No	All
JPEG-XR	Yes	Yes	IE
WebP	Yes	Yes	Chrome, Opera, Android

TIFFs are very heavy files and very high-res. Unless you’re doing some professional work or have a one-off, very good reason, you’re not going to need to use a .TIFF file.

GIFs are very trendy right now for short clips of animation on the web. However, they are limited to a maximum 256 colors, and a PNG-8 delivers better compression for small color palettes. Only use GIFs when animation is required. For longer animations, consider using HTML5

WordPress Websites

There are a few things I do to WordPress websites to help lighten the load as far as images are concerned. Images account for so much weight on websites, every little bit/byte counts. But the web is a visual medium, and the use of graphics is crucial for so many reasons. A better user experience, SEO reasons, shareability, and images just make websites so much more dynamic.

For SEO and accessibility reasons ALWAYS, ALWAYS, ALWAYS be mindful of your ALT tags! Bots can’t see images, so they rely on what you tell them the image is of to decide what to do with it. Make sure you complete them.

WordPress plugins that help optimize load time by compressing, lazy loading and other tricks are widely available. I’ve settled on using WPMU’s Smush.it Pro to compress images, which is a premium plugin, and I put it on clients’ sites as a courtesy because it’s so good and what it does is so important. I have had some issues with it from time to time, but the headaches that arise are worth the savings in file size, to me. (The plugin is high quality from some reputable WP developers; what it does is just complex and it gets snagged sometimes. I can live with it.)

I’m currently installing RICG Responsive Images, Media Library Thumbnail Enhancer, Gzip Ninja Speed Compression, Comment Images by my buddy Tom McFarlin, and for lazy loading, A3 Lazy Load for clients on an as-needed basis, which are all image-related plugins. Not necessarily for strict optimization, but valuable plugins nonetheless.

OPTIMIZATION TIPS

Use vector formats when available and appropriate. They’re future-friendly, light, easy to manipulate and change and look awesome on retina screens.

Minify & compress your assets. SVGs, PNGs, JPGs and GIFs can easily be shrunk significantly and doing so should become part of your workflow.

Don’t be afraid to dial down the quality settings on raster images; the quality remains high but you reduce the number of bytes significantly. Human eyes just aren’t all that great, unfortunately. Even though our screens are getting to be insanely high-res.

Remove unnecessary metadata like geo information, camera information, etc… there are tools to do this which I’ll provide in a resources addendum.

Serve scaled images, and automate as much as you can. There are lots of great optimization tools around, many for free, and many built right into editing software, waiting to be used.

A guide to choosing which format: