Image Compression and WebP
Image compression is the process of reducing an image’s file size while keeping it looking good enough for the web. Modern formats such as WebP and AVIF compress far more efficiently than older JPEG and PNG files, so pages download faster.
Lossy and lossless compression
There are two broad types of compression:
- Lossy compression removes detail the eye is unlikely to notice. It produces much smaller files and suits photographs.
- Lossless compression keeps every pixel identical and shrinks the file by storing data more efficiently. It suits logos, icons and screenshots with sharp edges.
Most web photos can be compressed noticeably with little or no visible loss, especially when quality is checked by eye rather than left at the maximum setting.
WebP, AVIF and older formats
WebP is an image format developed by Google that supports lossy and lossless compression, transparency and animation. It is typically smaller than an equivalent JPEG or PNG and is supported by all major modern browsers. AVIF is a newer format that often compresses even better, though encoding is slower. JPEG remains fine for photos when well compressed, PNG for simple graphics needing transparency, and SVG for logos and icons drawn as vectors.
Why it matters for SEO
Images are often the heaviest part of a page. Oversized files slow page speed.
They are also a common cause of a poor Largest Contentful Paint, because the largest element is frequently a hero image.
Faster images help user experience on mobile and support your Core Web Vitals.
Google Images can index WebP and AVIF files, so switching format does not harm image SEO.
How to optimise images
- Resize images to the largest size they will actually display. A 4,000 pixel wide photo in an 800 pixel column wastes data.
- Use
srcsetandsizesso phones download smaller versions than desktops. - Convert photos to WebP or AVIF, keeping a JPEG fallback through the
<picture>element if you need to support very old browsers. - Choose a sensible quality setting and compare the result by eye.
- Strip unnecessary metadata such as camera details.
- Automate the process with your CMS, an image plugin or an image CDN that converts and resizes on the fly.
- Combine compression with lazy loading for images further down the page.
How to check your images
Run key templates through PageSpeed Insights, which flags images that could be smaller, served in a modern format or sized more appropriately. Browser developer tools show each image’s file size and dimensions in the Network tab, making oversized files easy to spot. Start with the templates that get the most traffic.
Common mistakes
- Uploading images straight from a camera or stock site without resizing.
- Over-compressing product photos until they look blurry, which can hurt sales.
- Using PNG for large photographs, which creates huge files.
- Forgetting the basics: descriptive file names and alt text still matter after conversion.
Key Takeaways
- Image compression reduces file size while keeping images visually acceptable.
- Lossy suits photos, while lossless suits logos and sharp graphics.
- WebP and AVIF are usually much smaller than JPEG and PNG.
- Heavy images are a common cause of poor LCP and slow pages.
- Resize first, then convert and compress, ideally automatically.
Related Terms
Curious how this applies to your website? Request a free SEO check-up, or keep learning in the SEO Encyclopedia.