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 2
Image Tag with Media Query

The images on this page have undergone basic optimization. They were resized to match their maximum rendered dimensions and compressed using JPG format via Squoosh.app, with a default compression setting of 75%. This reduced the total file size by 2.5 MB. (However, there's still room for improvement, as we'll explore on the next page.)

Media Query for Responsive Hero Image

The hero image on this page is responsive, thanks to CSS media queries. Here's how it works:

CSS

/* Hide both images by default */
.image1,
.image2 {
  display: none !important;
  margin: 0 auto;
}

/* Show the small image for screens up to 450px */
@media screen and (max-width: 450px) {
  .image1 {
    display: block !important;
  }
}

/* Show the large image for screens wider than 451px */
@media screen and (min-width: 451px) {
  .image2 {
    display: block !important;
  }
}

HTML

<!-- Small image (450px) -->
<img src="450x450-optimized-hero.jpg" class="image1" alt="Small Image">
<!-- Large image (800px) -->
<img src="800x800-optimized-hero.jpg" class="image2" alt="Large Image" style="max-width:800px;">

The Downside of Media Queries

While this approach makes the page responsive, both the large and small hero images are downloaded, regardless of the screen size. This can unnecessarily slow down load times, as users on smaller screens are still downloading the larger image.

A more efficient solution is to use the <img> tag with the srcset attribute, which allows the browser to download only the appropriate image size. This method is demonstrated on the next page, Approach #3.

---

General Testing Details:
As with all test pages, the images are served from a non-secured server (since SSL with HTTP/2 could skew load times). Gzip compression and browser caching have been disabled for accuracy. While the descriptive text on each page varies slightly, this doesn't affect the results. The HTML size difference is less than 2.5 KB across pages, with the same CSS and no scripts being used.

---

Gallery