Object storage and egress cost

<div class="compare-demo"><div class="compare-title"><b class="compare-badge">VS</b>STORAGE + INTERNET EGRESS</div><div class="compare-input"><label>Stored <b id="first-value"></b><input id="first" type="range" min="0" max="200" step="10" value="100"></label><label>Egress <b id="second-value"></b><input id="second" type="range" min="0" max="500" step="25" value="100"></label></div><div class="cost-rows"><div class="cost-row"><span>AWS S3</span><div class="cost-track"><i id="cost-bar-0"></i></div><strong id="cost-value-0"></strong></div><div class="cost-row"><span>Google US→NA</span><div class="cost-track"><i id="cost-bar-1"></i></div><strong id="cost-value-1"></strong></div><div class="cost-row"><span>Azure Blob</span><div class="cost-track"><i id="cost-bar-2"></i></div><strong id="cost-value-2"></strong></div><div class="cost-row"><span>Oracle paid*</span><div class="cost-track"><i id="cost-bar-3"></i></div><strong id="cost-value-3"></strong></div><div class="cost-row"><span>DigitalOcean</span><div class="cost-track"><i id="cost-bar-4"></i></div><strong id="cost-value-4"></strong></div><div class="cost-row"><span>Hetzner USD*</span><div class="cost-track"><i id="cost-bar-5"></i></div><strong id="cost-value-5"></strong></div><div class="cost-row"><span>Akamai/Linode</span><div class="cost-track"><i id="cost-bar-6"></i></div><strong id="cost-value-6"></strong></div></div><div class="compare-foot">2026-10-06 · *Oracle paid account; Hetzner official USD · requests/tax excluded</div></div>

.compare-demo{width:min(95vw,900px);height:min(92vh,350px);padding:clamp(8px,2.2vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden;font:600 clamp(11px,2.4vmin,16px)/1.2 ui-sans-serif,-apple-system,sans-serif}.compare-title{display:flex;align-items:center;gap:6px;color:var(--fg);font-weight:800}.compare-badge{display:grid;place-items:center;width:2em;height:2em;border:1px solid var(--line);border-radius:50%;font-size:.7em;color:var(--accent)}.compare-input{display:flex;gap:clamp(5px,2vmin,14px)}.compare-input label{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;font-size:.72em;gap:2px}.compare-input b{color:var(--accent);font-variant-numeric:tabular-nums}.compare-input input{grid-column:1/3;width:100%;accent-color:var(--accent)}.cost-rows{flex:1;min-height:0;display:grid;align-content:center;gap:clamp(2px,.9vmin,7px)}.cost-row{display:grid;grid-template-columns:minmax(72px,27%) 1fr minmax(46px,15%);align-items:center;gap:clamp(3px,1vmin,7px);font-size:.71em}.cost-track{height:clamp(8px,2.5vmin,19px);border:1px solid var(--line);border-radius:5px;overflow:hidden}.cost-track i{display:block;height:100%;background:var(--accent);width:0;transition:width .35s}.cost-row:nth-child(2) i{background:var(--accent-2)}.cost-row:nth-child(3) i{background:var(--accent-3)}.cost-row strong{text-align:right;font-variant-numeric:tabular-nums}.compare-foot{font-size:.65em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:700px){.compare-demo{font-size:16px}.compare-title{font-size:19px}.compare-input label{font-size:14px}.cost-rows{align-content:space-evenly}.cost-row{font-size:13px}.cost-track{height:18px}.compare-foot{font-size:11px}}

const first=document.getElementById('first');const second=document.getElementById('second');let manual=false;function bar(index,cost,max){document.getElementById('cost-value-'+index).textContent='$'+cost.toFixed(2);document.getElementById('cost-bar-'+index).style.width=(cost===0?0:Math.max(5,cost/max*100))+'%'}function paint(){const a=Number(first.value),b=Number(second.value);document.getElementById('first-value').textContent=a+' GB';document.getElementById('second-value').textContent=b+' GB';const costs=[a*.023+Math.max(0,b-100)*.09,Math.max(0,a-5)*.02+Math.max(0,b-100)*.12,a*.0208+Math.max(0,b-100)*.087,Math.max(0,a-10)*.0255,5,5.99,a*.02];const scale=Math.max(1,...costs);costs.forEach((cost,index)=>bar(index,cost,scale));document.getElementById('cost-value-3').textContent='$'+costs[3].toFixed(3);}paint();let direction=1;setInterval(()=>{if(manual)return;const next=Number(first.value)+10*direction;if(next>200||next<0){direction*=-1;return}first.value=String(next);paint()},800);for(const input of [first,second])input.addEventListener('input',()=>{manual=true;paint()});