Images account for over 50% of the average webpage's weight. Optimizing them is one of the highest-impact actions you can take to improve site speed, user experience, and SEO rankings.
Step 1: Choose the Right Format
Start by selecting the appropriate format for each image type. Use JPEG for photographs, PNG for graphics and logos requiring transparency, and WebP for modern browsers where smaller file sizes matter most.
Converting a photograph from PNG to JPEG can reduce file size by 80% with no visible quality loss. Similarly, serving WebP instead of JPEG can save another 25-35%.
Step 2: Resize to Display Dimensions
Never serve images larger than they'll be displayed. If an image displays at 800px wide on your site, don't upload a 4000px version. Resize it to 800px (or perhaps 1600px for retina displays) before uploading.
A 4000px image might be 2 MB, while an 800px version of the same photo is only 150 KB — a 92% reduction with zero visible difference at the display size.
Step 3: Compress Aggressively
After resizing, compress the image. For JPEGs, a quality setting of 75-85% provides excellent visual quality with significant file size savings. For PNGs, use tools like pngquant or TinyPNG to reduce colors and compress.
Don't rely on default export settings from Photoshop or other tools — they're often suboptimal. Use dedicated compression tools for best results.
Step 4: Implement Lazy Loading
Don't load offscreen images immediately. Use native lazy loading to defer images until users scroll near them:
<img src="image.jpg" loading="lazy" alt="Description">This dramatically improves initial page load time, especially on image-heavy pages like portfolios or product catalogs.
Step 5: Use Responsive Images
Serve different image sizes for different screen sizes using the srcset attribute:
<img src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 900px) 800px,
1200px"
alt="Description">Mobile users get smaller images appropriate for their screens, saving data and improving load times.
Step 6: Leverage Browser Caching
Configure your server to tell browsers to cache images for extended periods. Set cache headers for at least 1 year for images that won't change.
When images are cached, repeat visitors don't need to download them again, making subsequent page loads nearly instant.
Step 7: Use a CDN
Content Delivery Networks cache your images on servers worldwide. Users download images from the server geographically closest to them, reducing latency and improving load times.
Many CDNs also offer automatic image optimization, serving the optimal format and size based on the requesting device.
Step 8: Optimize Critical Images First
Prioritize above-the-fold images — those visible without scrolling. Ensure these load as fast as possible, as they directly impact perceived performance and Largest Contentful Paint (LCP).
Consider using higher quality settings for hero images while compressing below-the-fold images more aggressively.
Measuring Success
Use tools like Google PageSpeed Insights, GTmetrix, or WebPageTest to measure the impact of your optimizations. Look for improvements in:
- Total page weight (aim for under 2 MB)
- Largest Contentful Paint (aim for under 2.5 seconds)
- Time to Interactive
- Number of HTTP requests
Common Mistakes to Avoid
Don't use CSS or HTML to resize large images. This downloads the full-size file regardless of display size. Always resize images server-side before uploading.
Don't over-compress. Quality below 70% often introduces visible artifacts. Find the balance between file size and acceptable quality.
Don't ignore mobile. Over 60% of web traffic is mobile. Optimize for mobile-first, ensuring fast load times even on slower connections.