Image Optimization: When Milliseconds Decide Between Kilobytes and Pixels

Unoptimized images are like bricks hanging from the wings of your website. As your page crawls to reach the visitors, they journey from hope (“just a bit longer...”) to resignation (“back to Google I go”) and never return.

Thankfully, there are tried-and-true tricks to shed that digital ballast and get your site soaring.

The data size of images matters because they often serve as the LCP element, influencing the very speed of loading.

Image optimization is a crucial best-practice that you can't go wrong with, even when dealing with WordPress optimization, Shoptet, Drupal, or other CMS.

1. WebP and AVIF: Why Retire JPEG and PNG#

If you're still serving images in formats from the last millennium, it's time for an upgrade. Modern formats like WebP and AVIF offer significantly better compression while preserving quality.

WebP: This Google format works like a small miracle. In one of PageSpeed.ONE's audits, we reduced banner sizes by 60% just by converting them to WebP. If you're worried about older browsers, you can use a fallback solution:

<picture>
	<source srcset="image.webp" type="image/webp" />
	<img src="image.jpg" alt="Image description" />
</picture>

AVIF or JPEG XL are even newer formats with even better compression. AVIF can save 30–40% more data than WebP. Browser support is growing daily, but it's always necessary to use a fallback for older browsers. Find a detailed guide to implementing AVIF in our article.

The smaller, the better. Image data size in one of the tests.

2. Experiment with Quality: 100% Won’t Save the World#

The human eye is not a scanner, and few can distinguish an image compressed to 80% from one at 100% quality. Meanwhile, file size can differ by up to half. Experiment with quality settings until you find the perfect balance between appearance and size.

For easy testing, use the Squoosh tool, which allows you to compare different compression levels in real-time.

The Squoosh tool is the Swiss Army knife of image optimizers.

3. Lazy Loading: Why Load What Can’t Be Seen?#

Why should a visitor download images from the footer when they haven't even seen them yet? The principle of lazy loading ensures that images load only when the user approaches them while scrolling.

Implementation is easier than remembering your credit card PIN:

<img src="image.webp" alt="Loads only when needed" loading="lazy" />

4. Appropriate Dimensions: Sometimes Size Does Matter#

Uploading 4K images for a thumbnail the size of a postage stamp is like driving a truck for a loaf of bread.

While the browser will obediently resize the image, the user has already downloaded all the unnecessary data. Before uploading each image, verify the dimensions in which it will actually be displayed.

5. Automatic Optimization: Less Data, Same Impression#

Beyond format and dimensions, you can further reduce file sizes with specialized tools.

Services like Cloudflare or Cloudinary can automatically optimize all your images. For open-source enthusiasts, there's MozJPEG, which can work wonders with JPEG files.

If you're focused on individual images, the duo of TinyPNG/TinyJPG or the excellent MacOS app OptImage yield good results.

6. Prevent Layout Shifts: Image Dimensions Aren’t Optional#

When the browser doesn't know the dimensions of an image, it can cause content shifts upon loading. This phenomenon (Cumulative Layout Shift or CLS) is not only frowned upon by Google, but it also counts towards user experience ratings. The solution is simple: always provide width and height attributes:

Alternatively, you can define the aspect ratio using CSS, so the layout doesn't collapse like a house of cards.

It's always good to have other tricks up your sleeve for optimizing CLS.

<img src="image.jpg" alt="Stable image" width="600" height="400" />

7. CDN: Deliver Images from the Nearest Stop#

Content Delivery Networks (CDN) are like distribution centers for your images, spread across the globe. A visitor from Prague receives files from Central Europe, while a user from Tokyo gets them from an Asian server. The result? Faster loading for everyone.

Images don't like long-distance travel. That's why there's CDN.

Why Bother with Image Optimization at All?#

Website speed isn't just a technical detail for enthusiasts. It's a key factor influencing business results:

• Faster website = better search engine ranking
• Faster website = higher conversion rate
• Faster website = happier visitors

At PageSpeed.ONE, we help clients achieve impressive results. For instance, Livesport improved its Speed Score in Google Ads from a dismal 1-2/10 to a perfect 10/10 thanks to optimizing the initial page render.

Our PageSpeed PLUS monitoring enables you to continuously track your website's speed and detect issues with images or other problems in time, including image data size:

A few extra lines of code, 1 MB down. This image diet works better than keto for people.

Simultaneously, the monitoring measures your website with real users and alerts you whenever there's a slowdown.

Image optimization is an investment that pays off in the form of happier users and better business results. Every saved kilobyte counts.