Optimizing Images for Speed and Smarter Delivery

Intro

Images are often times the heaviest of assets on web pages, and ironically, they're also the most neglected in performance workflows.

We spend a lot of time cleaning up our code, fine-tuning our scripts, bundling our CSS, and taking part in long debates about web rendering strategies but overlook the kilobytes (and in so many cases, megabytes) hiding in oversized jpegs or unnecessary image requests. If you're serious about Core Web Vitals, good user experience, and real-world performance, image optimization has to be a core part of your frontend workflow.

In this post, I’ll walk you through modern image optimization techniques majorly in these areas:

• Next-gen formats like AV1 Image File Format (AVIF).

• Lazy loading strategies (native and JavaScript-based).

• Best practices for responsive image delivery.

• CDN and tooling tips that actually move the needle.

Why Does Image Optimization Matter?

Let’s look at this from the numbers angle:

• Images account for approximately 50% of the total page weight on the average.

• Poorly optimized images increase the time to Largest Contentful Paint (LCP).

• They contribute heavily to Cumulative Layout Shift (CLS) if dimensions aren’t properly handled, as the pages will always tend to move once an iimage loads completely with it’s full dimensions.

We don’t just save bytes each time we make sure that images are optimized on our web pages and apps. We directly affect the user experience (especially on slow networks), perceived load time and also the bounce rate and SEO of our web apps.

Image Optimization Techniques

1. AV1 Image File Format (AVIF):

AVIF is a modern image format that offers superior compression compared to JPEG, PNG, and even WebP. It’s based on the AV1 video codec, and it supports HDR, transparency, and animations.

AVIF is really great and gets the job done, as can be seen below;

On the average, AVIF reduces image size by 30 to 50% compared to WebP, and even more compared to JPEG, without any noticeable loss in quality.

How to Use AVIF in HTML

Always use the <picture> element for graceful fallback to a more compatible image format:

<picture>
  <source srcset="/assets/banner.avif" type="image/avif">
  <source srcset="/assets/banner.webp" type="image/webp">
  <img src="/assets/banner.jpg" alt="Banner" width="1200" height="600" loading="lazy" decoding="async">
</picture>

PS: Always include width and height to prevent CLS.

2. Lazy Loading Images:

The simplest way to defer offscreen images is by using the native loading="lazy" attribute in our html code. It helps us to load only what’s crucial and visible first.

Lazy loading is supported by all modern browsers (including Chrome, Edge, Firefox, Safari ≥16).

<img src="/assets/gallery1.jpg" loading="lazy" alt="Gallery image">

When to Use JavaScript-Based Lazy Loading

If you need:

• Custom thresholds (e.g., preload 500px before viewport)

• Fade-in animations on scroll

• Compatibility with older browsers

You can use the IntersectionObserver API:

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      obs.unobserve(img);
    }
  });
}, {
  rootMargin: '200px'
});

images.forEach(img => observer.observe(img));

PS: IntersectionObserver is not compatible on older broswers. You can check here on caniuse.

Also worthy of note;

You can also set the decoding attribute of the image tag to “async”. It helps reduce render-blocking assets and improve paint times, by telling the browser to decode images asynchronously.

<img src="..." decoding="async" loading="lazy" />

3. Serving Responsive Images

Alternatively, you can also use srcset and sizes to deliver images of different formats/quality based on the screen width.

<img
  src="/images/photo.jpg"
  srcset="
    /images/photo-480w.avif 480w,
    /images/photo-800w.avif 800w,
    /images/photo-1200w.avif 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
  alt="Team photo"
  loading="lazy"
  decoding="async"
/>

What happens is that the browser selects the best image based on device width and device pixel ratio (DPR). So, in essence, users on smaller or slower devices don’t download large unnecessary assets thus saving them a lot of time to fully load the page.

4. Utilizing a Content Delivery Network (CDN)

A Content Delivery Network, commonly referred to as a CDN, is an essential component in modern web development for optimizing the delivery of content to users. By distributing copies of your website's static assets, such as images, stylesheets, and scripts, across a network of geographically dispersed servers, a CDN significantly reduces the physical distance between the server and the user. This results in faster load times, as the data travels a shorter distance.

You should use a CDN that supports Image Transformation. Some popular options include;

• Cloudflare: Easy auto-resizing and AVIF support.

• Vercel / Netlify (for Next.js/Gatsby projects): Built-in image optimization with AVIF + WebP fallback.

• Cloudinary: Image and video APIs for fast and scalable media management.

• Imgix: On-the-fly format conversion and smart cropping.

• ImageKit: Real-time image resizing, global CDN.

Example with ImageKit:

<img src="https://ik.imagekit.io/your-id/image.jpg?tr=w-800,f-avif" />

5. Dev Workflow & Tooling

You can also use these tools to optimize your assets locally;

• Squoosh (https://squoosh.app): Great for manual optimization + AVIF/WebP conversion.

• Sharp (Node.js): Useful in build scripts

    import sharp from 'sharp';
    sharp('image.jpg')
      .resize(800)
      .toFormat('avif')
      .toFile('image.avif');
  

• Next.js <Image /> component: This handles all your AVIF/WebP conversion, resizing, lazy loading, out of the box!

6. Accessibility & SEO Considerations

Most importantly, let’s not forget our SEO and a11y considerations:

• Always add width/height attributes or use aspect-ratio containers to prevent CLS.

• Always add alt text for screen readers.

• Use descriptive filenames (for instance, company-logo.avif vs image1.avif)

In Conclusion

Image optimization is not just a "nice-to-have" as some may think. It is a foundational step in delivering fast, accessible, and exciting experiences to our users, especially for those on slow networks say in remote areas, or thise using mobile devices.

Whether you're working with static sites, SPAs, or full-blown server-rendered apps, getting your image strategy right will pay off in Core Web Vitals, SEO rankings, and real-world UX.

In summary, If you're not optimizing your images, you're leaving performance gains on the table!