Image formats explained: JPG, PNG, WebP, HEIC and SVG

Step by step

1. Identify what the image is. A photograph, a screenshot or flat graphic, a logo or icon, or an animation. The content decides the format more than anything else.
2. Identify where it is going. A website, an email, a print shop, a document, or long-term storage. Each has different constraints on size and support.
3. Pick the format from the table below. Photos to JPG or WebP, screenshots to PNG or WebP, logos to SVG, iPhone storage to HEIC, animations to a short MP4 or, if images only, GIF.
4. Convert in the browser. Drop the files on the matching Kilnfile tool: HEIC to JPG, PNG to JPG, JPG to PNG, WebP to JPG, JPG to WebP or SVG to PNG. Set the quality or width, click the convert button and download.
5. Resize and compress if it is for the web. Run the result through Resize Image to the display width and Compress JPG or Compress PNG, which together typically save 60 to 80 percent.

What is the difference between lossy and lossless?

A lossless format stores every pixel exactly, so you can open, edit and save a file a hundred times with no change. PNG and SVG are lossless. A lossy format throws away detail the eye is unlikely to notice in exchange for a much smaller file, and each save loses a little more. JPG, WebP (by default), HEIC and AVIF are lossy. Lossy formats suit photographs, where noise and fine gradients hide the loss; lossless formats suit screenshots, text and graphics, where lossy compression smears sharp edges and produces visible halos.

How do the formats compare?

The table summarises the seven formats you will meet in practice. Size figures are relative to JPG at equal visual quality for photographs; for graphics, PNG is the reference and WebP lossless is typically 20 to 30 percent smaller.

What do the same photo and screenshot weigh in each format?

Numbers make the trade-offs concrete. The same 1,200 px photo and the same 1,200 px screenshot were saved in each format at a matched visual quality. The photo rewards lossy formats; the screenshot punishes JPG, which cannot keep text edges crisp without a large file.

When should I use each format?

Photographs for the web or email: JPG at quality 75, or WebP at quality 80 if the destination serves it. Photographs for print: JPG at quality 90 or higher at the full resolution. Screenshots and interface graphics: PNG, compressed with Compress PNG in Lossy mode, or WebP. Logos and icons: SVG wherever the platform accepts it, because one file looks sharp at every size and is usually under 10 KB; where it does not, export a PNG at double the display size with SVG to PNG. Transparent images: PNG or WebP, never JPG, which fills transparent areas with a flat colour.

iPhone photos stay as HEIC on the phone, where the 50 percent saving is worth having, and become JPG when they leave for a Windows PC, a web form or anyone who is not on Apple hardware. Animations should be short MP4s wherever video is allowed, and GIFs only where it is not.

Is WebP safe to use everywhere yet?

For websites, yes. Every major browser has displayed WebP since Safari 14 in 2020, and WordPress, Shopify and Squarespace generate it automatically. Outside the browser it is patchier: older versions of Office, some email clients and many print shops still do not accept it, and Windows Photos needed an extension until recently. The practical rule is WebP for anything a browser will show and JPG or PNG for files that people will download, email or print. AVIF is a further 20 to 30 percent smaller than WebP but Safari only gained support in version 16, so serve it with a WebP or JPG fallback.

Frequently asked questions