https://www.debugbear.com/cdn/chunk-webp-to-png.1de5bb0a95f2db686565.js

1"use strict";(("undefined"==typeof window?self:window).webpackChunkdebugbear_gae=("undefined"==typeof window?self:window).webpackChunkdebugbear_gae||[]).push([[4987],{89072(e,t,r){r.d(t,{O:()=>h}),r(25440),r(62953),r(3296),r(27208),r(48408);var i=r(94430),o=r(52300),l=r(72737),a=r(11178),n=r(41802),s=r(96540),d=r(74848);function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var i,o,l,a,n=[],s=!0,d=!1;try{if(l=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;s=!1}else for(;!(s=(i=l.call(r)).done)&&(n.push(i.value),n.length!==t);s=!0);}catch(e){d=!0,o=e}finally{try{if(!s&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(d)throw o}}return n}}(e,t)||function(e,t){if(e){if("string"==typeof e)return u(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?u(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,i=Array(t);r<t;r++)i[r]=e[r];return i}function m(e){let t=e.label,r=e.value,i=e.backgroundColor,o=void 0===i?"#f3f4f6":i,l=e.valueColor;return(0,d.jsxs)("div",{style:{padding:16,backgroundColor:o,borderRadius:8,flex:1,minWidth:150},children:[(0,d.jsx)("div",{style:{fontSize:13,color:"#6b7280"},children:t}),(0,d.jsx)("div",{style:{fontSize:20,fontWeight:600,color:l},children:r})]})}function h(e){var t,r;let u=e.config;const h=c((0,s.useState)(null),2),p=h[0],g=h[1],f=c((0,s.useState)(null),2),x=f[0],b=f[1],v=c((0,s.useState)(null),2),y=v[0],j=v[1],w=c((0,s.use

1State)(null),2),S=w[0],N=w[1],W=c((0,s.useState)(!1),2),C=W[0],P=W[1],z=c((0,s.useState)(null!==(t=u.defaultQuality)&&void 0!==t?t:.9),2),k=z[0],R=z[1],T=c((0,s.useState)(null),2),F=T[0],I=T[1],U=c((0,s.useState)(!1),2),L=U[0],O=U[1],A=(0,s.useRef)(null);(0,s.useEffect)(()=>{if(y){const e=URL.createObjectURL(y);return N(e),()=>URL.revokeObjectURL(e)}N(null)},[y]);const G=e=>{if(!e.type.startsWith("image/"))return void alert("Please select an image file");g(e),I(e.size),j(null);const t=new FileReader;t.onload=e=>{var t;const r=null===(t=e.target)||void 0===t?void 0:t.result;b(r),B(r,k)},t.readAsDataURL(e)},B=(e,t)=>{if(!A.current)return;P(!0);const r=new Image;r.onload=()=>{const e=A.current;e.width=r.width,e.height=r.height,e.getContext("2d").drawImage(r,0,0),e.toBlob(e=>{e&&j(e),P(!1)},u.outputFormat,t)},r.src=e},E=e=>{x&&B(x,e)},D=null!==(r=null==y?void 0:y.size)&&void 0!==r?r:null,$=F&&D?(100*(1-D/F)).toFixed(1):null;return(0,d.jsx)(a.K7,{isFullWidthWithoutSidebar:!0,header:(0,d.jsx)(i.V,{breadcrumbs:[{title:"Tools",href:"/tools"},{title:u.title}]}),children:(0,d.jsxs)("div",{style:{maxWidth:"100%",width:900,margin:"auto"},children:[(0,d.jsx)("h1",{style:{marginBottom:8,fontWeight:500},children:u.title}),(0,d.jsx)("p",{style:{color:"#6b7280",marginBottom:24},children:u.description}),(0,d.jsxs)("div",{onDrop:e=>{var t;e.preventDefault(),O(!1);const r=null===(t=e.dataTransfer.files)||void 0===t?void 0:t[0];r&&G(r)},onDragOver:e=>{e.preventDefault(),O(!0)},onDragLeave:e=>{e.preventDefault(),O(!1)},style:{border:"2px dashed "+(L?"#2563eb":"#d1d5db"),borderRadius:8,padding:64,textAlign:"center",backgroundColor:L?"#eff6ff":"#f9fafb",transition:"border-color 0.15s, background-color 0.15s"},children:[(0,d.jsx)("input",{type:"file",accept:"image/*",onChange:e=>{var t;const r=null===(t=e.target.files)||void 0===t?void 0:t[0];r&&G(r)},style:{display:"none"},id:"file-input"}),(0,d.jsx)("label",{htmlFor:"file-input",style:{cursor:"pointer",display:"inline-block",padding:"10px 20px",backgroundColor:"#2563eb",color:"#fff",borderRadius:6,fontWeight:500,marginBottom:0},children:"Select Image"}),(0,d.jsx)("p",{style:{marginTop:16,color:"#9ca3af",fontSize:14,marginBottom:0},children:"Or drag and drop an image here"}),p&&(0,d.jsxs)("p",{style:{marginTop:8,color:"#374151"},children:["Selected: ",p.name]})]}),y&&(0,d.jsxs)("div",{style:{marginBottom:24,marginTop:16},children:[(0,d.jsxs)("div",{style:{display:"flex",alignItems:"flex-end",justifyContent:"space-between",marginBottom:16,flexWrap:"wrap",gap:16},children:[(0,d.jsxs)("button",{onClick:()=>{if(!y||!p)return;const e=URL.createObjectURL(y),t=document.createElement("a");t.href=e;const r=p.name.replace(/\.[^/.]+$/,"");t.download=`${r}.${u.outputExtension}`,document.body.appendChild(t),t.click(),document.body.removeChild(t),URL.revokeObjectURL(e)},style:{padding:"10px 20px",backgroundColor:"#2563eb",color:"#fff",border:"none",borderRadius:6,fontWeight:500,cursor:"pointer"},children:["Download ",u.outputLabel]}),u.showQualitySlider&&(0,d.jsxs)("div",{style:{textAlign:"right"},children:[(0,d.jsxs)("label",{style:{display:"block",marginBottom:8,fontWeight:500},children:["Quality: ",Math.round(100*k),"%",C&&" (converting...)"]}),(0,d.jsx)("input",{type:"range",min:"0.05",max:"1",step:"0.05",value:k,onChange:e=>R(parseFloat(e.target.value)),onMouseUp:e=>E(parseFloat(e.target.value)),onTouchEnd:e=>E(parseFloat(e.target.value)),style:{width:300}})]})]}),(0,d.jsxs)("div",{style:{display:"flex",gap:16,flexWrap:"wrap"},children:[(0,d.jsx)(m,{label:"Original Size",value:F?(0,n.z3)(F):"-"}),(0,d.jsx)(m,{label:`${u.outputLabel} Size`,value:D?(0,n.z3)(D):"-"}),(0,d.jsx)(m,{label:$&&parseFloat($)<0?"Size Increase":"Savings",value:$?`${Math.abs(parseFloat($))}%`:"-",backgroundColor:$&&parseFloat($)>0?"#dcfce7":"#fef3c7",valueColor:$&&parseFloat($)>0?"#059669":"#d97706"})]})]}),S&&(0,d.jsx)("div",{style:{marginTop:24},children:(0,d.jsx)("img",{src:S,alt:"Converted preview",style:{maxWidth:"100%",maxHeight:400,border:"1px solid #e5e7eb",borderRadius:8}})}),u.faqItems&&(0,d.jsx)(o.$,{items:u.faqItems}),(0,d.jsxs)("div",{style:{marginTop:32},children:[(0,d.jsx)("h2",{style:{fontSize:18,fontWeight:500,marginBottom:16},children:"Learn more about image optimization"}),(0,d.jsx)("iframe",{width:"560",height:"315",src:"https://www.youtube-nocookie.com/embed/ExFVIQkyFxE?si=bhVA5-pHCwigE4Zj",title:"YouTube video player",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;

1 web-share",referrerPolicy:"strict-origin-when-cross-origin",allowFullScreen:!0,style:{maxWidth:"100%",borderRadius:8}})]}),(0,d.jsx)(l.U,{}),(0,d.jsx)("canvas",{ref:A,style:{display:"none"}})]})})}},97147(e,t,r){r.r(t),r.d(t,{WebpToPng:()=>l});var i=r(89072),o=r(74848);function l(){return(0,o.jsx)(i.O,{config:{title:"WebP to PNG Converter",description:"Convert WebP images to PNG directly in your browser.",outputFormat:"image/png",outputExtension:"png",outputLabel:"PNG",showQualitySlider:!1,faqItems:[{title:"What's the difference between WebP and PNG?",text:"While WebP offers better compression, PNG is more widely supported in older software, and image editors. Converting to PNG ensures compatibility when you need to use images in applications that don't support WebP."},{title:"Will the image lose quality when converting?",text:"No. PNG is a lossless format, so the conversion preserves all visual information from your WebP image. However, the file size will typically be larger than the original WebP file."},{title:"Is my image uploaded to a server?",text:"No. All conversion happens directly in your browser. Your images never leave your device."},{title:"Can I specify a quality setting?",text:"PNG is a lossless format, meaning it preserves all image data. If you want to reduce the file size, consider reducing the image dimensions in an image editor."}]}})}},52300(e,t,r){r.d(t,{$:()=>l});var i=r(29262),o=r(74848);function l(e){let t=e.items;return t&&0!==t.length?(0,o.jsx)("div",{className:"mt-5",style:{maxWidth:1e3},children:t.map((e,t)=>(0,o.jsxs)("div",{className:"mb-4",children:[(0,o.jsx)("h2",{className:"h5",children:e.title}),(0,o.jsx)(i.UP,{text:e.text})]},t))}):null}},72737(e,t,r){r.d(t,{U:()=>c});var i=r(47166),o=r(90317),l=r(10242),a=r(77678),n=r(59880),s=r(32304),d=r(74848);function c(){const e=[{href:"/test/website-speed",title:"Website Speed Test",imagePath:"oneOffTests/ogImage-new.png"},{href:"/html-size-analyzer",title:"HTML Size Analyzer",imagePath:"html-size-analyzer-updated.png"},{href:"/site-speed-chrome-extension",title:"Site Speed Extension",imagePath:"ogImage/chrome-extension-new.png"},{href:"/resource-hint-validator",title:"Resource Hint Validator",imagePath:"resourceHints/og-image.png"},{href:"/test/ttfb",title:"TTFB Test",imagePath:"free-tools/ttfb-test.png"},{href:"/test/noscript",title:"NoScript Test",imagePath:"free-tools/noscript-test.png"},{href:"/json-size-analyzer",title:"JSON Size Analyzer",imagePath:"free-tools/json-size-analyzer.png"}].filter(e=>!location.href.includes(e.href)).slice(0,6),t={border:"1px solid #eee",borderRadius:4,boxShadow:"0 0 10px rgba(0,0,0,0.1)"};return(0,d.jsxs)("div",{children:[(0,d.jsxs)("div",{className:"mt-3 p-3 border-color-eee",style:{maxWidth:900,...t},children:[(0,d.jsx)("h3",{children:"Optimize Website Performance"}),(0,d.jsx)("div",{className:"row",children:(0,d.jsxs)("div",{className:"col-md-12",children:[(0,d.jsxs)("p",{children:["DebugBear is a web performance monitoring tool that helps you"," ",(0,d.jsx)("strong",{children:"keep your website fast and deliver a great user experience"}),"."]}),(0,d.jsxs)("div",{className:"row",children:[(0,d.jsxs)("div",{className:"col-md-6",children:[["Identify slow pages on your website","Improve page speed and Core Web Vitals","Get alerted to regressions"].map(e=>(0,d.jsxs)("div",{className:"d-flex align-items-center mb-1",children:[(0,d.jsx)("div",{className:"d-flex",children:(0,d.jsx)(o.P,{className:"mr-2",style:{color:"#28a745"}})}),(0,d.jsx)("div",{children:e})]},e)),(0,d.jsxs)("div",{children:[(0,d.jsx)("p",{className:"mt-3 mb-2",children:"Get Comprehensive Performance Insights:"}),(0,d.jsx)("div",{children:[{tile:"Synthetic monitoring",icon:n.c,tooltip:"Run scheduled performance tests to track page speed and Google Lighthouse scores over time.",href:"/synthetic-website-monitoring"},{tile:"Google CrUX data",icon:i.K,tooltip:"View the real user metrics from Google Chrome User Experience Report (CrUX) that impact SEO.",href:"/google-crux-monitoring"},{tile:"Real user monitoring (RUM)",icon:a.k,tooltip:"Collect real user performance data to understand how your site performs for actual visitors.",href:"/real-user-monitoring"}].map(e=>{let t=e.tile,r=e.icon,i=e.tooltip,o=e.href;return(0,d.jsxs)("div",{className:"d-flex align-items-center mb-1",children:[(0,d.jsx)("div",{className:"d-flex mr-2",children:(0,d.jsx)(r,{})}),(0,d.jsxs)("div",{children:[t," ",(0,d.jsx)(s.c,{content:i,href:o})]})]},t)})})]}),(0,d.jsx)("div",{className:"mt-3",children:(0,d.jsxs)("a",{href:"/signup?utm_campaign=free-tools-cta",className:"btn btn-primary d-inline-flex align-items-center",style:{fontWeight:"500"},onClick:()=>{window.plausible("Click Free Tools Signup CTA")},target:"_blank",rel:"noreferrer",children:[(0,d.jsx)(l.A,{size:12}),(0,d.jsx)("div",{className:"ml-2",children:"Start Free Trial"})]})})]}),(0,d.jsx)("div",{className:"col-md-6",children:(0,d.jsx)("img",{style:{maxWidth:"100%",borderRadius:4,boxShadow:"0 0 10px rgba(0,0,0,0.2)"},src:"https://www.debugbear.com/dimg/f66a60a5cc2c3273ed6c080a00970e66.png"})})]})]})})]}),(0,d.jsxs)("div",{style:{maxWidth:900,...t},className:"p-3 border-color-eee mt-3",children:[(0,d.jsx)("h3",{className:"mb-0",children:"More Free Tools"}),(0,d.jsx)("div",{className:"row",children:e.map(e=>(0,d.jsx)("div",{className:"col-md-4 mt-3",children:(0,d.jsxs)("a",{href:e.href,children:[(0,d.jsx)("img",{src:`https://dbb.imgix.net/${e.imagePath}?q=100&height=261`,style:{width:"100%",borderRadius:4,boxShadow:"0 0 10px rgba(0,0,0,0.2)"}}),(0,d.jsx)("h4",{className:"mt-3 mb-0",style:{fontSize:18},children:e.title})]})}

1,e.title))})]})]})}}}]);