Separate the four WebP decisions
A .webp extension does not tell you whether an image uses lossy or lossless color coding. WebP defines a lossy VP8 path and a lossless VP8L path. Its container can also carry alpha transparency, animation, color profiles, and metadata. [1] [2] Decide the color mode, alpha need, encoder quality, and destination support separately.
This separation prevents a common mistake: a WebP with transparent pixels can still use lossy color. Alpha support does not prove lossless RGB. The WebP container specification allows an alpha chunk with a lossy VP8 image, while lossless VP8L can encode color and alpha together. [2] Inspect edges against the background where the image will appear.
Use lossy WebP for photographic delivery copies
Start with lossy WebP for photos, thumbnails, and other continuous-tone images when the destination accepts WebP. The encoder removes detail to reduce bytes, so inspect faces, text, gradients, foliage, and hard color boundaries at the final display size. Google documents the lossy path as predictive block coding derived from the VP8 video key-frame format. [1]
Treat a quality value such as 82 as a starting request to the current encoder, not as a universal score. The HTML Canvas API accepts an optional quality argument for formats such as WebP and JPEG, but the user agent chooses the encoder behavior. [4] Two images at the same quality can produce very different file sizes and visible artifacts. Measure each output.
Use lossless output when decoded pixels must stay exact
Lossless WebP reconstructs the encoded ARGB pixel values exactly, including color values behind fully transparent pixels. [3] That makes the mode useful for logos, interface graphics, diagrams, pixel art, and intermediate assets when the receiving workflow supports lossless WebP.
Lossless re-encoding preserves the pixels that the browser decoded; it cannot recover detail already removed by JPEG or lossy WebP. PNG offers another clear lossless still-image handoff when an app rejects WebP. Keep the original source as the master because Canvas re-encoding usually removes metadata and turns animation into one still frame. [4] [5]
Check transparency, animation, and destination support
Choose PNG or WebP when transparent pixels matter. Choose JPG only after deciding which solid background should replace transparency. A white matte works for many documents and upload forms, but it can create a visible halo when the asset later appears on a dark page.
Animated WebP needs an animation-aware pipeline. A browser Canvas conversion draws a decoded frame and exports a still image; it does not preserve the frame sequence or timing. [4] Also test the real upload form, CMS, editor, email client, or API. Modern browser support does not make every destination accept the format. [5]
Measure the output before publishing
Open the imgrove WebP Converter, choose a mode, and convert a working copy in the browser. For JPG or WebP output, start with the mode's quality setting, then compare input and output bytes in the result table. Check the preview at normal size and zoom into edges before lowering quality.
Run the same source through each practical candidate instead of relying on a general percentage claim. Keep dimensions constant, compare the actual file sizes, and confirm transparency and compatibility. Use the Image Size Checker for a second file-level check, and keep the untouched master beside every delivery copy.
Choose a WebP or fallback output
| Source and destination | Start with | Verify |
|---|---|---|
| Photo; destination accepts WebP | Lossy WebP | Faces, gradients, texture, output bytes |
| Photo with transparency | Lossy WebP with alpha | Edge color on the final page background |
| Logo, UI, diagram, or pixel art | Lossless WebP or PNG | Exact edges, colors, and destination support |
| Exact decoded-pixel handoff | Lossless WebP or PNG | Metadata and animation requirements |
| App or form rejects WebP | JPG for opaque photos; PNG for alpha | MIME type, transparency, and file-size limit |
| Animated WebP | Animation-aware software | Every frame, timing, loop count, and metadata |
Use lossy WebP when
- A photographic delivery copy needs fewer bytes
- The destination accepts WebP and visual review is possible
- Transparency matters but exact RGB reconstruction does not
Use lossless WebP or PNG when
- Logos, diagrams, UI, or pixel art need exact decoded pixels
- A design handoff needs clean transparent edges
- The receiving app accepts PNG but rejects WebP
Related WebP conversion and verification tools
Related imgrove tools
Compare a real WebP output
Convert a working copy locally, adjust JPG or WebP quality, and compare input bytes with output bytes before publishing. Check transparent edges and send us feedback if a workflow needs a clearer mode or report.
Try WebP ConverterTry the workflow and tell us what worked, what failed, or what needs clearer guidance: hi@imgrove.com.