https://changeimageshape.com/assets/Resize-CLkMt2Rc.js

1import{s as g,p as ye,o as e,l as be,a as je,c as ve}from"./index-CafeMRk1.js";import{r as o}from"./vendor-2Sbf6FZG.js";import{compressPng as _,MAX_FILE_SIZE as we,loadImageBlob as ze,triggerDownload as Se,formatBytes as V}from"./image-utils-Dc_WrQMb.js";const Z=[{id:"png",label:"PNG",ext:"png",mime:"image/png"},{id:"jpeg",label:"JPEG",ext:"jpg",mime:"image/jpeg"},{id:"webp",label:"WebP",ext:"webp",mime:"image/webp"},{id:"svg",label:"SVG",ext:"svg",mime:"image/svg+xml"}],ke=[{label:"1:1",w:1,h:1},{label:"16:9",w:16,h:9},{label:"4:3",w:4,h:3},{label:"3:2",w:3,h:2},{label:"9:16",w:9,h:16}],j=8e3;function Le({onNavigate:v}){const[d,G]=o.useState(null),[D,J]=o.useState(""),[l,ee]=o.useState(0),[m,te]=o.useState(0),[n,H]=o.useState(0),[i,W]=o.useState(0),[E,w]=o.useState(""),[P,z]=o.useState(""),[u,$]=o.useState(!0),[se,O]=o.useState(!1),[c,S]=o.useState("png"),[p,F]=o.useState(null),[K,U]=o.useState(!1),[Y,Q]=o.useState(!1),[x,X]=o.useState(null),[f,oe]=o.useState(0),[y,ne]=o.useState(null),[N,A]=o.useState("png"),q=o.useRef(null);o.useEffect(()=>{const t="resize-tool-schema";if(document.getElementById(t))return;if(window.location.pathname==="/resize"){const r=document.createElement("link");r.rel="canonical",r.href="https://changeimageshape.com/tools/resize",document.head.appendChild(r)}const s=document.createElement("script");s.id=t,s.type="application/ld+json",s.textContent=JSON.stringify({"@context":"https://schema.org","@type":"SoftwareApplication",name:"Image Resizer — Change Image Shape",applicationCategory:"MultimediaApplication",operatingSystem:"Any",offers:{"@type":"Offer",price:"0",priceCurrency:"USD"},description:"Free online image resizer. Resize photos by pixel dimensions or aspect ratio in your browser. 100% private, no uploads."}),document.head.appendChild(s);const a=document.createElement("script");return a.id=`${t}-breadcrumb`,a.type="application/ld+json",a.textContent=JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:"https://changeimageshape.com/"},{"@type":"ListItem",position:2,name:"Tools",item:"https://changeimageshape.com/tools"},{"@type":"ListItem",position:3,name:"Resize Image",item:"https://changeimageshape.com/tools/resize"}]}),document.head.appendChild(a),()=>{document.getElementById(t)?.remove(),document.getElementById(`${t}-breadcrumb`)?.remove()}},[]);const k=o.useCallback(t=>{H(t),w(String(t))},[]),C=o.useCallback(t=>{W(t),z(String(t))},[]),I=o.useCallback(async()=>{if(!d||n<1||i<1)return null;if(n===l&&i===m&&c===N&&y)return y;const t=document.createElement("canvas");t.width=n,t.height=i;const s=t.getContext("2d");if(!s)return null;s.imageSmoothingQuality="high",c==="jpeg"&&(s.fillStyle="#ffffff",s.fillRect(0,0,n,i));const a=Math.min(n/l,i/m),r=Math.round(l*a),h=Math.round(m*a),ge=Math.round((n-r)/2),ue=Math.round((i-h)/2);if(s.drawImage(d,ge,ue,r,h),c==="png")return _(t,100,!0);if(c==="jpeg")return new Promise(b=>t.toBlob(B=>b(B),"image/jpeg",.92));if(c==="svg"){const b=await _(t,100,!0);if(!b)return null;const B=await b.arrayBuffer(),xe=btoa(String.fromCharCode(...new Uint8Array(B))),fe=`<svg xmlns="http://www.w3.org/2000/svg" width="${n}" height="${i}">
2  <image href="data:image/png;base64,${xe}" width="${n}" height="${i}"/>
3</svg>`;return new Blob([fe],{type:"image/svg+xml"})}return new Promise(b=>t.toBlob(B=>b(B),"image/webp",.9))},[d,n,i,c,l,m,N,y]);o.useEffect(()=>{if(!d||n<1||i<1)return;let t=!1;const s=setTimeout(()=>{if(n===l&&i===m&&c===N&&y){t||(X(y.size),F(a=>(a&&URL.revokeObjectURL(a),URL.createObjectURL(y))));return}I().then(a=>{t||!a||(X(a.size),F(r=>(r&&URL.revokeObjectURL(r),URL.createObjectURL(a))))})},250);return()=>{t=!0,clearTimeout(s)}},[d,n,i,c,I,l,m,N,y]),o.useEffect(()=>()=>{p&&URL.revokeObjectURL(p)},[]);const R=o.useCallback(async t=>{if(!t.type.startsWith("image/")){g(`"${t.name}" is not an image.`,"danger");return}if(t.size>we){g(`"${t.name}" is over 25 MB.`,"danger");return}try{const s=await ze(t);G(s),J(t.name),oe(t.size),ne(t),ee(s.naturalWidth),te(s.naturalHeight),k(s.naturalWi

3dth),C(s.naturalHeight),$(!0),t.type==="image/jpeg"||t.type==="image/jpg"?(S("jpeg"),A("jpeg")):t.type==="image/webp"?(S("webp"),A("webp")):(S("png"),A("png")),g("Image loaded","success")}catch{g(`Failed to load "${t.name}"`,"danger")}},[k,C]),ie=o.useCallback(t=>{t.preventDefault(),U(!1);const s=t.dataTransfer.files[0];s&&R(s)},[R]),ae=o.useCallback(t=>{const s=t.target.files?.[0];s&&R(s),t.target.value=""},[R]),re=o.useCallback(t=>{w(t);const s=Number(t);if(!isNaN(s)&&s>=1){s>j&&g(`Max size is ${j}px`,"danger");const a=Math.min(s,j);if(H(a),u&&n>0&&i>0){const r=i/n,h=Math.max(1,Math.round(a*r));W(h),z(String(h))}}},[u,n,i]);o.useEffect(()=>{c==="jpeg"&&(n!==l||i!==m)&&S("png")},[n,i,c,l,m]);const le=o.useCallback(t=>{z(t);const s=Number(t);if(!isNaN(s)&&s>=1){s>j&&g(`Max size is ${j}px`,"danger");const a=Math.min(s,j);if(W(a),u&&n>0&&i>0){const r=n/i,h=Math.max(1,Math.round(a*r));H(h),w(String(h))}}},[u,n,i]),ce=o.useCallback(()=>{E===""&&w(String(n))},[E,n]),de=o.useCallback(()=>{P===""&&z(String(i))},[P,i]),me=o.useCallback((t,s)=>{const a=n||l,r=Math.max(1,Math.round(a*(s/t)));k(a),C(r),w(String(a)),z(String(r))},[n,l,k,C]),pe=o.useCallback(()=>{G(null),J(""),p&&URL.revokeObjectURL(p),F(null)},[p]),L=n>0&&i>0&&Math.abs(n/i-9/16)<.01&&n>4500,he=o.useCallback(async()=>{Q(!0);try{const t=await I();if(!t){g("Resize failed","danger");return}const s=Z.find(r=>r.id===c),a=D.replace(/\.[^.]+$/,"")||"image";Se(t,`changeimageshape.com-${a}-${n}x${i}.${s.ext}`),g("Downloaded","success")}finally{Q(!1)}},[I,c,D,n,i]),T=(t,s)=>{t.preventDefault(),v(s)},M=ye("(max-width: 560px)");return e.jsxs(e.Fragment,{children:[d&&e.jsx("div",{style:{position:"fixed",inset:0,zIndex:9998,background:"var(--color-bg)"}}),e.jsx("div",{style:d?{position:"fixed",inset:0,zIndex:9999,display:"flex",flexDirection:"column",background:"var(--color-bg)"}:{},children:e.jsxs("main",{style:d?{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}:{},children:[e.jsx("section",{className:"page-section",style:d?{flex:1,display:"flex",flexDirection:"column",padding:M?"12px 12px":"12px 20px",overflow:"hidden"}:{paddingBottom:32},children:e.jsxs("div",{className:"container-narrow",style:d?{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}:{},children:[e.jsx("div",{style:{marginBottom:4,marginLeft:-8}

3,children:e.jsx("button",{className:"btn btn-ghost btn-sm",onClick:()=>O(!0),children:"← Back to Tools"})}),e.jsxs("div",{style:{textAlign:"center",marginBottom:d?0:28},children:[e.jsx("div",{className:"eyebrow",style:{marginBottom:8},children:"Free Tool · 100% Private"}),e.jsx("h1",{className:"display-md",style:{marginBottom:8},children:"Resize an Image Online"}),e.jsx("p",{className:"text-muted",style:{fontSize:16},children:"Resize photos by exact pixel dimensions or a preset aspect ratio — all in your browser, nothing uploaded."})]}),d?e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4,gap:8},children:[e.jsxs("span",{className:"mono",style:{fontSize:M?11:13,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0,flex:1},children:[D," · ",l,"×",m]}),e.jsxs("button",{className:"btn btn-secondary btn-sm",onClick:pe,"aria-label":"Remove image",style:{flexShrink:0,whiteSpace:"nowrap",padding:M?"6px 10px":void 0},children:[e.jsx(je,{size:14})," Change"]})]}),e.jsxs("div",{style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",background:"var(--color-bg-muted)",border:"1px solid var(--color-border)",borderRadius:12,padding:12,overflow:"hidden",minHeight:0},children:[p&&e.jsx("img",{src:p,alt:"Preview",style:{maxWidth:"100%",maxHeight:"100%",objectFit:"contain",borderRadius:8}}),!p&&e.jsx("div",{style:{aspectRatio:"16/9",width:"100%"}})]}),x!==null&&e.jsxs("div",{style:{display:"flex",justifyContent:"center",gap:12,marginTop:8,fontSize:12},children:[e.jsxs("span",{className:"text-muted",children:["Original: ",e.jsx("strong",{style:{color:"var(--color-text)"},children:V(f)})]}),e.jsxs("span",{className:"text-muted",children:["Output: ",e.jsx("strong",{style:{color:x<=f?"var(--color-success, #22c55e)":"var(--color-accent)"},children:V(x)})]}),f>0&&e.jsx("span",{className:"text-muted",children:x<f?`↓ ${Math.round((1-x/f)*100)}% smaller`:x>f?`↑ ${Math.round((x/f-1)*100)}% larger`:"= same size"})]}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr auto 1fr",gap:8,alignItems:"end",marginTop:8},children:[e.jsxs("div",{children:[e.jsx("label",{className:"eyebrow",htmlFor:"resize-w",style:{display:"block",marginBottom:4},children:"Width (px)"}),e.jsx("input",{id:"resize-w",className:"input-base",type:"number",min:1,value:E,onChange:t=>re(t.target.value),onBlur:ce}),L&&e.jsx("div",{style:{color:"var(--color-danger, #ef4444)",fontSize:11,marginTop:2},children:"Max 4500px for 9:16"})]}),e.jsx("button",{onClick:()=>$(t=>!t),className:"btn btn-icon btn-secondary","aria-label":u?"Unlock aspect ratio":"Lock aspect ratio",title:u?"Aspect ratio locked":"Aspect ratio unlocked",style:{marginBottom:1},children:e.jsx("span",{style:{fontSize:22,lineHeight:1},children:u?"🔗":"⛓️‍💥"})}),e.jsxs("div",{children:[e.jsx("label",{className:"eyebrow",htmlFor:"resize-h",style:{display:"block",marginBottom:4},children:"Height (px)"}),e.jsx("input",{id:"resize-h",className:"input-base",type:"number",min:1,value:P,onChange:t=>le(t.target.value),onBlur:de})]})]}),e.jsxs("div",{style:{marginTop:8},children:[e.jsx("label",{className:"eyebrow",style:{display:"block",marginBottom:4},children:"Aspect Ratio"}),e.jsxs("div",{style:{display:"flex",gap:6,flexWrap:"wrap"},children:[ke.map(t=>{const s=i>0?n/i:l/m,a=t.w/t.h,r=Math.abs(s-a)<.01;return e.jsx("button",{className:`btn ${r?"btn-primary":"btn-secondary"} btn-sm`,onClick:()=>me(t.w,t.h),children:t.label},t.label)}),e.jsx("button",{className:"btn btn-ghost btn-sm",onClick:()=>{$(!0),k(l),C(m)},children:"↺ Original"})]})]}),e.jsxs("div",{style:{marginTop:8},children:[e.jsx("label",{className:"eyebrow",style:{display:"block",marginBottom:4},children:"Format"}),e.jsx("div",{style:{display:"flex",gap:6,flexWrap:M?"wrap":void 0},children:Z.filter(t=>t.id!=="jpeg"||n===l&&i===m).map(t=>e.jsx("button",{className:`btn ${c===t.id?"btn-primary":"btn-secondary"} btn-block`,onClick:()=>S(t.id),"aria-pressed":c===t.id,children:t.label},t.id))})]}),L&&e.jsx("div",{style:{color:"var(--color-danger, #ef4444)",fontSize:13,marginTop:8,textAlign:"center"},children:"Cannot put more than 4500px width for 9:16 ratio — reduce width to download"}),e.jsxs("button",{className:"btn btn-primary btn-block btn-lg",onClick:he,disabled:Y||n<1||i<1||L,style:{marginTop:8,minHeight:44},children:[e.jsx(ve,{size:18})," ",Y?"Processing…":L?"Reduce width to download":`Download ${n}×${i}`]})]}

3):e.jsxs("div",{className:`tool-dropzone ${K?"dragging":""}`,onDragOver:t=>{t.preventDefault(),U(!0)},onDragLeave:()=>U(!1),onDrop:ie,onClick:()=>q.current?.click(),role:"button",tabIndex:0,onKeyDown:t=>{(t.key==="Enter"||t.key===" ")&&q.current?.click()},"aria-label":"Upload an image to resize",style:Ce(K),children:[e.jsx(be,{size:40}),e.jsx("h2",{style:{fontSize:18,margin:"16px 0 6px"},children:"Drop an image here"}),e.jsx("p",{className:"text-muted",style:{fontSize:14},children:"or click to browse · JPG, PNG, WebP · supports files up to 25 MB"}),e.jsx("input",{ref:q,type:"file",accept:"image/*",onChange:ae,style:{display:"none"}})]})]})}),!d&&e.jsx("section",{className:"page-section",style:{paddingTop:40,borderTop:"1px solid var(--color-border)"},children:e.jsxs("div",{className:"container-narrow",children:[e.jsx("h2",{style:{fontSize:22,marginBottom:16},children:"How to Resize an Image Online for Free"}),e.jsx("p",{style:{fontSize:15,lineHeight:1.7,color:"var(--color-text-muted)",marginBottom:24},children:"Drop your image above, enter the exact pixel dimensions you need, and click Download. The aspect-ratio lock keeps proportions intact so nothing looks stretched. Everything runs in your browser."}),e.jsx("h2",{style:{fontSize:20,marginBottom:12},children:"Resize an Image in Exact Pixels"}),e.jsx("p",{style:{fontSize:15,lineHeight:1.7,color:"var(--color-text-muted)",marginBottom:12},children:"Type a width and height, or use the preset aspect-ratio buttons to fit common formats:"}),e.jsxs("ul",{style:{fontSize:15,lineHeight:1.9,color:"var(--color-text-muted)",marginBottom:24,paddingLeft:20},children:[e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"1080 × 1080"})," — Instagram's native square size for feed posts"]}),e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"1200 × 630"})," — standard Open Graph ratio for link previews"]}),e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"1920 × 1080"})," — Full HD widescreen for wallpaper and YouTube"]}),e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"400 × 400"})," — the recommended dimension for LinkedIn and X/Twitter avatars"]}),e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"800 × 600"})," — lightweight web previews that load fast on any connection"]})]}),e.jsx("h2",{style:{fontSize:20,marginBottom:12},children:"Resize an Image to a Specific Size in KB"}),e.jsxs("p",{style:{fontSize:15,lineHeight:1.7,color:"var(--color-text-muted)",marginBottom:24},children:["Resize the pixel dimensions here first, then open the"," ",e.jsx("a",{href:"/tools/compress",onClick:t=>T(t,"/tools/compress"),children:"compress tool"})," and drag the quality slider until the live size estimate hits your target — 20 KB, 50 KB, 100 KB, or 200 KB. Combining resize + compress gives you the best quality at any file-size limit."]}),e.jsx("h2",{style:{fontSize:20,marginBottom:12},children:"Resize Without Losing Quality"}),e.jsx("p",{style:{fontSize:15,lineHeight:1.7,color:"var(--color-text-muted)",marginBottom:24},children:"Quality loss usually comes from upscaling a small image or over-compressing. To stay crisp:"}),e.jsxs("ul",{style:{fontSize:15,lineHeight:1.9,color:"var(--color-text-muted)",marginBottom:24,paddingLeft:20},children:[e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"Scale down, not up"})," — reducing dimensions stays sharp; enlarging a small source adds blur."]}),e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"Use PNG or WebP"})," for graphics and screenshots to avoid JPEG compression artifacts."]}),e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"Resize once"})," — repeated JPEG re-saves compound quality loss each time."]})]}),e.jsx("h2",{style:{fontSize:20,marginBottom:12},children:"Resize for Specific Platforms"}),e.jsx("p",{style:{fontSize:15,lineHeight:1.7,color:"var(--color-text-muted)",marginBottom:24},children:"Each platform has recommended image dimensions for the best display quality:"}),e.jsxs("ul",{style:{fontSize:15,lineHeight:1.9,color:"var(--color-text-muted)",marginBottom:24,paddingLeft:20},children:[e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"Instagram feed"})," — 1080x1080 px for square, 1080x1350 px for portrait, 1080x566 px for landscape."]}),e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"LinkedIn banner"})," — 1584x396 px. Keep text and logos in the safe zone, which is the center 70% of the image."]}),e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"YouTube thumbnail"})," — 1280x720 px. Bold text and high-contrast subjects work best at this resolution."]}),e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"X/Twitter post"})," — 1600x800 px for single images. The 2:1 ratio prevents unwanted cropping in the timeline."]}),e.jsxs("li",{children:[e.jsx("strong",{style:{color:"var(--color-text)"},children:"Shopify product"})," — 2048x2048 px with a square aspect ratio to support the zoom feature."]})]}),e.jsx("h2",{style:{fontSize:20,marginBottom:12},children:"Frequently Asked Questions"}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:16,marginBottom:32},children:[{q:"Is this image resizer free?",a:"Yes — completely free. No account or watermark required. The tool works offline once the page has loaded."},{q:"Does my photo get uploaded to a server?",a:"No. Resizing runs entirely in your browser using the HTML5 Canvas API. Your image stays on your device."},{q:"Can I resize a PNG without losing the transparent background?",a:"Yes — choose PNG or WebP as the output format. Both preserve transparency. JPEG does not support transparency."},{q:"What is the maximum output resolution?",a:"You can set a custom width or height up to 8000 px. For most use cases, 4000 px g

3ives excellent print-quality results."},{q:"Can I resize multiple images at once?",a:"This tool resizes one image at a time. For batch resizing, desktop image processors handle many files at once. This tool processes each image locally in your browser with zero server uploads."}].map(({q:t,a:s})=>e.jsxs("div",{style:{padding:"16px 20px",background:"var(--color-bg-elevated)",border:"1px solid var(--color-border)",borderRadius:12},children:[e.jsx("p",{style:{fontSize:15,fontWeight:600,marginBottom:6},children:t}),e.jsx("p",{style:{fontSize:14,color:"var(--color-text-muted)",margin:0,lineHeight:1.6},children:s})]},t))}),e.jsxs("div",{style:{display:"flex",gap:12,flexWrap:"wrap"},children:[e.jsx("a",{href:"/tools/compress",className:"btn btn-secondary",onClick:t=>T(t,"/tools/compress"),children:"Compress an Image →"}),e.jsx("a",{href:"/editor",className:"btn btn-secondary",onClick:t=>T(t,"/editor"),children:"Crop into a Shape →"}),e.jsx("a",{href:"/blog/resize-image-online-free",className:"btn btn-ghost",onClick:t=>T(t,"/blog/resize-image-online-free"),children:"Resize Guide →"})]})]})}),se&&e.jsx("div",{style:{position:"fixed",inset:0,zIndex:9999,display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(0,0,0,0.5)"},onClick:()=>O(!1),children:e.jsxs("div",{style:{background:"var(--color-bg-elevated)",borderRadius:16,padding:32,maxWidth:380,width:"90%",textAlign:"center",boxShadow:"0 20px 60px rgba(0,0,0,0.3)"},onClick:t=>t.stopPropagation(),children:[e.jsx("p",{style:{fontSize:16,fontWeight:600,marginBottom:8},children:"Leave the Resize tool?"}),e.jsx("p",{className:"text-muted",style:{fontSize:14,marginBottom:24},children:"Changes will be lost."}),e.jsxs("div",{style:{display:"flex",gap:12,justifyContent:"center"},children:[e.jsx("button",{className:"btn btn-secondary",onClick:()=>O(!1),children:"Cancel"}),e.jsx("button",{className:"btn btn-primary",onClick:()=>v("/tools"),children:"Leave"})]})]})})]})})]})}function Ce(v){return{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",padding:"56px 24px",borderRadius:16,cursor:"pointer",border:`2px dashed ${v?"var(--color-accent)":"var(--color-border)"}`,background:v?"color-mix(in srgb, var(--color-accent) 6%, transparent)":"var(--color-bg-elevated)",color:"var(--color-text-muted)",transition:"border-color 160ms, background 160ms"}}export{Le as ResizePage};