2b:null 2c:["$","title",null,{"children":"Comparing DPRs | Eric Portis | Observable"}] 31:[] 2f:{"id":"8bd02f5d25a058e4","slug":"comparing-dprs","title":"Comparing DPRs","thumbnail":"4605dd16cd953a7902df3652e1b49734714f965c24cecfc37fc19c536f8be5a3","access_level":"public","create_time":"$D2019-05-16T00:20:15.117Z","update_time":"$D2019-05-17T15:24:12.990Z","view_time":null,"first_public_time":"$D2019-05-16T00:46:34.254Z","fork":{"id":"322a4185c346ba23","slug":"classic-vs-subject-auto-cropping-with-cloudinary","title":"“classic” vs “subject” auto-cropping with Cloudinary","owner":{"id":"3301827868803b5f","login":"eeeps","name":"Eric Portis"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3301827868803b5f","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":"starter_2024"},"version":367,"publish_version":367,"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":"Comparing DPRs","cells":[{"id":0,"value":"md`# Comparing DPRs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`First, give me an image URL to work with (or just start with the default).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof inputURL = {\n const form = html``;\n const input = form.querySelector('input');\n const button = form.querySelector('button');\n button.addEventListener('click', ( event ) => {\n event.preventDefault();\n fetch('https://source.unsplash.com/random').then( ( response ) => {\n input.value = response.url;\n form.value = response.url;\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n });\n input.addEventListener( 'input', () => {\n form.value = input.value;\n } );\n form.value = input.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`(☝️ *or*, click the button to get a new [random image from Unsplash](https://source.unsplash.com))`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"viewof downscaledDPR = {\n const form = html``;\n const input = form.querySelector('input');\n const output = form.querySelector('output');\n const update = () => {\n output.textContent = `${ parseFloat( input.value ) }x`;\n form.value = input.value;\n }\n input.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"images = html`

\n\n

At your screen’s native resolution (DPR ${ window.devicePixelRatio }):

\n\n

Downscaled (DPR ${downscaledDPR}):

\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"{\n if ( firstByteSize && secondByteSize ) {\n return html`

${ Math.round( 10 * firstByteSize / 1000 ) / 10 } KB

${ Math.round( 10 * secondByteSize / 1000 ) / 10 } KB

`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`Can you see the difference?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"firstURL = `https://o.img.rodeo/image/fetch/ar_1,c_thumb,g_auto,w_${ Math.round( width * window.devicePixelRatio / 2 ) },q_auto/${ inputURL }`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"secondURL = firstURL.replace( /\\,q_auto\\/https/g, `/q_auto,w_${ ( parseFloat( downscaledDPR / window.devicePixelRatio ).toString().match( /\\./ ) ? parseFloat( downscaledDPR / window.devicePixelRatio ).toString() : parseFloat( downscaledDPR / window.devicePixelRatio ).toString() + '.0' ) }/https` )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"firstByteSize = Generators.observe( notify => {\n if ( 'PerformanceResourceTiming' in window ) {\n const po = new PerformanceObserver( ( list ) => {\n list.getEntriesByName( firstURL ).forEach( entry => {\n if ( 'decodedBodySize' in entry &&\n entry.decodedBodySize > 0 ) {\n notify( entry.decodedBodySize );\n }\n } );\n } ); \n po.observe( { entryTypes: [ \"resource\" ] } );\n return () => po.disconnect();\n }\n} )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"secondByteSize = Generators.observe( notify => {\n if ( 'PerformanceResourceTiming' in window ) {\n const po = new PerformanceObserver( ( list ) => {\n list.getEntriesByName( secondURL ).forEach( entry => {\n if ( 'decodedBodySize' in entry &&\n entry.decodedBodySize > 0 ) {\n notify( entry.decodedBodySize );\n }\n } );\n } ); \n po.observe( { entryTypes: [ \"resource\" ] } );\n return () => po.disconnect();\n }\n} )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"html`

styles

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"