PNG to WebP Converter – Shrink PNG Images into WebP Free

PNG keeps every pixel perfect, and charges you for it in file size: a single screenshot or product photo can weigh several megabytes, slowing down pages, eating mobile data and bumping into upload limits. WebP, the modern image format created by Google, stores the same picture in a fraction of the space. This free PNG to WebP converter shrinks your PNG images into WebP right here on the page. Pick a quality, see the before-and-after sizes and the percentage you saved, preview the result, and download it. No installation, no account, and no uploading your pictures to a stranger’s server.

How to convert a PNG to WebP

Drag your image onto the drop zone, or click the zone to pick a file from your device. PNG is the main format, and JPG and BMP files are accepted too, since the point is turning raster images into WebP. The tool shows the file name, its dimensions and its size, with a small preview. Next, choose a quality: Smaller file (75) squeezes hardest for thumbnails and quick sharing; Balanced (85) is the everyday sweet spot for websites; High quality (92) keeps fine detail for hero images; and Lossless (100) stores the picture without throwing any detail away. Press Convert to WebP, compare the original and result sizes side by side, check the preview, then download the file as yourname.webp.

Your image never leaves your device

This converter protects your privacy by design: the file is converted locally in your browser and never uploaded to any server. Your image is drawn onto a canvas and encoded by code running on your own machine, so screenshots, product shots and personal photos never travel across the internet and nothing is stored anywhere. Once the page has loaded you could even disconnect and still convert. The WebP file is created in your browser and saved straight to your downloads, exactly where you expect it.

Why WebP: smaller files, supported everywhere

WebP compresses far more efficiently than PNG. On photographic and detailed images it commonly saves 25 to 50 percent against an optimised PNG, and on screenshots and graphics the saving is often larger still, because PNG must store those images losslessly at full weight. WebP supports transparency just like PNG, so logos and cut-outs keep their see-through backgrounds, and it handles both lossy and lossless compression in one format. Support is no longer a concern: Chrome, Edge, Firefox and Safari (from version 14) all display WebP, as do WordPress and every major website platform. When should you not use it? Keep the original PNG for printing, for archival masters and for any workflow that needs lossless editing later, and use a PNG or JPG instead when a very old program or device must open the file.

Limits and file requirements

The tool accepts PNG, JPG and BMP images up to 20 MB each. The output keeps the exact pixel dimensions of the original — nothing is resized, cropped or stretched. Because the conversion runs on your device, extremely large images are limited by your device’s memory rather than by a server, so a huge photo is best handled on a desktop. One file is converted at a time. A corrupt file, or a file that is not really an image, cannot be opened and the tool will tell you. If your browser is too old to encode WebP, the tool says so instead of silently handing you back a PNG with the wrong name.

PNG to WebP Converter – frequently asked questions

Is this PNG to WebP converter free?

Yes. It is completely free, with no sign-up, no watermark and no limit on how many images you can convert.

Will converting to WebP lose quality?

At the lossy qualities (75, 85 and 92) a small amount of detail is traded for a much smaller file; at 85 most people cannot see any difference. Choose Lossless (100) if every pixel must be preserved exactly.

Does WebP keep transparency?

Yes. Transparent areas of your PNG stay transparent in the WebP result, including partial transparency, so logos and overlays work exactly as before.

Is my image uploaded anywhere?

No. Your file is converted locally in your browser and never uploaded, so your images stay on your own device from start to finish.

Related tools

Versión en español: Convertir PNG a WebP gratis – Reduce tus imágenes PNG a WebP online. You may also like: GIF to PNG Converter – Turn GIF Images into PNG Files Free · SVG to JPG Converter – Turn Vector Graphics into JPG Images Free.

Embed this tool on your website — free

Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.

<iframe srcdoc="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;PNG to WebP Converter&lt;/title&gt; &lt;style&gt; body{font-family:Arial,sans-serif;background-color:#f4f4f9;padding:16px;margin:0} .container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);max-width:680px;margin:0 auto} h2{margin:0 0 6px;color:#0f3d3e;font-size:22px} p.sub{margin:0 0 14px;color:#555;font-size:14px} label{font-weight:600;font-size:14px;display:block;margin:10px 0 4px} input[type=text],input[type=number],select{width:100%;box-sizing:border-box;padding:11px;font-size:16px;border:1px solid #cbd5e1;border-radius:6px;background:#fff} .row{display:flex;gap:10px;flex-wrap:wrap} .row&gt;*{flex:1;min-width:140px} button{background:#0f766e;color:#fff;border:0;padding:11px 22px;font-size:16px;border-radius:6px;cursor:pointer;margin-top:12px} button:hover{background:#115e59} button:disabled{background:#94a3b8;cursor:wait} #status{font-size:13px;color:#666;margin-top:10px;min-height:16px} .err{color:#b91c1c} .card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;margin-top:12px;background:#f8fafc} .big{font-size:26px;font-weight:700;color:#0f3d3e} table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px} th,td{text-align:left;padding:7px 8px;border-bottom:1px solid #e2e8f0} th{color:#0f3d3e} .bar{height:10px;background:#e2e8f0;border-radius:5px;overflow:hidden} .bar&gt;i{display:block;height:100%;background:#0f766e} img.cover{max-width:120px;border-radius:6px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;style&gt; .drop{border:2px dashed #94a3b8;border-radius:8px;padding:26px 14px;text-align:center;color:#475569;background:#f8fafc;cursor:pointer;margin-top:6px} .drop.over{border-color:#0f766e;background:#f0fdfa;color:#0f766e} .drop input{display:none} .thumb{display:inline-block;margin:6px;text-align:center;vertical-align:top} .thumb img{max-width:150px;border:1px solid #e2e8f0;border-radius:6px;display:block;background:#fff} img.prev{max-width:100%;border:1px solid #e2e8f0;border-radius:6px;display:block;margin-top:8px;background:#fff} a.dl{display:inline-block;background:#0f766e;color:#fff;padding:8px 16px;border-radius:6px;text-decoration:none;font-size:14px;margin-top:6px} &lt;/style&gt; &lt;h2&gt;PNG to WebP Converter&lt;/h2&gt; &lt;p class=&quot;sub&quot;&gt;Drop a PNG below and shrink it into a modern WebP image. JPG and BMP files are accepted too. Choose the quality, compare the before-and-after sizes, and download the .webp.&lt;/p&gt; &lt;div class=&quot;drop&quot; id=&quot;drop&quot;&gt;&lt;strong&gt;Drag &amp;amp; drop your image here&lt;/strong&gt;&lt;br&gt;or click to choose a file&lt;input type=&quot;file&quot; id=&quot;file&quot; accept=&quot;image/png,image/jpeg,image/bmp,.png,.jpg,.jpeg,.bmp&quot;&gt;&lt;/div&gt; &lt;div id=&quot;status&quot;&gt;&lt;/div&gt; &lt;div id=&quot;panel&quot; style=&quot;display:none&quot;&gt; &lt;div class=&quot;card&quot;&gt;&lt;div class=&quot;big&quot; id=&quot;info&quot;&gt;&lt;/div&gt;&lt;div class=&quot;thumb&quot; id=&quot;preview&quot;&gt;&lt;/div&gt;&lt;/div&gt; &lt;label for=&quot;quality&quot;&gt;WebP quality&lt;/label&gt; &lt;select id=&quot;quality&quot;&gt; &lt;option value=&quot;0.75&quot;&gt;Smaller file (quality 75)&lt;/option&gt; &lt;option value=&quot;0.85&quot; selected&gt;Balanced (quality 85)&lt;/option&gt; &lt;option value=&quot;0.92&quot;&gt;High quality (quality 92)&lt;/option&gt; &lt;option value=&quot;1&quot;&gt;Lossless (quality 100)&lt;/option&gt; &lt;/select&gt; &lt;button id=&quot;go&quot; type=&quot;button&quot;&gt;Convert to WebP&lt;/button&gt; &lt;/div&gt; &lt;div id=&quot;results&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;script&gt; function sendH(){ try { parent.postMessage({wpcId: 6166, wpcH: document.body.scrollHeight + 16}, &#x27;*&#x27;); } catch (e) {} } window.addEventListener(&#x27;load&#x27;, sendH); window.addEventListener(&#x27;resize&#x27;, sendH); function st(msg, err){ var s=document.getElementById(&#x27;status&#x27;); s.innerHTML = err ? &#x27;&lt;span class=&quot;err&quot;&gt;&#x27;+msg+&#x27;&lt;/span&gt;&#x27; : msg; } function esc(s){ return String(s==null?&#x27;&#x27;:s).replace(/[&amp;&lt;&gt;&quot;&#x27;]/g, function(c){ return {&#x27;&amp;&#x27;:&#x27;&amp;amp;&#x27;,&#x27;&lt;&#x27;:&#x27;&amp;lt;&#x27;,&#x27;&gt;&#x27;:&#x27;&amp;gt;&#x27;,&#x27;&quot;&#x27;:&#x27;&amp;quot;&#x27;,&quot;&#x27;&quot;:&#x27;&amp;#39;&#x27;}[c]; }); } function fmt(n){ if(n&lt;1024) return n+&#x27; B&#x27;; if(n&lt;1048576) return (n/1024).toFixed(1)+&#x27; KB&#x27;; return (n/1048576).toFixed(2)+&#x27; MB&#x27;; } function baseName(n){ return (n||&#x27;image&#x27;).replace(/\.[^.]+$/, &#x27;&#x27;); } var srcImg = null, srcName = &#x27;image&#x27;, srcSize = 0, srcUrl = null; function handleFile(f){ document.getElementById(&#x27;results&#x27;).innerHTML=&#x27;&#x27;; document.getElementById(&#x27;panel&#x27;).style.display=&#x27;none&#x27;; srcImg = null; if(!f){ return; } if(!/image\/(png|jpeg|bmp|x-ms-bmp)/.test(f.type) &amp;&amp; !/\.(png|jpe?g|bmp)$/i.test(f.name)){ st(&#x27;That file is not a PNG, JPG or BMP image. Please choose an image ending in .png, .jpg, .jpeg or .bmp.&#x27;, true); sendH(); return; } if(f.size &gt; 20*1024*1024){ st(&#x27;That image is larger than 20 MB. Please convert a smaller image.&#x27;, true); sendH(); return; } st(&#x27;Reading &quot;&#x27; + esc(f.name) + &#x27;&quot;\u2026&#x27;); var url = URL.createObjectURL(f); var img = new Image(); img.onload = function(){ srcImg = img; srcName = baseName(f.name); srcSize = f.size; srcUrl = url; document.getElementById(&#x27;info&#x27;).textContent = f.name + &#x27; \u2014 &#x27; + img.naturalWidth + &#x27; x &#x27; + img.naturalHeight + &#x27; px \u2014 &#x27; + fmt(f.size); document.getElementById(&#x27;preview&#x27;).innerHTML = &#x27;&lt;img src=&quot;&#x27; + url + &#x27;&quot; alt=&quot;Original image preview&quot;&gt;&#x27;; document.getElementById(&#x27;panel&#x27;).style.display = &#x27;block&#x27;; st(&#x27;Image loaded. Choose a quality and press Convert to WebP.&#x27;); sendH(); }; img.onerror = function(){ URL.revokeObjectURL(url); st(&#x27;That image could not be opened. It may be corrupt or not a real PNG, JPG or BMP image. Try another file.&#x27;, true); sendH(); }; img.src = url; } function convert(){ if(!srcImg){ return; } var q = parseFloat(document.getElementById(&#x27;quality&#x27;).value); var btn = document.getElementById(&#x27;go&#x27;); btn.disabled = true; st(&#x27;Converting to WebP\u2026&#x27;); var canvas = document.createElement(&#x27;canvas&#x27;); canvas.width = srcImg.naturalWidth; canvas.height = srcImg.naturalHeight; var ctx = canvas.getContext(&#x27;2d&#x27;); ctx.drawImage(srcImg, 0, 0); if(!canvas.toBlob){ btn.disabled = false; st(&#x27;Your browser could not encode WebP. Try a current version of Chrome, Edge or Firefox.&#x27;, true); sendH(); return; } canvas.toBlob(function(blob){ btn.disabled = false; if(!blob){ st(&#x27;Your browser could not encode WebP. WebP encoding works in current Chrome, Edge and Firefox, and in Safari 14 and later \u2014 please try one of those browsers.&#x27;, true); sendH(); return; } var url = URL.createObjectURL(blob); var saved = srcSize ? (1 - blob.size / srcSize) * 100 : 0; var cmp; if(saved &gt; 0){ cmp = &#x27;&lt;div class=&quot;big&quot;&gt;&#x27; + saved.toFixed(1) + &#x27;% smaller&lt;/div&gt;&#x27;; } else { cmp = &#x27;&lt;div class=&quot;big&quot;&gt;&#x27; + fmt(blob.size) + &#x27;&lt;/div&gt;&lt;p style=&quot;margin:6px 0 0&quot;&gt;This WebP is not smaller than the original \u2014 that can happen with tiny or already-optimised images. Try a lower quality setting.&lt;/p&gt;&#x27;; } document.getElementById(&#x27;results&#x27;).innerHTML = &#x27;&lt;div class=&quot;card&quot;&gt;&#x27; + cmp + &#x27;&lt;table&gt;&lt;tr&gt;&lt;th&gt;Original (PNG)&lt;/th&gt;&lt;td&gt;&#x27; + fmt(srcSize) + &#x27;&lt;/td&gt;&lt;/tr&gt;&#x27; + &#x27;&lt;tr&gt;&lt;th&gt;WebP result&lt;/th&gt;&lt;td&gt;&#x27; + fmt(blob.size) + &#x27;&lt;/td&gt;&lt;/tr&gt;&#x27; + &#x27;&lt;tr&gt;&lt;th&gt;Dimensions&lt;/th&gt;&lt;td&gt;&#x27; + canvas.width + &#x27; x &#x27; + canvas.height + &#x27; px&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#x27; + &#x27;&lt;img class=&quot;prev&quot; src=&quot;&#x27; + url + &#x27;&quot; alt=&quot;Converted WebP preview&quot;&gt;&#x27; + &#x27;&lt;p style=&quot;margin:10px 0 0&quot;&gt;&lt;a class=&quot;dl&quot; href=&quot;&#x27; + url + &#x27;&quot; download=&quot;&#x27; + esc(srcName) + &#x27;.webp&quot;&gt;Download &#x27; + esc(srcName) + &#x27;.webp&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;&#x27;; st(&#x27;Done \u2014 your WebP image is ready.&#x27;); sendH(); }, &#x27;image/webp&#x27;, q); } var drop = document.getElementById(&#x27;drop&#x27;), fileInput = document.getElementById(&#x27;file&#x27;); drop.addEventListener(&#x27;click&#x27;, function(){ fileInput.click(); }); fileInput.addEventListener(&#x27;change&#x27;, function(){ handleFile(fileInput.files[0]); }); drop.addEventListener(&#x27;dragover&#x27;, function(e){ e.preventDefault(); drop.classList.add(&#x27;over&#x27;); }); drop.addEventListener(&#x27;dragleave&#x27;, function(){ drop.classList.remove(&#x27;over&#x27;); }); drop.addEventListener(&#x27;drop&#x27;, function(e){ e.preventDefault(); drop.classList.remove(&#x27;over&#x27;); if(e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]); }); document.getElementById(&#x27;go&#x27;).addEventListener(&#x27;click&#x27;, convert); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; " id="wpc-frame-6166" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe> <p><a href="https://ilmhunt.com/png-to-webp-converter/" target="_blank" rel="noopener">PNG to WebP Converter – Shrink PNG Images into WebP Free</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — free online tools</p>