980x980
Don't bet on visitors waiting around for a slow loading website.
Above Img: File Size: 103k | File Dimensions: 980px x 980px | Max Rendered Dimensions: 800px x 800px
Speed Testing Five Approaches
to Image Optimization
Approach 1
No Optimization
If you've read our article on improving website loading speed, you know that around 40-50% of users abandon a webpage that takes longer than 3 seconds to load.
Since images are the biggest contributors to page load time, often accounting for over 60% of bandwidth use, optimizing them is crucial to ensuring that your website performs well.
On this first test page, no image optimization has been applied. The images are displayed in their original, oversized dimensions, exactly as we received them. Below each image, you'll find the actual file dimensions and maximum rendered dimensions.
Understanding Image Lazy Loading
Imagine a long webpage with many images. If the browser loads all the images at once, even those that are far down the page and not yet visible, that can slow the initial page loading time.
Adding loading="lazy" to an image tag, however, delays the loading of that image until it comes into view. This assures that more urgent page elements, that visitors will see first, load quicker.
Here's what that HTML looks like:
<img src="image.jpg" alt="Image description" loading="lazy">
Since this first test page in not optimized, the loading tag has not been added to the three gallery images below. But it will be added on the next four optimized test pages.
Interestingly, this page comes in at 2.8 MB, which is very close to the average webpage size as of September 1, 2024--2.67 MB for desktop and 2.35 MB for mobile.
None of the four JPG format images on this page have been optimized. They are displayed using the standard <img> tag. (But as you'll see on the next page, we can definitely do better.)
General Testing Details
Like the other test pages, this page is being served from a non-secured server, as SSL with HTTP/2 can impact load time. Gzip compression and browser caching have been disabled via .htaccess to ensure a clean comparison across all tests. While the text differs slightly from page to page, the difference is negligible, with less than 2.5 KB variation in the HTML size. The CSS remains identical, and no scripts are used.
Gallery
1024x1024
JPG: 386 kB
File Dimensions: 1024px x 1024px
Max Rendered Dimensions: 275px x 275px
Image "lazy load": No
1024x1024
JPG: 312 kB
File Dimensions: 1024px x 1024px
Max Rendered Dimensions: 275px x 275px
Image "lazy load": No
1024x1024
JPG: 220 kB
File Dimensions: 1024px x 1024px
Max Rendered Dimensions: 275px x 275px
Image "lazy load": No