How I Achieved Faster Load Times via Smarter Image Delivery

Unoptimized images are almost always the single biggest bottleneck on slow websites.

Great photos sell products, but you shouldn’t force mobile visitors to download the same massive images you serve desktop visitors. Multiple studies show how a faster website results in more sales Sources in footnote.

Even if it feels like your site is loading “fast enough”, you will likely make more money if it loads faster.

Why Image Optimization Came First

While working on a client’s site, I found that images made up over 80% of the total page weight. Uncompressed uploads were ruining mobile load times and driving away impatient visitors. I focused on four straightforward goals:

• Cutting Down File Sizes: A smaller image will always load faster if everything else stays the same.
• Making Main Images Load Instantly: Getting the top banner on screen immediately so visitors aren’t staring at a blank space and Google doesn’t penalize your search ranking.
• Cutting Out Wasted Data: Shaving 2.5 MB off every page view saved over 125 GB of useless data transfer across 50,000 monthly visitors.
• Keeping Visitors from Leaving: When pages load fast and stop jumping around as images pop in, people actually stick around instead of hitting the back button.

I Implemented Three Fixes

They go beyond installing optimization plugins. The idea was to use modern image formats, with proper responsive sizing, and CSS or JS instead of images whenever possible.

1. Upgrading to AVIF with a WebP Fallback

The website was serving JPGs and PNGs with basic compression. I updated it to serve images in AVIF and WebP formats to visitors.

1. The AVIF format gives the smallest file size for the same image quality, followed by the WebP format.
2. Around 99% mobile and 95% desktop visitors have AVIF support. The remaining 5% support on desktop is covered by WebP.

Here is how the numbers shifted on a single archive card image:

• Original PNG Export: 541 KB
• Standard JPEG: 263 KB
• Optimized WebP: 41 KB (84% lighter)
• Optimized AVIF: ~28 KB (over 90% total reduction)

2. Responsive Sizing & Mobile Art Direction

Proper image optimization goes beyond serving the right format. I implemented two changes depending on the role an image served on the website.

Resolution Switching

If an image (likely a product image) stays the same across devices, it is best to serve different resolutions depending on the screen size. I serve AVIF images first and then WebP images as fallback using code that looks similar to the snippet below.

<picture class="neps-rspv">
    <!-- AVIF Candidates with high-DPI mobile coverage -->
    <source 
        type="image/avif"
        srcset="
            post-thumbnail-320.avif 320w,
            post-thumbnail-460.avif 460w,
            post-thumbnail-640.avif 640w,
            post-thumbnail-800.avif 800w,
            post-thumbnail-1024.avif 1024w
        "
        sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, 460px">

    <!-- WebP Fallback -->
    <source 
        type="image/webp"
        srcset="
            post-thumbnail-320.webp 320w,
            post-thumbnail-460.webp 460w,
            post-thumbnail-640.webp 640w,
            post-thumbnail-800.webp 800w,
            post-thumbnail-1024.webp 1024w
        "
        sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, 460px">

    <!-- Default Fallback Image -->
    <img 
        class="neps-rspv"
        src="post-thumbnail-460.webp"
        width="460"
        height="263"
        alt="Optimized client archive card asset"
        loading="lazy"
        decoding="async">
</picture>

Basically, we tell the browser the size at which we will render an image on different screen widths and give it a bunch of options. It then automatically selects the best one based on the situation.

Art-Directed Breakpoints

Mobiles and desktops provide different viewing experiences to visitors. A 16:9 wide banner that looks great on PC will look cramped or suboptimal on mobile, where square or taller images look better.

On multiple occasions, I have used the <picture> tag to serve a redesigned, taller or square image on phones and a widescreen version on desktops. Both variants keep the main focus of the image front and center.

I also add explicit width and height attributes to each <source> tag to force the browser to reserve the exact layout space before anything downloads. This helps avoid unwanted shifts as the page loads, improving user experience and PageSpeed scores.

<picture class="neps-rspv">
    <!-- Mobile: Square crop (up to 767px) in AVIF -->
    <source 
        media="(max-width: 767px)"
        type="image/avif"
        srcset="hero-mobile-400x400.avif 400w, hero-mobile-800x800.avif 800w"
        sizes="100vw"
        width="400"
        height="400">

    <!-- Mobile: Square crop in WebP -->
    <source 
        media="(max-width: 767px)"
        type="image/webp"
        srcset="hero-mobile-400x400.webp 400w, hero-mobile-800x800.webp 800w"
        sizes="100vw"
        width="400"
        height="400">

    <!-- Desktop: 16:9 landscape crop (768px+) in AVIF -->
    <source 
        media="(min-width: 768px)"
        type="image/avif"
        srcset="hero-desktop-600x338.avif 600w, hero-desktop-1200x675.avif 1200w"
        sizes="(max-width: 1200px) 50vw, 600px"
        width="600"
        height="338">

    <!-- Desktop: 16:9 landscape crop in WebP -->
    <source 
        media="(min-width: 768px)"
        type="image/webp"
        srcset="hero-desktop-600x338.webp 600w, hero-desktop-1200x675.webp 1200w"
        sizes="(max-width: 1200px) 50vw, 600px"
        width="600"
        height="338">

    <!-- Fallback Image: High priority, NEVER lazy-loaded if above the fold -->
    <img 
        class="neps-rspv"
        src="hero-desktop-600x338.webp" 
        width="600" 
        height="338" 
        alt="Responsive client hero visual" 
        fetchpriority="high"
        decoding="async">
</picture>

3. Replacing Decorative Background Images with Pure CSS

Some websites I have audited load images when a carefully crafted CSS background would have done the job. Using CSS for simple background textures whenever possible has multiple advantages. They scale without quality loss and can receive real-time dynamic updates if you are looking for an immersive experience.

Properly designed animated CSS backgrounds can also occasionally replace videos. I did this for a client who wanted a light beam to enter through a prism and come out as a spectrum on the other side.

Performance is a priority here, so I offload any background animation to the GPU whenever possible.

Getting the Loading Order Right

Cutting file sizes is only half the job. The perceived page load speed comes down to what loads first.

I always prioritize the hero image because it is one of the first things visitors see on your website. Hero images should have fetchpriority="high" and never lazy-load.

I also explicitly declare the width and height of all images in the HTML to prevent layout shifts when the image does actually load.

For images that viewers will see only after they scroll, I instruct the browsers to load and decode them later on demand. This frees up the network and processor to focus all attention on immediately visible content.

The Measurable Impact

You can see how all the optimizations I implement drastically reduce page size and load time by visiting these two pages with optimized and unoptimized images.

Final Thoughts

Real-world speed gains don’t come from micro-optimizing JavaScript while serving 3 MB hero banners. You have to serve the image in the right format using proper responsive markup. Offload simple graphics and animations to CSS, and fix your download priorities to make a difference where it matters.

Servicing entirely different optimized image versions to different devices for A/B testing and better conversions is also something CMS platforms can’t do by default.

I can help you optimize your website images and videos for both site speed and conversion. You can request a detailed, completely free website audit right now.