Image optimization is one of the simplest and most effective steps you can take to transform your site from good to great.

Table of Contents

• Image optimization: an extensive collection
• Books
• Tools
• Services
• Resources
• Techniques
• Formats
• Facts you may not know

Image optimization: an extensive collection

When it comes to website page speed and web performance optimization, images are one of the hottest topic. Suffice it to know that, according to The HTTP Archive, on average roughly 60% of a webpage weight is represented by images.

On the other hand, images can’t and shouldn’t be just removed or undervalued when it comes to business value.

Tammy Everts, one of the leading experts on web performance and prolific writer, has often conducted researches on the impact that page speed and performance may have on a business bottomline. In this article she showed how adding images to a page or making existing images larger have been proven to increase conversion rates. That’s why it becomes so critical to invest in an efficient optimization strategy.

As Tom Ewer put it:

Image optimization is one of the simplest and most effective steps you can take to transform your site from good to great.

The goal of this article is to give you an extensive collection of resources, tools, books, guides, techniques and strategies to master image optimization for your websites.

At the end, you’ll also find a couple of fun facts about images that you may have never heard of.

Books

Every time I want to dig deep into a specific topic, I look for good books. Here’s a list of the best options out there: 

• Essential Image Optimization by Addy Osmani. One of the most complete book there is, completely readable online for free.
• Web Performance in Action: Building Fast Web Pages by Jeremy L. Wagner. It aims at being your companion guide to making websites faster, and it thoroughly address images optimization and delivery.
• High Performance Images: Shrink, Load, and Deliver Images for Speed by By Guy Podjarny, Tim Kadlec, Mike McCall, Yoav Weiss, Nick Doyle, Colin Bendell. A group effort that is mainly thought for developers. It provides useful tips, tricks, and practical theory for processing and displaying powerful images that won’t slow down your online product.
• Designing for Performance: Weighing Aesthetics and Speed, by Lara Callender Hogan, which has a whole section on image optimization. It is completely accessible online for free. The goal of this book is to help you approach projects with page speed in mind, guiding you through testing and making design choices.

Tools

When it comes to image optimization, there is no shortage of tools that you can rely on. Here’s my list of those tools that should have a place in your belt. I won’t go into much details for each tool because you will mostly need a different tool according to your situation.

• ImageOptim, both a Mac app and a web service. Useful to remove metadata and compress images without losing quality
• JpegTran, MozJpeg and JpegOptim are all libraries that aim at compressing JPEG images as much as possible in a lossless fashion
• ImageMagick, possibly the most popular and feature complete software. It is used to create, edit and compose images, but it has also a powerful suite of utilities to convert, resize and compress them.
• ImageMin, a popular tool meant to be used during the build process of your website
• XnConvert, a software available for Mac, Windows and Linux meant for processing images in batches
• FFMPEG, by far the most complete solution out there. As a consequence, it also comes with great complexity of use. It can be used to record, convert and stream audio and video
• SVGO, a Node.js tool for optimizing SVG files
• TinyPNG, a fairly popular tool (has recently surpassed 1 billion compressions) which claims to use smart lossy compression techniques to reduce the file size of your PNG files. Quality decrease shouldn’t be noticeable by the human eye.

Services

Handling images the right way is huge work. You need to take into account different image formats, deliver images of different sizes and resolution according to the user’s device, you might want to generate thumbnails and support different browsers differently. In addition to this, in order to achieve maximum speed you also have to host images on a CDN or use your own servers, thereby increasing the bandwidth you’ll be charged for by your hosting service.

For this reason, there are a couple of companies out there who can do all of this for you for a (sometime very cheap) price. Here are your best options:

• Cloudinary, which has a formidable free tier and offers a plethora of smart features
• Imgix, which adopted a pay as you go model and has similar features to Cloudinary
• Thumbor, which is open source and includes most of the features you may need from an image processing service
• Kraken, which offers a powerful and robust API and doesn’t lock you in with any specific CDN

Resources

In 2018, one doesn’t just read books. When it comes to studying a new topic, there is no shortage of new mediums such as video courses, blogs and social media accounts that one could turn to.

• Udacity Course: Responsive Images by Google. Free course that teaches your how to work with images on the modern web, so that they look great and load quickly on any device.
• Guide: Google Developers guide on Responsive Images. Super in-depth guide by Pete LePage that includes notions on responsiveness, art direction, performance and different formats.
• Videos: Compressor Head. It’s a 6 episode video series explaining the theory and practice of compression algorithms by Google Developer Colt McAnlis.
• Guide: Google Developers guide on Image Optimization. In-depth guide by web performance guru Ilya Grigorik, also author of the book High Performance Browser Networking. A slightly more technical guide touching on many aspects and including a final image optimization checklist.
• Guide: Shopify Blog on Image Optimization. Shopify’s take on how to handle images in order to both build a fast online store and exploit Google Images algorithm in order to direct more traffic to your site
• Blog: Cloudinary Blog. A very interesting blog by Cloudinary where they regularly publish content on various techniques you may adopt to better handle your images.

Techniques

Compressing and resizing aren’t the only things you can do in order to properly handle your images. There are other techniques you might adopt in your website, so to either reduce the time it takes to download the assets or to prioritize critical images over non-critical ones. Let’s see 4 very important techniques:

• Image spriting
• Caching image assets
• Preloading critical image assets
• Lazy-load non-critical images

Image spriting. This technique has been a popular way to reduce the number of images a page loads by combining them into a single larger image that is sliced. If your site is on HTTP/1.x, you may want to use spriting to reduce the number of HTTP requests. This has a positive impact on load speed, however there are challenges with cache-invalidation. Indeed, everytime you change any one of the images included in the sprite, you invalidate the entire image in a user’s cache.

With the advent of HTTP/2, though, spriting has become an anti-pattern. With HTTP/2, it may be best to load individual images since multiple requests within a single connection are now possible.

Caching image assets. This technique relies on the assumption that most of the images you deliver to users are static assets that will not change in the future. For this reason, the best caching strategy is aggressive caching.

Since resources can specify a caching policy through their HTTP headers, you may want to set the Cache-Control header in order to determine who can cache responses and for how long. It’s advisable that you set Cache-Control with a max-age of a year (e.g. Cache-Control:public; max-age=31536000). It works well for most types of images, especially those that are long-lived like avatars and image headers.

Preloading critical image assets. If an image is considered to be critical content, or needs to be loaded more quickly than other assets for some specific reason, you can make use of preloading. <link rel=preload> is a declarative way of fetching resources from the network, allowing you to hint the browser to request a resource without blocking the loading of the document. It can be especially useful to increase the priority of specific assets that would otherwise be later in the document parsing process.

Lazy-load non-critical images. This technique consists in delaying the loading of images until the user needs to see it (e.g - she is scrolling toward the section of the page where the image is displayed). In order words, images that live in the upper section of the site (above-the-fold) are loaded immediately. Images that live further down (below the fold), however, are not yet visible to the user. The latter ones are perfect candidates to be lazy loaded.

Formats

There are a lot of image formats you could use for your images, each one has its advantages and disadvantages and can be more suitable than others for a specific type of image.

Here’s a few pointers if you need to catch up with the different formats:

• Vector graphics vs raster graphics
• JPEG: best suited for photographs or images with a smooth variation on colour and intensity
• PNG: well suited for photographs and images with objects with sharp edges (e.g - text), supports the addition of an alpha channel
• BMP: to be avoided when possible, as it offers little to no compression
• TIFF: usually avoided on the web, it’s a high quality image format that doesn’t compress as well as others on this list
• GIF: usually not a good choice as doesn’t provide lossy compression
• WebP: well suited for the Web, currently not supported by every browser
• SVG: best suited for images that consist of simple geometric shapes

Facts you may not know

The GIF format was never intended to animate pictures. Quoting the spec: “The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.” In origin, GIFs were supposed to contain multiple images inside a single file so to be able to have many images to share headers, color data, and so on. During the years, we started to “hack” this peculiar aspect and start using those as frames of an animated image.

In such a scenario, it should not be surprising that there hasn’t been any effort towards optimization for this usage. For example, video formats are usually pretty darn good at compressing frames and sequences of frames. GIFs, instead, weren’t designed for sequences of frames: since no relationship between subsequent frames is expected, there is no way to encode just the incremental changes between the current frame and the previous one.

In addition, there is no standardized way to perform some form of steaming of the content. With videos, instead, you don’t need the whole file to start playing it.

For all of these reasons, GIFs aren’t supposed to, nor they are ready for, storing several frames. As a consequence, a few low quality frames, occupy more than 60MB. This not only represents a network bottleneck but it also scales pretty badly, filling the memory of the device pretty quickly (especially on mobile)

You can decode images asynchronously. When loading an image with JavaScript in the way we usually do, the image.onload handler guarantees that trying to use the image is going to work. At this time the image is not decoded yet! With the first time using the image data we usually get a delay to decoding overhead. The decoding of the image can block the main thread and by that cause jank in an app. To improve this behavior the browser developers came up with a new API specification for predecoding images.

By using the new image.decode function, you can decode the image offscreen and insert it in the DOM when it’s ready, thus reducing the impact on the main thread.

The JPEG myth: JPEG images are believed to lose quality every time they’re saved. This is a false myth spread by the fact that editing a JPEG image and then saving it forces the compression step to take place again. Since JPEG is lossy, further image degradation can occur every time this happens. However it is not true at all that, everytime you save a JPEG image, it loses quality.

Are you ready to optmize and skyrocket your website speed? Hit me up for a quick call and I'll be happy to help!