PNG vs JPEG vs WebP: The Only Export Rules You Need for Cutouts

Introduction

Choosing between PNG, JPEG, and WebP shouldn't require understanding compression algorithms. You just need to know which format works for your use case.

This guide gives you:

• A simple decision tree
• Copy-paste export presets
• What goes wrong with each format (and how to avoid it)

Quick Decision: Which Format?

Bottom line: Use PNG for transparent cutouts, JPEG for white-background marketplace photos, WebP when file size matters and you can provide fallbacks.

PNG: The Transparent Default

PNG (Portable Network Graphics) uses lossless compression and supports full alpha transparency.

When to Use PNG

• Cutouts with transparent backgrounds
• Logos, icons, graphics
• Images where edge quality matters
• When you'll edit the image again later

PNG Specifications

PNG Strengths

• No quality loss — Export as many times as you want
• Perfect edges — No compression artifacts around cutout edges
• Full transparency — Smooth anti-aliased edges against any background

PNG Weaknesses

• Large file sizes — Lossless = more data
• Overkill for photos — Photos don't need lossless precision

Source: MDN Image Format Guide, W3C PNG Specification

JPEG: When White Backgrounds Are Fine

JPEG uses lossy compression and does not support transparency.

When to Use JPEG

• Marketplace listings with white backgrounds (eBay, Amazon, Etsy)
• Product photos where transparency isn't needed
• When file size matters more than edge precision
• Photographs (gradual tones compress well)

JPEG Specifications

JPEG Strengths

• Small file sizes — Great for web performance
• Photos compress well — Gradual color transitions hide compression
• Universal support — Works everywhere, no fallbacks needed

JPEG Weaknesses

• No transparency — Background becomes white (or another solid color)
• Lossy quality loss — Each save degrades the image
• Edge artifacts — Sharp edges show compression artifacts

JPEG Artifacts Explained

JPEG compression causes visible problems, especially around sharp edges:

These artifacts are why JPEG is poor for cutouts — the sharp edge between subject and background shows ringing and mosquito noise.

Source: Wikipedia: Compression Artifact

WebP: The Best of Both Worlds

WebP supports both lossy and lossless compression with full transparency.

When to Use WebP

• Web graphics where file size matters
• Transparent cutouts for modern websites
• When you control the delivery (can provide fallbacks)
• Animated images (alternative to GIF)

WebP Specifications

WebP Strengths

• Transparency + small files — Lossy WebP with alpha is 3× smaller than PNG
• Best compression — Smaller than both JPEG and PNG
• Versatile — One format for photos AND graphics

WebP Weaknesses

• Not universal — Old browsers don't support it (IE11, older Safari)
• Editing software — Some tools don't handle WebP well
• Fallbacks required — Need PNG/JPEG backup for full compatibility

Source: Google WebP Documentation, web.dev WebP Guide

Format Comparison Table

Export Presets

Copy these settings for consistent exports:

Preset 1: Marketplace Listing (White Background)

Use for: eBay, Amazon, Etsy, Shopify

Why JPEG: Marketplaces expect white backgrounds anyway. JPEG gives smaller files with no transparency needed.

Preset 2: Transparent Cutout (Web Use)

Use for: Website graphics, overlays, compositing

Why PNG: Universal support, perfect edges, no quality loss.

Preset 3: Transparent Cutout (Optimized)

Use for: Modern websites prioritizing performance

Why WebP: 3× smaller than PNG with transparency. Use <picture> element for fallback.

Preset 4: Thumbnail/Preview

Use for: Gallery thumbnails, previews, social sharing

Why lower quality: Thumbnails are small — compression artifacts aren't visible.

Common Pitfalls (And Fixes)

Problem 1: "My PNG is huge!"

Cause: PNG uses lossless compression, which preserves all data.

Fixes:

• Use WebP for web (26% smaller, same quality)
• Compress with tools like TinyPNG (reduces colors, still looks good)
• Reduce dimensions if original is oversized
• For solid backgrounds, JPEG is smaller

Problem 2: "Edges look terrible in JPEG"

Cause: JPEG compression creates artifacts around high-contrast edges.

Fixes:

• Use PNG or WebP for cutouts
• If JPEG is required, increase quality to 90%+
• Add slight blur to edges before export (reduces visible artifacts)
• For marketplace listings, the white background masks some issues

Problem 3: "WebP doesn't work for some users"

Cause: ~3% of global users have browsers that don't support WebP.

Fix: Use the HTML <picture> element for automatic fallback:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="Product photo">
</picture>

Problem 4: "Colors look different after export"

Cause: Color space mismatch (Adobe RGB vs sRGB).

Fix: Always convert to sRGB for web. Most browsers assume sRGB — other color spaces display incorrectly.

Problem 5: "Halos around my cutout edges"

Cause: Original image had colored background that blended with edges.

Fixes:

• Use better background removal with edge refinement
• Check for jagged edges and how to fix them
• Export as PNG to preserve whatever quality you have

The Bottom Line

Default recommendation: Export as PNG for transparency, JPEG for white-background marketplace photos. Use WebP when you need smaller files and can provide fallbacks.

FAQ

Related Articles:

• Why Your Cutouts Look Jagged (And How to Fix Them)
• Bulk Background Removal for E-Commerce
• eBay & Etsy Listing Image Guidelines

Last Updated: February 4, 2026
Author: SimplyPNG
Tags: #png #jpeg #webp #export #transparency

Sources:

• MDN — Image file type and format guide — Mozilla Developer Network
• W3C — PNG Specification (Third Edition) — W3C official spec
• Google Developers — WebP — WebP format overview
• web.dev — Using WebP images — Google web.dev
• Wikipedia — Compression artifact — Technical reference