Published on April 24, 2025 Last Updated on July 1, 2025
Written by
Morgan Frank - Specialist in Page Speed
Images are often the largest contributors to a website’s page size, and therefore, a major factor in page speed.
Unoptimized images can dramatically slow down your website, leading to a poor user experience, higher bounce rates, and lower search engine rankings. This masterclass will cover everything you need to know to optimize your images for speed and quality, including modern image formats (WebP and AVIF), compression techniques, responsive images, and lazy loading.
Key Takeaways
Use WebP as your primary image format – offers significantly better compression than JPEG/PNG with comparable quality
Compress images without over-doing it – find the sweet spot between file size and visual quality using tools like TinyPNG or Squoosh
Implement responsive images with srcset – serve different image sizes to different devices to avoid sending large images to mobile screens
Add lazy loading to below-the-fold images – use loading="lazy" attribute to defer loading images until users scroll near them
Never lazy load above-the-fold images – images visible on initial page load should load immediately to avoid hurting user experience
Automate your optimization workflow – use build tools, plugins, or automated processes to compress and optimize images consistently
Test and monitor your results – measure page speed improvements and check image quality across different devices after implementing optimizations
Why Image Optimization is Crucial
Before we dive into the techniques, let’s reiterate why image optimization is so important.
User Experience: Faster loading images lead to a smoother, more enjoyable user experience.
SEO: Google considers page speed a ranking factor, and images play a significant role.
Bandwidth Savings: Smaller images use less bandwidth, which can save you money on hosting costs and improve the experience for users on limited data plans.
Mobile Performance: Optimizing images is especially crucial for mobile devices, which often have slower connections and smaller screens.
1. Choosing the Right Image Format
The first step to image optimization is choosing the right file format. Different formats offer different levels of compression and quality.
JPEG (JPG): The most common format for photographs and images with many colors. It uses lossy compression, meaning some image data is discarded to reduce file size. You can adjust the compression level to balance quality and file size.
PNG: Best for images with sharp lines, text, or areas of solid color (like logos or illustrations). It uses lossless compression, meaning no image data is lost, but file sizes are generally larger than JPEGs.
GIF: Supports animation and transparency, but it’s limited to 256 colors. Generally not recommended for photos. Use for simple animations.
WebP: A modern image format developed by Google that offers significantly better compression than JPEG and PNG, with comparable or better quality. It supports both lossy and lossless compression, as well as animation and transparency. WebP should be your primary choice for most images.
AVIF: An even newer image format that offers even better compression than WebP, with excellent quality. It’s gaining support in modern browsers, but it’s not as widely supported as WebP yet. AVIF is the future, but check browser compatibility before widespread use.
Recommendation:
Prioritize WebP: Use WebP for most images on your website.
Consider AVIF: If you need the absolute best compression and your target audience uses browsers that support AVIF, use it. Provide a fallback to WebP or JPEG for older browsers.
Use JPEG for photos when WebP/AVIF are not an option.
Use PNG for images with sharp lines/text or transparency when WebP/AVIF are not suitable.
2. Image Compression: Reducing File Size
Even after choosing the right format, you can further reduce image file sizes through compression.
Lossy Compression: Reduces file size by discarding some image data. This can result in a slight loss of quality, but with careful adjustment, the difference is often imperceptible.
Lossless Compression: Reduces file size without discarding any image data. The quality remains identical, but the file size reduction is usually less dramatic than with lossy compression.
Tools for Image Compression:
1. Online Tools:
TinyPNG/TinyJPG: Excellent for compressing PNG and JPEG images.
Squoosh (by Google): Supports various formats (including WebP and AVIF) and offers advanced compression options.
ImageOptim (Mac): A desktop application for lossless image compression.
2. Command-Line Tools:
cwebp (for WebP): Google’s command-line tool for converting images to WebP.
cavif (for AVIF): A command-line tool for converting images to AVIF.
3. WordPress Plugins:
ShortPixel: Supports various formats
Smush: Supports various formats.
Best Practices for Compression:
Experiment with different compression levels: Find the sweet spot between file size and visual quality.
Don’t over-compress: Excessive compression can lead to noticeable artifacts and a poor user experience.
Automate compression: Use build tools or plugins to automatically compress images as part of your workflow.
3. Responsive Images: Serving the Right Size
Responsive images are about serving different image sizes to different devices, based on screen size and resolution. This prevents you from sending a huge image to a small mobile device, which wastes bandwidth and slows down loading.
How Responsive Images Work:
srcset attribute: The srcset attribute on the tag allows you to specify multiple image sources with different sizes. The browser chooses the most appropriate image based on the device’s characteristics.
sizes attribute: The sizes attribute tells the browser how wide the image will be displayed at different viewport sizes. This helps the browser choose the correct image from the srcset.
<picture> element: The <picture> element provides even more control, allowing you to specify different image sources for different media queries (e.g., different images for different screen orientations or pixel densities)
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
sizes="(max-width: 600px) 500px,
(max-width: 1200px) 1000px,
1500px"
alt="Description of the image">
4. Lazy Loading: Deferring Offscreen Images
Lazy loading is a technique that defers the loading of images that are below the fold (not initially visible in the viewport) until the user scrolls near them. This dramatically improves initial page load time, as the browser doesn’t have to download all images at once.
How Lazy Loading Works:
loading=”lazy” attribute: The easiest way to implement lazy loading is to add the loading=”lazy” attribute to your tags. This is supported by most modern browsers.
<image src=”image.jpg” loading=”lazy” alt=”Description”> JavaScript Libraries: For more advanced control or for older browsers, you can use JavaScript libraries like lazy sizes.
Best Practices for Lazy Loading
Use loading=”lazy” for simple implementations.
Consider a JavaScript library for more control or older browser support.
Provide a placeholder: Use a low-quality image placeholder or a solid color background while the image is loading.
Don’t lazy load above-the-fold images: Images that are visible in the initial viewport should not be lazy-loaded, as this will negatively impact LCP.
Key Takeaways
Image optimization is essential for website speed and user experience.
Use WebP as your primary image format, and consider AVIF for even better compression.
Compress your images to reduce file size without sacrificing too much quality.
Use responsive images to serve the right image size to different devices.
Implement lazy loading to defer the loading of offscreen images.
Conclusion
By mastering these image optimization techniques, you can significantly reduce your website’s page size, improve loading times, and create a better experience for your users. Don’t underestimate the impact of optimized images – they’re often the key to unlocking a faster, more efficient website. Remember to test your changes and monitor your page speed metrics to ensure your optimizations are effective.
Determined to change that, he built RapidLoad — a smart, AI-driven tool that empowers site owners to dramatically improve speed scores, enhance user experience, and meet Google’s Core Web Vitals without needing to touch a single line of code.
