BlogImage Compression

Compress PNG Online: When to Keep PNG and When to Convert

Compress PNG online for logos, screenshots, and transparent graphics. Learn when to keep PNG, when to convert to WebP or AVIF, and how to verify quality.

Updated: July 2, 2026

Keep PNG for transparent logos, screenshots, icons, diagrams, and text-heavy graphics where sharp edges matter — then compress those PNGs in place. Convert to WebP or AVIF when the image is a photograph, hero image, or large web asset where transfer size matters more than exact pixel preservation. The safest workflow is: keep a master PNG, compress or convert a copy, compare file size, check transparency edges, and use a fallback format for production pages.

Key Takeaways

  • Compress in place for flat art with sharp edges. Lossless optimizers and lossy quantizers shrink PNGs without changing the format or breaking transparency.
  • Convert to WebP or AVIF for photos and large web images. These formats beat PNG by a wide margin on photographic content; WebP has Google-cited savings of 25–34% versus JPEG in specific tests.
  • Image content decides the format, not the file extension. Flat logos may compress better as quantized PNG or WebP; test the actual asset.
  • Keep an untouched master. Quantization and lossy conversion cannot be reversed — always export derivatives, never overwrite the source.
  • Serve modern formats with a fallback. The <picture> element gives AVIF or WebP to capable browsers and a PNG or JPEG to the rest.

Keep PNG or Convert: The 30-Second Rule

FactorKeep PNG (and compress it)Convert to WebP / AVIF
Transparency neededYes — preserve alpha channelBoth support alpha; keep PNG if lossless fidelity also matters
Content typeLogo, icon, text, screenshot, line art, diagramPhotograph, complex illustration, gradient-heavy art
Color countFew flat colors (≤256 ideal for quantization)Millions of colors, smooth gradients
Sharpness priorityPixel-perfect text and hard edgesSoft, natural detail is acceptable
DestinationArchival master, print, design sourceLive website, app, email
Typical goalShrink without changing formatSmallest possible web payload

The shorthand: flat art with sharp edges → compress the PNG; anything that looks like a photo → convert.

Use Case Format Guide

Image typeRecommended formatNotes
Logo (transparent)Quantized PNG or WebPPNG keeps lossless edges; WebP for web-only use
UI screenshotPNG (lossless or quantized)Hard pixel edges compress poorly as JPEG
Line art / iconQuantized PNGSmall palette, nearly invisible quantization
PhotographWebP or AVIFFar smaller than PNG; use JPEG fallback
Hero / full-width imageWebP or AVIFHigh-impact on page load speed
Social media graphicWebP or PNGCheck platform format requirements
Email imagePNG or JPEGWebP support in email clients is inconsistent
Archival masterPNG (lossless)Never apply lossy compression to the source

Why PNG Files Get So Large

PNG uses lossless DEFLATE compression, so it preserves every pixel exactly — at the cost of file size. It has no quality dial like JPEG. Three things inflate PNGs:

  1. Full color depth. A 24-bit RGB (or 32-bit RGBA) photograph carries color data that PNG's compression algorithm handles poorly.
  2. Photographic content. Thousands of subtly different adjacent pixels defeat PNG's dictionary-based approach. JPEG, WebP, and AVIF use transform-based compression (DCT or AV1) that handles natural photo noise far better. Put simply: PNG is best at large areas of repeated flat pixels, not the continuous tone of a photograph.
  3. Unoptimized encoding. Many editors export PNGs with fast, low-effort compression. A re-optimization pass alone often removes 10–30% without changing any pixels.

MDN's image format guide notes that PNG is preferred over JPEG for precise reproduction or transparency, but that WebP and AVIF provide better compression for most web use cases.

Two Ways to Compress a PNG Without Converting

You can shrink a PNG and still deliver a valid .png. The two methods differ only in whether any pixels change.

MethodRepresentative toolsHow it worksTypical savingsPixels changed?TransparencyBest for
Lossless optimizationoxipng, zopfli, PNGGauntletRe-encodes with maximum-effort DEFLATEOften 10–30%No — pixel-identicalPreservedArchival masters, pre-publish pass
Lossy quantizationpngquant, TinyPNG, PngyuReduces palette (often ≤256 colors) + ditheringOften 50–70%+Yes — subtlePreserved (full alpha)Web graphics, logos, icons

According to pngquant's documentation, the tool can reduce a file from tens of thousands of bytes by around 70% while keeping full alpha transparency and producing a browser-compatible PNG. The recommended pattern for the smallest lossy PNG is to run the quantizer first (pngquant), then follow with a lossless optimizer (oxipng) for a final polish.

Quality tip: With pngquant, set a quality range such as --quality=65-80. If the compressed result falls below your minimum threshold, the tool refuses to write the file, protecting you from ugly output.

When to Keep PNG (and Just Compress It)

Keep the PNG format when changing pixels — or the format — would hurt more than the bytes saved.

  • Logos and brand marks. Flat colors and crisp edges are exactly what quantization handles well. PNG keeps full transparency for placement on any background color.
  • Text-heavy graphics. Sharp text is where lossy compression, especially at lower quality settings, can smear letterforms. A quantized PNG stays readable.
  • UI screenshots. Hard 1-pixel edges and flat fill areas compress well as PNG and look poor as over-compressed JPEG.
  • Icons and line art. Small palettes mean quantization artifacts are nearly invisible.
  • Archival or design-source files. When you need a lossless master to re-export from, apply lossless optimization only and keep the original untouched.

For all of these, a lossy quantizer followed by a lossless optimizer is usually the sweet spot — far smaller than the raw export, no format conversion, and no fallback markup needed.

When to Convert PNG to a Modern Format

Convert when the image is photographic or large and lives on a web page, where smaller file size translates directly into faster load times.

  • Photographs stored as PNG. A photo exported as PNG is almost always the wrong choice — it is the worst-case input for PNG compression.
  • Hero and full-width images. These are frequently the Largest Contentful Paint (LCP) element on a page; shrinking them can improve LCP scores directly.
  • Richly colored illustrations. Smooth gradients and millions of colors compress far more efficiently as WebP or AVIF than as a quantized PNG.

WebP vs AVIF vs JPEG: What to Convert To

FormatSize advantageBrowser supportTransparencyBest for
AVIFOften more efficient than WebP for photos; results vary by encoderBroad modern browser support — check caniuse.com/avif before relying on it aloneYesPhotographs, HDR, smallest payload
WebPGoogle cites 25–34% smaller than JPEG in specific tests; lossless mode often ~26% smaller than PNGBroad modern browser support — check caniuse.com/webpYesGeneral-purpose web default
JPEGBaseline referenceUniversalNoFallback when transparency is not needed
PNGLarger than JPEG for photos; competitive for flat artUniversalYesLossless masters; sharp flat art

Two nuances from independent testing: for simple flat graphics, WebP or an optimized PNG can sometimes outperform AVIF — test the actual asset rather than assuming a winner. For photographic and banner content, AVIF typically leads.

Safe Workflow: Compress First, Convert When Needed

Never serve only an AVIF or WebP URL to the open web. Use the <picture> element so every browser gets a working image:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Descriptive alt text" width="1600" height="900" loading="lazy" decoding="async">
</picture>

Browsers pick the first <source> they support and fall back to the <img>. Always set width and height on the <img> to prevent Cumulative Layout Shift.

Step-by-step: compress or convert in one pass

  1. Keep an untouched master of the original PNG before doing anything else.
  2. Classify the image. Flat art with sharp edges → compress as PNG. Photo or large hero → convert.
  3. If keeping PNG: run a lossy quantizer (pngquant --quality=65-80) then a lossless optimizer (oxipng -o 3). Prefer a no-install path? Upload the PNG to LessMB (lessmb.com) in your browser, download the compressed result, then compare file size and inspect the transparency edges before publishing.
  4. If converting: export WebP for general use and AVIF for photographs where your target audience has compatible browsers; always include a JPEG or PNG fallback.
  5. Serve with <picture> and include explicit width and height attributes.
  6. Verify quality and byte savings using the checklist below.

PNG Compression Checklist Before Publishing

Use this before any compressed or converted image goes live.

File size

  • New file is meaningfully smaller than the original (target ≥40% for web graphics; more for photos)
  • Original master PNG is still intact and untouched

Visual quality

  • Output opened at 100% zoom — no banding, smeared text, or crunchy edges
  • Checked around text and fine line elements for blur or artifact
  • Placed on a light background and a dark background to verify alpha edges look clean
  • No unintended color shift in flat areas

Format and fallback

  • If serving WebP or AVIF: <picture> element present with PNG or JPEG fallback
  • width and height set on the <img> to prevent layout shift
  • alt attribute present and descriptive

Performance

  • LCP image loads faster on a Lighthouse or Core Web Vitals check
  • No new layout shift introduced

Common Mistakes

  • Converting a logo to AVIF at low quality. Fine text smears; a quantized PNG is often both sharper and smaller.
  • Quantizing a photograph as PNG. The result bands visibly and is still larger than a WebP. Convert photos instead.
  • Overwriting the master. Quantization and lossy conversion cannot be reversed. Always export derivatives.
  • Serving WebP or AVIF without a fallback. Older or less common clients get a broken image. Use <picture>.
  • Skipping width and height. You save bytes but introduce layout shift, hurting Cumulative Layout Shift scores.
  • Ignoring alt text. Compression is a performance task; alt is an accessibility and image-SEO task — do both.
  • Assuming AVIF always wins. For simple flat graphics, WebP or quantized PNG can sometimes produce a smaller file. Test per asset.

FAQ

Should I compress a PNG or convert it to WebP?

If the image needs transparency, sharp text, or lossless quality — a logo, screenshot, or UI graphic — compress the PNG with a lossless optimizer or lossy quantizer and keep it. If it is a photograph or a large hero image on the web, convert to WebP or AVIF, where format efficiency beats PNG significantly.

Can I compress a PNG without losing transparency?

Yes. Both lossless optimizers (oxipng, zopfli) and lossy quantizers (pngquant) preserve the full alpha channel. According to pngquant's documentation, the tool can achieve around 70% reductions while keeping full transparency, and the output remains a valid PNG in every browser.

Is lossy PNG compression safe?

For most web graphics, yes. Lossy PNG tools cut the color palette (often to 256 colors) and add light dithering, which is nearly invisible on flat-color art but can produce banding on smooth gradients and photographs. Always inspect the result at 100% zoom and keep a lossless master.

Which format gives the smallest file for a photo?

AVIF often compresses photographs more efficiently than WebP or JPEG, but results vary by encoder and image content. WebP is the safer general choice with its broad browser support. Serve either with a JPEG or PNG fallback via the <picture> element, and test your specific image before committing.

What is the best format for a transparent logo?

A lossy-quantized PNG (pngquant) followed by lossless optimization (oxipng) is usually the best option — it keeps full alpha transparency, preserves sharp edges, and can cut file size by 50–70% compared to a raw export. WebP with transparency is a good alternative for web-only delivery.

How do I know if a compressed PNG still looks good?

Open the compressed output at 100% zoom and check for banding, smeared text, or artifacts near transparent areas. Place the image on both a light and a dark background to confirm the alpha edges are clean. Compare the file size against the original, and only publish if the visual quality is acceptable.

Does compressing or converting images help SEO?

Indirectly, yes. Images are the Largest Contentful Paint element on a majority of mobile pages, according to HTTP Archive Web Almanac data. Smaller files improve page load speed and Core Web Vitals, which are part of Google's page experience guidance and may support better search performance.

Next Steps

  1. Back up the original. Keep an untouched master PNG before making any changes.
  2. Audit your heaviest images. Focus on PNGs over roughly 200 KB — those are the highest-leverage targets.
  3. Split them into two piles: flat or sharp art to compress in place; photos and hero images to convert.
  4. Compress the keepers with pngquant plus oxipng, or use LessMB in the browser for a no-install workflow.
  5. Convert the rest to WebP and AVIF, serve with a <picture> fallback, and set width/height on the <img>.
  6. Re-measure page performance with Lighthouse or a Core Web Vitals tool and confirm the LCP improvement.

References