Search code examples
javascriptimagebrowserfile-typewebp

How To Save WEBP Image As Another Type


It is difficult to find an app that can view WEBP images. So when you download one to your harddrive, it would probably be more convenient to download it as something more common, like a JPEG or PNG.

So is there an easy way to save a WEBP as a better file type?


Solution

  • I created this javascript bookmarklet that will convert a WEBP to a PNG in your browser.

    It works by creating a canvas element and drawing the WEBP on the canvas. Then the original WEBP is removed, leaving only the new image. You can then right click the image and save it as a PNG.

    Create a bookmark, and enter this code as the url:

    javascript:
    function a(){
        var webp = document.getElementsByTagName("img")[0];
        var canvas = document.createElement("canvas");
        document.body.appendChild(canvas);
        canvas.width = webp.width; 
        canvas.height = webp.height; 
        var ctx = canvas.getContext("2d"); 
        ctx.drawImage(webp, 0, 0); 
        webp.parentNode.removeChild(webp);
        return;
    };
    a();
    

    You then need to open the WEBP in a separate tab or window.

    Then click the bookmarklet we made, and the WEBP will be replaced with a PNG which you can save.

    Hopefully you found this helpful. Good day