How to Optimize Images for the Web in 2026

Images account for 50–70% of the average web page weight. Poorly optimized images are the single biggest cause of slow websites, high bounce rates, and poor Core Web Vitals scores. This guide covers every technique you need to deliver images that are fast, lean, and SEO-friendly.

Step 1: Choose the right format

Format selection has the biggest impact on file size, even before any compression is applied:

• AVIF: best compression for photos (2026 default for modern browsers)
• WebP: excellent compression, 97% browser support, use as fallback for AVIF
• JPEG: universal fallback for photographs
• PNG: when transparency is required and WebP is not an option
• SVG: logos, icons, any vector content, infinitely scalable

Step 2: Resize to the display dimensions

Never upload a 4000×3000 pixel photo to display at 800×600. The browser downloads the full resolution, then scales it down, wasting bandwidth with zero visible benefit. Always resize images to their maximum display dimensions before uploading.

For responsive images that display at different sizes on mobile vs desktop, use the srcset and sizes attributes to provide multiple resolutions and let the browser choose the right one.

Step 3: Compress aggressively

Most images can tolerate much more compression than people assume. Practical targets:

Step 4: Implement lazy loading

Images below the fold should not be downloaded until the user scrolls near them. The native HTML attribute makes this trivial:

<img src="photo.jpg" alt="Description" loading="lazy">

Always add loading="eager" (or omit the attribute) for above-the-fold images, especially your LCP (Largest Contentful Paint) image. Lazy-loading your hero image will hurt your LCP score.

Step 5: Add width and height attributes

Always specify width and height on every <img> tag. This allows the browser to reserve the correct space before the image loads, eliminating Cumulative Layout Shift (CLS), a Core Web Vitals metric:

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

Step 6: Use a CDN

A Content Delivery Network serves images from servers geographically close to your users, reducing latency. Modern image CDNs (Cloudflare Images, Fastly, Imgix, Cloudinary) also automate:

• Format conversion (serve AVIF to supported browsers, WebP otherwise, JPEG as last resort)
• Responsive resizing on demand
• Aggressive caching with proper headers

Step 7: Preload your LCP image

The Largest Contentful Paint image (usually your hero image) has the biggest impact on user experience. Tell the browser to fetch it as early as possible:

<link rel="preload" as="image" href="hero.avif" type="image/avif"
      imagesrcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
      imagesizes="100vw">

Image optimization checklist

• ✅ Correct format for each image type
• ✅ Resized to maximum display dimensions
• ✅ Compressed to target quality (not at 100%)
• ✅ loading="lazy" on all below-fold images
• ✅ width and height attributes on every <img>
• ✅ Descriptive alt text for every image
• ✅ Served over HTTPS from a CDN
• ✅ LCP image preloaded
• ✅ <picture> element with AVIF + WebP + JPEG sources