Short answer: Image compression makes image files smaller so pages load faster. Resize each image to the size it is shown at, use lossy compression for photos and lossless for line art or text, and check the result before you publish.
Lossy and lossless compression
| Compression | What it does | Best for | Formats |
|---|---|---|---|
| Lossy | Drops detail and some color information to shrink the file | Photos and images with lots of detail | JPEG, WebP, AVIF |
| Lossless | Keeps every pixel and stores each one by its difference from its neighbors | Line art, sharp edges and text | GIF, PNG, WebP, AVIF |
From web.dev’s “Image performance” guide, read November 4, 2026.
Lossy artifacts are hard to see in detailed photos, but they show around sharp edges and text. web.dev asks you to always confirm that a compressed image still meets your quality standard.
Resize before you compress
The first saving comes from the image’s dimensions. An image shown in a 500 pixel box only needs 500 pixels; a 1,000 pixel file is twice as large as needed.
Screens with a higher pixel density need more: twice the pixels on a 2x screen. On 3x screens, web.dev notes that most people can’t see the benefit, so a smaller file usually looks the same.
With the srcset attribute you list several versions of the same image, and the browser picks the one that fits the screen.
How to compress images for your website
- Pick the format: a photo as WebP or AVIF, a logo or icon as SVG or PNG.
- Resize the image to the largest size it is shown at, times the highest pixel density you want to serve.
- Compress it with a tool such as Squoosh or ImageOptim.
- Try a few quality levels and keep the smallest file that still looks right.
- Look at the result at full size, around edges, text and skin tones.
- Add srcset so phones get a smaller version than large screens.
- Run PageSpeed Insights and check what Lighthouse still flags.
Our WebP guide covers the format we use for our own photos, and our PNG, JPG or SVG guide covers the rest.
How Lighthouse checks your images
Lighthouse compresses each JPEG or BMP image on the page at a level of 85 and compares it with the original. If the saving is 4 KiB or more, it flags the image.
It also compares each image with the size it is rendered at, counting the screen’s pixel density, and flags it when the difference is 4 KiB or more. Since Lighthouse 13, both checks are part of its “Improve image delivery” insight.
What Lighthouse found on our own pages
On November 4, 2026, we ran four of our pages through PageSpeed Insights, on mobile and on desktop. Lighthouse estimated that better image delivery would save 191 KiB on mobile and 154 KiB on desktop across the four.
Most of that was size. On the mobile home, seven images of our photo wall are 480 pixels wide for a 189 pixel box. Our logo, a PNG, was flagged on every page for being larger than it is shown.
Compression came up for only three distinct images, the logo among them. Across five of our pages, 31 of the 32 image files were already WebP; the other one was the logo.
Before you upload an image
- The format suits the content: photo or line art.
- The file is no larger than the biggest size it is shown at.
- The quality was chosen by eye, not left at the default.
- Edges, text and faces still look clean at full size.
- Phones get a smaller version through srcset.
- PageSpeed Insights shows no image left to fix.
RememberOn our pages, resizing would save more than any quality setting. Fix the size before you touch the quality.
Image weight is one of the things our web design team checks before a page goes live.
Quick answers about image compression
What is image compression?
Making an image file smaller. Lossy compression drops detail you are unlikely to notice, which works best on photos. Lossless compression keeps every pixel, which matters for line art, sharp edges and text.
What quality setting should I use?
No single setting fits every image. Try a few levels and keep the smallest file that still looks right to you. For reference, Lighthouse tests JPEG images at a compression level of 85.
What size should a website image be?
The size it is shown at, times the screen’s pixel density: an image shown 500 pixels wide needs 1,000 pixels on a 2x screen. On 3x screens, most people can’t tell a smaller file apart.
Which tools compress images?
Squoosh, from Google’s web team, and ImageOptim both work for a small site. Image optimization services and plugins for systems such as WordPress can compress images as you upload them.
How do I know if my images are too heavy?
Run PageSpeed Insights on the page. Lighthouse lists the images worth fixing with their estimated savings, and flags an image when resizing or compressing it would save at least 4 KiB.
Sources
Read on November 4, 2026. web.dev: Image performance. Lighthouse: Efficiently encode images and Properly size images. MDN: Image file type and format guide. Our case: four of our pages in PageSpeed Insights and five read in a browser on November 4, 2026.