450x450
800x800
Don't bet on visitors waiting around for a slow loading website.
Above: Large Image: 800x800-optimized-hero.jpg | File Size: 103k | File Dimensions: 800px x 800px | Max Rendered Dimensions: 800px x 800px | Small Img: 450x450-optimized-hero.jpg | File Size: 41k | File Dimensions: 450px x 450px | Max Rendered Dimensions: 450px x 450px
Speed Testing Five Approaches
to Image Optimization
Approach 3
Image Tag with SrcSet Property
The images on this page have undergone basic optimization, similar to the previous page. They were resized to their maximum rendered dimensions and compressed using Squoosh.app at its default setting of 75% JPG compression.
Compression Levels: Is More Always Better?
While compressing an image file to 75% can significantly reduce its size, pushing the compression further to 50% might seem like a way to improve load speeds. However, compression is a trade-off between file size and quality.
- Higher compression = faster downloads but with potential loss of quality (e.g., visible artifacts).
- Lower compression = better image quality but larger files.
It's important to strike a balance based on the image content:
- For simple designs, higher compression may work well.
- For detailed or low-contrast photos, you might want to reduce the compression to preserve quality.
A general rule of thumb:
- JPG/WEBP: 70-80% compression
- AVIF: 50-60% compression
- PNG: As a lossless format (used for transparency or sharp graphics), compression won't degrade image quality but increases browser processing time. Typically, a 6-8 compression level (on a 1-9 scale) works well.
Responsive Hero Image with SrcSet
Unlike the media query technique from the previous page, this page's hero image is responsive using the Img tag with the SrcSet attribute. Here's the corresponding HTML:
<srcset="450x450img.jpg 450w, 800x800img.jpg 800w"
sizes="(max-width: 800px) 100vw, 800px"
img src="450x450img.jpg"
alt="An example image"
style="width:100%; max-width:800px; height:auto;">
How to Read This
The browser first measures the width of the browser window's visible area. It then selects whichever of the two images is closest to, but not greater than, the viewport width.
In this case, browsers with a viewport of less than 450 pixels wide will select the 450x450img.jpg. Viewports greater than 450 pixels but less than (or equal to) 800 pixels will choose 800x800img.jpg. Viewports greater than 800 pixels will use 800x800img.jpg because it is the largest image available.
The Advantage of Image Tag with SrcSet
With SrcSet, the browser downloads only the appropriate image size based on the device's screen width. This is a more efficient approach compared to media queries, where both images are downloaded regardless of screen size. (That said, there's still room for improvement, which we'll demonstrate on the next test page.)
General Testing Details:
As with all test pages, the images here are served from a non-secured server to avoid the speed improvements brought by SSL and HTTP/2. Both Gzip compression and browser caching are disabled via the .htaccess file for this test. Although the text content varies slightly across pages, the difference is minimal (no more than 2.5 kB), and the CSS remains consistent with no scripts being used.
Gallery
275x275
JPG: 18 kB
File Dimensions: 275px x 275px
Max Rendered Dimensions: 275px x 275px
Image "lazy load": Yes
275x275
JPG: 18 kB
File Dimensions: 275px x 275px
Max Rendered Dimensions: 275px x 275px
Image "lazy load": Yes
275x275
JPG: 22 kB
File Dimensions: 275px x 275px
Max Rendered Dimensions: 275px x 275px
Image "lazy load": Yes