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. This can make images a big potential performance liability, but it also makes optimizing images a great opportunity to improve load time.
Particularly for pages with numerous content images that are not initially visible when the page loads, lazy loading is an important strategy for improving performance - only loading images as needed as the user scrolls to that position on the page.
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.
Each icon of this single image file can be displayed individually:
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.
WebP is a newer image file format developed specifically for use on the web, producing smaller file sizes at equivalent visual quality. As the technology of the web evolves, WebP (or some other format) will likely become the new standard for web-optimized image files.
For now, using WebP images requires a fallback setup with conventional image formats for web browsers that don't support WebP. If a website includes numerous or large images, or the majority of visitors use a browser that supports WebP and can take advantage of the performance benefit, it can be a worthwhile option.
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. However things get more complicated when considering 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 high-end 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.
Commonly called responsive images, there are several techniques for displaying different image dimensions based on the viewing context.
For content images referenced in the HTML with the
<img> tag, the
sizes attributes work together to help the browser use an appropriately-sized image file.
srcsetis a list of available image files and their respective widths in pixels - although suffixed with "w".
sizesindicates 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
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:
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
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.
sizes let the browser to do the math and select the most appropriate image size from the options made available, the
<picture> element is another angle on responsive images that explicitly specifies what image file is used under given conditions.
<picture> is particularly useful for using a different proportion, cropping or a different image altogether depending on the layout or screen size.
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.
Although browser support is limited, the
image-set() property or
max-resolution media conditions can also be used to account for pixel density.
Image compression is one of the best opportinities 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.
The benefit can vary, but in general larger JPG image files (>~10KB) should be saved with progressive encoding to reduce file size even further. In contrast to the top-to-bottom loading of baseline-encoded JPGs, progressive files load in passes of increasing quality, which can also be a better user experience as images load into the page.
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.
In some cases it may be necessary to retain or even add some image metadata, like photographer or copyright information. This can be done by first removing all metadata as part of the file compression process and then adding back any data to include. If the information is already part of the existing metadata, more advanced metadata editing tools can selectively remove and retain information.
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.
Quick Image Optimization Guide
Follow these steps to optimize images:
- Does it need an image file at all? Can the image be replaced and recreated with CSS imagery like lines, shapes and gradients?
- 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.)
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 with a JPG fallback).
- If the image 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.
Minimize file size:
- JPG, PNG or GIF - Adjust compression and settings to achieve the desired balance of image quality and file size.
- SVG - Optimize the vector data and minify the SVG code.
Up next:Streamline Delivery