Inches to pixels

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Inches to pixels</title><style>*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--bg,#f3f4f5);color:var(--ink,#192838);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:1040px;margin:auto;padding:28px 28px 48px}header{margin-bottom:20px}h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.035em;margin:6px 0 9px}h2{font-size:21px;line-height:1.25;margin:0 0 16px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 16px}.eyebrow{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.12em;color:var(--accent,#275e86)}.subtle,small{color:#536170}.panel{padding:24px;background:white;border:1px solid var(--line,#d5dce2);border-radius:12px;margin:18px 0}.result{background:var(--result,#132f47);color:white;padding:26px;border-radius:14px;margin:18px 0}.result .subtle,.result small{color:#d7e3ed}.big{font-size:clamp(32px,6vw,56px);font-weight:750;line-height:1.15;letter-spacing:-.035em;margin:8px 0 14px;overflow-wrap:anywhere}.mono,pre,code{font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}.mono{overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7;margin:0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.fields{display:flex;gap:16px;flex-wrap:wrap;align-items:end}.fields>label{flex:1;min-width:130px}label{display:block;font-size:14px;font-weight:650}input,select,textarea{display:block;width:100%;font:inherit;font-size:16px;color:inherit;background:white;border:1px solid #a9b4bf;border-radius:6px;padding:11px 12px;margin-top:6px;min-width:0}input[type=checkbox]{display:inline;width:auto;margin:0 9px 0 0;accent-color:var(--accent,#275e86)}textarea{min-height:100px;resize:vertical}button{font:inherit;font-weight:650;padding:10px 17px;border:1px solid var(--accent,#275e86);background:var(--accent,#275e86);color:white;border-radius:6px;cursor:pointer;min-height:44px}button.secondary{background:white;color:var(--accent,#275e86)}button:disabled{opacity:.5;cursor:default}button:hover{filter:brightness(.94)}:focus-visible{outline:3px solid #e9a733;outline-offset:3px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.error{color:#a32325;font-weight:650;min-height:0}.error:not(:empty){padding:12px;border-left:4px solid #ae3237;background:#fff2f0;margin:14px 0}[hidden]{display:none!important}fieldset{border:1px solid #ccd4da;border-radius:8px;padding:18px;margin:0;min-width:0}legend{padding:0 7px;font-weight:750}table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#536170}td,th{padding:12px 9px;border-bottom:1px solid #d9dfe4;vertical-align:top;overflow-wrap:anywhere}th:first-child,td:first-child{padding-left:0}dl{margin:0}dl>div{padding:10px 0;border-bottom:1px solid #d9dfe4}dt{font-size:13px;color:#536170}dd{margin:4px 0 0;font-weight:650}details{margin:20px 0;padding:18px 0;border-top:1px solid #cbd2d8}summary{cursor:pointer;font-weight:700}details p{margin-top:16px}a{color:var(--accent,#275e86)}.tag{display:inline-block;font-size:12px;font-weight:750;letter-spacing:.03em;border:1px solid currentColor;border-radius:5px;padding:4px 8px}.rule{border-top:1px solid #d9dfe4;padding-top:20px}.line{height:30px;border-bottom:1px solid #aab4be}.split-stat{display:flex;justify-content:space-between;gap:20px;align-items:baseline;flex-wrap:wrap}.result h2{color:white}.result table td,.result table th{border-color:#ffffff35;color:white}.result .eyebrow{color:#d7e3ed}.readout{padding:16px;background:#f0f4f6;border-radius:6px;margin-top:14px}.empty{padding:22px;border:1px dashed #a6b0ba;border-radius:8px;color:#536170;margin:18px 0}footer{font-size:13px;color:#536170;margin-top:24px}@media(max-width:720px){main{padding:20px}.panel,.result{padding:20px}.grid{gap:14px}.triple{gap:10px}}@media(max-width:540px){main{padding:16px}.grid{grid-template-columns:1fr}.panel,.result{padding:18px;border-radius:9px}.fields{gap:12px}.fields>label{min-width:100px}h1{font-size:27px}th,td{padding:10px 5px;font-size:13px}.triple{grid-template-columns:1fr}.big{font-size:38px}}.size-note{font-size:27px;font-weight:750;border-bottom:3px solid #bbc9da;padding-bottom:14px}</style></head><body style="--bg:#eef0f6;--accent:#4c598a;--result:#303c67"><main><header><div class="eyebrow">Working example</div><h1>Inches to pixels</h1><p class="subtle">Supply a PPI and choose which dimensions stay fixed.</p></header><section id="result" class="result" aria-live="polite"><div class="eyebrow" id="modeLabel"></div><div class="big" id="dimensions"></div><p id="pixels"></p><p id="implied"></p></section><p id="error" class="error" role="alert"></p><p id="empty" class="empty" hidden>Inputs changed. Calculate to see the current result.</p><form id="form" class="panel" novalidate><label for="mode">Calculation mode<select id="mode"><option value="target">Plan new pixel dimensions from inches</option><option value="fixed">Keep existing pixels; interpret physical size</option></select></label><div class="fields" style="margin-top:18px"><label for="width"><span id="wl">Width · inches</span><input id="width" value="4" inputmode="decimal"></label><label for="height"><span id="hl">Height · inches</span><input id="height" value="3" inputmode="decimal"></label><label for="ppi">Supplied density · PPI<input id="ppi" value="240" inputmode="decimal" autocomplete="off"></label></div><div class="actions"><button>Calculate dimensions</button><button type="button" id="half" class="secondary">Compare at 120 PPI</button></div></form><section class="panel"><h2>Two different 120-PPI questions</h2><div class="grid"><div><h3>Keep 4 × 3 inches</h3><p class="size-note">480 × 360 px</p><p>172,800 pixels planned</p></div><div><h3>Keep 960 × 720 pixels</h3><p class="size-note">8 × 6 inches</p><p>691,200 pixels retained</p></div></div></section><section class="panel"><h2>Calculation record</h2><pre id="trace"></pre></section><details><summary>Whole-pixel rounding and limitations</summary><p>New targets round to the nearest whole pixel, positive halves up. Implied inches use rounded pixels ÷ PPI; shortened decimal values are approximate. No image file is created, inspected, or resampled. These are raster pixels, not CSS units or a physical screen measurement.</p><p>Use positive dot-decimal values up to 1 billion, at most nine decimals. Fixed pixels must be whole numbers. Results with zero rounded axes or counts beyond safe integer range need a smaller or larger supported input. Confirm the provider’s actual requirements; the sample PPI is not a quality guarantee.</p><p><a href="https://helpx.adobe.com/photoshop/desktop/crop-resize-transform/resize-adjust-resolution/image-size-resolution-and-resampling.html">Adobe: pixel dimensions, physical size, and resampling</a></p></details><footer>Local review copy · No data is sent or saved.</footer></main><script>const $=id=>document.getElementById(id);const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));function round(n,d){return (2n*n+d)/(2n*d)}function dec(n,d,p=6){let x=round(n*10n**BigInt(p),d).toString().padStart(p+1,'0');return p?x.slice(0,-p)+'.'+x.slice(-p):x}function exact(n,d){let a=n/d,r=n%d,s='';for(let i=0;r&&i<36;i++){r*=10n;s+=r/d;r%=d}return a+(s?'.'+s:'')+(r?'…':'')}function num(s,name,max=1000000000,places=9,zero=false){if(!new RegExp('^[0-9]+(?:[.][0-9]{1,'+places+'})?$').test(s)||s.length>35)throw Error(name+': use a '+(zero?'nonnegative':'positive')+' dot-decimal number.');let [a,b='']=s.split('.'),d=10n**BigInt(b.length),n=BigInt(a+b);if((zero?n<0n:n<=0n)||n>BigInt(max)*d)throw Error(name+': value outside the supported range.');return {n,d,v:Number(n)/Number(d)}}function clear(){ $('result').hidden=true;$('trace').textContent='';$('empty').hidden=false;$('error').textContent='';}function reveal(){ $('result').hidden=false;$('empty').hidden=true;$('error').textContent='';}function error(e){clear();$('error').textContent=e.message;}function bindForm(run){$('form').addEventListener('submit',e=>{e.preventDefault();run()});$('form').addEventListener('input',clear);$('form').addEventListener('change',clear);}

function plan(w,h,p,mode){const a=num(w,'Width'),b=num(h,'Height'),c=num(p,'PPI');if(mode==='fixed'&&(!/^[0-9]+$/.test(w)||!/^[0-9]+$/.test(h)))throw Error('Fixed pixel dimensions must be positive whole numbers.');if(!['target','fixed'].includes(mode))throw Error('Unsupported mode.');const W=mode==='target'?round(a.n*c.n,a.d*c.d):a.n/a.d,H=mode==='target'?round(b.n*c.n,b.d*c.d):b.n/b.d;if(!W||!H||W*H>9007199254740991n)throw Error('Result exceeds supported pixel-count limits or rounds to zero.');return {W,H,total:W*H,rawW:exact(a.n*c.n,a.d*c.d),rawH:exact(b.n*c.n,b.d*c.d),inW:dec(W*c.d,c.n,9),inH:dec(H*c.d,c.n,9),mode};}
function run(){try{const r=plan($('width').value,$('height').value,$('ppi').value,$('mode').value);reveal();$('modeLabel').textContent=r.mode==='target'?'New raster target · rounded to whole pixels':'Fixed pixel count · physical interpretation';$('dimensions').textContent=r.mode==='target'?r.W+' × '+r.H+' px':'≈ '+r.inW+' × '+r.inH+' in';$('pixels').textContent=r.total.toLocaleString('en-US')+' total pixels'+(r.mode==='fixed'?' · unchanged':'');$('implied').textContent=r.mode==='target'?'Implied size ≈ '+r.inW+' × '+r.inH+' in at '+$('ppi').value+' PPI':r.W+' × '+r.H+' px retained at '+$('ppi').value+' PPI';$('trace').textContent=r.mode==='target'?'Requested '+$('width').value+' × '+$('height').value+' in × '+$('ppi').value+' PPI\nRaw targets '+r.rawW+' × '+r.rawH+' px\nNearest whole pixels, positive halves up: '+r.W+' × '+r.H+'\nTotal '+r.total+' pixels\nImplied width '+r.W+' / '+$('ppi').value+' ≈ '+r.inW+' in\nImplied height '+r.H+' / '+$('ppi').value+' ≈ '+r.inH+' in':'Fixed '+r.W+' × '+r.H+' px; '+r.total+' pixels\nWidth '+r.W+' / '+$('ppi').value+' ≈ '+r.inW+' in\nHeight '+r.H+' / '+$('ppi').value+' ≈ '+r.inH+' in\nNo resampling or image edit performed.';}catch(e){error(e)}}bindForm(run);$('mode').addEventListener('change',()=>{const fixed=$('mode').value==='fixed';$('wl').textContent='Width · '+(fixed?'pixels':'inches');$('hl').textContent='Height · '+(fixed?'pixels':'inches');$('width').value=fixed?'960':'4';$('height').value=fixed?'720':'3'});$('half').onclick=()=>{$('ppi').value='120';run()};run();</script>
<script>
// Local calculation controls: no native form submission or sandbox permissions required.
(()=>{const form=document.getElementById('form');if(!form)throw Error('Calculation form missing');const dispatch=()=>form.dispatchEvent(new Event('submit',{bubbles:true,cancelable:true}));const buttons=[...form.querySelectorAll('button')].filter(button=>button.type==='submit');if(buttons.length!==1)throw Error('Expected one calculation control');for(const button of buttons){button.type='button';button.addEventListener('click',dispatch);}form.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.isComposing&&['INPUT','SELECT'].includes(event.target.tagName)){event.preventDefault();dispatch();}});})();
</script>
</body></html>