Skip to main content

Optimizing images for the web

Techniques and tools to reduce the file size of your images without losing visual quality, for a faster site and better SEO.

Images often account for 50% of a page's weight. Optimize them. ## Modern formats ### WebP - 25-35% lighter than JPEG - Excellent browser support - Transparency supported ### AVIF - Even lighter than WebP - Growing support - Ideal for the future ## Optimization techniques ### Compression - TinyPNG for PNG/JPEG - Squoosh for conversion - ImageOptim for macOS ### Responsive images ```html ``` ### Lazy loading ```html ``` ## Appropriate dimensions Never serve a 2000px image for a 400px display. Generate multiple sizes. Optimized images = a fast site = better SEO.