{"id":44653,"date":"2021-01-01T00:00:00","date_gmt":"2021-01-01T00:00:00","guid":{"rendered":"https:\/\/www.causevox.com\/?p=44653"},"modified":"2024-05-09T00:34:11","modified_gmt":"2024-05-09T00:34:11","slug":"webp-to-png","status":"publish","type":"post","link":"https:\/\/www.causevox.com\/blog\/webp-to-png\/","title":{"rendered":"WebP to PNG: How to Convert Images"},"content":{"rendered":"\n<p>In this guide to converting images from a WebP file to a PNG file, we\u2019ll give you an overview of the WebP format and how to convert WebP files to PNG files using a Mac, Windows, and Photoshop.<\/p>\n\n\n\n<p>Skip ahead with these quick links:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#what\">What is WebP?<\/a><\/li><li><a href=\"#webppng\">WebP vs PNG<\/a><\/li><li><a href=\"#savewebp\">How to download or save a WebP file<\/a><\/li><li><a href=\"#viewwebp\">Viewing and opening a WebP file<\/a><\/li><li><a href=\"#convertwebp\">Converting WebP to PNG<\/a><\/li><\/ul>\n\n\n\n<a name=\"what\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">What is WebP?<\/h2>\n\n\n\n<p>If you\u2019ve never heard of WebP files before, you\u2019re not alone. It\u2019s an image format that has been more widely used lately on websites and mobile apps.<\/p>\n\n\n\n<p>WebP has a few big benefits:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>43% smaller file sizes compared to PNG format(study by <a href=\"https:\/\/www.keycdn.com\/support\/webp-support\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">KeyCDN<\/a>). This helps websites load faster while using less bandwidth.<\/li><li>Supports transparent backgrounds (just like a PNG file).<\/li><li>Retains image quality (it\u2019s lossless) or can be reduced (lossy).<\/li><\/ul>\n\n\n\n<p>WebP has a few big downsides:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Older web browsers don\u2019t currently support the format. On the plus side, those who still use older browsers will just see non-WebP versions of the images.<\/li><li>WebP images are harder to edit since most editing programs don\u2019t support the WebP image format natively (yet).<\/li><\/ul>\n\n\n\n<a name=\"webppng\"><\/a>\n\n\n\n<p>If you\u2019re concerned because you\u2019ve never heard of the WebP format before, there\u2019s no need to be worried about security. The format is perfectly safe to use, and many websites already use this format.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is PNG?<\/h2>\n\n\n\n<p>PNG (Portable Network Graphics) is a file format used for storing images, web graphics, and logos. PNG was created as an improved replacement for the GIF (graphics interchange format) file format and has since become one of the most widely-used image formats on the web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WebP vs. PNG<\/h2>\n\n\n\n<p>The big thing that sets WebP apart from PNG is that it\u2019s flexible. This includes the ability to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.causevox.com\/blog\/using-the-right-logo-image-transparent-png\/\" target=\"_blank\" rel=\"noreferrer noopener\">Make images with a transparent background<\/a> or not. (same as PNG)<\/li><li>Make images lossy or lossless. This means you can make an even smaller WebP image by reducing image quality a little bit. (unlike a PNG)<\/li><\/ul>\n\n\n\n<p>So what does that mean when we compare WebP to PNG files? It means that WebP gets the benefits of both JPGs and PNGs, and is versatile enough to meet most needs.\u00a0<\/p>\n\n\n\n<p>Let\u2019s take a quick look at the traditional breakdown of image formats.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/webp-vs-png.png\" alt=\"webp vs png\" class=\"wp-image-45967\"\/><\/figure>\n\n\n\n<p>You\u2019ll notice that PNG is usually used for less detailed images, while JPG is best for photographs and high detail. WebP combines the best of both worlds.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/intro-to-webp.png\" alt=\"intro to webp\" class=\"wp-image-45968\"\/><\/figure>\n\n\n\n<p><strong>Tl;dr: The reason that WebP is so versatile is because it does have the options of transparent background vs. not transparent while also having the option of lossy vs. lossless.&nbsp;<\/strong><\/p>\n\n\n\n<a name=\"savewebp\"><\/a>\n\n\n\n<p>If you need your image to be incredibly detailed, you can use a lossless version. If you want to save more space, you can use a lossy version. On top of all that, WebP images load faster than any other image file on websites.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Do I Save a WebP File?<\/h2>\n\n\n\n<p>Ok, so with all of that, you\u2019re probably interested in getting your hands on some WebP images. If you see one online and you want to save it, how do you make that happen? There are two main ways.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method #1: Drag and Drop<\/h3>\n\n\n\n<p>This is pretty simple. All you have to do is drag and drop the image onto your desktop. Boom. There\u2019s your file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/webp-to-png-drag-drop.png\" alt=\"\" class=\"wp-image-44654\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Method #2: Right-Click Save<\/h3>\n\n\n\n<p>This is only slightly more complex. Right-click on the image and click save image as. You should see WebP listed as the format. Choose where you\u2019d like to save the image, and click save.<\/p>\n\n\n\n<a name=\"viewwebp\"><\/a>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/webp-to-png-right-click.png\" alt=\"\" class=\"wp-image-44655\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How Do I View a WebP File?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">View WebP with a Web Browser<\/h3>\n\n\n\n<p>The easiest way to view a WebP file is online (that\u2019s what they were made for after all). If you\u2019re running a modern browser, all you have to do is find the file on your computer and double-click. It will open in your default browser and you can see it right there.\u00a0<\/p>\n\n\n\n<p>Supported browsers include Chrome, Firefox, Safari, Edge, and Opera.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">View WebP in Finder or File Explorer<\/h3>\n\n\n\n<p>You can also see a preview of your image if you open <a href=\"https:\/\/support.apple.com\/en-us\/HT201732\" target=\"_blank\" rel=\"noreferrer noopener\">Finder<\/a> (for a Mac) or File Explorer (for a Windows PC). Make sure that your view is set to thumbnails, and you\u2019ll be able to see previews of the images as you scroll.<\/p>\n\n\n\n<p>From here, if you want to view the image natively on your computer, you can go ahead and open it.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">View WebP in Preview (Mac) or Paint (Windows)<\/h3>\n\n\n\n<p>You\u2019ll use a different program depending on the type of computer (Mac vs Windows) you\u2019re using.<\/p>\n\n\n\n<p>On Mac, you\u2019ll use <a href=\"https:\/\/support.apple.com\/guide\/preview\/welcome\/mac\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Preview<\/a> to open your WebP file. Right click and select \u201copen with\u201d, then choose Preview.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/webp-to-png-preview-1-1.png\" alt=\"\" class=\"wp-image-44656\"\/><\/figure>\n\n\n\n<p><em>One quick note here: if you\u2019re running an older OS, Preview may not be able to open the image. You\u2019ll need to update to BigSur.<\/em><\/p>\n\n\n\n<a name=\"convertwebp\"><\/a>\n\n\n\n<p>On Windows, the easiest way to open your image is through <a href=\"https:\/\/support.microsoft.com\/en-us\/windows\/open-microsoft-paint-ead1dc5c-abc4-fd2c-d81e-ebb013fbc113\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MS Paint<\/a>. You can either right click on the file and choose \u201copen with\u201d, or open Paint and then open the image. You\u2019ll be able to see the WebP file without a problem.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Breakdown of Image Compression<\/h2>\n\n\n\n<p>There are two types of image compression \u2014 lossy and lossless. Lossy compression reduces file size by discarding some data, while lossless compression retains all data but may not be as effective at reducing file size.<\/p>\n\n\n\n<p>PNG is a lossless format, meaning that no data is lost when the file is compressed. This makes it ideal for storing images that need to be high quality, such as logos or product photos. However, because PNG files are not as efficiently compressed as lossy formats like WebP, they may be larger in file size.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Do I Convert WebP to PNG?<\/h2>\n\n\n\n<p>We\u2019re going to go through three different methods for converting your WebP image to a PNG file. Let\u2019s start with Mac.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Convert WebP to PNG on a Mac<\/h3>\n\n\n\n<p>You\u2019ll start by opening the file in <a href=\"https:\/\/support.apple.com\/guide\/preview\/convert-graphics-file-types-prvw1012\/mac\" rel=\"nofollow noopener\">Preview<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/webp-to-png-preview-2.png\" alt=\"\" class=\"wp-image-44657\"\/><\/figure>\n\n\n\n<p>From here, you click on File, then Export. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/webp-to-png-preview-3.png\" alt=\"\" class=\"wp-image-44658\"\/><\/figure>\n\n\n\n<p>You\u2019ll have your choice of file types, and you can pick PNG.&nbsp;If the WebP image has a transparent background and you want to keep it transparent, then make sure you\u2019ve checked \u201cAlpha\u201d. Then save.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/webp-to-png-preview-5.png\" alt=\"\" class=\"wp-image-44660\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Convert WebP to PNG on Windows<\/h3>\n\n\n\n<p>For Windows, the process will be very similar but you\u2019ll do it through <a href=\"https:\/\/www.meersworld.net\/2020\/06\/how-to-convert-webp-to-jpeg-png-using-paint.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MS Paint<\/a>. <\/p>\n\n\n\n<p>Open the WebP file in paint.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/webp-to-png-windows-1.png\" alt=\"\" class=\"wp-image-44664\"\/><\/figure>\n\n\n\n<p>Then go to File and Save as. Under the type select PNG. Then click save.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/webp-to-png-windows-2.png\" alt=\"\" class=\"wp-image-44665\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Convert WebP to PNG using a PNG convertor<\/h3>\n\n\n\n<p>There are many WebP to PNG converters available online. We recommend using a web-based PNG converter like Zamzar or WebConvert. Simply upload your WebP file and choose the PNG option, then click \u201cConvert\u201d. Your file will be ready to download in seconds.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Convert WebP to PNG (Photoshop)<\/h3>\n\n\n\n<p>The final method works for either Windows or Mac. For this method, we\u2019ll be using Photoshop. In order to open WebP files in Photoshop, you\u2019ll need to download an extra plugin. Follow the instructions on the <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webpshop\" rel=\"nofollow noopener\">WebPShop<\/a> page to get the plugin installed.\u00a0<\/p>\n\n\n\n<p>Once you\u2019ve got it installed, you\u2019ll be able to open your WebP files in Photoshop. Then you\u2019ll follow the same steps as before: <\/p>\n\n\n\n<p>Choose File, Export, then select the PNG format.&nbsp;<\/p>\n\n\n\n<p>Now you can work with WebP files just as easily as any other image format.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The main difference between WebP and PNG is that WebP is a newer image format with better compression, transparency support, and the ability to create animations. For these reasons, a WebP file may be a better choice than a PNG file for web graphics.<\/p>\n\n\n\n<p>That said, there are many ways to convert WebP files to PNG files for editing and manipulation.<\/p>\n\n\n\n<p>We hope this post has been a helpful resource as you work hard to build your nonprofit brand. For more information on how CauseVox can help your nonprofit grow its donor base and scale effectively, <a href=\"https:\/\/www.causevox.com\/donation-page\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this guide to converting images from a WebP file to a PNG file, we\u2019ll give you an overview of the WebP format and how to convert WebP files to PNG files using a Mac, Windows, and Photoshop. Skip ahead with these quick links: What is WebP? WebP vs PNG How to download or save [&hellip;]<\/p>\n","protected":false},"author":43,"featured_media":52713,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-44653","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-article"],"acf":[],"featured_image_src":"https:\/\/www.causevox.com\/wp-content\/uploads\/2024\/05\/webp-to-png-drag-drop-600x400.png","featured_image_src_square":"https:\/\/www.causevox.com\/wp-content\/uploads\/2024\/05\/webp-to-png-drag-drop-600x600.png","author_info":{"display_name":"Team CauseVox","author_link":"https:\/\/www.causevox.com\/author\/teamcausevox\/"},"_links":{"self":[{"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/posts\/44653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/comments?post=44653"}],"version-history":[{"count":0,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/posts\/44653\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/media\/52713"}],"wp:attachment":[{"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/media?parent=44653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/categories?post=44653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/tags?post=44653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}