Quality Settings by Image Type
Different image types require different compression approaches. Photography benefits from moderate lossy compression, while graphics with text need lossless formats or very high quality settings.
For photography, set JPG or WebP quality between 70% and 85%. At 70%, most viewers cannot distinguish the compressed image from the original. At 85%, even pixel-peepers will struggle to find artifacts. Going above 90% rarely produces visible improvements while significantly increasing file size.
Product images for e-commerce should use 80-90% quality. Shoppers zoom in on product photos, and visible compression artifacts can reduce trust and conversion rates. The extra file size is worth the quality assurance.
Banner and hero images work well at 75-85%. These are often displayed large but viewed from a distance, so moderate compression strikes the right balance. Always check text overlays on compressed banners, as lossy compression can blur small text.
Thumbnails can go as low as 60-75%. Their small display size hides compression artifacts effectively, and the file size savings add up quickly when you have dozens of thumbnails on a page.
Dimension Guidelines
Serving images larger than their display dimensions is one of the most common and wasteful mistakes in web development. If an image displays at 800 pixels wide, there is no benefit to serving a 4000-pixel version.
Common responsive breakpoints are 320px for mobile, 768px for tablets, 1024px for small desktops, and 1920px for large screens. Generate versions at these widths and use the srcset attribute to let browsers choose the appropriate size.
Format-Specific Recommendations
For JPG, enable progressive encoding when possible. Progressive JPGs display a low-quality version immediately that sharpens as more data loads, improving perceived performance.
For PNG, consider whether you need 24-bit color. For graphics with limited colors, 8-bit PNG reduces file sizes dramatically without quality loss. Tools like our converter can help you test 8-bit vs 24-bit output.
For WebP, quality settings roughly correspond to JPG equivalents. WebP 80% typically matches JPG 80% visually but produces a smaller file.
Build Tool Integration
Modern frameworks offer built-in image optimization. Next.js Image automatically serves WebP with fallbacks, generates responsive sizes, and optimizes loading. Vite has plugins like vite-imagetools that handle compression at build time. Webpack’s image-minimizer-webpack-plugin integrates with various compression libraries.
The key is automating optimization so it happens consistently without manual intervention. Set up your build pipeline once, and every image gets optimal treatment.
Testing and Monitoring
Use Lighthouse’s image audit to identify oversized or poorly compressed images. PageSpeed Insights flags images that could be smaller. Set up regular checks, especially after content updates, to catch regressions before they impact users.