PNG
WEBP
WEBP
ЗАГРУЗИТЬ
ФАЙЛ
Ожидание файла...
Превью
ЗАГРУЗИТЬ
ФАЙЛ
Ожидание файла...
Tool guide
The difference from a JPG export is the alpha channel: WebP keeps it, so a logo, an icon or a sprite sheet stays transparent while the file typically drops to a quarter or a half of its PNG size. That matters when megabyte-heavy interface illustrations, documentation screenshots and template artwork are slowing a page down for no benefit. Reading and encoding both happen inside the tab, so the image is never handed to a server or written to any log. See also: do the same with your JPG photos, keep a JPG fallback for older browsers, pack the finished images into one ZIP.
Yes, the alpha channel is carried over, so a logo on a transparent background stays transparent. That is the key difference from JPG, where transparency is always flattened. Semi-transparent shadows and alpha gradients also survive, though lossy encoding can soften their edges slightly.
For interface art, illustrations and screenshots, two to four times smaller is typical. The biggest wins come from large images with photographic regions; tiny 16-32 px icons gain the least, because the container overhead is a real share of such a small file.
No. Canvas reads only the first frame of an animated PNG, so the output is a still image. Animated WebP cannot be built this way - that needs a dedicated tool such as img2webp. If the motion matters, keep the APNG or switch to video.
On a public site, do not. Wrap the image in a picture element with a source of type image/webp and an img pointing at the PNG. Older Safari builds, in-app browsers and mail clients will not render WebP, and visitors would see an empty box instead.
That happens with small icons and flat two- or three-colour artwork: an indexed PNG is already close to optimal there, while WebP adds its own overhead. Compare the sizes and simply keep the PNG - switching format for its own sake gains nothing.
No, the page handles one file per pass: load, DOWNLOAD, RESET. For a full images directory, a bundler plugin or a cwebp script is the right tool. This page is for the moment you need a couple of assets converted on a machine that is not yours.
It stays in the tab's memory: FileReader reads the PNG, Canvas paints the frame, and the browser encoder returns WebP through a download link. No upload and no third-party API call is made, which is why it is safe to use with internal design assets.
Before: hero-illustration.png - 1.9 MB, 1600x900 px, transparent background
After: hero-illustration.webp - 420 KB, transparency preserved, same dimensions
Before: [email protected] - 780 KB, flat artwork with an alpha channel
After: [email protected] - 190 KB, icon edges still crisp
Your rating and feedback help decide what to improve next.