JPG vs PNG vs WebP: Which Image Format to Use and When

You export a picture and the dialog asks: JPG, PNG or WebP? Pick wrong and you get a 6 MB photo that won't attach to an email, a logo sitting on an ugly white box, or a file your printer's software refuses to open. The three formats were built for different jobs, and once you know the job each one does, the choice takes seconds.

The short answer

• A photograph you want to send, print or upload: JPG.
• A screenshot, diagram, logo or anything with a see-through background: PNG.
• An image for a website you control: WebP.
• Not sure where the picture will end up: JPG for photos, PNG for everything else. Both open everywhere.

The rest of this guide explains why, and what to do when the file you have is not the one you need.

Lossy and lossless: the one idea behind all three

Image formats shrink files in two ways.

Lossless compression packs the pixels more tightly without changing any of them. Open the file and you get back exactly what you saved, every time.

Lossy compression goes further by throwing away detail your eye is unlikely to miss. Files get much smaller, but the discarded detail is gone for good.

Which one you want depends on the picture. Mozilla's developer documentation puts it this way: photographs "can usually tolerate lossy compression", while for screenshots, diagrams, logos and line art you should "prefer lossless encoding", because blurring and coloured fringes around text and sharp edges are easy to see (MDN).

Keep that split in mind and the three formats fall into place.

JPG: built for photographs

JPG (also written JPEG – the two names mean the same format) is lossy, and it is very good at it. Skies, skin, grass and other smooth changes of colour compress to a small fraction of their original size before you notice anything. That is why cameras, phones and almost every upload form in the world use it.

Use JPG for: photos, scanned pictures, anything headed for email, a messaging app, a print shop or an online form.

Watch out for:

• No transparency. JPG has no way to store see-through pixels, so a cut-out logo saved as JPG gets a solid background.
• Fuzzy text. Sharp edges are where JPG compression shows first. A screenshot of a spreadsheet can pick up faint smudges around the letters.
• Repeated saving. Each time you open a JPG, edit it and save it again, a little more detail is lost. Keep an original and export copies from that.

PNG: every pixel kept

PNG is lossless. The W3C specification describes it as a format for "the lossless, portable, well-compressed storage of static and animated raster images", with an optional alpha channel for transparency (W3C). In plain terms: what you save is what you get back, and any pixel can be fully or partly see-through.

Use PNG for: screenshots, charts, diagrams, logos, icons, images with small text, and anything that needs a transparent background.

Watch out for:

• Huge photos. Lossless compression works well on flat areas of one colour and badly on the fine, random detail in a photograph. The same holiday picture can easily be five times bigger as a PNG than as a good JPG, with no visible gain.
• Upload limits. Because the files are large, PNG photos are the usual reason an attachment is "too big".

A quick test: if the image came from a camera, PNG is probably the wrong home for it. If it came from a screen or a design app, PNG is probably right.

WebP: smaller files for the web

WebP is the newest of the three. Google designed it for websites, and it can do both jobs: it has a lossy mode like JPG and a lossless mode like PNG, and both support transparency.

The appeal is size. According to Google, "WebP lossless images are 26% smaller in size compared to PNGs" and "WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index" (Google for Developers). On a page with twenty pictures, that is a real difference in loading time and mobile data.

Browser support is no longer a worry. Google lists native support in Chrome, Safari, Firefox, Edge and Opera (Google for Developers), and MDN recommends WebP or AVIF as the first choice for ordinary web images (MDN).

Use WebP for: pictures on your own website, blog or online shop, where you decide how they are served.

Watch out for: places that are not browsers. Older photo editors, some office software, print kiosks and plenty of upload forms still accept JPG and PNG only. A WebP saved from a website is a common source of "file type not supported" messages.

Side by side

Compression

• JPG: lossy
• PNG: lossless
• WebP: either

Transparent backgrounds

• JPG: no
• PNG: yes
• WebP: yes

Typical file size for a photo

• JPG: small
• PNG: very large
• WebP: smallest

Opens everywhere

• JPG: yes
• PNG: yes
• WebP: in browsers yes, elsewhere not always

Which format for which job

• Emailing or messaging a photo: JPG. Small, and nobody will have trouble opening it.
• Job, visa, exam or government upload forms: JPG unless the form says otherwise. Many of them list JPG/JPEG as the only photo type.
• Screenshot of an error, a chat or a table: PNG, so the text stays crisp.
• Logo or icon with a transparent background: PNG. On your own website, WebP does the same in fewer bytes.
• Product photos for an online shop: WebP on the site, with the JPG originals kept safely on your computer.
• Printing: JPG at high quality, or PNG for artwork with text. Check what the print shop asks for before sending WebP.
• An image you will keep editing: PNG, or your editor's own project file, until the final export.

Converting between the three

Having the wrong format is not a problem; switching takes a few seconds. The image converter on Fileora reads JPG, PNG, WebP, AVIF, BMP and GIF files and saves them as JPG, PNG or WebP. It works in your browser, so the pictures stay on your device instead of being sent to a server, and a whole batch can be downloaded as one ZIP.

The conversions people need most often:

• PNG photo too large to send? Turn the PNG into a JPG. Transparent areas are filled with white, since JPG cannot keep them, and the before-and-after sizes are shown next to each file.
• Speeding up a website? Run your pictures through JPG to WebP and compare the sizes. Start around 80% quality for photos and go lower only if the result still looks clean.
• Saved a WebP that nothing will open? WebP to JPG gives you a file every program and form accepts.

Converting does not change the width and height of the picture – only the format and the size on disk.

Three mistakes worth avoiding

Converting a JPG to PNG to "improve" it. The detail JPG removed is not stored anywhere, so no format can bring it back. You get the same picture in a much bigger file. The only good reasons to go from JPG to PNG are to stop further loss while editing, or because a program demands PNG.

Saving a logo as JPG. You lose the transparent background and gain smudges around the edges. Keep logos as PNG (or WebP on a website), and ask whoever made the logo for a vector version such as SVG if you need it at many sizes.

Deleting the original. Lossy conversion is a one-way street. Keep the camera file or the design export as your master copy, and treat every JPG or lossy WebP you make from it as a disposable copy for one purpose.

The takeaway

JPG, PNG and WebP are not rivals so much as tools for different jobs: JPG for photos that need to go anywhere, PNG when every pixel or a transparent background matters, WebP when the picture lives on a web page and loading speed counts. When a file arrives in the wrong one, convert a copy and keep the original – and you will rarely have to think about formats again.