JPG vs PNG: Which Image Format Should You Use?

· 2 min read

JPG and PNG are the two most common image formats on the web, and choosing the wrong one is the source of many blurry logos and enormous photos. The difference comes down to how each format compresses images.

JPG: small files for photographs

JPG (also written JPEG) uses lossy compression. When an image is saved, the encoder simplifies areas of fine detail and colour variation that the eye is not very sensitive to. You choose how aggressive this is with a quality setting.

  • Strengths: very small files for photos, supported by every device and program.
  • Weaknesses: no transparency; sharp edges and text can develop fuzzy “halos”; quality drops a little each time you edit and re-save.

PNG: exact pixels and transparency

PNG uses lossless compression. Every pixel is stored exactly, and the file is compressed the way a ZIP file is, without throwing anything away.

  • Strengths: perfect quality, crisp text and edges, full transparency support, no loss when re-saving.
  • Weaknesses: photographs become very large — often five to ten times the size of a good JPG.

Quick rules

  • Photo of people, places or products? Use JPG.
  • Logo, icon or anything that needs a transparent background? Use PNG.
  • Screenshot of an app or document? Use PNG for sharp text — or a high-quality JPG if the size matters more.
  • Diagrams, charts and illustrations with flat colours? PNG is usually both sharper and smaller.
  • An image you will edit repeatedly? Work in PNG and export to JPG at the end.

What about WebP?

WebP can work in both lossy and lossless modes and supports transparency. For websites it often beats both JPG and PNG on file size. Support is now very good, but some older software and a few upload forms still only accept JPG or PNG. Read more in our guide to WebP.

Converting between them

  • PNG to JPG makes photos saved as PNG much smaller. Transparent areas are filled with a colour you choose.
  • JPG to PNG is useful when software requires PNG, or before repeated editing. It will not restore detail that JPG compression already removed.