Images typically account for 50%+ of a page's total weight, making format selection, responsive sizing, lazy loading, and compression the highest-impact performance wins for most websites.
WebP provides 25-35% savings over JPEG with universal support; AVIF achieves 50% savings but with slower encoding and growing browser support.
The srcset and sizes attributes let the browser choose the optimal image size based on viewport width and device pixel ratio.
Native loading="lazy" defers below-the-fold images with zero JavaScript. Above-the-fold images should use eager loading or fetchpriority="high".
Quality settings of 75-85% are visually indistinguishable from 100% while reducing file size by 40-60% for JPEG and WebP.
Always set width/height or aspect-ratio on images to prevent Cumulative Layout Shift (CLS) while images load.
Images are the largest contributor to page weight on most websites. HTTP Archive data consistently shows that images account for roughly 50% of the total bytes transferred on the median web page. Optimizing images is often the single most impactful performance improvement you can make, and it requires no complex JavaScript changes.
The choice of image format has the biggest impact on file size:
WebP: Developed by Google, WebP provides 25-35% smaller file sizes than JPEG at equivalent quality, and supports transparency (unlike JPEG). Browser support is now universal across modern browsers. This should be your default format for photographs and complex images.
AVIF: The newest format, based on the AV1 video codec. AVIF achieves 50% smaller files than JPEG and outperforms WebP, but encoding is slower and browser support, while growing, is not yet universal. Use it with a fallback strategy.
SVG: For icons, logos, and simple illustrations, SVG is infinitely scalable, cacheable, and often smaller than raster equivalents. SVGs can be inlined for instant rendering or styled with CSS.
Use the <picture> element for format negotiation: the browser picks the first <source> it supports, falling back to <img> for older browsers.
Serving the same 2000px image to a 320px mobile screen wastes bandwidth dramatically. The srcset attribute lets you provide multiple image sizes, and the sizes attribute tells the browser how wide the image will be displayed, so it can choose the optimal source:
<img srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 50vw" alt="Photo" />The browser calculates which image to download based on viewport width and device pixel ratio, preventing unnecessary data transfer on smaller screens.
The native loading="lazy" attribute defers loading images that are below the fold until the user scrolls near them. This is supported in all modern browsers and requires zero JavaScript. Never lazy-load images that are visible in the initial viewport (above the fold) — these should use loading="eager" or fetchpriority="high" to load as quickly as possible.
Beyond format selection, tuning compression quality is essential. A quality setting of 75-85% for JPEG/WebP is typically indistinguishable from 100% to the human eye while being 40-60% smaller. Tools like Sharp (Node.js), Squoosh (Google), and imagemin automate compression in build pipelines. Next.js provides built-in image optimization through the <Image> component, which handles resizing, format conversion, and lazy loading automatically.
Always specify width and height attributes (or use CSS aspect-ratio) on images to prevent Cumulative Layout Shift (CLS). Without dimensions, the browser does not know how much space to reserve until the image loads, causing content to jump around.
Image optimization involves four complementary techniques: format selection (WebP/AVIF), responsive sizing (srcset/sizes), lazy loading (loading="lazy"), and compression (quality settings). A well-optimized image pipeline applies all four, and frameworks like Next.js automate most of this through their Image component.
Fun Fact
The WebP format was created by Google after they acquired On2 Technologies in 2010. It is based on the VP8 video codec — essentially, each WebP image is a single frame of a VP8 video, which is why it compresses so well.