How to Optimize Images for Web Performance

Images are the single largest contributor to page weight on most websites. They account for roughly 40–50% of total bytes transferred on a typical page load, and unoptimized images are the number-one reason sites fail Core Web Vitals assessments. The good news: image optimization is one of the highest-leverage performance improvements you can make, and it doesn't require exotic tooling or deep technical knowledge.

This guide walks through a practical optimization workflow — from choosing formats to setting quality to sizing correctly — with an emphasis on decisions that actually move the needle.

Why image optimization matters (the numbers)

Google's research has consistently shown that page load time directly affects user behavior. Pages that take more than 3 seconds to load lose 53% of mobile visitors. A 100ms improvement in Largest Contentful Paint (LCP) — which is frequently an image — correlates with measurable increases in conversion rates for e-commerce sites.

Beyond user experience, Core Web Vitals are a confirmed Google ranking factor. A site with optimized images that passes CWV has a tangible SEO advantage over competitors that don't. For an e-commerce store serving hundreds of product images, or a media site with image-heavy articles, the performance gap between optimized and unoptimized images can be the difference between page-one and page-three rankings.

Step 1: Choose the right format

Format choice is the single biggest optimization lever. The difference between serving a 1.2MB JPEG and a 180KB AVIF of the same image — with no visible quality difference — is not an exaggeration. It's a typical real-world outcome.

Here's a practical decision framework:

• Photographs and complex imagery → AVIF (first choice) or WebP (safe fallback). AVIF delivers the smallest files for photographic content. WebP is nearly as good with broader tooling support. Either one represents a 40–60% reduction over JPEG. See our AVIF vs WebP comparison for a detailed breakdown.
• Screenshots, diagrams, text-heavy images → PNG for lossless quality or WebP for smaller files with slight quality trade-offs. These images have hard edges and flat colors that compress differently than photographs.
• Icons and simple graphics → SVG where possible. SVGs are resolution-independent (perfect at any zoom level), typically tiny, and can be styled with CSS. Use them for logos, icons, and geometric illustrations.
• Animated content → WebP or MP4 video. Animated GIFs are catastrophically large — a 5-second GIF can easily be 10MB. An equivalent WebP animation or short MP4 loop will be 90% smaller.

If you're currently serving JPEG and PNG for everything, switching to AVIF or WebP is the single most impactful change you can make. The AVIF and WebP converters handle this in your browser without any software install.

Step 2: Set quality intentionally

Quality settings are the second-biggest lever, and most people either leave them at the default (too high) or crank them down blindly (too low). The right approach is to set quality based on the image's role on the page.

Here are practical quality targets for modern formats:

• Hero images (above-the-fold, large) — AVIF quality 65–75, WebP quality 70–80. These are the most visible images on your page and deserve slightly higher quality, but they also have the most impact on LCP, so don't go above 80.
• Product images and gallery photos — AVIF quality 60–70, WebP quality 65–75. These need to look good but are typically viewed at smaller sizes than heroes.
• Thumbnails and preview images — AVIF quality 50–60, WebP quality 55–65. Small display size hides compression artifacts. Go lower than you think.
• Background textures and decorative images — AVIF quality 40–55, WebP quality 45–60. These are ambiance, not content. Users don't scrutinize them.

A common misconception: quality 100 doesn't mean "no loss." For lossy formats like AVIF, WebP, and JPEG, quality 100 still applies compression — it just uses the most conservative settings. The file is still smaller than a raw bitmap, but it's far larger than it needs to be. True lossless is a separate encoding mode, not quality 100.

The Batch Optimizer has presets for each of these use cases — Web Hero, Thumbnail, Social, and Email — so you don't have to remember the numbers.

Step 3: Size images for their display context

This is the optimization step people skip most often, and it's frequently the most wasteful. Serving a 4000×3000 pixel image in a 400×300 container wastes roughly 99% of the pixels. The browser downloads the full image, then throws away most of it during rendering.

The rule: the delivered image should be no more than 2x the CSS display dimensions (to account for high-DPI screens). A hero image displayed at 1200px wide should be served at 1200–2400px wide, not 5000px.

Responsive images with srcset

For images that display at different sizes on different screen widths (which is most images on a responsive site), the srcset attribute lets you provide multiple sizes and let the browser choose:

Common breakpoints to generate: 400px, 800px, 1200px, 1600px, and 2000px wide. You don't need more than that — the browser picks the closest match.

Step 4: Lazy-load below-the-fold images

Images that aren't visible in the initial viewport shouldn't block the page load. The native HTML loading="lazy" attribute handles this with zero JavaScript:

This alone can reduce initial page weight by 30–70% on image-heavy pages, because most pages have many more images below the fold than above it.

One important caveat: never lazy-load your Largest Contentful Paint (LCP) element. The LCP image — usually your hero image — needs to load as fast as possible. Lazy-loading it delays it, which directly hurts your Core Web Vitals score. Add loading="eager" (or just omit the loading attribute) for your hero, and loading="lazy" for everything else.

Step 5: Serve proper dimensions with width and height

Always include width and height attributes on your <img> tags. This allows the browser to reserve the correct amount of space before the image loads, preventing layout shifts (which hurt your Cumulative Layout Shift / CLS score).

Without dimensions, the browser doesn't know how tall the image will be until it downloads. When the image finally loads and renders, everything below it jumps down — that's a layout shift, and it's both visually jarring and bad for your CWV score.

Common mistakes to avoid

• Serving full-resolution camera exports — a 6000×4000 JPEG straight from a DSLR is 8–15MB. No web page needs this. Resize and re-encode before uploading.
• Using PNG for photographs — PNG is lossless and produces enormous files for photographic content. A 5MB PNG photo could be a 200KB AVIF with no visible quality loss. Reserve PNG for screenshots, diagrams, and images that need pixel-perfect reproduction.
• Forgetting about metadata — camera EXIF data (GPS coordinates, device info, timestamps) adds kilobytes and can be a privacy concern. Strip it during optimization unless you specifically need it.
• Over-optimizing and under-testing — quality 30 looks terrible on most photographic content, even at thumbnail size. Always visually verify your quality settings on real content. What looks "fine" on a compressed preview can look blocky on a retina screen.
• Optimizing once and forgetting — new content gets uploaded unoptimized, new team members don't know the workflow, and six months later your page weight has crept back up. Build optimization into your upload process, not just your launch checklist.

A practical workflow

Here's a workflow that covers 90% of real-world image optimization needs:

• Source images — keep originals at full resolution in your asset library. Never optimize in place; always work from copies.
• Resize — scale down to the maximum display width you'll need (typically 1600–2000px for full-width heroes, 800–1200px for content images, 400px for thumbnails).
• Convert to modern format — AVIF for photographic content (quality 65–75), WebP as a fallback or for animated content.
• Generate responsive sizes — create 3–5 width variants for srcset.
• Add proper HTML attributes — width, height, loading, alt, srcset, sizes.
• Test — run Lighthouse or PageSpeed Insights. Check that LCP is fast, CLS is low, and images look good on both standard and retina screens.

For the format conversion and resizing steps, the Batch Optimizer handles this with smart presets — drop your images, pick "Web Hero" or "Thumbnail," and download the optimized set as a ZIP. Everything runs in your browser, so your source images stay private.

The bottom line

Image optimization isn't glamorous work, but it's among the highest-ROI performance improvements available. The combination of modern formats (AVIF or WebP), intentional quality settings, proper sizing, and lazy loading can reduce your page weight by 60–80% with no visible quality loss. Your pages load faster, your CWV scores improve, your SEO improves, and your users have a better experience.

The best part: once you establish the workflow, it takes seconds per image. The tools exist to make this fast and painless — the discipline is in using them consistently.