Optimized Images

Why It Matters

• Images are typically the heaviest page assets. On most websites, images make up 50 to 75 percent of total page weight. Optimizing them has more impact on loading speed than almost any other single change you can make.
• They directly affect Largest Contentful Paint. The hero image or main visual on a page is often the Largest Contentful Paint element. How quickly that image loads directly determines one of the most important Core Web Vitals metrics.
• Unoptimized images waste user bandwidth. Serving a 3-megabyte image when a 150-kilobyte version looks identical wastes 95 percent of the bandwidth. On metered mobile connections, that waste costs your visitors real money.
• Mobile devices struggle with oversized images. A phone does not just download oversized images — it also has to decode and render them, which takes memory and processing power. Oversized images can cause jank and even crashes on low-end devices.

How to Optimize

1. Use modern image formats. WebP and AVIF offer significantly better compression than JPEG and PNG while maintaining excellent quality. Most modern browsers support these formats, and you can provide fallbacks for older browsers.
2. Serve responsive images. Use the srcset and sizes attributes to serve different image sizes for different viewports. A 400-pixel-wide phone should not download a 2000-pixel-wide desktop image.
3. Compress aggressively. Most images can be compressed significantly without visible quality loss. A quality setting of 75 to 85 percent for lossy formats usually produces images that look identical to the original at a fraction of the file size.
4. Lazy-load below-the-fold images. Images that are not visible when the page first loads do not need to download immediately. Use the loading="lazy" attribute so they load only when the user scrolls near them.
5. Set explicit dimensions. Always include width and height attributes on image elements so the browser can reserve the correct space before the image loads, preventing layout shifts.

Common Mistakes

• Uploading images straight from the camera. Camera photos are typically 4000 to 8000 pixels wide and 5 to 15 megabytes in size. They need to be resized and compressed before being used on the web. No page needs a 12-megabyte JPEG.
• Using the same image file for all devices. Serving a single image to both desktop and mobile means either the desktop gets a blurry image or the phone downloads an unnecessarily large one. Responsive images solve this.
• Over-compressing images. Too much compression creates visible artifacts — banding, blurring, and blocky patches. Find the compression level where quality remains visually acceptable rather than pushing for the absolute smallest size.
• Lazy-loading the hero image. The main above-the-fold image should load immediately, not lazily. Lazy-loading your LCP image delays the most important visual element on the page. Reserve lazy loading for images below the fold.