Prepare predictable square thumbnails for cards, catalogs, profiles, and administrative interfaces. Choose whether the source should fill the frame by centered cropping or remain completely visible with surrounding background space.
How to use WebP Thumbnail Maker
- Add static WebP images and identify the square size required by the destination.
- Choose cover for an edge-to-edge crop or contain to keep the complete image, then set background and quality.
- Generate the thumbnails and inspect subject framing, edges, transparency treatment, and file size before publishing.
What this tool is good at
When to use WebP Thumbnail Maker
Prepare a deliberate square thumbnail asset
Build fixed square assets for cards, catalogs, profiles, search results, or administration screens using deterministic cover or contain behavior. Work from the selected WebP's decoded pixels and measured output instead of assuming a filename, generic preset, or browser preview answers the production question.
Compare real local results
Inspect important subject framing in cover mode and verify background matching in contain mode before processing a full collection. Keep the derivative or JSON report with a content ticket, optimization review, design handoff, or regression fixture so another person can reproduce the decision.
Protect private production imagery
Process unreleased campaigns, product photos, client media, interface assets, and internal fixtures in the current browser tab without submitting selected image bytes to a remote conversion or analysis endpoint.
How to choose the right settings
Match the destination requirement
Build fixed square assets for cards, catalogs, profiles, search results, or administration screens using deterministic cover or contain behavior. Confirm dimensions, background, alpha behavior, quality budget, analytical resolution, and consuming application before applying the same setting to a larger batch.
Inspect a representative result
Inspect important subject framing in cover mode and verify background matching in contain mode before processing a full collection. Check detailed and flat-color samples, transparent edges, gradients, text, and varied aspect ratios because one convenient default cannot represent every source.
Retain the authoritative original
The tool does not detect faces or focal subjects, cover can crop important edges, contain makes padding permanent, metadata is stripped, and animation is rejected. Keep source WebP files until generated assets and reports have been reviewed in the real destination and accepted by the responsible editor or developer.
Practical workflow and output details
A centered scale calculation fits or covers the source on a square Canvas, paints an explicit background when needed, and encodes a measured WebP. Processing uses bounded browser Canvas operations, typed-array pixel analysis, local WebP or PNG encoding, and Blob downloads; selected file bytes are never posted for image processing.
The tool does not detect faces or focal subjects, cover can crop important edges, contain makes padding permanent, metadata is stripped, and animation is rejected. The tool states this boundary so a focused local operation is not mistaken for a color-managed editing suite, universal performance benchmark, perceptual-quality guarantee, animation editor, or reversible source-of-truth workflow.
Format behavior and limitations
Cover mode can crop important content near image edges; the generic center crop cannot identify faces, products, or focal points.
Contain mode paints the selected background into unused space, so those pixels are no longer transparent in the exported thumbnail.
Frequently asked questions
What is the difference between cover and contain?
Cover fills the square and crops overflow; contain fits the entire source and fills unused space with the chosen background.
Can it find the subject automatically?
No. The crop is centered and deterministic, so visually check images with off-center subjects.
Why use a square thumbnail?
A fixed ratio can simplify card grids and prevent layout shifts when the destination expects consistent preview geometry.
Related WebP tools
Bulk WebP Resizer
Resize multiple static WebP files to one target width while preserving each source aspect ratio and transparent pixels.
Crop WebP
Crop static WebP images by percentage coordinates with precise output dimensions and quality.
Resize WebP
Resize static WebP images to a precise width while keeping the original aspect ratio.