Images account for the largest share of bytes on most websites. If your pages feel sluggish, chances are your images are the culprit. The good news: you can dramatically improve loading speed in less than an hour, without redesigning anything. This hands-on guide shows you exactly how to optimize images for web using modern formats, smart compression, responsive delivery, and lazy loading.
Why Image Optimization Matters in 2026
Google Core Web Vitals, especially Largest Contentful Paint (LCP), are directly tied to how fast your hero images and above-the-fold visuals render. A single unoptimized 2 MB banner can push your LCP past 4 seconds, hurting both SEO and conversions.
Here is what you can typically expect after applying the techniques in this guide:
- 50 to 80% reduction in image weight
- 1 to 3 seconds faster LCP on mobile
- Better rankings on Google Search and improved Lighthouse scores
Step 1: Choose the Right Modern Image Format
Format selection is the single biggest lever. Here is a quick comparison of the formats you should be using today:
| Format | Best For | Compression vs JPEG | Browser Support |
|---|---|---|---|
| AVIF | Photos, hero images | Up to 50% smaller | All major browsers |
| WebP | Photos, graphics, transparency | Around 25 to 35% smaller | Universal |
| JPEG | Fallback only | Baseline | Universal |
| PNG | Sharp icons, screenshots with text | Larger than JPEG | Universal |
| SVG | Logos, icons, illustrations | Vector, tiny size | Universal |
Recommendation: Serve AVIF as the primary format with a WebP fallback and a JPEG or PNG as a last resort. This is exactly what the <picture> element handles for you.
Step 2: Compress Aggressively with the Right Tools
Compression does not mean losing quality if you use the correct tools and settings. Here are the ones we recommend:
- Squoosh.app (by Google): Best free browser tool for one-off images. Try quality 60 to 75 for AVIF.
- ImageOptim (macOS): Drag-and-drop batch compression.
- Sharp (Node.js): Fast, scriptable, ideal for build pipelines.
- cwebp and avifenc: Command-line tools for CI/CD workflows.
- TinyPNG / TinyJPG: Quick web-based compression for teams.
Quick command-line example
# Convert a JPEG to AVIF with excellent quality/size ratio
avifenc --min 20 --max 30 input.jpg output.avif
# Convert to WebP
cwebp -q 75 input.jpg -o output.webp
Step 3: Resize Before You Upload
Serving a 4000 px wide image inside a 800 px container is one of the most common mistakes. Always resize to the maximum dimension the image will actually be displayed at, multiplied by 2 for retina displays.
- Identify the largest rendered width of the image on your site.
- Export at that width times 2 (for high-DPI screens).
- Generate multiple sizes for responsive delivery (see Step 4).
Step 4: Implement Responsive Images with srcset
The srcset attribute lets the browser pick the best image size for the user’s device and screen. This alone can save mobile users massive amounts of bandwidth.
<img
src="hero-800.webp"
srcset="hero-400.webp 400w,
hero-800.webp 800w,
hero-1200.webp 1200w,
hero-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Product hero image"
loading="lazy"
decoding="async"
width="1200"
height="600">For full format negotiation, combine srcset with the <picture> element:
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="Hero" width="1200" height="600" loading="lazy">
</picture>Step 5: Enable Native Lazy Loading
Lazy loading defers offscreen images until the user scrolls near them. It is now natively supported in every modern browser. Just add:
<img src="photo.webp" loading="lazy" decoding="async" alt="...">Important: Do NOT lazy-load your LCP image (usually the hero). Instead, use fetchpriority="high":
<img src="hero.avif" fetchpriority="high" alt="...">
Step 6: Always Set Width and Height
Setting explicit width and height attributes prevents layout shift (CLS) as images load. The browser reserves the correct space based on the aspect ratio.
Step 7: Serve via a CDN with Automatic Optimization
If you want to skip most of the manual work, use an image CDN that handles format conversion, resizing, and delivery automatically:
- Cloudflare Images or Cloudflare Polish
- Cloudinary
- ImageKit
- Bunny Optimizer
These services deliver the optimal format per browser with a single URL parameter change.
The One-Hour Optimization Checklist
- Audit your top 5 pages with PageSpeed Insights and note current LCP.
- Convert all photos to AVIF and WebP.
- Resize images to their real display dimensions.
- Add srcset and sizes to responsive images.
- Add
loading="lazy"to below-the-fold images. - Add
fetchpriority="high"to your LCP image. - Set explicit width and height attributes.
- Re-run PageSpeed Insights and compare.
Measurable Results You Can Expect
On a typical e-commerce or content site, a full pass through this checklist produces:
- Total page weight reduced by 40 to 70%
- LCP improvement of 1.5 to 3 seconds on mobile 4G
- Lighthouse Performance score gains of 15 to 40 points
FAQ
Is AVIF really better than WebP in 2026?
Yes, for photographic content. AVIF typically produces files 20 to 30% smaller than WebP at the same visual quality. Since browser support is now universal, AVIF should be your primary format with WebP as a fallback.
What is the ideal quality setting for web images?
For AVIF, quality 50 to 65 is usually indistinguishable from the original. For WebP, aim for 75 to 80. For JPEG fallbacks, 80 to 85 is a good balance.
Should I use PNG or JPEG for photos?
Neither, ideally. Use AVIF or WebP. If you must choose between the two legacy formats, JPEG is better for photos, PNG is better for images with sharp edges, text, or transparency.
Does lazy loading hurt SEO?
No. Native lazy loading using the loading="lazy" attribute is fully supported by Googlebot. Just avoid lazy loading your main hero or LCP image.
Do I need a CDN to optimize images?
Not strictly, but an image CDN dramatically simplifies ongoing maintenance. If you publish new images frequently, a CDN pays for itself in time saved and performance gains.
How do I check if my images are actually optimized?
Run your page through PageSpeed Insights, WebPageTest, or Chrome DevTools Lighthouse. Look for warnings like “Serve images in next-gen formats” or “Properly size images”.
Final Thoughts
You do not need a full site rebuild to see huge performance gains. Knowing how to optimize images for web is one of the highest-ROI skills a developer or site owner can master in 2026. Spend one focused hour applying this checklist, and your visitors, your conversions, and Google will all thank you.