WebP to PNG: Convert for Photoshop, Canva and Design Tools

You right-clicked a product shot, saved it as hero-banner.webp, dragged it into Photoshop, and got "Could not complete your request because it is not the right kind of document." Canva shrugs at it too. Your client needs the mockup in an hour, and installing a plugin into a managed workstation is not happening today.

The fastest fix is to convert WebP to PNG — not JPG — and get back to work. But there are two traps that quietly ruin files along the way: animated WebP that silently collapses to a single frame, and a dropped color profile that makes your brand blue look slightly wrong. Here's the whole thing, with real commands and real file names.

Why your Photoshop says WebP is not supported

Photoshop only gained native WebP open/save support in version 23.2 (the 2022 release). Anything older — CS6, CC 2015, CC 2018, CC 2019 — needs Google's WebPShop plugin dropped into the Plug-ins folder, which means admin rights, a restart, and a plugin that behaves differently on Apple Silicon than on Intel.

Other tools are in the same boat. Older Illustrator and InDesign versions won't place a .webp at all. Canva imports some WebP files but not animated ones. Affinity, Sketch and legacy CMS uploaders are a coin flip. If you're on a team where half the machines are two versions behind, converting the asset once is more reliable than fixing five installations.

A Photoshop WebP import plugin is a fine long-term answer. A PNG is the answer you can hand to anyone, today, on any version.

Why PNG beats JPG as the target format

It's tempting to convert to JPG — the files are smaller and every tool reads them. For a design source asset, that's usually the wrong trade:

• Alpha channel. WebP supports transparency, JPG doesn't. A cut-out product on a transparent background becomes a product on a hard white box the moment you save as JPG. PNG keeps the alpha intact.
• Lossless editing. Most WebP files on the web are already lossy. Re-encoding them to JPG stacks a second generation of compression on top — visible as mushy edges around logos and text. PNG is lossless, so your converted file is as good as the source and stays that way through five rounds of edits.
• Sharp edges and flat color. Screenshots, UI exports, icons and logos compress badly in JPG and perfectly in PNG.
• Predictable imports. PNG with an embedded sRGB profile opens the same way in Photoshop, Figma, Canva, PowerPoint and Word.

Expect the file to get bigger. A 180 KB lossy WebP photo will often land around 1.5–3 MB as a PNG. That's fine for a working file; export the compressed version at the end of the project, not at the start.

The one exception: if the asset is a full-bleed photograph with no transparency and it's going straight into a print layout, JPG at quality 95 is reasonable. Everything else — PNG.

The animated WebP trap: only the first frame survives

WebP has an animated variant that behaves like a GIF. It looks identical in your file browser — same .webp extension, same thumbnail. Convert it to PNG and you get one image: the first frame. No warning, no error. You find out when the client asks why the loading spinner is a static circle.

Check before you convert. If you have the WebP tools installed:

webpinfo loader.webp | grep -i anim

An animated file reports an ANIM/ANMF chunk and a frame count. With ImageMagick, magick identify loader.webp prints one line per frame — ten lines means ten frames.

To keep the animation, export every frame instead of one:

magick loader.webp loader-%02d.png
# → loader-00.png, loader-01.png, loader-02.png …

Then rebuild the sequence as an animated GIF, a video, or import the PNG sequence into After Effects or your prototyping tool. If you only need a still for a layout, grab the frame that reads best — often not frame 0, which is frequently a blank or faded state.

The no-install route: convert WebP to PNG in the browser

When you can't install anything — locked-down laptop, client machine, or you just need one file — do it in a browser tab:

1. Open the WebP to PNG converter and drop hero-banner.webp onto the page.
2. Convert and download hero-banner.png.
3. Open it in Photoshop and check the Layers panel: a checkerboard background means the alpha channel came through.
4. In Photoshop, go to Edit → Assign Profile and confirm it says sRGB IEC61966-2.1 before you start compositing.

That's a 20-second round trip, and it works the same whether you're on CS6 or the current release. If the next asset arrives as AVIF, HEIC or a TIFF the client swears is a PNG, the same image converter hub on File Convert Online covers those too.

The command-line route: dwebp and ImageMagick

If you're converting a folder of forty assets, the terminal wins. dwebp is Google's official decoder, part of the libwebp package (brew install webp on macOS, apt install webp on Debian/Ubuntu).

# single file
dwebp hero-banner.webp -o hero-banner.png

# whole folder
for f in *.webp; do dwebp "$f" -o "${f%.webp}.png"; done

Two flags worth knowing: -alpha_dither smooths banding in soft transparent gradients, and -mt enables multi-threading on large batches. Note that dwebp only decodes still images — point it at an animated file and it errors out, which is a useful accidental safety check.

ImageMagick handles both stills and animations and is probably already installed:

magick hero-banner.webp hero-banner.png
magick mogrify -format png *.webp

If magick complains about an unsupported format, your build is missing WebP delegates — check with magick -list format | grep -i webp. On macOS, brew install imagemagick webp fixes it.

Check the color profile before you composite

WebP can carry an embedded ICC profile, and plenty of converters quietly drop it. The PNG then has no profile, Photoshop assumes your working space, and a Display P3 photo exported from an iPhone suddenly looks desaturated — or a brand red shifts half a shade next to the vector logo in the same file.

Inspect what the source actually has:

magick identify -verbose hero-banner.webp | grep -i -A2 profile

If it reports Display P3 or Adobe RGB and your project is sRGB for web, convert explicitly rather than letting the tool guess:

magick hero-banner.webp -profile sRGB.icc hero-banner.png

In Photoshop the equivalent is Edit → Convert to Profile → sRGB IEC61966-2.1. Convert remaps the colors correctly; Assign just relabels them and can shift your image. If the PNG has no profile at all and the colors look right, assign sRGB and move on — that's what browsers assumed anyway.

A four-step workflow that won't break your asset

Pin this to the wall next to your monitor:

1. Check for animation first — magick identify file.webp. More than one line? Export frames with %02d, don't convert to a single PNG.
2. Target PNG, not JPG, for anything with transparency, text, flat color or more editing ahead.
3. Convert with the online WebP to PNG converter on a locked-down machine, or dwebp / magick for batches.
4. Verify in Photoshop: checkerboard where transparency should be, and sRGB in the profile dialog.

Keep the original .webp next to the PNG in your assets folder. If the client later asks for the web-optimised version back, you'll want the unedited source, not a PNG that's been through two re-encodes.

FAQ

Does converting WebP to PNG lose quality?<br>No — PNG is lossless, so the conversion itself adds no further degradation. Any compression artifacts already baked into a lossy WebP stay as they are; conversion can't remove them, but it won't make them worse.

Why is my PNG ten times bigger than the WebP?<br>That's expected. WebP uses modern lossy compression; PNG stores every pixel losslessly. A 200 KB photo can easily become a 2 MB PNG. Use PNG as your working file and export a compressed format for delivery.

Can Photoshop open WebP without a plugin?<br>Photoshop 23.2 (2022) and newer open and save WebP natively. Older versions need Google's WebPShop plugin — or a PNG, which needs nothing.

Does the PNG keep transparency?<br>Yes, as long as the source WebP had an alpha channel. Open the PNG and look for the checkerboard pattern; if the background is solid white, the original never had transparency to begin with.

How do I convert an animated WebP?<br>Export the frames (magick loader.webp loader-%02d.png) and reassemble them as a GIF, video or PNG sequence. A plain WebP-to-PNG conversion keeps only the first frame.

Is there a Canva WebP import?<br>Canva accepts many still WebP files but not animated ones, and behaviour varies. Converting to PNG first is the reliable path.