Gearboxly
ImagesPerformanceHow-to

How to Compress Images Without Losing Quality

By Gearboxly6 min read

Big images are the number one reason web pages load slowly — and the number one thing you can fix yourself. A single unoptimized photo can weigh more than an entire well-built page. The catch is doing it without the image turning into a blurry, blocky mess.

The good news: most images can shrink by 50–80% with no difference the eye can see. Here's how to compress images the smart way.

First, resize to the size you actually need

The biggest, easiest win isn't compression — it's dimensions. A photo straight off a phone can be 4000px+ wide, but if it displays at 800px on your site, you're sending five times more pixels than anyone sees. Resize first with the Image Resizer, then compress.

Rule of thumb: no image should be much wider than the space it fills. Full-width hero? ~2000px max. In-article image? ~1200px. Thumbnail? ~400px.

Then compress

With the dimensions right, run the image through the Image Compressor. It reduces file size in your browser — nothing is uploaded — and for photos you can usually drop a lot of weight before any quality loss shows.

Image CompressorShrink JPG, PNG and WebP without uploading.

Choose the right format

Format matters as much as compression. Use the Image Converter to switch formats:

  • WebP — the best all-rounder for the web; smaller than JPG and PNG at the same quality. Use it wherever it's supported.
  • JPG — great for photographs; small files, but lossy, so don't re-save repeatedly.
  • PNG — use for graphics, logos and screenshots with sharp edges or transparency, not for photos.

Lossy vs. lossless — what's the difference?

Lossy compression (JPG, WebP) throws away detail the eye barely notices to get much smaller files — perfect for photos. Lossless compression (PNG) keeps every pixel exact but shrinks less — right for graphics where crisp edges matter. Matching the method to the image is how you get small files that still look great.

A quick workflow

  1. Resize the image to the largest size it will actually display at.
  2. Convert photos to WebP (or JPG); keep graphics as PNG.
  3. Compress, checking the preview so quality stays acceptable.
  4. Re-check your page speed afterward with the Page Speed Test.

Tools mentioned in this post

Image CompressorShrink JPG, PNG and WebP without uploading.Image ResizerResize images to any dimensions.Image ConverterConvert between JPG, PNG and WebP.Page Speed TestMeasure Core Web Vitals and Lighthouse scores.

Frequently asked questions

You can remove most of the file size with no visible loss, especially after resizing to the right dimensions. Extreme compression will eventually show, so use the preview to find the sweet spot.

WebP is usually the smallest for the same quality and is well supported on the modern web. JPG is a solid fallback for photos.

No. The Image Compressor and Converter run in your browser; your images never leave your device.

Resizing changes the pixel dimensions; compressing reduces file size at the same dimensions. Do both — resize first, then compress.

Usually they're far larger in dimensions and file size than they display at. Resize and compress them, then re-test your Core Web Vitals.

Keep reading