Image Optimization for Website Speed: Complete Guide

Why Images Are the Biggest Performance Problem

According to the HTTP Archive's 2026 data, images account for roughly 50% of the total bytes transferred on the average web page. The median page ships 2.8 MB of images — more than JavaScript, CSS, fonts, and HTML combined. For image-heavy sites like e-commerce stores, portfolios, and news outlets, this figure can exceed 10 MB.

This matters because page speed directly impacts business outcomes:

Conversion rates — Walmart found that every 1-second improvement in page load time increased conversions by 2%.
Bounce rates — Google reports that as page load time goes from 1s to 3s, the probability of bounce increases by 32%. From 1s to 5s, it increases by 90%.
SEO rankings — Google's Core Web Vitals (LCP, FID/INP, CLS) are ranking signals. Images are the largest contentful element on most pages, which means unoptimized images directly hurt your LCP score.
Accessibility — Users on slow connections or metered data plans are disproportionately affected by heavy images. Optimization is an accessibility concern.

Core Web Vitals and Images

Google's Core Web Vitals measure real-user experience. Two of the three metrics are directly affected by images:

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element to render. On most pages, this is an image — a hero banner, a product photo, or a featured article image. Google considers LCP "good" if it's under 2.5 seconds.

To improve LCP for images:

Compress the LCP image aggressively (it's usually a single hero image — optimize it individually).
Preload the LCP image with <link rel="preload" as="image" href="hero.webp">.
Avoid lazy-loading the LCP image — it should load immediately.
Use a CDN to reduce latency.
Serve the right size — don't send a 3000 px image for a 1200 px container.

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much the page layout shifts while loading. Images without explicit width and height attributes cause layout shifts because the browser doesn't know how much space to reserve until the image loads.

The fix is simple but often overlooked:

<!-- Bad: causes layout shift -->
<img src="photo.webp" alt="Product">

<!-- Good: browser reserves space -->
<img src="photo.webp" alt="Product" width="800" height="600">

<!-- Also good: use CSS aspect-ratio -->
<img src="photo.webp" alt="Product" style="aspect-ratio: 4/3; width: 100%;">

Choosing the Right Format

Format selection is the highest-impact decision for image optimization. Here's the practical decision tree for 2026:

Is it a photo or complex image? → Use WebP (lossy) or AVIF for maximum savings.
Is it a simple graphic, logo, or icon? → Use SVG if possible (vector). If it must be raster, use WebP (lossless).
Does it need transparency? → WebP or AVIF (not JPEG). For vector graphics, SVG.
Is it an animation? → Animated WebP or a short video (<video> with MP4/WebM is often more efficient than any animated image format).

For broad compatibility with maximum savings, convert your images to WebP at quality 75–80 using Deflato or similar tools.

Compression: Finding the Sweet Spot

After choosing a format, quality selection determines how much you save. The relationship between quality and file size is non-linear — dropping from quality 95 to 80 might reduce file size by 60%, while dropping from 80 to 65 might save only another 20%.

Recommended quality settings by use case:

Use Case	Format	Quality	Expected Savings vs Original
Hero / banner images	WebP or AVIF	80–85	50–70%
Blog content images	WebP	75–80	60–75%
Product thumbnails	WebP	70–75	70–80%
Background images	WebP or AVIF	60–70	75–85%
User-uploaded content	WebP	75	60–75%

Deflato shows a real-time preview as you adjust the quality slider, so you can visually confirm the trade-off before committing.

Responsive Images

Serving a single 2400 px image to every device wastes bandwidth on mobile. Responsive images let the browser choose the right size:

<img
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1200.webp 1200w,
          photo-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  src="photo-800.webp"
  alt="Product photo"
  width="1600"
  height="1200"
  loading="lazy"
>

This tells the browser: "On screens up to 600 px, the image fills the viewport. On screens up to 1200 px, it takes up half. Otherwise, it's displayed at 800 px." The browser then picks the smallest source that covers the actual display size at the device's pixel density.

Generating multiple sizes is tedious by hand. Use a build tool (like Sharp in Node.js), a CMS plugin, or the Deflato API to generate responsive variants automatically.

Lazy Loading

Lazy loading defers the download of off-screen images until the user scrolls near them. This improves initial page load time and LCP (because the browser focuses its bandwidth on above-the-fold content).

Modern browsers support native lazy loading:

<img src="photo.webp" alt="Description" loading="lazy" width="800" height="600">

Key rules:

Do NOT lazy-load the LCP image (the hero image or the first visible image). This delays its rendering and hurts LCP. Set loading="eager" or omit the attribute for above-the-fold images.
Always set width and height on lazy-loaded images to prevent layout shifts (CLS).
Use fetchpriority="high" on the LCP image to tell the browser to prioritize it.

<!-- Hero image: load immediately with high priority -->
<img src="hero.webp" alt="Hero" fetchpriority="high" width="1600" height="600">

<!-- Below-the-fold images: lazy load -->
<img src="photo-2.webp" alt="Photo 2" loading="lazy" width="800" height="600">
<img src="photo-3.webp" alt="Photo 3" loading="lazy" width="800" height="600">

Using a CDN for Image Delivery

A Content Delivery Network (CDN) serves images from edge servers geographically close to the user, reducing latency by 50–200 ms per request. Many CDNs also offer on-the-fly image optimization:

Automatic format negotiation — The CDN detects the browser's supported formats via the Accept header and serves AVIF, WebP, or JPEG accordingly.
Dynamic resizing — Request a specific size via URL parameters (e.g., ?w=800&h=600), and the CDN generates and caches the resized variant.
Quality optimization — Some CDNs adjust quality automatically based on connection speed.

Popular CDNs with image optimization: Cloudflare Images, Bunny Optimizer, Imgix, Cloudinary, and Fastly Image Optimizer.

If you prefer to optimize images before uploading to a CDN, Deflato can batch-process your assets during the build step, giving you full control over quality and format.

Automation and Build Pipelines

Manual optimization doesn't scale. For production websites, integrate image optimization into your build process:

Static site generators — Use plugins like @astrojs/image (Astro), next/image (Next.js), or gatsby-plugin-image (Gatsby) to auto-generate responsive, optimized images at build time.
CMS uploads — Hook into your CMS's upload pipeline to compress images on ingest. The Deflato API can be called as a webhook or middleware.
CI/CD — Add an image optimization step to your deployment pipeline. Compress all images in the /public or /assets directory before deploying.

# Example: compress all images in /public before deployment
for f in public/images/*.{jpg,png}; do
  curl -s -X POST https://deflato.com/api/v1/compress     -H "Authorization: Bearer $DEFLATO_API_KEY"     -F "file=@$f"     -F "output_format=WEBP"     -F "quality=80"     --output "${f%.*}.webp"
done

Image Optimization Checklist

A quick-reference checklist for every website:

Use WebP or AVIF as the default format (with JPEG fallback if needed).
Compress photos to quality 75–80.
Resize images to the actual display size — don't serve 4000 px images in 800 px containers.
Generate responsive image variants (srcset).
Set width and height on every <img> tag.
Lazy-load below-the-fold images with loading="lazy".
Preload and prioritize the LCP image.
Strip unnecessary metadata (EXIF, ICC profiles).
Use a CDN for global delivery.
Automate optimization in your build or upload pipeline.

Conclusion

Image optimization is not a one-time task — it's an ongoing discipline. Every new image added to your site is an opportunity to save bytes or waste them. The tools and techniques are well established: modern formats, sensible compression, responsive sizing, lazy loading, and CDN delivery. Individually, each technique offers modest improvements. Combined, they can reduce image weight by 80–95% and take seconds off your page load time. Tools like Deflato handle the compression and format conversion side, while framework-level features and CDNs handle delivery. The result: faster pages, better SEO, happier users, and lower hosting costs.