LumenLab✳
← Back to field notes

FIELD NOTE / 07

PNG, JPEG and WebP: a downloadable comparison

The same 600 × 600 source frame, three real files, exact bytes and an explicit testing boundary.

What we measured

On October 17, 2026 we loaded the saved 1024 × 1024 PNG, 686,429 bytes, in LumenLab’s production tools using the Codex in-app browser. We selected 600 × 600, Resize and aspect lock. Each export used that same loaded original. JPEG and WebP used the displayed 82% setting; PNG does not use that lossy quality control. We downloaded all files and independently read their dimensions and byte sizes. The manifest includes SHA-256 hashes to identify these exact artifacts.

Interpret the bytes without overstating them

WebP is 3,780 bytes, JPEG 8,965 and PNG 408,201 for this frame. Compared with the 600-pixel PNG, WebP uses about 99.07% fewer bytes and JPEG about 97.80% fewer. That is a storage comparison, not a proof of equal image quality. Comparing any export directly with the 1024-pixel original also mixes resizing with encoding, so it cannot isolate the format’s effect. The simple background and restrained palette make this a narrow example.

Inspect the vulnerable parts

Open each file at its native 600-pixel size. Inspect the pale rim against the gray background, the fluted body, the dark contact shadow and the broad smooth pedestal gradient. At this small displayed scale the WebP retains the subject, but that does not establish lossless fidelity. If you see contour breakup, halos or bands at your intended size, raise quality or keep a larger file. Do not use a scaled thumbnail to approve detail that will later be shown full-screen.

Choose for the page, not a universal winner

For a small conceptual illustration, start by evaluating the WebP download. For exact pixel preservation of the resized image or another editing step, retain the PNG as a separate intermediate; the original remains your master. This sample has no transparency, so it does not test transparent exports. The landscape fit in the crop workshop does. Repeat this method with your own detailed photographs or text graphics before adopting a site-wide preset. Browser versions and encoders may produce different bytes.

Download and inspect the actual files

All exports below were produced with this site’s local tools on October 17, 2026. They are processed versions of one existing AI image, not new generations.

WEBP · 600 × 600
WEBP

600 × 600 · 3,780 bytes

Download image ↓
JPEG · 600 × 600
JPEG

600 × 600 · 8,965 bytes

Download image ↓
PNG · 600 × 600
PNG

600 × 600 · 408,201 bytes

Download image ↓

Measurement record (JSON) ↓ · Original PNG ↓

Try this workflow

Use our saved 1024 × 1024 AI sample. No generation credit or file upload needed.

Open image tools ↗

From idea to a published blog image

A practical path for blog authors and small website owners. Work with the saved sample, inspect the evidence, then apply the method to your own article.

  1. Review the source →
  2. Choose the framing →
  3. Compare real exports →
  4. Publish with context →
Image studio ↗