Image compression
Image compression is the process of reducing an image file's size, by resizing it, removing unnecessary data and encoding it efficiently, so web pages load faster without a visible drop in quality.
Images are usually the heaviest part of a web page, and the most common cause of slow small-business sites is photos uploaded straight from a camera or phone. Compression fixes this. It comes in two kinds: lossless, which shrinks the file without changing a single pixel, and lossy, which discards detail the eye barely notices for much larger savings.
Compression is often confused with resizing, but they are separate steps. A photo several thousand pixels wide shown in a space a few hundred pixels wide is wasteful however well it is compressed. The right order is resize to the size actually displayed, then compress, then choose an efficient format such as WebP.
How it works
Lossless compression finds patterns in the image data and stores them more efficiently, and it strips out metadata such as camera settings and location that the web page does not need. The picture is identical; the file is smaller. PNG uses lossless compression, which suits logos, icons and screenshots with flat colours and sharp edges.
Lossy compression, used by JPEG and usually by WebP and AVIF, simplifies the image in ways people rarely notice, such as subtle colour variation in areas of fine texture. A quality setting controls how far it goes. Moderate settings usually look the same as the original at normal viewing size while being much smaller; very low settings produce blocky patches and smeared edges, called artefacts.
On the web, compression works alongside responsive images, where the HTML offers several sizes of the same picture and the browser downloads the one that fits the screen, so phones do not download desktop-sized images and large screens still get a sharp picture. This is often worth more than squeezing the quality setting further. Many CMS platforms, WordPress among them, create several of these sizes automatically on upload, and plugins or image CDNs can compress and convert images without manual work.
Example
A builder's portfolio page shows twenty project photos uploaded directly from a phone. Each is several thousand pixels wide and several megabytes, so the page takes a long time to load on mobile data and visitors leave before the gallery appears.
The images are resized to the largest size the layout ever shows, compressed at a moderate quality setting and converted to WebP, with the CMS producing smaller versions for phones. The gallery looks the same side by side with the originals, but the page downloads a fraction of the data. Combined with lazy loading for photos further down, the gallery now appears quickly even on a weak connection.
Why it matters for your business
Compressing images is usually the single cheapest speed improvement available to a small business site, and speed affects how many visitors stay and how Google judges your pages through Core Web Vitals. It also lowers bandwidth use on your hosting. The only real risk is overdoing it on images where quality sells, such as product photos or portfolio work, so check important images at full size after compressing, ideally on both a phone and a large screen. Google PageSpeed Insights lists images that could be smaller, which is an easy way to see whether yours need attention.
Common mistakes
- Uploading photos straight from a camera or phone at full resolution.
- Compressing so hard that product or portfolio photos look blurry or blocky.
- Saving photographs as PNG, which produces much larger files than JPEG or WebP for photos.
- Compressing images once and then letting new uploads skip the process.
Questions people ask
What is the difference between lossy and lossless compression?
Lossless compression shrinks a file without changing the image at all, so the result is identical to the original. Lossy compression removes detail that is hard to see, which gives much smaller files. Lossy suits photos; lossless suits logos, icons and screenshots.
How big should images be on a website?
There is no single correct number, but images should be no wider than the largest size they are displayed at, allowing extra for sharp screens, and compressed. Most photos on a typical page can be kept small enough that PageSpeed Insights no longer flags them.
Will compressing images reduce their quality?
Lossless compression does not change quality at all. Lossy compression does, but at moderate settings the difference is usually invisible at normal viewing size. Check key images such as product photos at full size after compressing and adjust the quality setting if needed.
