How to Convert WebP Images in HTML to PNG

To convert a WebP image to PNG, use Google’s dwebp command for a local file, or decode the image in a browser and draw it to a canvas before exporting it as PNG. If the image is embedded in a web page, you can use its image URL as the input to the browser workflow; an ordinary screenshot is not the same as converting the original image.

Choose the right conversion method

First decide whether you need the original image file converted or a picture of how the image appears on a page.

#	Preview	Product	Price
1		Image Converter - JPG, PNG, PDF, WEBP, GIF, HEIC		Buy on Amazon

• Convert the source image: Decode the WebP itself and save its pixels as a PNG. Use dwebp for a quick local conversion, or browser canvas when the image is available to a web page.
• Capture the page appearance: Take a screenshot if you need the image as rendered with page layout, overlays, or other content. This produces a picture of the page, not a direct format conversion of the WebP.

For a single local file, Google’s documented command-line decoder is the most direct route. For an image already available in HTML or JavaScript, the browser route avoids a separate desktop conversion step.

Convert a local WebP file with dwebp

Google documents dwebp as a command-line decoder for WebP images and shows this conversion pattern: dwebp input.webp -o output.png. PNG is its default output format. See Google’s dwebp documentation for the command and supported options.

#1 Best Overall

Image Converter - JPG, PNG, PDF, WEBP, GIF, HEIC

• Convert pictures in to batch mode and export jpeg, png, jpg or other image format
• Photo size converter helps to compress and resize pictures in high quality
• Jpeg converter easily converters multiple pictures in to other image format
• Share images by reducing and compressing the image sizes by maintain quality
• Choose compress level and reduce the image size to easily share pictures

Buy on Amazon

1. Install the WebP tools for your operating system using the appropriate package or download provided by the WebP project.
2. Open a terminal in the directory containing the image, or provide full paths to both files.
3. Run dwebp input.webp -o output.png, replacing the filenames as needed.
4. Open the resulting PNG in an image viewer or editor to confirm that it is the image you intended to convert.

For example, if the file is named banner.webp, run dwebp banner.webp -o banner.png. To specify another directory, use a path such as dwebp ./images/banner.webp -o ./exports/banner.png. Ensure the output directory exists and that you have permission to write there.

When dwebp is not the right fit

The documented dwebp tool does not support animated WebP. Its basic conversion command should not be treated as an animation-preserving workflow. If the source is animated, determine whether you need individual frames or an animated output format and use a tool designed for that outcome. Google’s dwebp reference describes this limitation.

Convert a WebP image available in HTML with browser JavaScript

For a WebP image that a page can access, load and decode the image, draw it onto a canvas, and ask the canvas to serialize as PNG. createImageBitmap() creates a bitmap from an image source, and the HTML canvas API provides image serialization. The browser’s canvas serialization behavior specifies PNG output when a requested type is unsupported. Refer to MDN’s createImageBitmap documentation and the HTML Standard’s canvas serialization section.

This example takes an image URL, waits for decoding, draws its full dimensions to a canvas, and downloads a PNG. Serve the page over HTTP or HTTPS rather than relying on a local-file context, and use an image URL the page is permitted to read.

<img id="source" src="/images/photo.webp" alt="">
<button id="convert">Download PNG</button>

<script>
  const image = document.querySelector("#source");
  const button = document.querySelector("#convert");

  button.addEventListener("click", async () => {
    try {
      await image.decode();

      const bitmap = await createImageBitmap(image);
      const canvas = document.createElement("canvas");
      canvas.width = bitmap.width;
      canvas.height = bitmap.height;

      const context = canvas.getContext("2d");
      if (!context) throw new Error("Could not create a 2D canvas context.");
      context.drawImage(bitmap, 0, 0);
      bitmap.close();

      canvas.toBlob((blob) => {
        if (!blob) {
          console.error("PNG export failed.");
          return;
        }

        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = "photo.png";
        link.click();
        URL.revokeObjectURL(link.href);
      }, "image/png");
    } catch (error) {
      console.error("Could not convert the image:", error);
    }
  });
</script>

Replace /images/photo.webp with the source image URL and change photo.png to the desired download name. The example exports the image’s decoded bitmap dimensions; it does not include the surrounding HTML, CSS, or page layout.

Use an image embedded with an img element

If the HTML already contains an <img> element, use that element as the source, as in the example. Waiting for image.decode() helps avoid drawing before the browser has decoded the image. If the element is hidden or has not loaded successfully, provide a valid loaded image before running the conversion.

Use a URL that is not already in the page

For a URL you obtain in JavaScript, fetch it as a blob, create a bitmap from the blob, and draw that bitmap to canvas. This can be useful when there is no existing <img> element.

async function webpUrlToPng(url, filename = "image.png") {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Image request failed: ${response.status}`);
  }

  const sourceBlob = await response.blob();
  const bitmap = await createImageBitmap(sourceBlob);
  const canvas = document.createElement("canvas");
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;

  const context = canvas.getContext("2d");
  if (!context) {
    bitmap.close();
    throw new Error("Could not create a 2D canvas context.");
  }
  context.drawImage(bitmap, 0, 0);
  bitmap.close();

  const pngBlob = await new Promise((resolve, reject) => {
    canvas.toBlob((blob) => {
      if (blob) resolve(blob);
      else reject(new Error("PNG export failed."));
    }, "image/png");
  });

  const objectUrl = URL.createObjectURL(pngBlob);
  const link = document.createElement("a");
  link.href = objectUrl;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(objectUrl);
}

webpUrlToPng("/images/photo.webp", "photo.png").catch(console.error);

Use this with a URL that the page is allowed to request and read. When the URL is on another origin, the server must permit the cross-origin request; otherwise the fetch or canvas read can fail. For images already displayed on a page, the img-based example may be simpler, but canvas security restrictions can still prevent exporting pixels from a cross-origin image.

Convert as part of a larger image workflow

If conversion is one step in a broader process—such as resizing, editing, or processing many image files—ImageMagick’s magick command is another option. Its official documentation covers the command-line image conversion workflow: ImageMagick command-line tools. Choose it when you need its wider image-processing operations, rather than adding it just to convert one WebP file.

Or skip the browser setup

If your goal is a clean screenshot of a web page that contains the image, ScreenshotNeo can capture the rendered page. It is a screenshot API, not a replacement for decoding a standalone WebP into its original PNG pixels. One GET request returns an image or PDF; this example saves a WebP screenshot. See the ScreenshotNeo API documentation for options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers identifying the page verdict and billing status. Its MCP server gives AI agents tools to take screenshots, inspect page information, and capture PDFs. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up for ScreenshotNeo’s free plan to try page capture with 1,000 screenshots a month and no card.

Troubleshooting WebP-to-PNG conversion

“dwebp” is not recognized or command not found

The WebP command-line tools are not installed or the executable is not on your system’s PATH. Install the tools for your operating system, then reopen the terminal. If installation is complete but the command still cannot be found, run it using the executable’s full path.

The output file is missing or cannot be written

Check that the input path is correct, the output directory already exists, and the current user can write to it. Use full paths if the terminal’s current directory is not the one containing the source image.

The browser says the image failed to load

Check the URL and network request first. In the fetch example, inspect the HTTP status reported by the thrown error. A page may also be unable to read an image from another origin because of cross-origin restrictions; configure the image server to allow the needed access, or convert a local copy instead.

The canvas export is blank or fails

Wait for image decoding to complete and confirm the image has loaded before drawing. Check that the 2D canvas context was created. If an image from another origin taints the canvas, the page cannot export its pixels unless the server’s cross-origin policy permits it.

The output is not the full page

Canvas conversion exports the image drawn onto the canvas, not the web page surrounding it. Use a page screenshot workflow when the desired result is the rendered page rather than the source image.

An animated WebP becomes a still image or will not convert

The documented dwebp tool does not support animated WebP. Establish whether you need separate frame images or an animated result, then use a workflow that explicitly supports that output; do not assume a single PNG can preserve the animation.

Frequently asked questions

Does converting WebP to PNG improve image quality?

Conversion changes the file format; it does not restore image detail that is not present in the decoded source. PNG can preserve the decoded pixels without applying another lossy encoding step, but the conversion cannot reverse prior quality loss.

Can I convert a WebP URL without saving it first?

Yes. A browser page can fetch an accessible image URL, decode the response, and export the canvas as PNG. The browser must be allowed to request and read that image.

Can I use a screenshot to get the original PNG?

No. A screenshot captures rendered pixels and may include page styling or other content. To convert the original image, decode the WebP source file itself.

Quick Recap

Bestseller No. 1

Image Converter - JPG, PNG, PDF, WEBP, GIF, HEIC

Convert pictures in to batch mode and export jpeg, png, jpg or other image format; Photo size converter helps to compress and resize pictures in high quality

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.