Image Compression for Web: Keep Quality, Cut File Size

Large images are one of the most common reasons web pages load slowly. Compression reduces file size so pages load faster, which helps visitors on slow mobile connections and supports better user experience.

Lossy versus lossless

• Lossy compression removes some image data to shrink the file a lot. Quality loss is often invisible at sensible settings.
• Lossless compression reduces size without removing visual data, but savings are smaller.

For photos, lossy usually works well. For logos and screenshots with sharp edges, check the result carefully or use lossless.

Choose the right format

• WebP: a good default for photos and graphics, widely supported by modern browsers.
• AVIF: often smaller still, though tool and platform support varies.
• JPG: reliable for photos.
• PNG: suited to graphics needing transparency, though files can be large.
• SVG: ideal for logos and icons because it scales without losing sharpness.

Resize before you compress

A common mistake is uploading a 4000 px wide photo to display at 800 px. Resize the image to roughly the largest size it will appear, then compress. Allow extra width for high-density screens if needed.

A simple workflow

1. Export from your design tool at the actual display size.
2. Convert to WebP or an appropriate format.
3. Compress using a tool such as Squoosh, TinyPNG or a plugin.
4. Compare with the original at 100 percent zoom.
5. Use meaningful file names and alt text. See image SEO best practices.
6. Upload and test the page.

Helpful techniques

• Lazy loading: load images only when they are about to appear on screen.
• Responsive images: serve smaller versions to mobile devices.
• Set width and height: this prevents layout jumping while the page loads, which relates to Cumulative Layout Shift in Core Web Vitals.
• Do not lazy load the main hero image, as it should appear quickly.

WordPress users

Plugins can compress images automatically when you upload them and create WebP copies. Choose one reputable plugin, test it on a staging copy and check that nothing looks blurry.

A hypothetical example

A small furniture store uploads a 3 MB sofa photo for a product page. After resizing to the required width and converting to WebP, the file becomes a fraction of the original size and the page loads noticeably quicker on a phone. The team then repeats the process for all product photos.

For wider speed fixes, read our website speed optimization tips.