Image compression is the process of making image files smaller. Lossless compression removes redundant data without changing a single pixel; lossy compression discards detail the eye is unlikely to notice for much larger savings. Images are often the heaviest part of a page, so compressing and sizing them properly is one of the simplest ways to improve load times and Largest Contentful Paint.
Lossy vs lossless
Photos and screenshots with gradients compress well with lossy settings. Logos, icons and diagrams with flat color are often better as SVG or as lossless PNG or WebP. Pick a quality setting by eye on real images rather than a single number for everything.
Compression is only part of it
A well-compressed image that is twice the size it displays at still wastes bytes. Serve images close to their displayed size, and let the browser choose between sizes with srcset and sizes.
- Resize to the largest size actually displayed
- Use modern formats such as WebP or AVIF
- Strip metadata you do not need
- Automate it in the build or through an image CDN
<img
src="/screens/reports-800.webp"
srcset="/screens/reports-400.webp 400w, /screens/reports-800.webp 800w, /screens/reports-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="500"
alt="Revenue report with monthly breakdown">Checking your images
Lighthouse flags images that are oversized or could be encoded more efficiently. Browser dev tools show the transferred size of each image. Many frameworks and image CDNs resize and compress on request, which removes the need for manual work, but check the output quality and cache settings.
Example
Uncompressed product screenshots
Ledgerfern's designers export product screenshots as full-resolution PNGs, several megabytes each. Moving the blog and feature pages to the framework's image component, which serves resized WebP or AVIF versions, cuts page weight sharply with no visible difference at normal viewing size.
Common mistakes
Over-compressing text in screenshots
Heavy lossy compression blurs UI text. Check screenshots at real size and raise quality if needed.
Serving one huge image to every device
Phones download the desktop size unless you provide srcset options.
Questions
Smaller images load faster, which helps users and page speed. Image search visibility depends more on alt text, surrounding content and the image being crawlable.
