fixmint

JPG vs PNG vs WebP: which image format to use

· 4 min read

Use JPG for photos, PNG for screenshots, logos and anything that needs transparency, and WebP when the destination accepts it and you want smaller files. The choice comes down to two things: whether a format is lossy or lossless, and whether it supports transparency. Pick the one that matches what the picture contains and where it will be shown.

Convert imageNeed a JPG, have a PNG — free, runs in your browserOpen →

Lossy and lossless in plain words

A lossy format throws away some detail to make the file smaller, and you choose how much. A lossless format keeps every pixel exactly, but it cannot shrink a photograph much because a photo has so much varied detail. JPG is lossy, PNG is lossless, and WebP can be either. Losses add up when the same file is saved again and again, so convert from the original each time.

Which format for which job

  • Photos: JPG. It is small, widely accepted and handles natural colour well.
  • Screenshots, diagrams and interface captures: PNG. Text and flat colour stay sharp.
  • Logos and cut-outs: PNG or WebP, because both keep transparent areas. JPG cannot hold transparency.
  • Pictures on web pages: WebP, with JPG or PNG kept as a fallback where a site needs it.
FormatCompressionTransparencyBest forWatch out for
JPGLossyNoPhotos, email, formsSpeckles around text, no transparency
PNGLosslessYesScreenshots, logos, diagramsLarge for photographs
WebPLossy or losslessYesWeb pages and modern appsSome older programs cannot open it
AVIFLossy or losslessYesCompact images in modern browsersLess support in older software

Browser and app support

Current major browsers display WebP, and many also display AVIF. Support in older browsers, email clients, desktop programs and upload forms is less certain, and forms often list the accepted types. Check the form first. When a form asks for JPG or PNG, use that format even if WebP or AVIF would be smaller.

Converting without losing too much

  • Keep the original file and convert a copy.
  • When converting a photo to JPG, use a high quality setting.
  • Converting a JPG to PNG does not restore detail that was already lost, so start from the best file you have.
  • Saving a transparent image as JPG fills the transparent areas with a solid colour, usually white or black.

If the goal is a smaller file, compress the image after converting. For the pixel size, see the guide to resizing for forms.

Choosing for email, printing and uploads

For email and everyday sharing, JPG is the safest choice for photos, because almost every program and service reads it. For graphics with sharp lines, such as a logo that has to be printed clearly, PNG is usually the better file. Forms and printing services sometimes list their own accepted formats, and those lists override any general rule.

A quick decision list

  1. Does the picture need transparency? Use PNG or WebP.
  2. Is it a photograph with no transparency? Use JPG, or WebP if the destination accepts it.
  3. Is it text, a screenshot or a diagram? Use PNG.
  4. Is it going to a form or an older program? Use whichever format the form or program lists.

Why file sizes differ between formats

No format is always the smallest. The same photo can be smaller as WebP or AVIF than as JPG at similar quality, and a simple flat graphic can be smaller as PNG than as JPG. The content of the picture decides most of it, so compare the actual files rather than trusting a rule of thumb.

Keep a lossless source

Where you can, keep an original in a lossless format, such as the PNG of a screenshot or the camera original. Make lossy copies for specific uses. That way you can always produce a JPG, a WebP or a smaller file later without starting from a damaged copy.

Transparency edge cases

A PNG or WebP keeps soft edges, so a logo with a faint shadow or a blurred edge stays smooth on a coloured background. JPG has no way to store that edge, so the shadow is either flattened onto a solid background or lost. If a logo must sit on different backgrounds, keep the transparent version as your master file and produce JPG copies only for places that require them.

Quick answers

Which is better, JPG or PNG? For photographs, JPG is the better choice because it is much smaller. For screenshots, text and transparent logos, PNG is better because the edges stay sharp.

Is WebP safe to use? On websites, yes, in current browsers. For email, forms and desktop programs, JPG is the safer choice unless the recipient confirms that WebP works.

Why does my transparent logo now have a white box around it? It was saved as JPG, which cannot store transparency. Save it again as PNG or WebP.

Cover of Digital Workflow ToolkitDigital Workflow Toolkit

Recipes, templates and patterns for chaining small file jobs (convert, rename, compress, merge) into workflows that run the same way every time.

$19.00 Get it on Gumroad →