WebP vs JPG vs PNG: Which Image Format Should You Use?

Choose the format by the image's content and where the file will go. A photograph can tolerate some compression that would make a spreadsheet's decimal points hard to read. A logo used on several background colors needs transparency, even if a JPG would be small enough.

How do WebP, JPG and PNG differ?

JPG and JPEG are names for the same format. PNG preserves the pixels supplied to its encoder; that does not undo earlier resizing or editing. WebP supports two compression modes, so its extension alone does not tell you whether the image was saved losslessly. MDN's image format guide explains the formats and their browser support.

When should a photograph stay JPG?

JPG is a practical choice for a photograph going to an email recipient, print service or upload form that explicitly accepts it. Its compression suits natural textures and gradual color changes. For a website that accepts WebP, compare a lossy WebP export with your JPG before replacing it. Export each candidate from the best original you have; repeatedly editing and saving the JPG can add compression damage.

Keep the JPG when it already fits the upload limit and the WebP copy offers no worthwhile reduction at the quality you need. Johannes Siipola's 2020 Kodak-image comparison found that the result varied with image dimensions and the JPEG encoder used. That comparison shows why export conditions matter; it does not establish which current encoder will produce the smallest file.

A 4,000-pixel original intended for an 800-pixel website slot also needs an appropriate delivery size. Choose the output dimensions for that display first, then use those same dimensions for both JPG and WebP copies.

Which format keeps small screenshot text readable?

Start with PNG or lossless WebP for interface captures, diagrams and spreadsheets. Lossy JPG can leave halos or colored smudges around letters. A screenshot can look acceptable as a thumbnail while a minus sign or decimal point becomes hard to distinguish.

If text looks worse after a lossless export, compare the original and saved pixel dimensions. Reducing a 2,000-pixel-wide capture to 500 pixels removes detail before the file is encoded. Saving that smaller image as PNG preserves the smaller image. Crop to the relevant cells or keep enough resolution for the text to remain readable at its intended display size.

For a chart that will be revised next month, the format choice comes after deciding whether to send a static picture or editable data. Our guide to linking, embedding or pasting an Excel chart into PowerPoint covers that decision.

What happens to a transparent logo when you convert it?

Use PNG or WebP when the background must show through the logo. JPG has no alpha channel, so converting a transparent image to JPG requires filling the transparent area with a background color. A white fill can blend into a white page and then appear as a rectangle on a dark slide.

For a logo that appears on both white and dark backgrounds, retain a transparent PNG or lossless WebP. Inspect the saved file on both backgrounds, especially around thin strokes and soft shadows. Even a format that supports transparency produces an opaque image if the exporter flattens it onto a solid background.

Recommended format by content

How should you compare a photo, screenshot and logo?

The following are worked decision examples, not measured conversions. Make the candidate files from the same source at the dimensions shown; record their actual file sizes after exporting.

Match the pixel dimensions and zoom level before judging the formats. A smaller WebP compared with a full-resolution PNG mixes the effect of resizing with the effect of compression. Likewise, quality 80 in two different exporters is not a promise of equal visual quality.

Why did converting to WebP make the file larger?

Google's WebP FAQ describes two useful counterexamples. A heavily compressed JPG can grow when converted to lossless WebP because the new file preserves the decoded pixels, including the JPG's artifacts. A PNG containing only a few colors can also grow in lossy WebP when compression introduces extra color variation into an otherwise simple image.

For that JPG, compare a lossy WebP copy or keep the JPG if it already meets your needs. For the simple PNG, compare lossless WebP or retain PNG. Increasing file size does not restore detail lost earlier. Converting JPG to PNG has the same restoration limit, although PNG can be useful as a working copy that avoids further lossy saves.

Google's compression study compares files under specified encoder and quality-metric conditions. Its savings are not a forecast for an individual export. Start with your own output requirements and compare the saved files.

Will WebP work in the app or site receiving the image?

Current Chrome, Edge, Firefox and Safari support WebP. That browser support does not mean every upload form, email app or document workflow accepts the file. Check the destination's allowed formats and open the uploaded result there. For an unknown photo workflow, keep a JPG copy; for transparent graphics or screenshots, keep PNG.

On a website serving older clients, use a JPG or PNG fallback where needed; the HTML picture element lets a browser select a supported source. For a file handoff, send the accepted format directly. Renaming logo.webp to logo.jpg does not convert its contents.

Which export settings should you try first?

In an editor, open the original and use Save As or Export to select the output format. Choose lossy compression for a photo and lossless mode for text or precise graphics. Keep the dimensions fixed for the first comparison, then adjust one setting at a time.

With Google's WebP command-line tools installed, these are example commands for still images:

cwebp -q 80 photo.jpg -o photo-web.webp
cwebp -lossless capture.png -o capture-lossless.webp
dwebp logo.webp -o logo.png

cwebp uses lossy quality 80 in the first command and lossless encoding in the second. Adjust the photo setting after comparing its detail and file size. Lossy quality 100 is still distinct from lossless mode. dwebp writes PNG by default in the third command and does not support animated WebP.

Lossless pixels and copied metadata are separate settings. cwebp defaults to copying no metadata. Add -metadata icc to request copying an existing ICC color profile; this does not create a missing profile or convert the image to another color space. The webpmux command webpmux -info photo-web.webp shows the WebP's structure. Keep the original if capture or editing metadata matters, and compare the required fields separately.

The existing DIMA Tools WebP converter is another place to make a copy. Judge its downloaded result by the same dimensions, transparency and destination requirements.

What should you check before sending the saved copy?

Reopen it, read its smallest text and compare the backgrounds and file size. If it exceeds an upload limit, reduce photo quality or dimensions in separate steps so you can see which change harms the result. Upload the chosen copy and open the result in the receiving service.

For a screenshot going into a client presentation, also remove cropped picture areas before sharing the PowerPoint file. Choosing PNG or WebP does not decide whether the presentation retains hidden content. Keep the image master and export a fresh copy when a different destination needs another format.

Frequently asked questions