450x450
800x800
Don't bet on visitors waiting around for a slow loading website.
Above: Large Image: File Name: 800x800-optimized-hero.avif, 55k OR 800x800-optimized-hero.webp, 91k OR 800x800-optimized-hero.jpg, 103k | Small Image: File Name: 450x450-optimized-hero.avif, 26kB OR 450x450-optimized-hero.webp, 38k
OR 450x450-optimized-hero.jpg, 41kB | File Dimensions: 800px x 800px OR 450px x 450px | Max Rendered Dimensions: 800px x 800px or 450px x 450px
Speed Testing Five Approaches
to Image Optimization
Approach 5
Picture Tag with SrcSet with
SSL, CDN, Compression, and Caching
This page is a replica of our 'Approach 4: Picture Tag with SrcSet' test page. The only thing different is that this page is hosted on a secure server through Cloudflare CDN. Compression and caching have been enabled.
As with Approach 4, the images on this page were resized to their maximum rendered dimensions and compressed using Squoosh.app into AVIF, WEBP, and JPG formats. Lazy loading has been added to the lower images on the page.
And, similar to the Approach 4 test page, the hero image on this page was added using the Picture tag with Source SrcSet attribute. That allows browsers to choose the best file format and size for the device:
- Large screens receive larger images
- Phones get smaller images
- Browsers supporting AVIF or WEBP can use those formats for faster loading, while JPG acts as a fallback for others.
"The figure tag, with its figcaption property, makes is so easy to add captions to an image. Is there a similar property for the picture tag?"
While the picture tag does not have a similar way of handling captions, you can simply combine the two tags to get the advantages of each. Here is how that would look:
<figure>
<picture>
<!-- AVIF format -->
<source media="(min-width: 465px)" srcset="image-large-1200w.avif" type="image/avif">
<source media="(max-width: 464px)" srcset="image-small-480w.avif" type="image/avif">
<!-- WebP format -->
<source media="(min-width: 465px)" srcset="image-large-1200w.webp" type="image/webp">
<source media="(max-width: 464px)" srcset="image-small-480w.webp" type="image/webp">
<!-- JPG fallback -->
<source media="(min-width: 465px)" srcset="image-large-1200w.jpg" type="image/jpeg">
<source media="(max-width: 464px)" srcset="image-small-480w.jpg" type="image/jpeg">
<img src="image-small-480w.jpg" alt="describe image" style="width:100%; height:auto; aspect-ratio:4/3;">
</picture>
<!-- Caption for the image -->
<figcaption>This is an example of an optimized image using AVIF, WebP, and JPG formats.</figcaption>
</figure>
General testing details
As with the previous pages, this page and its images are served from a non-secured server to avoid the speed improvements introduced by SSL and HTTP/2. Both Gzip compression and browser caching have been disabled via the .htaccess file. The varying text across pages introduces no significant differences (less than 2.5 kB), and the CSS remains the same across all tests with no scripts involved.
Gallery
275x275
AVIF: 13 kB
WEBP: 19 kB
JPG: 18 kB
File Dimensions: 275px x 275px
Max Rendered Dimensions: 275px x 275px
Image "lazy load": Yes
275x275
AVIF: 14 kB
WEBP: 17 kB
JPG: 18 kB
File Dimensions: 275px x 275px
Max Rendered Dimensions: 275px x 275px
Image "lazy load": Yes
275x275
AVIF: 19 kB
WEBP: 25 kB
JPG: 22 kB
File Dimensions: 275px x 275px
Max Rendered Dimensions: 275px x 275px
Image "lazy load": Yes