1. Choose the Right Format for Each Image
Format selection alone can cut file sizes in half. Use WebP as your default for photographs and complex graphics — it delivers 25-35% smaller files than JPG at equivalent quality. Use SVG for logos, icons, and simple illustrations. Use PNG only when you need pixel-perfect lossless quality with transparency. Consider AVIF for static assets where encoding time is not a constraint, as it can reduce sizes by 50% compared to JPG.
2. Resize Images to Display Dimensions
Never serve a 4000-pixel-wide image to display it at 800 pixels. This wastes bandwidth and forces the browser to spend CPU cycles downscaling on the client side. Resize your images to the exact dimensions they will be displayed at. For retina displays, serve images at 2x the CSS display size — a 400px-wide image slot needs an 800px source, not 4000px.
3. Compress Thoughtfully
Lossy compression is your most powerful tool. For JPG and WebP, quality settings of 75-85 produce files that look virtually identical to the original but are dramatically smaller. Going below 70 saves modest additional bytes but introduces visible artifacts that degrade the user experience.
The key insight is that optimal quality varies by image content. A busy photograph with lots of texture tolerates more compression than a simple graphic with flat colors and sharp edges. If you are processing images in bulk, err on the side of slightly higher quality (80-85) to handle diverse content safely.
4. Implement Lazy Loading
Images below the fold — those not visible when the page first loads — should use lazy loading. The native HTML loading="lazy" attribute tells the browser to defer loading offscreen images until the user scrolls near them. This can dramatically reduce initial page weight and improve Largest Contentful Paint (LCP) metrics.
Do not lazy-load your hero image or any above-the-fold content. These should load immediately to avoid visual delays that hurt perceived performance. Use loading="eager" (or simply omit the attribute) for critical above-fold images.
5. Serve Responsive Images with srcset
Different devices need different image sizes. A phone with a 375px viewport does not need the same image as a 2560px desktop monitor. Use the HTML srcset attribute to provide multiple resolutions and let the browser pick the best one.
Create image variants at common breakpoints: 320w, 640w, 960w, 1280w, 1920w. Combined with the sizes attribute that tells the browser how wide the image will display at each viewport width, this ensures every device downloads only the pixels it needs.
6. Use a Content Delivery Network (CDN)
A CDN caches your images on servers distributed globally, reducing the physical distance between your images and your users. An image hosted on a single server in New York loads slowly for users in Tokyo. That same image on a CDN loads from a nearby edge server in milliseconds.
Many CDNs also offer automatic image optimization — format conversion, resizing, and compression on the fly based on the requesting device. Services like Cloudflare Images, Imgix, and Cloudinary can serve WebP to supporting browsers and JPG to older ones without any changes to your HTML.
7. Set Proper Cache Headers
Images rarely change, so they should be cached aggressively. Set Cache-Control headers with long max-age values (at least one year for versioned assets). Use content-based filenames (hero-a3f8b2.webp) or query strings for cache busting when images do change.
Proper caching means returning visitors never re-download images they have already seen. This turns a multi-megabyte page load into a near-instant experience on repeat visits.
8. Remove Unnecessary Metadata
Camera photos carry EXIF metadata including camera model, lens settings, GPS coordinates, and timestamps. This metadata can add 10-50 KB per image and provides no value to web visitors. Strip metadata during your optimization pipeline to reduce file sizes. This also removes potentially sensitive location data from photos taken with smartphones.
9. Use CSS for Decorative Effects
Drop shadows, rounded corners, gradients, and simple patterns should be CSS, not images. A gradient background as CSS is zero bytes of image data. The same gradient as a PNG might be 20 KB. CSS effects also scale perfectly to any screen size and resolution, adapt to dark mode, and can be animated smoothly.
If you are using images for rounded corners, shadows, or simple geometric patterns, you are almost certainly better off replacing them with CSS.
10. Measure and Monitor
Optimization without measurement is guessing. Use Lighthouse, WebPageTest, or Chrome DevTools to audit your image usage. These tools identify oversized images, missing lazy loading, improper formats, and other optimization opportunities.
Set a page weight budget and track it over time. A reasonable target for total image weight on a typical web page is 200-500 KB. If your images exceed this, there are optimization opportunities waiting.
Monitor Core Web Vitals, especially Largest Contentful Paint (LCP), which is directly impacted by image optimization. An LCP under 2.5 seconds is the target for good user experience, and images are the most common LCP element on web pages.