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

I wasted 20 minutes last week saving a chart as JPG, uploading it to a slide deck, then zooming in and seeing colored halos around every label. Saved it as PNG instead, the file was 6x larger, but the text was perfect. That trade-off - file size vs fidelity - is the entire story of image formats. Here is how each one actually behaves, tested with real files instead of theoretical specs.

The 30-second version

JPG for photographs. PNG for screenshots, text, and transparency. WebP when you control the platform (your own website, app assets) and want 25-35% smaller files than JPG without visible quality loss. That covers 90% of decisions. The rest of this post is about the other 10% where the choice is not obvious.

How each format compresses data

JPG: lossy, block-based

JPG divides the image into 8x8 pixel blocks and approximates each block's colors using a discrete cosine transform. High-frequency detail (sharp edges, single-pixel lines, fine textures) gets discarded first. At 92% quality, this is invisible on photographs - a sunset, a face, a landscape. At 92% on a screenshot of 12px monospace code, every character gets a faint colored halo where the sharp black-to-white transition confused the block encoder.

The compression ratio is impressive. A 4000x3000 phone photo at 92% quality is typically 2-4 MB. The same image as uncompressed bitmap would be 36 MB. JPG throws away roughly 90% of the data and the result looks identical at normal viewing size. The problem only appears when you zoom to 200%+ or when the image has content that JPG handles poorly - text, line art, pixel-level precision.

PNG: lossless, row-based

PNG compresses each row of pixels using a prediction filter (guess the next pixel from its neighbors) and then deflate compression (the same algorithm as ZIP files). No pixel data is discarded. A pixel that was #FF3322 in the source will be #FF3322 in the PNG. The tradeoff is file size.

PNG excels when the image has large areas of identical color - a white background, a solid blue header, a UI with flat design. A 1920x1080 screenshot of a code editor is 300-500 KB as PNG. The same screenshot saved as JPG at 92% is 150-250 KB but has visible artifacts around every character. A photograph is 15-25 MB as PNG versus 2-4 MB as JPG - PNG is 5-8x larger on photographic content because there are no large uniform areas for the prediction filter to exploit.

WebP: both lossy and lossless

WebP supports two modes. Lossy WebP uses a prediction-based encoder (derived from the VP8 video codec) that handles edges and gradients better than JPG's 8x8 block approach. Lossless WebP uses a different algorithm optimized for web graphics. Google's benchmarks claim 25-34% smaller files than JPG at equivalent SSIM scores. In my testing with 50 phone photos, the savings averaged 28% - close to Google's numbers.

The catch is ecosystem support. Every browser displays WebP. But Photoshop only added WebP export in 2022. Many email clients strip or fail to render WebP attachments. Government and university upload forms almost universally reject WebP. It is a great format for serving images on your own website. It is a risky format for sending to someone else.

Real file size comparison

I tested 5 different images representing common use cases. Each was saved in all three formats at settings that produce equivalent visual quality.

WebP wins on file size in 4 out of 5 cases. PNG wins for tiny pixel art because deflate compression is extremely efficient on images with very few distinct colors and long horizontal runs of identical pixels. JPG does not win any category on file size alone, but it wins on compatibility - every device, app, and service on the planet accepts JPG.

Note the code editor screenshot: JPG is larger than PNG. This surprises people. JPG's block-based compression generates artifacts around sharp text edges, and those artifacts actually consume bytes. The encoder spends data representing noise it created. PNG does not create noise, so it stores only the actual content - which, for a screenshot with flat backgrounds and crisp text, compresses very efficiently.

When JPG is the right choice

• Photographs from cameras or phones. JPG was designed for photographic content. The block-based compression aligns with how photos look - smooth gradients, complex textures, no perfectly sharp edges. A landscape photo at 92% quality is indistinguishable from the original.
• Email attachments. Every email client on every platform renders JPG. File sizes stay reasonable for attachment limits (typically 25 MB for Gmail).
• Form submissions and document uploads. Government sites, university portals, and HR systems almost universally accept JPG. Many reject PNG (too large) and WebP (unknown format).
• Social media posts. Instagram, Facebook, Twitter, and WhatsApp all accept JPG. Some convert uploaded PNGs to JPG server-side anyway, adding their own compression on top of yours.

When merging photos into a single image, JPG is almost always the right output. The JPG Joiner accepts JPG, PNG, and WebP input and outputs a single JPG at your chosen quality level. For a photo collage at 92%, the merged output will be 40-60% smaller than the combined input files with no visible difference. See the full comparison of merging methods for benchmarks.

When PNG is the right choice

• Screenshots with text. Terminal output, code editors, chat conversations, error messages. Any image where text readability matters more than file size. JPG compression creates colored halos around character edges that become distracting in side-by-side or vertical stacks of screenshots.
• Logos, icons, and UI assets. Flat-color graphics with precise edges need lossless storage. A logo saved as JPG at 92% develops a faint haze around the letterforms - invisible at small sizes, obvious at large sizes or on high-contrast backgrounds.
• Transparency. JPG has no alpha channel. If your image has a transparent background - a logo, a product photo with the background removed, an icon - PNG is the minimum format. WebP also supports transparency, but PNG has broader compatibility in design tools and print workflows.
• Pixel art and retro game assets. Each pixel is a deliberate color choice. JPG compression shifts pixel colors to approximate the block average, destroying the art. PNG preserves every pixel value exactly.
• Images that will be edited further. If someone will open the file in Photoshop, add text, crop, and re-save, PNG prevents generation loss at each save cycle. Repeatedly saving a JPG degrades quality each time.

For merging screenshots or graphics, use the PNG merger - it outputs lossless PNG and preserves transparency. The quality difference is visible: combining two screenshots side by side as JPG creates a haze around every character that PNG avoids entirely.

When WebP is the right choice

• Your own website. If you control the HTML, serve WebP. A portfolio site with 40 photos saves 800 KB-1.2 MB per page load compared to JPG. Over 10,000 monthly visitors, that saves 8-12 GB of bandwidth per month.
• App assets. Android and iOS both support WebP natively. Smaller assets mean faster app downloads and less storage on the user's device.
• CDN-served images. Cloudflare, AWS CloudFront, and Fastly can auto-convert to WebP for supported browsers. You upload a JPG, the CDN serves WebP to Chrome/Firefox/Safari and JPG to everything else.

WebP is not yet a practical output format for image merging tools. Most browser-based tools, including the ones on this site, output JPG or PNG. You can convert the merged result to WebP afterward using the image resizer on this site (which handles format conversion alongside resizing), Squoosh by Google, or cwebp on the command line. For serving on your own site, that extra step is worth the 25-35% bandwidth savings.

Format decision tree

Run through these questions in order. The first "yes" gives you your format.

1. Does the image need transparency? Yes: PNG (or WebP if web-only).
2. Is it pixel art, a sprite sheet, or a diagram with single-pixel lines? Yes: PNG.
3. Is it a screenshot with readable text? Yes: PNG.
4. Will it be served on a website you control? Yes: WebP (with JPG fallback).
5. Is it a photograph? Yes: JPG at 90-92%.
6. Everything else: JPG. It works everywhere and the file size is reasonable.

Common mistakes and how they look

Saving a screenshot as JPG

The most frequent format mistake. A screenshot of a terminal with white text on a dark background saved as JPG at 92% develops a greenish-yellow halo around every character. The block encoder sees the sharp white-to-black transition and creates ringing artifacts. At 100% zoom on a 1080p monitor, it is subtle. At 200% or on a Retina display, every character looks like it is glowing. Save screenshots as PNG. Always.

Saving a photo as PNG

The reverse mistake. A 12-megapixel phone photo as PNG is 15-25 MB. The same photo as JPG at 92% is 2-4 MB with identical visual quality at any zoom level a human would use. Sending 5 PNG photos via email hits the 25 MB attachment limit with a single batch. As JPGs, you can send 6-12 photos in one email.

Re-saving a JPG as PNG to "improve quality"

This does not work. The JPG compression already discarded data. Saving the result as PNG preserves the degraded version perfectly - including all the compression artifacts. The file gets 5-10x larger, but the image looks identical. The only thing you gain is protection against further degradation if the file gets re-saved again. If you do need to convert, the JPG to PNG converter handles it in your browser without installing anything.

Using JPG for a logo

Logos have flat colors, precise edges, and often a transparent background. JPG handles all three poorly. The edges get fuzzy, the flat colors develop subtle noise, and the transparency is replaced with a white (or sometimes black) rectangle. Use PNG for logos, always. If someone sends you a logo as a JPG, ask for the PNG or SVG source.

Format compatibility when merging images

All three image merge tools on this site accept JPG, PNG, and WebP as input. You can mix formats freely in a single merge. The output format depends on which tool you use:

• JPG Joiner outputs JPG. Best for merging photos where file size matters. Quality slider lets you balance size vs detail.
• PNG Merger outputs PNG. Best for merging screenshots, diagrams, and graphics where every pixel matters. No quality slider because PNG is always lossless.
• JPG to PDF outputs PDF with embedded JPG data. Best when you need a multi-page document for printing or form submissions.

If you have a PDF and need to go the other direction - extracting pages as images - the PDF to JPG converter renders each page at configurable resolution and quality.