https://aspect-ratio-calculator.com/_next/static/chunks/2e3462fd87e0dbc4.js

1(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,33539,e=>{"use strict";var t=e.i(71645);function a(){return(0,t.useEffect)(()=>{"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").catch(console.error)},[]),null}e.s(["ServiceWorkerRegistrar",()=>a])},4942,e=>{"use strict";var t=e.i(43476),a=e.i(71645),o=e.i(75254);let i=(0,o.default)("message-square-plus",[["path",{d:"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",key:"18887p"}],["path",{d:"M12 8v6",key:"1ib9pf"}],["path",{d:"M9 11h6",key:"1fldmi"}]]),s=(0,o.default)("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]);var r=e.i(14764),n=e.i(43531);let l=(0,o.default)("chevron-right",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]]),d=(0,o.default)("eye-off",[["path",{d:"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",key:"ct8e1f"}],["path",{d:"M14.084 14.158a3 3 0 0 1-4.242-4.242",key:"151rxh"}],["path",{d:"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143",key:"13bj9a"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]]);var c=e.i(26615);let h=["roleDesigner","roleDeveloper","roleVideoEditor","rolePhotographer","roleContentCreator","roleSocialMediaManager","roleMarketingProfessional","roleFilmmaker","roleEducator","roleProductManager","roleFreelancer","roleStudent","roleOther"],u=["industryMedia","industryMarketing","industryEducation","industrySoftware","industryFilm","industryPhotography","industrySocialMedia","industryEcommerce","industryHealthcare","industryFinance","industryGaming","industryNonProfit","industryOther"];function m(){let{t:e}=(0,c.useTranslation)(),[o,m]=(0,a.useState)(!1),[f,p]=(0,a.useState)(!1),[g,b]=(0,a.useState)("feedback"),[y,w]=(0,a.useState)("idle"),[v,x]=(0,a.useState)(""),[k,j]=(0,a.useState)(""),[T,N]=(0,a.useState)(""),[S,C]=(0,a.useState)(""),[A,P]=(0,a.useState)(""),E=(0,a.useRef)(null),W=(0,a.useRef)(null);async function I(e){e.preventDefault(),w("sending");let t="feedback"===g?{type:"feedback",message:k}:{type:"request",role:T,industry:S,problem:A};try{let e=await fetch("/api/feedback",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)});if(!e.ok){let t=await e.json().catch(()=>({}));throw Error(t.detail||t.error||"Failed")}w("success"),j(""),N(""),C(""),P(""),setTimeout(()=>{w("idle"),m(!1)},2200)}catch(e){x(e instanceof Error?e.message:"Unknown error"),w("error"),setTimeout(()=>w("idle"),6e3)}}(0,a.useEffect)(()=>{"true"===localStorage.getItem("feedback-fab-hidden")&&p(!0)},[]),(0,a.useEffect)(()=>{function e(){localStorage.removeItem("feedback-fab-hidden"),p(!1),m(!0)}return window.addEventListener("show-feedback",e),()=>window.removeEventListener("show-feedback",e)},[]),(0,a.useEffect)(()=>{if(!o)return;function e(e){E.current&&!E.current.contains(e.target)&&m(!1)}let t=setTimeout(()=>document.addEventListener("mousedown",e),50);return()=>{clearTimeout(t),document.removeEventListener("mousedown",e)}},[o]),(0,a.useEffect)(()=>{o&&setTimeout(()=>W.current?.focus(),120)},[o,g]),(0,a.useEffect)(()=>{w("idle")},[g,o]);let R="idle"===y&&("feedback"===g?k.trim().length>0:T.trim()&&S.trim()&&A.trim().length>0);return f?null:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("button",{onClick:()=>m(e=>!e),"aria-label":"Open feedback panel",className:"feedback-fab","data-open":o,children:[(0,t.jsx)("span",{className:"feedback-fab-icon",children:o?(0,t.jsx)(s,{size:18,strokeWidth:2.5}):(0,t.jsx)(i,{size:18,strokeWidth:2.5})}),(0,t.jsx)("span",{className:"feedback-fab-label",children:o?e("feedbackWidget","close"):e("feedbackWidget","feedbackTab")})]}),o&&(0,t.jsxs)("div",{ref:E,className:"feedback-panel",role:"dialog","aria-modal":"true","aria-label":"Feedback panel",children:[(0,t.jsxs)("div",{className:"feedback-panel-header",children:[(0,t.jsx)("div",{className:"feedback-panel-header-dot"}),(0,t.jsx)("span",{className:"feedback-panel-header-title",children:"feedback"===g?e("feedbackWidget","shareYourThoughts"):e("feedbackWidget","requestFeature")})]}),(0,t.jsxs)("div",{className:"feedback-tabs",children:[(0,t.jsxs)("button",{className:`feedback-tab ${"feedback"===g?"active":""}`,onClick:()=>b("feedback"),type:"button",children:[(0,t.jsx)("span",{children:e("feedbackWidget","feedbackTab")}),"feedback"===g&&(0,t.jsx)("span",{className:"feedback-tab-pip"})]}),(0,t.jsxs)("button",{className:`feedback-tab ${"request"===g?"active":""}`,onClick:()=>b("request"),type:"button",children:[(0,t.jsx)("span",{children:e("feedbackWidget","requestTab")}),"request"===g&&(0,t.jsx)("span",{className:"feedback-tab-pip"})]})]}),(0,t.jsxs)("form",{onSubmit:I,className:"feedback-form",children:["feedback"===g?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("label",{className:"feedback-label",children:e("feedbackWidget","feedbackLabel")}),(0,t.jsx)("textarea",{ref:W,value:k,onChange:e=>j(e.target.value),placeholder:e("feedbackWidget","feedbackPlaceholder"),className:"feedback-textarea",rows:5,maxLength:2e3,disabled:"idle"!==y}),(0,t.jsxs)("div",{className:"feedback-char-count",children:[k.length,"/2000"]})]}):(0,t.jsxs)("div",{className:"feedback-fields",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)("label",{className:"feedback-label",children:e("feedbackWidget","yourRole")}),(0,t.jsxs)("div",{className:"feedback-select-wrap",children:[(0,t.jsxs)("select",{value:T,onChange:e=>N(e.target.value),className:"feedback-select",disabled:"idle"!==y,children:[(0,t.jsx)("option",{value:"",children:e("feedbackWidget","selectRole")}

1),h.map(a=>(0,t.jsx)("option",{value:a,children:e("feedbackWidget",a)},a))]}),(0,t.jsx)(l,{size:14,className:"feedback-select-arrow"})]})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("label",{className:"feedback-label",children:e("feedbackWidget","industry")}),(0,t.jsxs)("div",{className:"feedback-select-wrap",children:[(0,t.jsxs)("select",{value:S,onChange:e=>C(e.target.value),className:"feedback-select",disabled:"idle"!==y,children:[(0,t.jsx)("option",{value:"",children:e("feedbackWidget","selectIndustry")}),u.map(a=>(0,t.jsx)("option",{value:a,children:e("feedbackWidget",a)},a))]}),(0,t.jsx)(l,{size:14,className:"feedback-select-arrow"})]})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("label",{className:"feedback-label",children:e("feedbackWidget","problemToSolve")}),(0,t.jsx)("textarea",{ref:W,value:A,onChange:e=>P(e.target.value),placeholder:e("feedbackWidget","problemPlaceholder"),className:"feedback-textarea",rows:4,maxLength:2e3,disabled:"idle"!==y}),(0,t.jsxs)("div",{className:"feedback-char-count",children:[A.length,"/2000"]})]})]}),"error"===y&&(0,t.jsx)("p",{className:"feedback-status-error",children:v||e("feedbackWidget","somethingWentWrong")}),(0,t.jsx)("button",{type:"submit",className:"feedback-submit",disabled:!R,"data-status":y,children:"success"===y?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.Check,{size:16,strokeWidth:2.5}),(0,t.jsx)("span",{children:e("feedbackWidget","sentThankYou")})]}):"sending"===y?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("span",{className:"feedback-spinner"}),(0,t.jsx)("span",{children:e("feedbackWidget","sending")})]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.Send,{size:14,strokeWidth:2.5}),(0,t.jsx)("span",{children:"feedback"===g?e("feedbackWidget","sendFeedback"):e("feedbackWidget","submitRequest")})]})}),(0,t.jsxs)("button",{type:"button",className:"feedback-dismiss",onClick:function(){localStorage.setItem("feedback-fab-hidden","true"),m(!1),p(!0)},children:[(0,t.jsx)(d,{size:12,strokeWidth:2}),(0,t.jsx)("span",{children:e("feedbackWidget","hideButton")})]})]})]})]})}e.s(["FeedbackWidget",()=>m],4942)},18566,(e,t,a)=>{t.exports=e.r(76562)},2355,e=>{"use strict";var t=e.i(47167),a=e.i(71645),o=e.i(18566);function i(){return"u">typeof window}function s(){return"production"}function r(){return"development"===((i()?window.vam:s())||"production")}function n(e){return RegExp(`/${e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}(?=[/?#]|$)`)}function l(e){return(0,a.useEffect)(()=>{var t;e.beforeSend&&(null==(t=window.va)||t.call(window,"beforeSend",e.beforeSend))},[e.beforeSend]),(0,a.useEffect)(()=>{!function(e={debug:!0}){var t;if(!i())return;!function(e="auto"){if("auto"===e){window.vam=s();return}window.vam=e}(e.mode),window.va||(window.va=function(...e){(window.vaq=window.vaq||[]).push(e)}),e.beforeSend&&(null==(t=window.va)||t.call(window,"beforeSend",e.beforeSend));let a=e.scriptSrc?e.scriptSrc:r()?"https://va.vercel-scripts.com/v1/script.debug.js":e.basePath?`${e.basePath}/insights/script.js`:"/_vercel/insights/script.js";if(document.head.querySelector(`script[src*="${a}"]`))return;let o=document.createElement("script");o.src=a,o.defer=!0,o.dataset.sdkn="@vercel/analytics"+(e.framework?`/${e.framework}`:""),o.dataset.sdkv="1.6.1",e.disableAutoTrack&&(o.dataset.disableAutoTrack="1"),e.endpoint?o.dataset.endpoint=e.endpoint:e.basePath&&(o.dataset.endpoint=`${e.basePath}/insights`),e.dsn&&(o.dataset.dsn=e.dsn),o.onerror=()=>{let e=r()?"Please check if any ad blockers are enabled and try again.":"Be sure to enable Web Analytics for your project and deploy again. See https://vercel.com/docs/analytics/quickstart for more information.";console.log(`[Vercel Web Analytics] Failed to load script from ${a}. ${e}`)},r()&&!1===e.debug&&(o.dataset.debug="false"),document.head.appendChild(o)}({framework:e.framework||"react",basePath:e.basePath??function(){if(void 0!==t.default&&void 0!==t.default.env)return t.default.env.REACT_APP_VERCEL_OBSERVABILITY_BASEPATH}(),...void 0!==e.route&&{disableAutoTrack:!0},...e})},[]),(0,a.useEffect)(()=>{e.route&&e.path&&function({route:e,path:t}){var a;null==(a=window.va)||a.call(window,"pageview",{route:e,path:t})}({route:e.route,path:e.path})},[e.route,e.path]),null}function d(e){let i,s,r,{route:d,path:c}=(i=(0,o.useParams)(),s=(0,o.useSearchParams)(),r=(0,o.usePathname)(),i?{route:function(e,t){if(!e||!t)return e;let a=e;try{let e=Object.entries(t);for(let[t,o]of e)if(!Array.isArray(o)){let e=n(o);e.test(a)&&(a=a.replace(e,`/[${t}]`))}for(let[t,o]of e)if(Array.isArray(o)){let e=n(o.join("/"));e.test(a)&&(a=a.replace(e,`/[...${t}]`))}return a}catch(t){return e}}(r,Object.keys(i).length?i:Object.fromEntries(s.entries())),path:r}:{route:null,path:r});return a.default.createElement(l,{path:c,route:d,...e,basePath:function(){if(void 0!==t.default&&void 0!==t.default.env)return t.default.env.NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH}(),framework:"next"})}function c(e){return a.default.createElement(a.Suspense,{fallback:null},a.default.createElement(d,{...e}))}e.s(["Analytics",()=>c])},5650,e=>{"use strict";var t=e.i(43476);function a({className:e="",style:a,title:o}){return(0,t.jsx)("svg",{className:e,style:a,role:o?"img":void 0,"aria-label":o,"aria-hidden":!o||void 0,children:(0,t.jsx)("use",{href:"#arc-mark"})})}e.s(["ArcLogo",()=>a])},11015,e=>{"use strict";var t=e.i(43476),a=e.i(71645),o=e.i(22016),i=e.i(26615);let s="cookie-consent",r="cookie-consent-updated",n="open-cookie-sett

1ings";function l(){try{let e=localStorage.getItem(s);if(!e)return null;return JSON.parse(e)}catch{return null}}function d(e){let t={analytics:e,timestamp:Date.now(),version:1};localStorage.setItem(s,JSON.stringify(t)),window.dispatchEvent(new CustomEvent(r))}function c(){let{messages:e,locale:s}=(0,i.useTranslation)(),r=e.cookieConsent??{},[c,h]=(0,a.useState)("loading"),[u,m]=(0,a.useState)(!1);if((0,a.useEffect)(()=>{let e=l();null===e?document.cookie.split("; ").some(e=>"arc_gdpr=0"===e)?(d(!0),m(!0),h("hidden")):h("banner"):(m(e.analytics),h("hidden"));let t=()=>{let e=l();m(e?.analytics??!1),h("settings")};return window.addEventListener(n,t),()=>window.removeEventListener(n,t)},[]),"loading"===c||"hidden"===c)return null;let f="en"===s?"/privacy":`/${s}/privacy`;return"banner"===c?(0,t.jsx)("div",{role:"dialog","aria-label":r.title??"Cookie Preferences",className:"fixed bottom-0 start-0 end-0 z-50 p-4 md:p-6 md:bottom-4 md:start-4 md:end-auto md:max-w-sm",children:(0,t.jsxs)("div",{className:"rounded-xl border border-[var(--border)] bg-[var(--surface)] shadow-lg p-5 space-y-4",children:[(0,t.jsx)("h2",{className:"text-sm font-semibold text-[var(--foreground)]",children:r.title??"Cookie Preferences"}),(0,t.jsx)("p",{className:"text-xs text-[var(--muted)] leading-relaxed",children:r.body??"We use Google Analytics and Microsoft Clarity to understand how visitors use this site. These tools set cookies and collect anonymous usage data. Your calculator always works regardless of your choice."}),(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsx)("button",{onClick:function(){d(!0),m(!0),h("hidden")},className:"w-full rounded-lg bg-[var(--accent)] text-white text-xs font-medium py-2 px-4 hover:opacity-90 transition-opacity",children:r.acceptAll??"Accept Analytics"}),(0,t.jsx)("button",{onClick:function(){d(!1),m(!1),h("hidden")},className:"w-full rounded-lg border border-[var(--border)] text-[var(--muted)] text-xs font-medium py-2 px-4 hover:bg-[var(--surface-hover,var(--border))] transition-colors",children:r.rejectAll??"Decline"})]}),(0,t.jsx)("p",{className:"text-[10px] text-[var(--muted)]",children:(0,t.jsx)(o.default,{href:f,className:"underline underline-offset-2 hover:text-[var(--foreground)]",children:r.privacyLink??"Privacy Policy"})})]})}):(0,t.jsxs)("div",{role:"dialog","aria-modal":"true","aria-label":r.settingsTitle??"Manage Cookie Preferences",className:"fixed inset-0 z-50 flex items-end justify-start p-4 md:items-center md:justify-start md:p-6",children:[(0,t.jsx)("div",{className:"absolute inset-0 bg-black/40",onClick:()=>h("hidden"),"aria-hidden":"true"}),(0,t.jsxs)("div",{className:"relative rounded-xl border border-[var(--border)] bg-[var(--surface)] shadow-xl p-5 w-full max-w-sm space-y-4",children:[(0,t.jsx)("h2",{className:"text-sm font-semibold text-[var(--foreground)]",children:r.settingsTitle??"Manage Cookie Preferences"}),(0,t.jsxs)("div",{className:"flex items-start justify-between gap-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)("p",{className:"text-xs font-medium text-[var(--foreground)]",children:r.essentialLabel??"Essential"}),(0,t.jsx)("p",{className:"text-[11px] text-[var(--muted)] leading-relaxed mt-0.5",children:r.essentialDesc??"Theme preference & offline cache — always active."})]}),(0,t.jsx)("span",{className:"text-[10px] font-medium text-[var(--muted)] whitespace-nowrap mt-0.5",children:r.alwaysOn??"Always on"})]}),(0,t.jsx)("div",{className:"border-t border-[var(--border)]"}),(0,t.jsxs)("div",{className:"flex items-start justify-between gap-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)("p",{className:"text-xs font-medium text-[var(--foreground)]",children:r.analyticsCookies??"Analytics Cookies"}),(0,t.jsx)("p",{className:"text-[11px] text-[var(--muted)] leading-relaxed mt-0.5",children:r.analyticsCookiesDesc??"Google Analytics & Microsoft Clarity — helps us improve the calculator."})]}),(0,t.jsx)("button",{role:"switch","aria-checked":u,onClick:()=>m(e=>!e),className:`relative flex-shrink-0 mt-0.5 w-9 h-5 rounded-full transition-colors ${u?"bg-[var(--accent)]":"bg-[var(--border)]"}`,children:(0,t.jsx)("span",{className:`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${u?"translate-x-4":"translate-x-0"}`})})]}),(0,t.jsxs)("div",{className:"flex gap-2 pt-1",children:[(0,t.jsx)("button",{onClick:function(){d(u),h("hidden")},className:"flex-1 rounded-lg bg-[var(--accent)] text-white text-xs font-medium py-2 px-4 hover:opacity-90 transition-opacity",children:r.save??"Save Preferences"}),(0,t.jsx)("button",{onClick:()=>h("hidden"),className:"rounded-lg border border-[var(--border)] text-[var(--muted)] text-xs font-medium py-2 px-3 hover:bg-[var(--surface-hover,var(--border))] transition-colors",children:"✕"})]})]})]})}function h(){let{messages:e}=(0,i.useTranslation)(),o=e.cookieConsent??{},[l,d]=(0,a.useState)(!1);return((0,a.useEffect)(()=>{d(!!localStorage.getItem(s));let e=()=>d(!!localStorage.getItem(s));return window.addEventListener(r,e),()=>window.removeEventListener(r,e)},[]),l)?(0,t.jsx)("button",{onClick:()=>window.dispatchEvent(new Event(n)),className:"hover:text-[var(--foreground)] transition-colors",children:o.manageSettings??"Cookie Settings"}):null}e.s(["CookieConsent",()=>c,"CookieSettingsLink",()=>h])},13642,e=>{"use strict";var t=e.i(43476),a=e.i(71645),o=e.i(64659),i=e.i(22016),s=e.i(5650),r=e.i(18566),n=e.i(26615);function l(){let{t:e}=(0,n.useTranslation)();return(0,t.jsx)("button",{type:"button",onClick:function(){localStorage.removeItem("feedback-fab-hidden"),window.dispatchEvent(new CustomEvent("show-feedback"))},className:"hover:text-[var(--foreground)] transition-colors cursor-pointer bg-transparent border-none p-0 font-inherit text-inherit",children:e("footer","feedback")})}var d=e.i(11015),c=e.i(51224);let h=["16-9","9-16","4-3","1-1","4-5","3-2","21-9","2-1","5-4","2-39-1","1-85-1","1-43-1","1-375-1","1-66-1"],u=["instagram","youtube","tiktok","twitter","linkedin","facebook","pinterest"],m=Object.keys({"what-is-aspect-ratio":{title:"What is Aspect Ratio? A Beginner's Guide",description:"A clear, beginner-friendly explanation of aspect ratio: what it means, how it is written, why it matters for screens and images, and how to use it.",intro:"Aspect ratio is one of those terms that sounds technical but is actually quite simple once you understand it. Whether you are resizing a photo for Instagram, setting up a YouTube video, or buying a new monitor, aspect ratio determines the shape of your image or screen. This guide explains everything you need to know.",sections:[{heading:"What Does Aspect Ratio Mean?",body:"Aspect ratio is the proportional relationship between the width and height of an image, screen, or video frame. It is written as two numbers separated by a colon, as in 16:9 or 4:3. The first number is the width and the second is the height. A 16:9 ratio means that for every 16 units of width, the height is 9 units. The actual size does not matter. A 160×9

10 pixel image and a 3840×2160 pixel image are both 16:9 because they share the same proportions."},{heading:"Why Does Aspect Ratio Matter?",body:"Aspect ratio matters whenever you are displaying, printing, or sharing visual content. If the ratio of your image does not match the ratio of the display or container, one of two things happens:",list:["Letterboxing / Pillarboxing: black bars appear to fill the empty space","Cropping: the image is cut to fit, and some content is lost","Stretching: the image is distorted to fill the frame (least desirable)"]},{heading:"Common Aspect Ratios and Where They Are Used",body:"Different industries and platforms have standardised on different aspect ratios. Here are the most important ones to know:",table:{headers:["Ratio","Decimal","Common Use"],rows:[["16:9","1.78:1","YouTube, Netflix, TV, monitors, presentations"],["9:16","0.56:1","TikTok, Instagram Reels, YouTube Shorts, Stories"],["1:1","1.00:1","Instagram feed posts, profile pictures, album art"],["4:5","0.80:1","Instagram portrait posts (maximum feed height)"],["4:3","1.33:1","iPads, legacy TV, PowerPoint, DSLR cameras"],["3:2","1.50:1","DSLR cameras, 4×6 prints, 35mm film"],["2.39:1","2.39:1","Theatrical cinemascope films"]]}},{heading:"How to Calculate an Aspect Ratio",body:"To find the aspect ratio of any image, divide both the width and height by their Greatest Common Divisor (GCD

1). For example, an image that is 1920×1080 pixels: both numbers are divisible by 120, giving 16:9. Our free calculator does this automatically — just enter your width and height."},{heading:"Aspect Ratio vs. Resolution",body:"Aspect ratio and resolution are related but not the same thing. Resolution refers to the total number of pixels (e.g., 1920×1080). Aspect ratio refers to the shape (e.g., 16:9). Two images can share the same aspect ratio but have completely different resolutions: 640×360 and 3840×2160 are both 16:9 but differ vastly in pixel count and quality."},{heading:"Why It Is Worth Knowing",body:"Aspect ratio is one of those things nobody notices until it is wrong, and then it is the only thing they can see. Photography, film, websites, magazines, packaging: a great deal of what reads as professional polish is simply the proportions being right. When they are not, you feel it before you can name it. Something is too big, too small, oddly soft, or floating in wasted space. Once you start noticing it you cannot stop, which is a slightly annoying gift to have been given."}],conclusion:"The whole subject reduces to one habit: decide the shape before you decide the size. Ratio first, pixels second. Get that order right and the rest of it (cropping, letterboxing, the black bars, the blurry upload) mostly stops happening on its own."},"how-to-calculate-aspect-ratio":{title:"How to Calculate Aspect Ratio: The Complete Guide",description:"Learn how to calculate aspect ratio step by step: using the GCD method, the formula, and our free online calculator. Includes worked examples.",intro:"Knowing how to calculate an aspect ratio is a fundamental skill for anyone working with images, video, or design. This guide covers the maths behind it, the fastest manual methods, and how to use our free calculator for instant results.",sections:[{heading:"The Aspect Ratio Formula",body:"The aspect ratio of any rectangle is simply: Width ÷ Height. To express it as a clean W:H ratio (e.g., 16:9 rather than 1.778:1), you need to find the Greatest Common Divisor (GCD

1) of the width and height and divide both by it."},{heading:"Step-by-Step: How to Find the Aspect Ratio",body:"Here is how to manually calculate the aspect ratio of any image:",list:["Step 1: Write down the width and height in pixels (e.g., 1920 and 1080)","Step 2: Find the Greatest Common Divisor (GCD) of both numbers. For 1920 and 1080, the GCD is 120.","Step 3: Divide both numbers by the GCD. 1920 ÷ 120 = 16; 1080 ÷ 120 = 9.","Step 4: Write the result as W:H — in this case, 16:9."]},{heading:"Worked Examples",body:"Here are some common dimensions and their aspect ratios:",table:{headers:["Width","Height","GCD","Aspect Ratio"],rows:[["1920","1080","120","16:9"],["1080","1350","270","4:5"],["1280","720","80","16:9"],["3840","2160","240","16:9"],["1080","1920","120","9:16"],["1200","630","30","40:21 ≈ 1.91:1"]]}},{heading:"How to Find the GCD Without a Calculator",body:"Every method above depends on finding the Greatest Common Divisor, and that is the step most guides skip. The reliable way is Euclid's algorithm, which is over two thousand years old and takes about four steps for screen-sized numbers: divide the larger number by the smaller, keep the remainder, then repeat with the smaller number and that remainder until the remainder is zero. The last non-zero number is the GCD. For 1920 and 1080: 1920 ÷ 1080 leaves 840; 1080 ÷ 840 leaves 240; 840 ÷ 240 leaves 120; 240 ÷ 120 leaves 0. The GCD is 120."},{heading:"When the Numbers Refuse to Reduce",body:'Not every pair of dimensions gives a tidy ratio. 1847 × 923 has a GCD of 1, so its "simplified" ratio is 1847:923 — technically correct and useless. When that happens, stop trying to reduce and do two things instead: take the decimal (1847 ÷ 923 = 2.001, so it is essentially 2:1), and find the nearest standard ratio you can actually work to. Screens and platforms accept standard ratios, not exact ones, and a difference under about half a percent is invisible.'},{heading:"Why 1200 × 630 Is Not 1.91:1",body:"The Open Graph image size every social platform asks for is 1200 × 630, and it is almost always described as 1.91:1. Run the GCD and you get 40:21, whose decimal is 1.9048. The 1.91 figure is a rounded label that stuck, not the real ratio. This matters when you scale: computing a new width from 1.91 rather than from 40:21 drifts by roughly one pixel at 1200px wide and by four at 4800px. Always scale from the integer ratio, and round once at the end."},{heading:"How to Calculate a Missing Dimension",body:"If you know the original dimensions and want to find a new size at the same ratio, use this formula: New Height = (Original Height ÷ Original Width) × New Width. For example, to find the height of a 16:9 image at 1280px wide: (1080 ÷ 1920) × 1280 = 720px. Our calculator does this automatically in both directions."},{heading:"The Fastest Method: Use a Calculator",body:"Manually calculating aspect ratios is straightforward for round numbers, but quickly becomes tedious for irregular dimensions like 1847×923. Our free Aspect Ratio Calculator handles any width and height instantly. Enter your values and get the simplified ratio, decimal, closest standard match, and CSS values in one click."},{heading:"Why You Cannot Just Eyeball It",body:"There is a point where judgement stops working. Nudging a photo around a page until it looks right is a perfectly good method, because the eye is the instrument the result will be judged by. Code is not like that. A CSS aspect-ratio, an export preset, a container height: each one takes a number, and the number is either correct or it is off by the single pixel that shows up as a hairline gap on a finished layout. Design you can adjust by feel. Sizes you have to calculate."}],conclusion:"Two rules cover almost every case. Reduce with the GCD when the numbers allow it, and fall back to the decimal plus the nearest standard ratio when they do not. Keep the integer ratio for any arithmetic and round only at the very end. That single habit prevents most of the off-by-one pixel errors that show up as a hairline gap on a finished layout."},"aspect-ratio-social-media-guide-2026":{title:"Social Media Image Sizes & Aspect Ratios: 2026 Complete Guide",description:"Every social media image size and aspect ratio for 2026: Instagram, YouTube, TikTok, X, LinkedIn, Facebook, and Pinterest. Keep this guide bookmarked.",intro:"Social media platforms each have their own recommended image dimensions, and they change regularly. Using the wrong size means your images get cropped, blurry, or poorly displayed. This guide covers every major platform for 2026.",sections:[{heading:"Why Image Sizes Matter on Social Media",body:"Each platform has a different feed layout, display area, and compression algorithm. An image optimised for one platform may look blurry, cropped, or stretched on another. Uploading at the exact recommended dimensions ensures:",list:["No unexpected cropping of key content","Maximum sharpness — no upscaling by the platform","Faster load times — correct sizing reduces file size","Better performance in recommendation algorithms"]},{heading:"Instagram Image Sizes 2026",body:"Instagram supports three feed ratios plus Stories and Reels. For feed posts, 4:5 portrait (1080×1350) gives you the most vertical space, which is what you want on a surface people scroll past.",table:{headers:["Format","Dimensions","Ratio"],rows:[["Feed Post (Square)","1080 × 1080","1:1"],["Feed Post (Portrait)","1080 × 1350","4:5"],["Feed Post (Landscape)","1080 × 566","1.91:1"],["Story / Reel","1080 × 1920","9:16"],["Profile Picture","320 × 320","1:1"]]}},{heading:"YouTube Dimensions 2026",body:"YouTube is a 16:9 platform. Design thumbnails at 1280×720 with bold, readable text. Your thumbnail is often the deciding factor for whether someone clicks.",table:{headers:["Format","Dimensions","Ratio"],rows:[["Video (1080p)","1920 × 1080","16:9"],["Shorts","1080 × 1920","9:16"],["Thumbnail","1280 × 720","16:9"],["Channel Banner","2560 × 1440","16:9"]]}},{heading:"TikTok Video Sizes 2026",body:"TikTok is entirely vertical — always use 9:16 at 1080×1920 for the best quality. Keep key content in the centre of the frame and away from the bottom 20% where captions and UI elements appear.",table:{headers:["Format","Dimensions","Ratio"],rows:[["Video (Recommended)","1080 × 1920","9:16"],["Profile Picture","200 × 200","1:1"]]}},{heading:"Quick Reference: All Platforms",body:"Here is a quick-reference table for the most commonly used social media image sizes in 2026:",table:{headers:["Platform","Format","Dimensions","Ratio"],rows:[["Instagram","Feed Post (Portrait)","1080 × 1350","4:5"],["Instagram","Story / Reel","1080 × 1920","9:16"],["YouTube","Video","1920 × 1080","16:9"],["YouTube","Thumbnail","1280 × 720","16:9"],["TikTok","Video","1080 × 1920","9:16"],["X / Twitter","Post Image","1600 × 900","16:9"],["LinkedIn","Post Image","1200 × 628","1.91:1"],["Facebook","Post Image","1200 × 630","1.91:1"],["Pinterest","Standard Pin","1000 × 1500","2:3"]]}},{heading:"The Sizes Are Right and the Frame Is Still Wrong",body:"Uploading at 1080 × 1920 does not mean all of it is visible. Every vertical format puts interface on top of your picture: a profile row and a caption at the bottom, a progress bar and close button at the top, and on Reels and TikTok a column of buttons down one side. The picture is full-bleed; the usable area is not. A practical working margin is to keep anything that must be read (text, faces, logos, prices) inside the middle 70% vertically and away from the trailing edge, then preview it on a phone before publishing. The safe area is not published as a spec and it moves, so treat it as a margin rather than a measurement."},{heading:"Upload Bigger Than the Number in the Table",body:"Every platform recompresses what you send, and it does a better job starting from more data. Uploading a 1080 × 1350 export of a 1080-wide original gives the encoder nothing to work with; uploading a 2160 × 2700 version of the same image and letting the platform downscale usually looks visibly cleaner at the same final size, particularly on text and fine edges. The exception is where a platform publishes a hard maximum. Respect that, then go as close under it as you can."},{heading:"If You Can Only Make One Asset",body:"Make it 4:5 at 1080 × 1350. It is the tallest shape Instagram's feed accepts, which means it claims the most screen on the surface that gives you the least, and it crops down cleanly: centre-crop to 1:1 for a square placement, or to 1.91:1 for a link card, and the subject stays where you put it. Going the other way, starting square and trying to reach 4:5, means inventing picture that was never photographed."},{heading:"A Warning About Guides Like This One",body:"Every number here was correct when it was written and platforms change them without announcement. A guide is a starting point, not an authority: before a campaign that matters, check the platform's own help documentation, because that is the only version that updates when they do. The ratios in the last column are far more stable than the pixel dimensions beside them. 9:16 and 4:5 have outlived several rounds of spec changes, and building to the ratio rather than the pixel count is what stops this table going stale on you."},{heading:"Decide the Shape Before You Shoot",body:"Most of the pain in this guide is avoidable much earlier than people think. Choosing the frame before the shoot, rather than discovering it at upload, is the difference between deciding what gets cropped and letting a platform decide for you. It is also the cheapest edit available: reframing costs nothing before the shutter and costs a quarter of the picture afterwards."}],conclusion:"Build to the ratio, not to the pixel count, and export larger than the target. Those two habits survive platform changes, which the exact numbers in these tables will not. Keep anything that has to be read well inside the frame, and check the platform's own documentation before anything you are paying for goes out."},"16-9-vs-4-3-aspect-ratio":{title:"16:9 vs 4:3 Aspect Ratio — Which Should You Use?",description:"A clear comparison of 16:9 and 4:3 aspect ratios: when to use each, the history behind them, key differences, and pixel size examples.",intro:"16:9 and 4:3 are the two most historically significant aspect ratios in video and photography. If you have ever seen black bars on your screen, either on the sides or top and bottom, you have already encountered the difference between them. Here is a complete comparison.",sections:[{heading:"The Key Difference",body:"16:9 is wider and more rectangular (ratio of 1.78:1), while 4:3 is more square (ratio of 1.33:1). A 16:9 image is about 33% wider than a 4:3 image of the same height. This difference may seem small but it is very noticeable on screen."},{heading:"History: Where Did They Come From?",body:"4:3 came first, matching the shape of early 35mm motion picture film, and it stayed the television standard for most of the twentieth century. 16:9 was not inherited from anything. It was engineered. Working at SMPTE in the early 1980s, Kerns Powers cut rectangles of equal area for every aspect ratio then in use, from 1.33:1 television to 2.35:1 cinema, and overlaid them centred on each other. Every rectangle fitted inside one outer box and contained one inner box, and both of those boxes were close to 1.77:1. That figure is almost exactly the geometric mean of the extremes: the square root of 1.33 × 2.35 is 1.77, and 16 ÷ 9 is 1.778. 16:9 is the shape that wastes the least screen, averaged across everything anyone might want to show on it."},{heading:"When to Use 16:9",body:"Use 16:9 when:",list:["Creating video content for YouTube, Netflix, or television","Making modern presentations (Google Slides, PowerPoint 2016 and later default to 16:9)","Designing for widescreen monitors and laptops","Recording video with a modern smartphone or camera","Creating YouTube thumbnails"]},{heading:"When to Use 4:3",body:"Use 4:3 when:",list:["Designing for iPad displays (which use 4:3)","Creating presentations for older projectors","Matching legacy video content","Printing to standard photographic proportions (some cameras)","Working with CCTV or surveillance footage"]},{heading:"Pixel Size Comparison",body:"Here are common resolutions for both ratios at equivalent megapixel counts:",table:{headers:["Quality","16:9 Size","4:3 Size"],rows:[["720p","1280 × 720","960 × 720"],["1080p","1920 × 1080","1440 × 1080"],["4K","3840 × 2160","2880 × 2160"]]}}

1,{heading:"What Converting Between Them Actually Costs",body:"Both conversions cost exactly a quarter of the picture, which is more than most people expect. Going from 16:9 to 4:3 at the same height means cropping the width from 16 units to 12, so you lose 25% of the frame, and it comes off the sides, where filmed subjects are often framed. Going the other way, 4:3 to 16:9 at the same width, crops the height from 12 units to 9: also 25%, this time off the top and bottom, which is where heads and captions live. Neither direction is a resize. If the content matters, reframe it rather than letting a crop tool choose."},{heading:"What the Black Bars Are Costing You",body:"Showing 4:3 content on a 16:9 screen pillarboxes it, and the bars are not cosmetic: the picture occupies 12 of the screen's 16 units of width, so a quarter of the display is doing nothing. A 55-inch 16:9 television is 47.9 inches wide, so that is about 12 inches of black. This is the practical argument for shooting in the ratio you will publish in, rather than planning to fix it afterwards. There is no crop that recovers a quarter of the screen."},{heading:"It Also Decides Which Television to Buy",body:"This is not only a production question. If what you love is widescreen cinema, a 16:9 television will letterbox nearly everything you watch, because most theatrical films are wider than the set you are watching them on. If you mostly watch broadcast television and streaming drama, 16:9 is the exact shape that content is made in and almost nothing is wasted. The right screen is the one that matches the format you actually spend your evenings in, which is worth working out before you spend the money rather than after."}],conclusion:"Shoot and design in 16:9 unless something specific pushes you elsewhere: an iPad-first audience, a legacy projector, an archive to match. The one thing worth avoiding is deciding late: both conversions cost a quarter of the frame, and which quarter you lose is a decision better made through a viewfinder than by a crop tool afterwards."},"how-to-resize-image-without-losing-quality":{title:"How to Resize an Image Without Losing Quality",description:"Learn the techniques for resizing images without losing quality: downscaling vs upscaling, best file formats, DPI explained, and tool recommendations.",intro:"Resizing an image sounds simple, but done incorrectly it results in blurry, pixelated, or distorted photos. This guide explains when and how you can resize images without a visible quality loss.",sections:[{heading:"Downscaling vs. Upscaling",body:"There are two directions you can resize an image, and they have very different quality implications. Downscaling (making an image smaller) almost always preserves quality, because you are simply discarding pixels. Upscaling (making an image larger) is where quality problems occur, because software must invent pixel data that does not exist in the original."},{heading:"The Golden Rule: Always Start With the Highest Resolution",body:"Quality loss is mostly irreversible. If you start with a small image and need a large one, you will always see quality degradation. Best practice is to:",list:["Always keep your original high-resolution file","Export or save a separate copy at the target size","Never re-save a compressed JPEG multiple times, because each save degrades quality","Export from the master file each time you need a new size"]},{heading:"How Much Can You Upscale?",body:"As a general guideline: upscaling by up to 110–120% is generally imperceptible to most viewers. Upscaling by 150–200% produces noticeable softness. Upscaling beyond 200% typically produces obvious pixelation and blurring. AI-based upscaling tools (such as Topaz Gigapixel, Adobe Firefly, and similar) can sometimes produce acceptable results at 2–4× upscaling by intelligently generating detail."},{heading:"Maintaining Aspect Ratio When Resizing",body:"One of the most common quality mistakes is accidentally changing the aspect ratio during resizing, stretching or squishing the image. Always resize proportionally by locking the aspect ratio in your editing tool. Our free calculator helps you find the correct target height for any new width (or vice versa), ensuring your resize maintains the original proportions."},{heading:"Best File Formats for Quality",body:"The file format affects quality significantly after resizing:",list:["PNG: lossless compression; ideal for graphics, illustrations, and screenshots where sharpness matters","JPEG: lossy compression; ideal for photographs; set quality to 80–90% for the best size/quality balance","WebP: a modern format that achieves better compression than JPEG at equivalent quality; supported by all modern browsers","TIFF: uncompressed or lossless; used in professional print and photography workflows"]},{heading:"DPI and Print Quality",body:"DPI (dots per inch) is only relevant for print. Screens ignore it entirely. For print: use 300 DPI for sharp photo prints, 150 DPI for acceptable quality, and 72–96 DPI for screen-only use. To calculate the pixel dimensions needed for a print: multiply the print size in inches by the DPI. For an 8×10 inch print at 300 DPI: 2400×3000 pixels."},{heading:"The Three Ways It Looks Wrong",body:"A bad resize announces itself in one of three ways: too big, too small, or soft. The first two are framing problems, and framing problems can usually be fixed by moving something. The third cannot be. Softness is information that is no longer in the file, and no amount of adjustment puts it back. Knowing which of the three you are looking at is really a question about whether you are five minutes from done or starting again from the original."}],conclusion:"Keep the master file. Almost every quality problem in this guide traces back to someone not having the original any more: you cannot downscale from something you have already thrown away, and no upscaler recovers detail that was never recorded. Export copies, archive the original, and resize from it every time."},"install-aspect-ratio-calculator":{title:"Why Install Aspect Ratio Calculator? Offline Access, Speed & More",description:"Install the Aspect Ratio Calculator as an app for instant offline access, a home screen shortcut, and a distraction-free experience — no browser UI, no reloading.",intro:"You can use this calculator straight from your browser, but installing it as an app takes the experience further: instant launch from your home screen, full offline support, and a clean interface with no browser navigation in the way. Here is everything you need to know.",sections:[{heading:"What does 'Install' actually mean?",body:"When you install a web app (also called a PWA, or Progressive Web App), your device saves a shortcut to your home screen or desktop and caches the app files for offline use. There is no app store involved and nothing is downloading gigabytes of data, because the files are already in your browser cache. Installing simply promotes the site to a first-class app experience on your device."},{heading:"Benefits of installing",body:"Installing the Aspect Ratio Calculator gives you several advantages over using it purely in the browser:",list:["Offline access: calculations work even without an internet connection, useful on set, in the field, or on an aeroplane","Home screen shortcut: opens with a single tap, no need to navigate to the URL or open a browser tab","Distraction-free interface: no browser address bar, tabs, or toolbar; the calculator fills the screen cleanly","Faster load: cached files load instantly from local storage instead of waiting for a network response","Always up to date: the service worker fetches updates silently in the background so you always have the latest version"]},{heading:"How to install on Chrome or Android",body:"On Android or Chrome desktop, a banner appears automatically at the bottom of the page with an Install button. Tap or click Install and confirm when prompted. If the banner has been dismissed, look for the install icon (a monitor with a downward arrow ⊕) in the browser address bar on desktop, or tap the three-dot menu on Android and select 'Add to Home screen'."},{heading:"How to install on iPhone or iPad (Safari)",body:"Safari on iOS does not show an automatic install banner, but the process is straightforward:",list:["Tap the Share button (the box with an arrow pointing upward) in the Safari toolbar at the bottom of the screen","Scroll down in the share sheet and tap 'Add to Home Screen'","Edit the name if you wish, then tap 'Add' in the top-right corner","The calculator icon now appears on your home screen and launches in standalone mode"]},{heading:"How to install on desktop (Chrome or Edge)",body:"On a desktop computer running Chrome or Edge, look for the install icon in the address bar. It looks like a monitor with a small download arrow. Click it and confirm the prompt. On Edge the option may also appear under the three-dot menu as 'Apps → Install this site as an app'. Once installed, the calculator appears in your Start menu (Windows) or Applications folder (Mac) like any native application."},{heading:"How to uninstall",body:"Uninstalling is just as easy as installing. On iOS, long-press the icon on your home screen and tap 'Remove App'. On Android, long-press and drag to the uninstall area, or go to Settings → Apps. On Chrome desktop, open the app, click the three-dot menu inside the app window, and select 'Uninstall Aspect Ratio Calculator'. On Edge, right-click the app in the taskbar or Start menu and choose Uninstall."},{heading:"Why Doing This Quickly Matters",body:"Almost nobody sits down intending to do aspect ratio arithmetic. It comes up in the middle of something else: a file is the wrong shape, a container needs a height, a print is about to go out. It is always in the way of the thing you were actually doing. That is the entire design brief for this tool, and the reason it opens instantly and needs no account: understand the situation, make the decision, get back to work."}],conclusion:"Installing the Aspect Ratio Calculator takes about ten seconds and costs nothing. You get offline access, a home screen shortcut, and a faster, cleaner experience, with no app store required. If you find yourself using the calculator regularly, installing it is the most convenient way to keep it at your fingertips."}});var f=e.i(39115),p=e.i(3500),g=e.i(24777),b=e.i(52490),y=e.i(27388);let w=Object.fromEntries([{slug:"instagram-safe-zone-checker",lastmod:"2026-09-25",ns:"safeZoneTool",facts:3,widget:"safe-zone-checker",category:"DesignApplication",related:[{href:"/ratio/9-16",labelKey:"related9x16"},{href:"/platform/instagram",labelKey:"relatedInstagram"},{href:"/ratio/9-16",labelKey:"relatedConvert"}]},f.tool,p.tool,g.tool,b.tool,y.tool].map(e=>[e.slug,e])),v=Object.keys(w);var x=e.i(68711);function k({items:e,expanded:a,cap:o=5}){return(0,t.jsx)("ul",{className:"space-y-1.5",children:e.map((e,i)=>(0,t.jsx)("li",{hidden:!a&&i>=o,children:e},i))})}function j({locale:e,seoData:f}){let{t:p,locale:g}=(0,n.useTranslation)(),b=e??g,y=(0,r.usePathname)(),j=new Date().getFullYear(),[T,N]=(0,a.useState)(!0),[S,C]=(0,a.useState)(!1),A=Math.max(0,h.length-5)+Math.max(0,u.length-5)+Math.max(0,m.length-3)+Math.max(0,v.length-5)+Math.max(0,x.LOCALES.length-5);(0,a.useEffect)(()=>{let e=window.matchMedia("(min-width: 640px)"),t=()=>N(e.matches);return t(),e.addEventListener("change",t),()=>e.removeEventListener("change",t)},[]);let P="en"===b?"":`/${x.LOCALES.find(e=>e.code===b)?.urlSegment??b}`;return(0,t.jsxs)("footer",{className:"mt-20 border-t border-[var(--border)]",children:[(0,t.jsxs)("div",{className:"max-w-2xl mx-auto px-4 pt-8 pb-4",children:[(0,t.jsxs)("div",{className:"grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 sm:gap-6 text-xs",children:[(0,t.jsxs)("details",{open:T,className:"footer-col",children:[(0,t.jsx)("summary",{className:"footer-sum font-semibold text-[var(--foreground)] mb-2 uppercase tracking-wider",children:p("footer","aspectRatios")}),(0,t.jsx)(k,{expanded:S,items:h.map(e=>(0,t.jsxs)(i.default,{href:`${P}/ratio/${e}`,className:"whitespace-nowrap text-[var(--muted)] hover:text-[var(--accent)] transition-colors",children:[f?.ratioLabels[e]??e," ",p("common","ratio")]},e))})]}),(0,t.jsxs)("details",{open:T,className:"footer-col",children:[(0,t.jsx)("summary",{className:"footer-sum font-semibold text-[var(--foreground)] mb-2 uppercase tracking-wider",children:p("footer","platforms")}),(0,t.jsx)(k,{expanded:S,items:u.map(e=>(0,t.jsx)(i.default,{href:`${P}/platform/${e}`,className:"text-[var(--muted)] hover:text-[var(--accent)] transition-colors",children:f?.platformNames[e]??e},e))})]}),(0,t.jsxs)("details",{open:T,className:"footer-col",children:[(0,t.jsx)("summary",{className:"footer-sum font-semibold text-[var(--foreground)] mb-2 uppercase tracking-wider",children:p("footer","guides")}),(0,t.jsx)(k,{expanded:S,cap:3,items:m.map(e=>(0,t.jsx)(i.default,{href:`${P}/blog/${e}`,className:"line-clamp-2 text-[var(--muted)] hover:text-[var(--accent)] transition-colors",children:f?.articleTitles[e]??e},e))})]}),(0,t.jsxs)("details",{open:T,className:"footer-col",children:[(0,t.jsx)("summary",{className:"footer-sum font-semibold text-[var(--foreground)] mb-2 uppercase tracking-wider",children:p("footer","tools")}),(0,t.jsx)(k,{expanded:S,items:v.map(e=>(0,t.jsx)(i.default,{href:`${P}/tools/${e}`,className:"text-[var(--muted)] hover:text-[var(--accent)] transition-colors",children:p(w[e].ns,"navLabel")},e))})]}),(0,t.jsxs)("details",{open:T,className:"footer-col",children:[(0,t.jsx)("summary",{className:"footer-sum font-semibold text-[var(--foreground)] mb-2 uppercase tracking-wider",children:p("footer","language")}),(0,t.jsx)(k,{expanded:S,items:x.LOCALES.map(e=>(0,t.jsx)("a",{href:(0,x.localePath)(e.urlPrefix,(0,x.stripLocale)(y)),className:`transition-colors ${e.code===b?"text-[var(--accent)] font-medium":"text-[var(--muted)] hover:text-[var(--accent)]"}`,children:e.nativeName},e.code))})]})]}),A>0&&(0,t.jsx)("div",{className:"mt-5 flex justify-center",children:(0,t.jsx)("button",{type:"button",onClick:()=>C(e=>!e),"aria-expanded":S,"aria-label":S?p("footer","less"):`${p("footer","more")} (${A})`,title:S?p("footer","less"):`${p("footer","more")} (${A})`,className:"flex items-center justify-center rounded-full border text-[var(--muted)] hover:text-[var(--accent)] hover:border-[var(--accent)] transition-colors",style:{width:34,he

1ight:34,borderColor:"var(--border)"},children:(0,t.jsx)(o.ChevronDown,{size:16,"aria-hidden":!0,className:`transition-transform ${S?"rotate-180":""}`})})})]}),(0,t.jsx)("div",{className:"border-t border-[var(--border)]",children:(0,t.jsxs)("div",{className:"max-w-2xl mx-auto px-4 pt-6 pb-24 sm:pb-6 flex flex-col items-center gap-3 text-xs text-[var(--muted)]",children:[(0,t.jsx)(s.ArcLogo,{style:{width:22,height:22,color:"var(--muted)"},title:`${p("homePage","heroTitle")} ${p("homePage","heroTitleAccent")}`}),(0,t.jsx)(c.SiteSearch,{}),(0,t.jsxs)("nav",{className:"flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 lowercase [&_button]:lowercase","aria-label":p("footer","siteLinks"),children:[(0,t.jsx)(i.default,{href:`${P}/about`,className:"hover:text-[var(--foreground)] transition-colors",children:p("aboutPage","title")}),(0,t.jsx)(i.default,{href:`${P}/contact`,className:"hover:text-[var(--foreground)] transition-colors",children:p("contactPage","title")}),(0,t.jsx)(i.default,{href:`${P}/developers`,className:"hover:text-[var(--foreground)] transition-colors",children:p("developersPage","title")}),(0,t.jsx)(l,{}),(0,t.jsx)(i.default,{href:`${P}/terms`,className:"hover:text-[var(--foreground)] transition-colors",children:p("footer","termsOfService")}),(0,t.jsx)(i.default,{href:`${P}/privacy`,className:"hover:text-[var(--foreground)] transition-colors",children:p("footer","privacyPolicy")}),(0,t.jsx)(d.CookieSettingsLink,{})]}),(0,t.jsx)("span",{className:"text-center lowercase text-[var(--muted)]/80",children:p("footer","copyright").replace("{year}",String(j))})]})})]})}e.s(["Footer",()=>j],13642)},36852,e=>{"use strict";var t=e.i(43476),a=e.i(22016),o=e.i(18566);let i=(0,e.i(75254).default)("search",[["path",{d:"m21 21-4.34-4.34",key:"14j7rj"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}]]);var s=e.i(5650),r=e.i(26615),n=e.i(71645),l=e.i(48256),d=e.i(64659),c=e.i(68711);function h(){let{locale:e}=(0,r.useTranslation)(),[a,o]=(0,n.useState)(!1),i=(0,n.useRef)(null),s=c.LOCALES.find(t=>t.code===e)??c.LOCALES[0];return(0,n.useEffect)(()=>{if(a)return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e);function e(e){i.current&&!i.current.contains(e.target)&&o(!1)}},[a]),(0,t.jsxs)("div",{ref:i,className:"relative",children:[(0,t.jsxs)("button",{onClick:()=>o(e=>!e),className:"flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--surface-hover)] transition-colors","aria-label":"Change language","aria-expanded":a,children:[(0,t.jsx)(l.Globe,{size:14,strokeWidth:2}),(0,t.jsx)("span",{className:"hidden uppercase font-medium sm:inline",children:"zh-Hans"===s.code?"ZH":"zh-Hant"===s.code?"ZH-T":s.code.toUpperCase()}),(0,t.jsx)(d.ChevronDown,{size:12,className:`hidden transition-transform sm:block ${a?"rotate-180":""}`})]}),a&&(0,t.jsx)("div",{className:"absolute end-0 top-full mt-1 w-48 rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-lg z-50 py-1 max-h-80 overflow-y-auto",children:c.LOCALES.map(a=>(0,t.jsxs)("button",{onClick:()=>{let e;return o(!1),e=window.location.pathname,void(window.location.href=(0,c.localePath)(a.urlPrefix,(0,c.stripLocale)(e)))},className:`w-full text-start px-3 py-2 text-sm transition-colors ${a.code===e?"text-[var(--accent)] bg-[var(--accent)]/8 font-medium":"text-[var(--foreground)] hover:bg-[var(--surface-hover)]"}`,children:[(0,t.jsx)("span",{children:a.nativeName}),a.code===e&&(0,t.jsx)("span",{className:"ms-2 text-xs text-[var(--accent)]",children:"✓"})]},a.code))})]})}var u=e.i(22530);let m=[{href:"/tools",key:"navTools"},{href:"/blog",key:"navGuides"},{href:"/ratio/16-9",key:"navReference",match:["/ratio","/platform"]}];function f(){let{t:e,locale:n}=(0,r.useTranslation)(),l=(0,c.getLocaleConfig)(n).urlPrefix,d=(0,o.usePathname)()??"";return(0,t.jsx)("header",{className:"site-header sticky top-0 z-40 border-b backdrop-blur-md",style:{borderColor:"var(--border)"},children:(0,t.jsxs)("div",{className:"mx-auto flex max-w-5xl items-center gap-1 px-4",style:{minHeight:56},children:[(0,t.jsxs)(a.default,{href:`${l}/`,className:"flex shrink-0 items-center gap-2 py-2 pe-2",style:{color:"var(--foreground)"},children:[(0,t.jsx)(s.ArcLogo,{style:{width:22,height:22,color:"var(--accent)"}}),(0,t.jsxs)("span",{className:"hidden font-display text-base font-semibold tracking-tight sm:inline sm:text-lg",children:[e("homePage","heroTitle")," ",(0,t.jsx)("span",{style:{color:"var(--accent)"},children:e("homePage","heroTitleAccent")})]})]}),(0,t.jsxs)("nav",{className:"ms-auto flex min-w-0 items-center gap-0.5","aria-label":e("siteNav","label"),style:{scrollbarWidth:"none"},children:[m.map(({href:o,key:i,...s})=>{var r;let n,c=(r="match"in s?s.match:void 0,n=l?d.slice(l.length)||"/":d,(r??[o]).some(e=>n===e||n.startsWith(e+"/")));return(0,t.jsx)(a.default,{href:`${l}${o}`,"aria-current":c?"page":void 0,className:"whitespace-nowrap px-2 py-2 text-sm underline-offset-[6px] transition-colors hover:underline sm:px-2.5",style:{color:c?"var(--accent)":"var(--muted)",textDecoration:c?"underline":void 0,textDecorationColor:c?"var(--accent)":void 0,textUnderlineOffset:6},children:e("siteNav",i)},i)}),(0,t.jsx)(a.default,{href:`${l}/search`,"aria-label":e("searchPage","label"),title:e("searchPage","label"),className:"flex items-center justify-center rounded-lg transition-colors",style:{color:"var(--muted)",minWidth:44,minHeight:44},children:(0,t.jsx)(i,{size:18,"aria-hidden":!0})}),(0,t.jsx)(u.ThemeToggle,{}),(0,t.jsx)(h,{})]})]})})}e.s(["SiteHeader",()=>f],36852)},6050,e=>{"use strict";var t=e.i(71645);let a="G-K2FFY9EBDL",o="cookie-consent-updated",i=new Set(["aspect-ratio-calculator.com","www.aspect-ratio-calculator.com"]);function s(){return!!window.__arcForceAnalytics||i.has(window.location.hostname)}function r(){try{let e=localStorage.getItem("cookie-consent");if(!e)return;let t=JSON.parse(e);!0===t.analytics&&(!function(){if(!s()||window.__ga4Loaded)return;window.__ga4Loaded=!0;let e=document.createElement("script");

1e.src=`https://www.googletagmanager.com/gtag/js?id=${a}`,e.async=!0,document.head.appendChild(e);let t=window.dataLayer=window.dataLayer??[];window.gtag=function(){t.push(arguments)},window.gtag("js",new Date),window.gtag("config",a)}(),function(){if(!s()||window.__clarityLoaded)return;window.__clarityLoaded=!0;let e=window;e.clarity=e.clarity||function(...t){(e.clarity.q=e.clarity.q||[]).push(t)};let t=document.createElement("script");t.async=!0,t.src="https://www.clarity.ms/tag/vqoklhyc4l";let a=document.getElementsByTagName("script")[0];a.parentNode?.insertBefore(t,a)}())}catch{}}function n(){return(0,t.useEffect)(()=>{function e(){r()}return r(),window.addEventListener(o,e),()=>window.removeEventListener(o,e)},[]),null}e.s(["AnalyticsScripts",()=>n])}]);