Images account for more than 50% of the total bytes downloaded on an average webpage. They are the single biggest contributor to slow page load times — and therefore the single biggest opportunity for performance improvement. Optimizing images properly can cut page weight by 60–80% with no visible change to the user.
Why Image Optimization Matters
Page speed directly affects user experience and search rankings. Google's Core Web Vitals include Largest Contentful Paint (LCP) — how quickly the largest image on the page loads. A poor LCP score (over 2.5 seconds) can push your pages down in search results.
For mobile users on slower connections, the difference between a 500 KB page and a 5 MB page is the difference between a usable website and one that is abandoned before it finishes loading. Optimizing images is therefore both a performance concern and a business concern.
Step 1: Choose the Right Format
Before compressing anything, make sure you are using the right format:
- WebP for all photographs and complex images on the web (25–35% smaller than JPEG at equivalent quality)
- PNG for logos, icons, and images with transparency
- SVG for icons, illustrations, and logos that are purely vector
- JPEG as a fallback where WebP is not supported
- AVIF for next-generation compression where encoding speed is not a bottleneck
Step 2: Resize to Display Dimensions
Never serve an image larger than the size at which it is displayed. Serving a 3000×2000 px image in a 600×400 px container wastes bandwidth on every page load. The browser downloads all the extra pixels and throws them away.
Identify the maximum display width for each image on your site and resize to that width. For a blog post with a content width of 720 px, a 720×480 px image is sufficient for standard screens and a 1440×960 px image covers 2× Retina screens.
Step 3: Compress Aggressively
After resizing, compress the image. For JPEG and WebP, quality 80–85% is the sweet spot for most web images — small files with no perceptible quality loss at normal viewing distances. For hero images and high-visibility photographs, use 85–90%.
A well-compressed 720×480 px WebP at 82% quality for a typical photograph will be approximately 40–80 KB. The uncompressed equivalent might be 3–5 MB. That is a 97% reduction in file size.
Step 4: Use Responsive Images
Different devices have different screen sizes. A desktop monitor might need a 1200 px wide image while a mobile phone needs only 400 px. HTML's srcset attribute allows you to serve different image sizes to different devices:
- Provide multiple resolutions of the same image (e.g., 400w, 800w, 1200w)
- The browser automatically downloads the most appropriate size
- This prevents mobile users from downloading desktop-sized images
In Next.js, the <Image> component handles this automatically — it generates multiple sizes and serves the optimal one based on the device's viewport and pixel density.
Step 5: Lazy Load Below-the-Fold Images
Images that are not visible in the initial viewport (below the fold) should be lazy loaded — they should only begin downloading when the user scrolls towards them. This improves initial page load time by deferring the download of images the user may never see.
In HTML, add loading="lazy" to any <img> tag. In Next.js, this is the default behaviour for the <Image> component. The exception is the main hero image — it should be eagerly loaded (and preloaded) because it directly affects LCP.
Step 6: Set Explicit Width and Height
Always specify width and height attributes on your image tags. This allows the browser to reserve the correct amount of space in the layout before the image downloads, preventing Cumulative Layout Shift (CLS) — another Core Web Vitals metric. An image without explicit dimensions causes the page to jump when it loads, which is disorienting for users.
Step 7: Use a CDN for Image Delivery
A Content Delivery Network (CDN) serves your images from servers geographically close to your users, reducing latency. For globally distributed audiences, CDN delivery can reduce image load time by 50–80% for users far from your origin server.
Many CDNs also offer on-the-fly image processing — they can resize, compress, and convert to WebP automatically based on the requesting device. Services like Cloudflare Images, Imgix, and Cloudinary provide this functionality.
Image Optimization Checklist
- 1Use WebP for all photographs on the web (JPEG as fallback)
- 2Use PNG only for images requiring transparency or lossless quality
- 3Resize images to their actual display dimensions before uploading
- 4Compress at quality 80–85% for standard images, 85–90% for hero images
- 5Add srcset for responsive image delivery across screen sizes
- 6Set loading="lazy" on all below-the-fold images
- 7Add explicit width and height attributes to all images
- 8Preload the hero image using <link rel="preload">
- 9Serve images from a CDN where possible
- 10Audit your images regularly using Lighthouse or PageSpeed Insights
Measuring the Impact
After optimizing your images, measure the results using Google PageSpeed Insights or Lighthouse (available in Chrome DevTools). Look for improvements in LCP (Largest Contentful Paint), total page weight, and the 'Properly size images' and 'Serve images in next-gen formats' recommendations. A well-optimized site should score 90+ on PageSpeed for image-related metrics.