1. No
Optimization 2. Media Query 3. Image Tag
SrcSet 4. Next-Gen Images 5. SSL, CDN,
Compression

Image Optimization Test
Results and Summary

old time illustration of young student with A+ report card. — Fortunately, earning an A+ in Image Optimization is pretty easy with the steps we've outlined. If you have questions, however, we're happy to help.

Important Note for Replicating Our Test Results: The first four of the five pages in this image speed test were conducted using a non-SSL secured environment. Those four pages had caching and compression disabled with the .htaccess file. And they did not have the benefit of a CDN. We wanted the most accurate measurements of initial page loading speed. The fifth test page utilized all of those features.

To replicate the results shown on this page, please visit that non-secured testing site directly at advertisinggarage.com/imgspeedtest

The files hosted here on the secured joeinfo.com site will load faster due to SSL, CDN, compression, and caching optimizations.

When comparing the five pages in our test, the image quality appeared to be the same, even though our large hero image at the top of each page ranged from 745k (unoptimized) to 58.5k (AVIF compression).

Using Chrome's Developer Tools > Networking tab, here's a breakdown of how each of our pages performed:

Approach 1. No Optimization: Slow and Heavy

⏱ Load Time: 5.39 seconds
📂 Initial File Size: 2.8MB
🖼 Formats: JPG
⚠ Responsive: No

No optimizations were applied. The image is in its original size and format (JPG), which caused the page to load slowly due to its large file size.

joeweb.com image optimization test page 1 - no optimization

Approach 2. Media Queries: Some Improvement

⏱ Load Time: 3.55 seconds
📂 Initial File Size: 168KB
🖼 Formats: JPG
✅ Responsive: Yes

This approach uses media queries to load smaller images for mobile devices, reducing the file size significantly. However, it doesn't support multiple formats, so JPG is still the only option.

joeweb.com image optimization test page 2 - media query

Above: Due to the use of media queries, we have both the large and small hero images (at the top of the page) loading. Unfortunately, the browser needed only one of them. Note also that the three 'Gallery' section images (at the bottom of the page) are not on the initial download list. Adding img loading="lazy" instructed the browser to delay loading those until they come into view.

Approach 3. Img Tag with Srcset: Faster, More Efficient

⏱ Load Time: 2.61 seconds
📂 Initial File Size: 125KB
🖼 Formats: JPG
✅ Responsive: Yes

The img tag with srcset allows for multiple image sizes to be served based on the user's device resolution. This reduces load time without sacrificing quality on high-resolution screens.

joeweb.com image optimization test page 3 - img tag with srcset

Approach 4. Picture Tag with Srcset: Fastest and Most Advanced

⏱ Load Time: 1.29 seconds
📂 Initial File Size: 79.3KB
🖼 Formats: AVIF, JPG, WebP
✅ Responsive: Yes

This is a more advanced method, serving different formats (AVIF, JPG, and WebP) and sizes depending on device resolution. It shaves an additional 1 1/4 second off of the JPG-only method without compromising image quality.

joeweb.com image optimization test page 4 - picture tag with srcset

Above: Note that the AVIF format was downloaded for the hero image.

Approach 5. Picture Tag with Srcset + CDN, SSL, Compression, Caching

⏱ Load Time: 278 milliseconds (1/4 second)
📂 Initial File Size: 73.6KB
🖼 Formats: AVIF, JPG, WebP
✅ Responsive: Yes

This is the fastest and most advanced method by far. It uses the same configuration as Approach 4 (picture tag with srcset), but the page is now served from Joeinfo.com's secure, CDN-optimized server, rather than from the non-secure, uncompressed AdvertisingGarage.com server, which is hosted on basic GoDaddy infrastructure.

This test highlights the significant advantages of using SSL, Cloudflare CDN, and Brotli compression. For accuracy, we cleared the browser cache prior to testing to measure the true initial load time. (On subsequent visits, with elements loaded from browser cache, the load time improves to a blazing-fast 15-21 milliseconds!)

joeweb.com image optimization test page 5 - incorporating SSL, CDN, compression, caching

Summary of Results

Approach	Initial Load	File Size	Formats	Responsive
1. No Optimization	5.39s	2.8MB	JPG	No
2. Media Queries (JPG)	3.55s	168KB	JPG	Yes
3. Img Tag with Srcset (JPG)	2.61s	125KB	JPG	Yes
4. Picture Tag w/ SrcSet (AVIF)	1.29s	79.3KB	AVIF, JPG, WebP	Yes
5. Approach 4 + SSL, CDN, Compression	1/4s	73.6KB	AVIF, JPG, WebP	Yes

Key Takeaways

No Optimization: Slowest load time due to large file size and lack of responsiveness.
Media Queries: The addition of img loading="lazy" and resizing images to their maximum rendered size helped a lot. But loading both the large and small hero images slowed the page.
Img Tag with Srcset: Offering browsers the most appropriately-sized hero image resulted in better load times and smaller file sizes.
Picture Tag with Srcset: Very good overall performance, smallest file size, and support for modern formats like AVIF.
Approach 4 + SSL, CDN, Compression: Blazing fast. All the benefits of Picture Tag with Srcset plus Cloudflare CDN delivery with HTTP/2, and Brotli compression.

Why Image Optimization Matters

Optimizing your images can have a significant impact on your website's performance. As our test showed, moving from no optimization to advanced techniques (like the picture tag with srcset and AVIF format) can drastically reduce load times, improving user experience, and search engine rankings.

-- A MESSAGE FROM OUR SALES DEPARTMENT --

If you'd like to speed up the loading of your images--or your entire site--we can help. Need a new site? We're the best web design agency in Asheville for that, too! Just give us a call at 828-515-9761.

Image Optimization Test Results and Summary