Text is cheap (kilobytes). Images are expensive (megabytes). If you upload a 5MB JPEG direct from a DSLR camera to your homepage, you have committed a crime against performance. On a 3G network, that image takes 20 seconds to load. The user is gone. Image Optimization is the single most impactful thing you can do for Core Web Vitals.

The Format War: JPG vs WebP vs AVIF

JPG/PNG: The old guard. Heavy. PNG is good for transparency, but massive.
WebP: The Google standard. 30% smaller than JPG. Supported by all modern browsers.
AVIF: The new king. Based on AV1 video codec. 50% smaller than JPG. HDR support. Strategy: Serve AVIF to browsers that support it (Chrome, Safari). Fallback to WebP. Fallback to JPG. Next.js <Image /> does this automatically.

Responsive Sizing (srcset)

A user on an iPhone (375px wide screen) does not need a 4000px wide Desktop Banner. It wastes bandwidth and GPU memory (downscaling). You need to serve different sizes to different devices. The HTML Way:

<img 
  src="small.jpg"
  srcset="medium.jpg 1000w, large.jpg 2000w"
  sizes="(max-width: 600px) 100vw, 50vw"
/>

The browser looks at its own width, calculates the pixel density (Retina 2x), and picks the perfect file. If you use a framework like Next.js, simply define the sizes prop correctly. “This image takes up 100% of the screen on mobile, and 50% on desktop.”

Lazy Loading vs Eager Loading

Lazy Loading: “Don’t load this image until the user scrolls near it.”

This saves initial bandwidth.
Result: Faster Initial Page Load.
Default: In Next.js, images are lazy by default.

Eager Loading (Priority): “Load this immediately.”

Use Case: The LCP Element (Largest Contentful Paint). Usually the Hero Banner.
Critical: If you lazy load the Hero image, the browser waits for JS to hydrate before loading the image. This kills your LCP score.
Rule: Mark the top-most image as priority={true}.

Layout Shift Prevention

If you insert an image without dimensions:

Browser renders text.
Image loads (500px height).
Text gets pushed down. This is CLS (Cumulative Layout Shift). Google hates it. Fix: Always reserve the aspect ratio space. The browser draws a “Placeholder Box” of the correct size immediately. The image loads into the box.

The CDN (Content Delivery Network)

Do not serve images from your web server. Serve them from an Image CDN (Cloudinary, Imgix, Vercel Blob). Why?

On-the-fly Transformation: image.jpg?w=500&q=80. You generate the exact size/quality requested.
Global Edge: The image is cached in 200 cities.
Smart Crop: The AI detects the face in the photo and crops to it for the mobile thumbnail.

6. Vector Graphics (SVG): The Infinite Resolution

For Logos and Icons, never use a PNG. Use SVG (Scalable Vector Graphics). A 5000px PNG logo is 1MB. The same logo in SVG is 2KB. And it scales to the size of a billboard without pixels. Security Warning: SVGs are XML files. They can contain JavaScript (XSS). Always sanitize user-uploaded SVGs server-side using libraries like isomorphic-dompurify.

7. The Video Revolution (WebM & AV1)

Static images are boring. E-commerce is moving to “Autoplay Video” on hover. GIFs are terrible (huge size, 256 colors). Use WebM or MP4 (H.264) without audio. <video autoPlay loop muted playsInline>. This is often smaller than a GIF and full 32-bit color. New codec AV1 is even smaller, but check browser support.

10. LCP Optimization on Steroids

Core Web Vitals “Largest Contentful Paint” is usually an image. To hit < 2.5s:

Preload Header: Send <link rel="preload" as="image" href="hero.avif"> in the initial HTML document response.
Fetch Priority: Use <img fetchpriority="high"> (Chrome 101+).
Inline CSS Backgrounds: If it’s a small pattern, Base64 encode it into the CSS to avoid a network request.

11. Background Image Strategies

“Cover” images are tricky because the aspect ratio changes. CSS: object-fit: cover. The problem: The “Important part” (the face) might get cropped out on mobile. Solution: Focal Point Cropping. We use Sanity CMS hotspots. We pass the focal point coordinates (x=0.5, y=0.3) to the Image CDN. The CDN generates a centered crop for desktop and a top-aligned crop for mobile. The art direction remains intact on all devices.

13. The AVIF Revolution (Deep Dive)

Why is AVIF a game changer? It supports HDR (High Dynamic Range). If you sell jewelry, the sparkle depends on the contrast range. JPEG clamps colors to Standard Dynamic Range (SDR). AVIF preserves the full 10-bit or 12-bit color depth of the source photo. On an OLED iPhone screen, the diamond actually glitters. We configure our Media Pipelines to detect HDR support (via CSS Media Queries dynamic-range: high) and serve the HDR AVIF only to capable devices. This is “Visual Fidelity” as a competitive advantage.

Why Maison Code Discusses This

At Maison Code, we are pixel perfectionists. We don’t accept “blurry” compression. We fine-tune the quality parameter per image type.

Product Packshots: q=85 (Crisp lines).
Lifestyle Backgrounds: q=60 (Soft focus is okay). We build Adaptive Image Pipelines that optimize for both Speed (LCP) and Beauty (Retention). Because in Luxury, a pixelated image is an insult to the craftsmanship.

15. Conclusion

Images are the heaviest thing on the web. They are also the most important thing. You must balance the tension between “Fast” and “Beautiful”. With modern codecs (AVIF), responsive syntax (srcset), and Edge CDNs, you can have both. Stop serving 5MB JPEGs. Respect your user’s data plan.

Images loading slow?

We optimize Media Pipelines for instant LCP and perfect visual fidelity on all devices.

Hire our Architects.