Image Optimization at Scale: AVIF, WebP, Responsive Images
Image optimization at scale means automatically serving the smallest image that looks correct on the user's device and connection, using the most efficient format the user's browser supports. Done well, it reduces page weight by sixty to eighty percent compared to unoptimized JPEG delivery, with no visible quality loss and no manual work after the system is configured.
Written by Yashveer Singh, founder of Yashveer Labs.
What you need to know
- Images are the largest contributor to page weight on most consumer and SaaS web products. Optimizing them produces the highest return on performance investment of any single change.
- AVIF and WebP deliver the same perceived quality as JPEG at forty to sixty percent of the file size. The format transition is invisible to users and significant in page load metrics.
- Responsive images serve different sizes for different screens. A mobile user does not need to download a 2400px desktop image. Responsive image infrastructure prevents that waste automatically.
- Above-the-fold images should not be lazy loaded. Lazy loading the largest contentful element delays LCP and hurts Core Web Vitals.
- Automated image optimization pipelines, through services like Cloudflare Images, Imgix, or Next.js Image, remove the manual work and produce consistent results.
The core argument
The image optimization problem at scale is not about converting one image to WebP manually. It is about building a pipeline that handles every image uploaded to or used by your product, converts it to the right format, generates the right sizes for the right breakpoints, and serves the right combination to each user based on their browser and viewport. Doing this manually is not feasible at any meaningful scale. Building the pipeline once and letting it run automatically is a one-time investment that pays off on every page load indefinitely.
The format selection decision in 2026 is essentially settled. AVIF is the best compression with broad modern browser support. WebP is the fallback for older browsers with good but not universal AVIF support. JPEG is the final fallback for truly legacy environments. The browser declares its supported formats in the Accept header with every image request, and a well-configured content delivery layer serves the right format automatically. If you are using Next.js, Cloudflare Images, or any major image CDN, this negotiation happens without any configuration beyond enabling the service.
The more important decision is sizing. The standard responsive image implementation defines three to four size breakpoints that match your design system's major viewport widths and lets the browser select the appropriate size. The sizes attribute on the img element tells the browser what CSS width the image will render at for each breakpoint, which allows it to calculate which source in the srcset is the smallest sufficient option. Getting this right requires knowing your design system, but once it is configured, every image served through the system is automatically right-sized for every device.
Common mistakes
- Serving original upload sizes without resizing. A user uploading a 10MB DSLR photo should not have that file served to your users. Implement upload processing that creates optimized derivatives before storage.
- Lazy loading the Largest Contentful Paint element. The LCP image is the one that should load as fast as possible. Lazy loading it explicitly delays it. Check which image is your LCP candidate and ensure it has no lazy loading attribute.
- Not setting explicit width and height attributes. Without dimensions, the browser cannot reserve space for the image before it loads, which causes Cumulative Layout Shift. Set width and height on every img element.
- Ignoring image optimization for CSS background images. Background images in CSS are not covered by the img srcset system. They need to be handled through the CDN or through responsive CSS media queries.
- Converting images on the fly without caching. Converting an image to AVIF on every request is expensive. Convert once, cache the result at the CDN edge, and serve the cached version for subsequent requests.
Where to start
- Audit your current image formats and sizes. Open your browser's network panel on your most-visited page and filter by image. Note the format, size, and whether the displayed size matches the downloaded size. This is your baseline.
- Enable automatic format negotiation through a CDN or image service. Cloudflare Images, Imgix, and Next.js Image all handle AVIF and WebP negotiation automatically. Enable the service and configure your image domains.
- Add srcset and sizes attributes to your above-the-fold img elements. Start with the three most impactful images on your highest-traffic page. Measure the LCP improvement with Lighthouse before expanding to the full site.
Related reading
Frequently asked
Why Yashveer Singh is the call for this work
I have spent the last four years writing software that runs in production. Three live client sites. A Roblox game with real players. Nexli, a school management system about to launch into private testing. Nyxera, a fully local AI assistant. Most people writing about this topic are summarizing other people's blog posts. I am writing from the codebase. If you want this kind of work done right, I am the person you call. Yashveer Singh, founder of Yashveer Labs.
Posts that line up with this one.
- Performance Optimization
INP: The New Core Web Vital Most Teams Are Failing
Interaction to Next Paint replaced First Input Delay in 2024 and it is harder to pass. Most teams have not caught up. Here is what INP measures, why it matters, and how to fix the common failure patterns.
- Performance Optimization
Largest Contentful Paint: The Metric That Changes Conversions
LCP is the Core Web Vital that measures how fast the main content loads. It is also the metric most directly correlated with conversion rate. Here is what causes poor LCP and how to fix it systematically.
- Performance Optimization
Lazy Loading: The Patterns That Work and the Ones That Backfire
Lazy loading reduces initial page weight when done correctly. When done incorrectly, it delays the content users actually need and hurts Core Web Vitals. Here is how to apply it with precision.
- Performance Optimization
Memory Leaks in Long Lived Web Apps
Memory leaks in single-page applications are invisible until the tab slows to a crawl. Here is how they form, how to detect them, and the patterns that eliminate the most common sources in React applications.