JPEG, PNG or WebP? Choose an image format for the job

There is no single best format for every image. A transparent product cut-out, a holiday photo and a screenshot of small text have different priorities. Decide which details must survive before trying to reduce the file size.

A task-based starting point

JPEG is common for photographs, normally uses lossy compression and does not retain alpha transparency. PNG is useful for transparency and lossless detail. WebP supports lossy and lossless modes plus transparency. The receiving application also needs to support the chosen format.

References: MDN — Image File Type and Format Guide · Google for Developers — WebP

Dimensions are not file size

Dimensions such as 1600 × 1000 describe the pixel grid. A size such as 450 KiB describes stored data. Resizing removes pixels; compression settings change how pixels are stored. Equal dimensions do not imply equal file sizes.

For a small screen placement, start with appropriate dimensions. For print, relate pixels to the intended size: 1800 pixels at 300 pixels per inch gives a theoretical width of 6 inches. That is a density calculation, not a guarantee of printer or source-image quality.

What conversion can and cannot recover

Converting JPEG to PNG cannot restore detail already discarded. Converting a transparent image to JPEG requires a background in place of transparency. Keep the original and inspect the output rather than trusting its extension.

Check the intended viewing size, then zoom in on text and edges. Look at smooth gradients, logos and transparent areas. A slightly smaller file is not better if a label becomes unreadable.

References: MDN — Image File Type and Format Guide

Worked example: a logo on a coloured card

A transparent logo is 1200 × 800 pixels and will display at 300 pixels wide. Try a 600 × 400 version to provide twice the display dimensions where appropriate, retaining a transparency-capable format.

Place it on both light and dark backgrounds. A white rectangle or edge halo is a reason to revisit the background and conversion. Compare clarity with file size rather than assuming a fixed saving for every image.

More related tools

References