Images account for roughly 50% of the total weight of an average web page in 2026. The HTTP Archive’s annual survey consistently places images as the single largest contributor to page bloat, ahead of JavaScript, CSS, fonts, and HTML combined. Optimizing images is therefore the highest-leverage performance intervention available to most websites, and the one most frequently neglected.
This guide covers the techniques that produce measurable results, ordered by impact.
The Three Levers of Image Optimization
Every image optimization decision reduces to three independent variables: format, dimensions, and compression quality. Changing any one of these reduces file size. Combining all three produces the largest gains.
Format determines the encoding algorithm. WebP produces files 60-80% smaller than PNG and 25-34% smaller than JPEG at equivalent visual quality. AVIF pushes further, achieving roughly 50% savings over JPEG. Both formats support transparency. Serving images in a modern format is the single largest file size reduction available without touching a pixel.
Dimensions determine how many pixels the file contains. A 3000 × 2000 pixel image displayed at 600 × 400 on screen contains 25 times more pixel data than necessary. Resizing the image to its display dimensions before serving eliminates that waste entirely. This is the second largest file size reduction available, and the most commonly overlooked.
Compression quality determines the tradeoff between visual fidelity and file size. At quality 100, every detail is preserved and the file is large. At quality 85, the file is dramatically smaller and the visual difference is imperceptible without pixel-level comparison. Below quality 75, artifacts become visible in most images.
Optimize your images with all three levers in one step →
Core Web Vitals and Images
Google evaluates page experience through three Core Web Vitals metrics. Two of them are directly impacted by image optimization.
Largest Contentful Paint (LCP) measures the time it takes for the largest visible element to render. On most pages, that element is an image. Google considers LCP “good” at 2.5 seconds or less. Unoptimized hero images routinely push LCP past 4 seconds on mobile connections, which Google classifies as “poor” and penalizes in search rankings.
The fix is mechanical: reduce the file size of your largest visible image. Convert to WebP, resize to actual display dimensions, and compress to quality 85. A hero image that was 3.8 MB as a PNG at 4000 × 2667 becomes 180 KB as a WebP at 1200 × 800 quality 85. LCP drops proportionally.
Cumulative Layout Shift (CLS) measures visual stability during page load. Images without explicit width and height attributes cause layout shifts as they load, because the browser cannot reserve space for them until the image data arrives. The fix is to always specify width and height in your <img> tags or use CSS aspect-ratio. This has zero file size cost and eliminates a common source of CLS failures.
Interaction to Next Paint (INP) is less directly affected by images, but oversized images that consume memory and trigger expensive layout recalculations can degrade INP on resource-constrained mobile devices.
The Correct Order of Operations
Image optimization should follow this sequence for maximum efficiency:
Step 1: Resize to display dimensions. Determine the maximum size at which the image will be displayed. Account for 2x pixel density (Retina displays) by doubling the CSS display size. An image displayed at 600px CSS width should be served at 1200px actual width. Anything beyond 2x provides no visible benefit on any current display technology.
Step 2: Convert to WebP or AVIF. After resizing, convert the image to a modern format. WebP is the safe default with 95%+ browser support. AVIF is appropriate for static assets where encoding time is not a constraint.
Step 3: Compress to quality 82-85. For photographic content, quality 85 is the perceptual threshold where file savings are large and visual degradation is undetectable. For screenshots and images with text, use quality 90-95 or lossless mode.
Step 4: Lazy load below-the-fold images. Add loading="lazy" to any image that is not visible in the initial viewport. This defers loading until the user scrolls near the image, reducing initial page weight and improving LCP for the hero image that matters most.
Step 5: Serve responsive images with srcset. Use the HTML srcset attribute to serve different image sizes to different screen widths. A mobile phone on a 4G connection should not download the same 1200px image that a desktop on fiber receives.
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
alt="Description"
width="1200"
height="800"
loading="lazy"
>
This five-step sequence, applied consistently, reduces total image weight by 80-95% on most websites.
Measuring the Impact
Before and after optimization, measure these metrics to quantify the improvement:
Google PageSpeed Insights provides LCP, CLS, and INP scores for both mobile and desktop. Run it before optimization, implement changes, and run it again. The image-specific recommendations in the report (“Serve images in next-gen formats”, “Properly size images”, “Efficiently encode images”) should disappear after optimization.
WebPageTest provides waterfall charts showing exactly how long each image takes to download. Sort by file size to identify the largest offenders. After optimization, the waterfall should show dramatically shorter download bars for image resources.
Google Search Console tracks Core Web Vitals at scale across your entire site. The “Page Experience” report shows the percentage of URLs with good, needs improvement, and poor LCP/CLS/INP. This is the metric that correlates most directly with search ranking impact.
A realistic benchmark: a typical content website with 30-50 images per page can reduce total page weight from 8-12 MB to 1.5-3 MB through image optimization alone. LCP typically improves by 1.5-3 seconds on mobile, which frequently moves the score from “poor” to “good” in a single intervention.
Automation Strategies
Manual optimization does not scale. For sites with hundreds or thousands of images, automation is essential.
At upload time: Process images during the upload workflow, before they reach the server or CDN. This is where tools like Klara operate. Upload an image, receive an optimized WebP version at the correct dimensions, and deploy that version. The original never reaches your production server.
At build time: Static site generators (Next.js, Gatsby, Hugo, Astro) can integrate image optimization into the build pipeline. The sharp library for Node.js and Pillow for Python handle resize and format conversion programmatically.
At serve time: Image CDNs (Cloudflare Images, Imgix, Cloudinary) optimize images on the fly based on the requesting device. This approach requires no changes to your upload workflow but adds a per-request cost and introduces a third-party dependency.
The lowest-friction approach for most teams is optimization at upload time. Convert and resize before the image enters your system, and you eliminate the need for runtime processing, CDN costs, and complex build pipelines.
Optimize images at upload time with Klara →
Common Mistakes
Optimizing dimensions but not format. A 1200 × 800 PNG at quality 100 is still 2-4 MB. Converting to WebP at quality 85 drops it to 80-200 KB. Format conversion alone accounts for the majority of file size savings.
Using quality 100 for web images. There is zero perceptual benefit to serving quality 100 images on the web. Display rendering, viewing distance, and screen pixel density all mask the difference between quality 85 and quality 100. The file size difference is 3-5x.
Lazy loading the hero image. The LCP image, which is the largest above-the-fold image, should load immediately. Adding loading="lazy" to the hero image delays LCP and hurts your Core Web Vitals score. Lazy load everything below the fold, never the hero.
Ignoring width and height attributes. Every <img> tag should have explicit width and height attributes or use CSS aspect-ratio to reserve space. Without them, the browser cannot calculate layout until the image loads, causing Cumulative Layout Shift.
Serving the same image to mobile and desktop. A 2400px wide hero image is wasted bandwidth on a 375px wide phone screen. Use srcset and sizes to serve appropriately sized versions to each device class.
The Cost of Not Optimizing
The penalty is measurable and compounding. Slower pages rank lower in Google. Lower rankings mean less organic traffic. Less traffic means fewer conversions. Each second of additional load time increases bounce rate by roughly 20% according to Google’s published research. For an e-commerce site doing $100K per month, a 1-second LCP improvement from image optimization can translate to $5-15K in additional monthly revenue through reduced bounce rates alone.
Image optimization is not a nice-to-have. It is the foundation of web performance, and the single change that produces the largest measurable impact for the least effort.
Start optimizing your images →
Sources: HTTP Archive Web Almanac (2025), Google Core Web Vitals Documentation (2026), Google PageSpeed Insights, Google WebP Compression Study, Akamai State of the Internet Report (2025).