Images account for an average of 50% of a web page's total weight. Optimizing them is the single highest-impact action you can take to improve page load times, Core Web Vitals scores, and user experience.
Choose the Right Format
Photographs: Use WebP (lossy) as primary, with JPEG fallback. WebP produces 25-35% smaller files at equivalent quality.
Graphics with transparency: Use WebP (lossless) or PNG. For simple graphics, SVG is dramatically smaller and scales perfectly.
Icons and logos: Use SVG whenever possible. SVGs are typically 2-10x smaller than equivalent PNGs and look sharp at any size.
Animations: Use MP4/WebM video with autoplay instead of GIF. Video is 5-20x more efficient than animated GIF.
Compression Techniques
Lossy compression (JPEG/WebP): A quality setting of 80-85% provides the best balance between file size and visual quality. Below 70%, artifacts become noticeable. Above 90%, file size increases dramatically with minimal quality improvement.
Lossless compression (PNG): Use tools like OxiPNG or PNGquant to reduce PNG sizes by 30-70% without any quality loss.
Responsive Images
Never serve a 4000px image to a mobile device with a 390px viewport. Use the HTML <picture> element with srcset to serve appropriately sized images for each device. Typical breakpoints: 640px, 768px, 1024px, 1440px, and 1920px.
Lazy Loading
Add loading="lazy" to images below the fold. This defers loading until the user scrolls near the image, dramatically improving initial page load time. Never lazy-load above-the-fold images — they should load immediately for good LCP (Largest Contentful Paint) scores.
Impact on Core Web Vitals
Unoptimized images directly hurt LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift). Always specify width and height attributes to prevent layout shifts, and ensure the LCP image loads as fast as possible with proper sizing and preloading.
Start optimizing with our free Image Compressor — it reduces file size while preserving visual quality, right in your browser.