https://www.debugbear.com/cdn/chunk-jpeg-to-webp.0dcbc20acce2faa228a0.js

1"use strict";(("undefined"==typeof window?self:window).webpackChunkdebugbear_gae=("undefined"==typeof window?self:window).webpackChunkdebugbear_gae||[]).push([[6640],{89072(e,t,r){r.d(t,{O:()=>m}),r(25440),r(62953),r(3296),r(27208),r(48408);var i=r(94430),o=r(52300),a=r(72737),l=r(11178),s=r(41802),n=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,a,l,s=[],n=!0,d=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;n=!1}else for(;!(n=(i=a.call(r)).done)&&(s.push(i.value),s.length!==t);n=!0);}catch(e){d=!0,o=e}finally{try{if(!n&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(d)throw o}}return s}}(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 h(e){let t=e.label,r=e.value,i=e.backgroundColor,o=void 0===i?"#f3f4f6":i,a=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:a},children:r})]})}function m(e){var t,r;let u=e.config;const m=c((0,n.useState)(null),2),g=m[0],p=m[1],f=c((0,n.useState)(null),2),b=f[0],x=f[1],v=c((0,n.useState)(null),2),y=v[0],j=v[1],w=c((0,n.useState)(null),2),S=w[0],W=w[1],C=c((0,n.useState)(!1),2),P=C[0],z=C[1],k=c((0,n.useState)(null!==(t=u.defaultQuality)&&void 0!==t?t:.9),2),N=k[0],R=k[1],T=c((0,n.useState)(null),2),I=T[0],E=T[1],F=c((0,n.useState)(!1),2),U=F[0],L=F[1],A=(0,n.useRef)(null);(0,n.useEffect)(()=>{if(y){const e=URL.createObjectURL(y);return W(e),()=>URL.revokeObjectURL(e)}W(null)},[y]);const O=e=>{if(!e.type.startsWith("image/"))return void alert("Please select an image file");p(e),E(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;x(r),G(r,N)},t.readAsDataURL(e)},G=(e,t)=>{if(!A.current)return;z(!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),z(!1)},u.outputFormat,t)},r.src=e},B=e=>{b&&G(b,e)},q=null!==(r=null==y?void 0:y.size)&&void 0!==r?r:null,J=I&&q?(100*(1-q/I)).toFixed(1):null;return(0,d.jsx)(l.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(),L(!1);const r=null===(t=e.dataTransfer.files)||void 0===t?void 0:t[0];r&&O(r)},onDragOver:e=>{e.preventDefault(),L(!0)},onDragLeave:e=>{e.preventDefault(),L(!1)},style:{border:"2px dashed "+(U?"#2563eb":"#d1d5db"),borderRadius:8,padding:64,textAlign:"center",backgroundColor:U?"#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&&O(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"}),g&&(0,d.jsxs)("p",{style:{marginTop:8,color:"#374151"},children:["Selected: ",g.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:()=>

1{if(!y||!g)return;const e=URL.createObjectURL(y),t=document.createElement("a");t.href=e;const r=g.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*N),"%",P&&" (converting...)"]}),(0,d.jsx)("input",{type:"range",min:"0.05",max:"1",step:"0.05",value:N,onChange:e=>R(parseFloat(e.target.value)),onMouseUp:e=>B(parseFloat(e.target.value)),onTouchEnd:e=>B(parseFloat(e.target.value)),style:{width:300}})]})]}),(0,d.jsxs)("div",{style:{display:"flex",gap:16,flexWrap:"wrap"},children:[(0,d.jsx)(h,{label:"Original Size",value:I?(0,s.z3)(I):"-"}),(0,d.jsx)(h,{label:`${u.outputLabel} Size`,value:q?(0,s.z3)(q):"-"}),(0,d.jsx)(h,{label:J&&parseFloat(J)<0?"Size Increase":"Savings",value:J?`${Math.abs(parseFloat(J))}%`:"-",backgroundColor:J&&parseFloat(J)>0?"#dcfce7":"#fef3c7",valueColor:J&&parseFloat(J)>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; web-share",referrerPolicy:"strict-origin-when-cross-origin",allowFullScreen:!0,style:{maxWidth:"100%",borderRadius:8}})]}),(0,d.jsx)(a.U,{}),(0,d.jsx)("canvas",{ref:A,style:{display:"none"}})]})})}},42694(e,t,r){r.r(t),r.d(t,{JpegToWebp:()=>a});var i=r(89072),o=r(74848);function a(){return(0,o.jsx)(i.O,{config:{title:"JPEG to WebP Converter",description:"Convert JPEG images to WebP directly in your browser.",outputFormat:"image/webp",outputExtension:"webp",outputLabel:"WebP",showQualitySlider:!0,defaultQuality:.9,faqItems:[{title:"How much smaller are WebP files compared to JPEG?",text:"WebP images are typically [25-34% smaller](https://developers.google.com/speed/webp/docs/webp_study) than equivalent JPEG files at the same visual quality. The exact savings depend on the image content and the quality settings used."},{title:"Why should I convert JPEG to WebP?",text:"Switching from JPEG to WebP can significantly reduce image file sizes, which improves page load times and reduces bandwidth costs. Search engines like Google also recommend using modern formats like WebP."},{title:"Is my image uploaded to a server?",text:"No. The conversion runs entirely in your browser using the Canvas API. Your images stay on your device and are never sent to any server."},{title:"How does the quality setting affect the output?",text:"At high quality (90-100%), the WebP output will look nearly identical to the original JPEG but with a smaller file size. Lowering the quality increases compression and reduces file size further, but may introduce visible artifacts."},{title:"Can I convert multiple images at once?",text:"This tool processes one image at a time. Upload a JPEG, review the result, and download the WebP file before converting the next image."}]}})}},52300(e,t,r){r.d(t,{$:()=>a});var i=r(29262),o=r(74848);function a(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),a=r(10242),l=r(77678),s=r(59880),n=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:s.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"}

1,{tile:"Real user monitoring (RUM)",icon:l.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)(n.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)(a.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})]})},e.title))})]})]})}}}]);