2e:null 2f:["$","title",null,{"children":"Tailoring images to fit time and filesize budgets | Eric Portis | Observable"}] 34:T625,{ const bytesError = sign( error.bytes.absolute ) + prettyBytes( Math.abs( error.bytes.absolute ) ) + ` (${ Math.round( Math.abs( error.bytes.percent ) * 100 ) }%)`, timeError = sign( error.milliseconds.absolute ) + prettyTime( Math.abs( error.milliseconds.absolute ) ) + ` (${ Math.round( Math.abs( error.milliseconds.percent ) * 100 ) }%)`, serverTimeError = sign( error.milliseconds.accountingForServerTime.absolute ) + prettyTime( Math.abs( error.milliseconds.accountingForServerTime.absolute ) ) + ` (${ Math.round( Math.abs( error.milliseconds.accountingForServerTime.percent ) * 100 ) }%)`, bytesExpectedUnder = !adapting && error.bytes.absolute < 0, timeExpectedUnder = !adapting && error.milliseconds.accountingForServerTime.absolute < 0; return html` We missed our filesize budget by ${ bytesError }${ ( bytesExpectedUnder ? ', but that’s OK because we weren’t adapting to network conditions.' : '.' ) }

We missed our time budget by ${ timeError }. Accounting for server time, we missed it by ${ serverTimeError }${ ( timeExpectedUnder ? ', but that’s OK because we weren’t adapting to network conditions.' : '.' ) }

` }35:[] 32:{"id":"586110fcdd5729f6","slug":"tailoring-images-to-fit-time-and-filesize-budgets","title":"Tailoring images to fit time and filesize budgets","thumbnail":"6126afc43bc359cab679ef6e93d7c8520c3f34ea943fac5ef4cf2688c8f72f7d","access_level":"public","create_time":"$D2020-04-01T20:24:15.774Z","update_time":"$D2020-04-16T13:54:25.172Z","view_time":null,"first_public_time":"$D2020-04-02T18:56:07.905Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3301827868803b5f","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":"starter_2024"},"version":467,"publish_version":467,"role":null,"authored":false,"authors":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null}],"members":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Tailoring images to fit time and filesize budgets","cells":[{"id":0,"value":"md`# Tailoring images to fit time and filesize budgets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"viewof timeBudget = {\n const form = html`\n \n `;\n const update = () => { form.value = form.input.value };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof rtt = {\n const form = html`\n \n `;\n const update = () => { form.value = form.input.value };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"viewof dimensions = {\n const form = html`\n \n `;\n const update = () => { form.value = { w: form.w.value, h: form.h.value }; };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`**Estimated bandwidth:** ${ prettyBits( (bandwidthFromRTT(rtt) * 1000)/8 ) }/second`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`**Filesize budget:** ${ prettyBytes( bytesBudget ) }`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"adapting = !( adapted.quality == max_quality && adapted.scale == 1 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"adapted = ({\n quality: quality(bppp),\n scale: scale(bppp)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"loaded = {\n return new Promise( ( resolve, reject ) => {\n const po = new PerformanceObserver( ( list, obj ) => {\n for ( const entry of list.getEntriesByName( src ) ) {\n resolve( { \n milliseconds: entry.duration,\n bytes: entry.encodedBodySize,\n serverTiming: entry.serverTiming.map( st => [ st.name, st.duration, st.description ] ),\n serverMilliseconds: Math.round( entry.responseStart - entry.requestStart - entry.serverTiming.find( x => x.name === 'rtt' ).duration )\n } );\n }\n } );\n po.observe( { entryTypes: [\"resource\"] } );\n } );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"[ fetchedImage.bytes, fetchedImage.serverTiming ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"error = ({\n bytes: { \n absolute: loaded.bytes - bytesBudget,\n percent: (loaded.bytes - bytesBudget) / bytesBudget\n },\n milliseconds: { \n absolute: loaded.milliseconds - timeBudget,\n percent: (loaded.milliseconds - timeBudget) / timeBudget,\n accountingForServerTime: {\n absolute: loaded.milliseconds - loaded.serverMilliseconds - timeBudget,\n percent: ( loaded.milliseconds - loaded.serverMilliseconds - timeBudget ) / timeBudget\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"src = `https://o.img.rodeo/c_fill,g_auto,ar_${ dimensions.w }:${ dimensions.h }/w_${ dimensions.w },h_${ dimensions.h }/q_${ adapted.quality },w_${ cloudyScale( adapted.scale ) },fl_progressive,fl_lossy/dogs/2?contentDPR=${ adapted.scale }`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"fetchedImage = {\n const response = await fetch( src, { cache: 'no-cache' } ),\n blob = await response.blob(),\n objectURL = URL.createObjectURL( blob ),\n bytes = parseInt( response.headers.get( 'content-length' ) ),\n serverTiming = parseInt( response.headers.get( 'server-timing' ) ),\n img = new Image;\n img.setAttribute( 'style', `width: ${ dimensions.w }px;` )\n img.src = objectURL;\n img.bytes = bytes;\n img.serverTiming = serverTiming;\n return img\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof XbytesBudget = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"bytesBudget = {\n const bandwidth = bandwidthFromRTT(rtt) / 8; // kilobits/second => bytes/millisecond\n return bandwidth * ( timeBudget - rtt ) // all bytes and milliseconds, yay\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"max_quality = 95","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"bppp = ( bytesBudget * 8 ) / ( dimensions.w * dimensions.h )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"bandwidthFromRTT = (rtt) => 6119.2 * Math.pow( Math.E, ( -0.0042 * rtt ) )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"scale = (bppp) => {\n const x = Math.round( 100 * ( 0.2006 * Math.log( bppp ) + 0.9467 ) ) / 100;\n return ( x > 1 ? 1 : x );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"quality = ( bppp ) => {\n const regression = bppp => Math.round( -12.373 * Math.pow(bppp, 2) + 64.681 * bppp + 6.3629 ),\n max_bppp = (-64.681 + Math.sqrt( Math.pow( 64.681, 2 ) - 4 * -12.373 * (6.3629 - max_quality)))/(2 * -12.373);\n \n return ( bppp > max_bppp ? max_quality : regression(bppp) );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"prettyBytes = function( bytes ) {\n if ( Math.abs( bytes ) < 1000 ) {\n return `${ Math.round( bytes ) } B`;\n } else if ( Math.abs( bytes ) < 1000000 ) {\n return `${ Math.round( bytes / 100 ) / 10 } kB`\n } else {\n return `${ Math.round( bytes / 100000 ) / 10 } MB`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"prettyBits = function( bytes ) {\n const bits = bytes * 8;\n if ( Math.abs( bits ) < 1000 ) {\n return `${ Math.round( bits ) } b`;\n } else if ( Math.abs( bits ) < 1000000 ) {\n return `${ Math.round( bits / 100 ) / 10 } kb`\n } else {\n return `${ Math.round( bits / 100000 ) / 10 } Mb`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"prettyTime = function( ms ) {\n if ( ms < 1000 ) {\n const milliseconds = Math.round( ms );\n return `${ milliseconds } millisecond${ ( milliseconds !== 1 ? 's' : '' ) }`;\n } else {\n const seconds = Math.round( ms / 100 ) / 10;\n return `${ seconds } second${ ( seconds !== 1 ? 's' : '' ) }`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"cloudyScale = (float) => {\n if ( float.toString().match( '\\\\.' ) === null ) {\n return `${float}.0`\n } else {\n return float.toString()\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"sign = ( number ) => {\n if (number === 0) { return ''; }\n else {\n return ( number > 0 ? '+' : '-' );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"