Image Optimization for Web Developers

Why Image Optimisation Matters for Developers

For most websites, images account for 50–70% of total page weight. Poorly optimised images directly hurt LCP scores, slow Time To First Byte indirectly, and increase bandwidth costs.

The Optimisation Stack

Step 1: Use the right format

• Photos → WebP lossy
• Logos/icons → SVG or WebP lossless
• Screenshots → WebP lossless or PNG
• Legacy fallback → JPG

Step 2: Compress before deployment Use our Image Compressor or a CLI tool like sharp or squoosh for batch processing.

Step 3: Serve correct sizes Do not serve a 2000px image in a 400px container. Use srcset:

<img src="hero.webp" srcset="hero-400.webp 400w, hero-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" width="800" height="450" loading="lazy">

Step 4: Lazy load below-the-fold images Add loading="lazy" to all images not visible on initial page load.

Step 5: Preload LCP images Add a preload link for your largest above-the-fold image:

<link rel="preload" as="image" href="hero.webp">

Quick Wins

• Convert all PNG assets to WebP: 30–80% size reduction
• Run all JPGs through lossless compression: 10–30% reduction
• Add width/height to all img tags: eliminates CLS
• Add lazy loading to all below-fold images: faster initial load

---

Why This Is a Developer Responsibility

End users don't optimize images. Content editors often don't either — they upload whatever their camera or stock photo site provides. If image optimization isn't built into the workflow (as a build step, an upload hook, or an explicit process), it doesn't happen, and site performance suffers.

As a developer, setting up the right defaults and providing the right tooling is often the most impactful thing you can do for web performance.

---

The Easiest Win: WebP Conversion

Switching from JPG/PNG to WebP for all web images is the highest-impact, lowest-effort image optimization. The files are 25–35% smaller with no visible quality difference. Browser support is universal for any site not targeting IE11.

For static sites and CMS-based sites where images are uploaded manually: establish a WebP conversion step in your process. weFixPDF's PNG to WebP converter handles this in the browser — useful for quick conversions without leaving your development workflow.

For automated pipelines: integrate Sharp (Node.js), Pillow (Python), or ImageMagick to convert on upload or at build time.

---

Core Web Vitals and Image Optimization

Google's Lighthouse and PageSpeed Insights will flag several image-related issues:

"Serve images in next-gen formats" — Convert JPG/PNG to WebP or AVIF.

"Properly size images" — Don't serve a 2000px image in a 400px container. Resize to actual display dimensions.

"Efficiently encode images" — Compress images appropriately. A 2 MB JPG hero image should be under 200 KB.

"Images do not have explicit width and height" — Add width and height attributes to prevent Cumulative Layout Shift.

---

Responsive Images

Modern web development requires serving different image sizes to different viewport sizes. The srcset attribute and picture element handle this:

(html example)

<picture> <source srcset="image-480.webp 480w, image-800.webp 800w, image-1200.webp 1200w" type="image/webp" sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"> <img src="image-800.jpg" srcset="image-480.jpg 480w, image-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" alt="Description" width="800" height="600"> </picture> (end example)

---

Lazy Loading as Default

Add loading="lazy" to all images below the fold. This defers their loading until the user scrolls near them, dramatically reducing initial page weight:

(html example)

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600"> (end example)

For the above-the-fold hero image (the LCP element), do the opposite — preload it:

(html example)

<link rel="preload" as="image" href="hero.webp" type="image/webp"> (end example)