Images are the heaviest assets you serve, yet they're often the most neglected part of web optimization. The average web page loads 2.5MB of images per view - that's more than all your other assets combined. Getting image loading right isn't just about performance metrics - it's about respecting your users' time and resources. Let's fix that.
TL:DR Utilize responsive images on your site where possible. Performance gains are massive especially on image-heavy sites.
Serving the right-sized image for each screen size is the most important thing you can do for image performance. In the past, we had to settle for loading the highest quality image available and sizing it down with CSS. Or we’d create properties for a “desktop image” and a “mobile image” fallback, using CSS breakpoints to hide and show them. This is no longer needed.
Since 2015, browsers can automatically pick the best image size when you give them options to choose from - this concept is called Responsive Images. Instead of the browser loading one big image and shrinking it down (which wastes bandwidth), you can provide a few different sizes and let the browser pick the best one for each user's screen using the image attributes srcset and sizes, or the <picture> element if you need different images for art direction purposes.
| Responsive Image Tool | When to use | When not to use |
|---|---|---|
srcset and sizes |
|
|
<picture> element |
|
|
Use srcset and sizes to serve different image sizes based on screen width conditions.
<img
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w"
sizes="(max-width: 320px) 280px,
(max-width: 640px) 580px,
1100px"
src="fallback.jpg"
alt="Description"
>
Use the picture element when you need to show different image crops or aspect ratios at various screen sizes.
<picture>
<source media="(min-width: 800px)" srcset="hero.jpg">
<source media="(min-width: 400px)" srcset="cropped.jpg">
<img src="mobile.jpg" alt="Description">
</picture>
Serving correctly-sized images is crucial for performance. When browsers load an image that's larger than its display size they waste bandwidth downloading unnecessary pixels. Here are some key principles:
TL;DR: If you’re serving a client that manages their own content, aim to implement image processing to make the workflow realistic for them.
Without automatic image processing, it's hard to get everyone on board with responsive images. Your client doesn’t want to manually create and upload five different sizes of every single image - it's too much work and people will eventually take shortcuts.
Consider persuading your client to invest in an Image Content Delivery Network (CDN) or Digital Asset Management (DAM) system - it'll save everyone headaches by handling the resizing automatically.
When using a CMS, aim to make responsive images the default rather than requiring content editors to make manual choices. Set up your templates to automatically generate the correct srcset and sizes attributes based on your design system's common breakpoints.
TL;DR: Stop manually resizing images. Use an Image CDN or DAM to automatically handle image optimization, resizing, and delivery. Your developers (and users) will thank you.
If your website doesn't come with built-in image processing like Umbraco or WordPress, dedicated image optimization services can be a game-changer. These services take the heavy lifting out of image optimization. They automatically handle resizing, format conversion, compression, and delivery - meaning you don't have to manually create and manage multiple image variants. Most provide simple URL parameters to request different image sizes and formats on the fly.
Some solid options to pitch include:
For our clients using Umbraco and Optimizely:
TL;DR: Use .webp or .avif until something better comes out. Fall back to JPG or PNG if compatibility is an issue.
WebP (created by Google in 2010) and AVIF (developed by AOMedia in 2019) offer much smaller file sizes than JPG and PNG. WebP files are typically 25-35% smaller compared to JPGs, while AVIF can reduce file sizes by 50% or more without visible quality loss. For images with transparency, both formats drastically outperform PNG - WebP averages 26% smaller and AVIF up to 50% smaller.
With global browser support now at 96% for WebP and 95% for AVIF across Chrome, Firefox, Edge, and Safari, these modern formats are safe to use and help build significantly faster websites.
| Format | Best For | Pros | Cons |
|---|---|---|---|
| WebP | General purpose | Excellent compression, wide support | May not compress as well as AVIF for photos or SVG for graphics |
| AVIF | Next-gen format | Superior compression, good quality | Slower encoding time compared to WebP and JPEG |
| JPEG | Photos | Universal support, good compression | Lossy, no transparency |
| PNG | Graphics with transparency | Lossless, transparency support | Larger file sizes |
| SVG | Vector graphics, logos | Scalable, tiny file size | Not suitable for photos, can be slow if too complex |
The <picture> element provides explicit control through HTML, allowing you to specify multiple sources in order of preference:
<picture>
<source
srcset="hero-image.webp"
type="image/webp"
>
<source
srcset="hero-image.jpg"
type="image/jpeg"
>
<img
src="hero-image.jpg"
alt="Hero banner showing a mountain landscape"
width="1200"
height="600"
loading="lazy"
>
</picture>Alternatively, modern Digital Asset Management systems can handle format detection and delivery automatically through content negotiation. Using a DAM's image transformation URL parameters (like Cloudinary's f_auto or Imgix's auto=format), the server examines the browser's Accept header and delivers the optimal format. This approach simplifies the markup to a single <img> tag while still ensuring users receive the most efficient format their browser supports. The DAM handles the format conversion and delivery behind the scenes, maintaining the original image as a source and generating optimized versions in WebP, JPEG, or other formats as needed.
TL;DR: Don't be afraid to crank down the quality settings. Choose the right format for the job (vectors for logos, raster for photos). Test your page speed to make sure it's actually helping. Implement server-side and build-time compression tools to automate optimization.
Compression balances file size against image quality. For example, images used for product photos need gentle compression to preserve detail, while decorative images can be compressed more aggressively.
| Image Type | Recommended Format | Quality Setting | Notes |
|---|---|---|---|
| Product Photos | WebP (JPEG fallback) | 75-85% | Conservative compression - details matter |
| Hero/Banner Images | WebP (JPEG fallback) | 60-75% | Moderate compression - usually viewed briefly |
| Decorative Images | WebP (JPEG fallback) | 40-60% | Aggressive compression acceptable |
| Logos/Icons | SVG where possible | N/A | Use SVGO for optimization |
| Screenshots | WebP (PNG fallback) | 80-90% | Text should remain crisp |
| Thumbnails | WebP (JPEG fallback) | 50-65% | Small size priority, quality less critical |
Server-side and Build-time Compression
Always enable GZIP or Brotli compression on your web server - it provides an additional 15-30% size reduction for images at essentially no quality cost. For SVGs, use SVGO during your build process to remove unnecessary metadata and optimize paths which can result in a 25-50% size reduction. Most build tools (like Webpack, Vite, or Next.js) can automatically run SVGO on your SVGs.
Remember that server-side optimizations are lossless - they don't affect image quality, they just remove unnecessary data. They should always be enabled in production.
TL;DR: Stop using GIFs. Use video formats like WebM or MP4 for recorded content, and SVG for animated graphics, logos, and interactive visualizations. Both options give you better quality at a fraction of the file size.
While GIFs served us well for simple animations back in 2010 when video support was limited, times have changed. Modern browsers are now great at handling video, offering superior quality and much smaller file sizes. It's time to make the switch.
Here's a comparison of file sizes for similar resolution clips in gif, mp4, and webm:
To act as an accessible replacement for GIF, usually you’ll need to adjust your <video> element attributes so that they play automatically, loop continuously, and are silent.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
SVGs aren't just for vector graphics or logos. Today's SVGs can handle complex animations, interactive elements, and data visualizations - they can even power sophisticated interactive experiences like real-time electoral maps.
| Choose Video | Choose SVG |
|---|---|
| When you need to show real-world motion, recorded content, or complex scenes that would be impractical to recreate with vectors. | When your animation is geometric, needs to scale perfectly, requires interactivity, or you could theoretically draw it by hand. |
Browser-level lazy loading defers loading offscreen images until users scroll near them. Use this by adding attribute loading="lazy" to your image tags:
<img src="image.jpg" loading="lazy" alt="..." width="200" height="200">| When to use | When to avoid |
|---|---|
|
|
NOTE: Always specify image dimensions (width and height attributes) to prevent layout shifts during lazy loading.
Don't lazy load images that appear when your page first loads (above the fold). These images should load right away since users see them immediately. Instead, you can tell browsers these images are high priority.
Save lazy loading for images further down the page. Tests show this approach gives you the best of both worlds - fast-loading important images at the top, and better performance from lazy loading everything else.
<!-- Top of page: Load right away -->
<img src="hero.jpg" fetchpriority="high" alt="Hero image">
<!-- Further down: OK to lazy load -->
<img src="gallery.jpg" loading="lazy" alt="Gallery image">
Modern browsers now support native lazy loading, eliminating the need for third-party libraries in most cases. However, you might still want a library for:
Your images make your site beautiful - but they shouldn't make it slow. Use modern formats, compress thoughtfully, embrace responsive techniques, and let the browser help with lazy loading. Your users get a faster site, you get better metrics.