The aim of compression is not the smallest possible file. It is the smallest file that still looks right where it appears.

Resize before compressing

A large photo shrunk by the browser still downloads at full weight. Scale the image to roughly twice its display width at most, then compress. This alone often cuts file size by more than quality settings do.

Pick the format for the content. Photos suit JPEG or WebP. Flat graphics and text suit PNG or lossless WebP. Choosing a poor format can double the file size for no visible gain.

Try a moderate quality first

For lossy formats, a quality setting around 70 to 85 is a typical starting range. Export at a few levels and compare. The best value depends on the image: smooth skies show artefacts sooner than busy textures.

Compare at real size. Zoom to 100 percent, or view the page the way a visitor does. Pixel-peeping at 400 percent makes harmless differences look serious. Watch for banding in gradients, blocky areas around edges and smudged text.

Use a tool that suits your workflow

The Image Compressor & WebP Converter lets you adjust quality and convert formats, so you can see the size effect immediately.

Protect your originals. Keep the uncompressed source files. Repeated compression of an already-compressed image degrades it further.

An example workflow

Start with a 3000-pixel photo of 2.8 MB for a 760-pixel column. Resize to 1520 pixels wide, which is twice the column for sharper screens. Export as WebP at quality 80, giving around 150 to 250 KB depending on the photo. Compare with the original at normal zoom. If the sky looks banded, raise the quality to 85. If it looks fine, try 75. Stop when the next step shows a visible difference.

Batch work and consistency

If you publish often, set one standard for each image type, such as article photos at 1520 pixels and quality 80, screenshots as lossless WebP at the real size, and thumbnails at 400 pixels. Applying the same rules makes pages look consistent and removes guesswork.

Images with text

Screenshots and graphics that contain text suffer from heavy lossy compression, because the blur around letters is easy to see. Use lossless formats or high quality settings for these, and keep the display size close to the file size. Sharp text matters more than saving a few kilobytes.

Quality by image type

Photographs with smooth areas, such as skies and skin, show artefacts first and may need a higher quality setting. Busy textures like foliage hide artefacts well and can be compressed harder. Images with text or sharp lines need a lossless setting or very high quality. Small thumbnails can use a lower setting, because the eye cannot judge detail at that size.

A command-line option

If you prefer the command line, the free cwebp tool from Google converts to WebP:

cwebp -q 80 -resize 1520 0 photo.jpg -o photo.webp

This resizes to 1520 pixels wide, keeps the aspect ratio and compresses at quality 80. Run it on a copy, and compare the result with the original.

Verifying the saving. After compressing a batch, compare folder sizes before and after. Open three results at full size and check them. If one looks poor, redo only that one at a higher setting. Record the settings that worked so you can repeat them.

Measure the outcome

Check the total image weight on the page before and after, and run a speed test. A few oversized images are usually responsible for most of the weight, so start with those.