Optimize Images

Images can be an indispensable part of any website - illustrating product detail, establishing a brand style and adding visual interest. Along with the value they add, images are usually some of the largest file resources and often account for a large percentage of total page weight.

Large file sizes can make images a big potential performance liability, but it also makes optimizing images a great opportunity to improve page speed.

CSS Imagery

In addition to careful consideration about which images are really beneficial to the user, another way to reduce the number of images is to replace them, where possible, with imagery created in CSS code. Although not appropriate to replace detailed or photographic images, a range of visual effects like lines, simple shapes, borders, color gradients, patterns and more can be achieved directly in the browser with CSS, bypassing the need for an image entirely. CSS imagery is a great option because it requires very little extra page weight, it's easy to add and change, and it works well across all device sizes, screen resolutions and pixel densities.

Image Sprites

Similar to consolidating CSS or JavaScript files for better file compression and faster downloading, groups of images can be combined into a single file for the same benefit. Image sprites are manipulated with CSS code to make only a specific portion of the image visible as desired. This technique is usually best for similar small images and is often used for icons.

Each icon of this single image file can be displayed individually:

File Formats

For graphics and imagery that require an image file, choosing the right file format will help yield the best balance of visual quality and file size.

Of the many digital image file formats, only a few are commonly used on the web: JPG (sometimes as JPEG), SVG, PNG and GIF. In general, JPG is best for photographic imagery, while SVG, PNG and GIF are best for images composed of shapes, lines and sharp edges like logos and icons.

JPG, PNG and GIF are known as raster graphics that represent the image as a grid of individual pixels. Vector graphics like the SVG image format describe the image as geometric shapes, curves and angles. The advantage of vector graphics is that images can be scaled to any size and retain the full clarity of sharp edges and crisp lines. This makes SVG well suited to web graphics that are used across a wide variety of screen sizes and pixel densities.

With different features and limitations, each image format lends itself to a different application:

• JPG - Best for photographic imagery; bad for logos, icons & shapes
• SVG - Best for logos, icons & shapes; use when a vector version is available
• PNG - Lossless compression; supports transparency and partial opacity
• GIF - Limited color range; supports transparency but not partial opacity

A performance optimized website will likely use mostly JPG (for photos) and SVG (for icons and logos) with an occasional PNG or GIF if a vector image isn't available or when PNG or GIF offer the best ratio of image quality to file size.

Image Dimensions

Image dimensions have little relevance for vector graphics like SVG images and therefore have little to no effect on file size, but for JPG, PNG and GIF images, dimensions can have a big impact on file size and are an important consideration for image optimization.

The most basic guideline for image dimensions is to avoid sizing images much smaller or larger than they will be used on screen. Too small and images will appear fuzzy and lack detail. Too large and image files will be unnecessarily slow to download.

Things get more complicated when you consider the wide range of screen size and pixel density across smartphones, tablets and laptop/desktop computers.

With all of this variability, how should images be sized?

One Size Fits All

While some newer laptop/desktop screens are both physically large and have a high pixel density, in general laptop/desktop screens have a relatively low pixel density and mobile devices have high pixel density screens. As average mobile device screens get bigger and pixel densities get higher, this creates an interesting phenomenon.

One approach to image sizing across a range of screens it to embrace this common inverse relationship between screen size and pixel density by sizing images for physically larger and higher pixel density screens, letting smaller screens scale down images as needed. Smaller, lower pixel density mobile devices won't benefit from this method, but larger smartphones and tablets with high pixel density screens can take advantage of larger-sized images for a sharper, more detailed result.

If most users can benefit from the extra visual detail of larger images - or if image quality is a priority - this strategy might be a good solution. However if enough users are visiting a given website with smaller screen, lower pixel-density mobile devices - or over slow mobile networks, where the loading impact of image size is more pronounced - using larger images can be unnecessarily slow at best or at worst have a prohibitive impact on website speed.

In that case, there's another solution.

Responsive Images

Commonly called responsive images, there are several techniques for displaying image files of different dimensions based on the viewing context.

Content Images

For content images referenced in the HTML with the <img> tag, the srcset and sizes attributes work together to help the browser use an appropriately-sized image file.

• srcset is a list of available image files and their respective widths in pixels - although suffixed with "w".
• sizes indicates how the image will appear under different media conditions, typically related to screen width.

The browser then determines which version is most appropriate for the screen size and pixel density of the device and only downloads the one needed file. The standard src attribute remains as a fallback for older browsers that don't support srcset.

Here's an example of an image displayed at the full width of the screen in a single-column layout for smaller screens but at only half the width of the screen in a two-column layout for larger screens:

<img src="example-image-fallback.jpg"
    srcset="example-image-medium.jpg 500w,
                 example-image-large.jpg 1000w"
    sizes="(min-width:500px) 50vw"
    alt="alt text goes here">

The browser uses the first matching condition in the sizes attribute, but if no media conditions match, sizes defaults to 100vw. (If there are no other media conditions and the image always appears at the full width of the screen, use sizes="100vw".)

As an alternative to the width of each image, srcset can instead indicate the device pixel ratio/density for which each image should be used - suffixed with "x", like "1x", "2x", etc. - in which case the sizes attribute doesn't apply. This option is typically only useful if an image appears at a fixed size across all screen sizes and devices, rathen than a fluid or responsive layout.

Background Images

A similar effect can be applied to CSS background images with media queries. Browsers will only download the one image file needed for the matching screen size.

/*--- image banner ---*/
.image-banner {background-image:url(banner-background-small.jpg)}

    @media (min-width:500px) {
        .image-banner {background-image:url(banner-background-medium.jpg)}
    }

    @media (min-width:1000px) {
        .image-banner {background-image:url(banner-background-large.jpg)}
    }

Although browser support is limited, the image-set() property or min-resolution and max-resolution media conditions can also be used to account for pixel density.

Image Compression

Image compression is one of the best opportunities to reduce overall page weight. Compression can be applied to reduce file size with little to no perceptible loss in quality, or at a reasonable expense of visual quality to reduce file size even further.

The photographic imagery of JPG files is a good opportunity to adjust compression depending on how images are used. For example, retaining quality for prominent content images while compressing low-profile imagery like backgrounds more aggressively.

SVG

Similar to other code files like CSS and JavaScript, SVG image files are effectively compressed by reducing the quantity of code that produces the vector image. This is achieved by minifying and removing unused features of the SVG code, as well as reducing the precision of the curves and angles that describe the image.

Image Metadata

Metadata is information embedded into the image file, like camera settings or the time and date. Metadata is often included in the file when the picture is taken, but it can also be added or edited later.

Although very small, metadata adds to the size of the image file. Most image optimization and compression tools will remove at least some metadata as part of the optimization process, but to achieve the smallest possible file size it's a good idea to confirm that all metadata has been removed. Doing so has the added benefit of ensuring that any potentially private information is removed, like the exact date and time the photo was taken, or if GPS location information was saved with the original image, exactly where it was taken.

Image Composition

Composition is an aspect of image optimization that's easy to overlook but has great potential to significantly reduce file size.

Any given image lends itself to more or less efficient file compression depending on its visual composition and overall level of detail, which is the product of qualities like color variability, contrast and sharpness. This can be used to an advantage by intentionally selecting images that have less detail to begin with and can therefore be compressed more aggressively before quality is noticeably diminished.

This strategy may not always be appropriate for content images where using a particular image is important, but it can be a good option for decorative imagery like backgrounds and in some cases has the added benefit of an interesting visual effect. As with other methods of image optimization, it's worth experimenting to find the best result for the context.

Image Optimization Quick Guide

Follow these steps to optimize images:

1. Does it need an image file at all? Can the image be replaced and recreated with CSS imagery like lines, shapes and gradients?
2. Crop and resize to dimensions appropriate for the way the image will be used on screen. (Prepare multiple images if needed for a responsive image setup.)

3. Choose an appropriate file format:

   • If the image is available in vector format (like EPS, AI or SVG) use SVG.
   • If the image is a photo use JPG (or WebP or AVIF with a JPG fallback).
   • If the image is not a photo and has many colors (>256) or needs partial opacity use PNG.
   • If the image only has a few colors (and results in a smaller file than PNG) use GIF.

4. Minimize file size:

   • Remove unnecessary metadata.
   • JPG, PNG or GIF - Adjust compression and file output settings to achieve the desired balance of image quality and file size.
   • SVG - Optimize the vector data and minify the SVG code.

Simple Lazy Image Loading

With image files optimized, the next step is to lazy load images to reduce initial-load page weight. Use the browser-native loading="lazy" attribute plus a simple JavaScript fallback if needed for some browsers: