2d:null 2e:["$","title",null,{"children":"LQIP URL rewriter | Eric Portis | Observable"}] 33:[] 31:{"id":"6ef9f5099948cb9e","slug":"lqip-url-rewriter","title":"LQIP URL rewriter","thumbnail":"bdc678207b030815304c5ec23fce41ef97146974d3ca953409d117d32fa10490","access_level":"public","create_time":"$D2021-04-08T22:36:54.564Z","update_time":"$D2021-04-23T21:18:18.665Z","view_time":null,"first_public_time":"$D2021-04-14T04:09:18.160Z","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":338,"publish_version":338,"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":"LQIP URL rewriter","cells":[{"id":0,"value":"md`# LQIP URL rewriter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof input_url = {\n const form = html`\n`\n const update = () => {\n form.value = form.lqip_url.value;\n form.dispatchEvent( new CustomEvent( \"input\" ) );\n }\n form.onsubmit = e => { \n e.preventDefault();\n update();\n }\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"viewof exifSupport = {\n const form = html``\n const input = form.querySelector('input');\n const output = form.querySelector('output');\n const update = () => {\n form.value = input.checked;\n output.textContent = { true: 'supported', false: 'not supported' }[ input.checked ];\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":71,"value":"targetBytes = 1700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"output_url = rewrite_url( {\n input_url: input_url,\n lqip_width: lqipDimensions.width,\n lqip_height: lqipDimensions.height,\n full_width: fullDimensions.width,\n full_height: fullDimensions.height\n} )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"({\n bytesOverTheWire: lqipResourceTiming.transferSize,\n imageBytes: lqipResourceTiming.encodedBodySize,\n totalTime: lqipResourceTiming.duration,\n connectionTime: lqipResourceTiming.requestStart - lqipResourceTiming.fetchStart,\n loadTime: lqipResourceTiming.responseEnd - lqipResourceTiming.requestStart,\n rtt: lqipResourceTiming.responseStart - lqipResourceTiming.requestStart,\n downloadTime: lqipResourceTiming.responseEnd - lqipResourceTiming.responseStart\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"lqipImg = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"lqipResourceTiming = new Promise( ( resolve, reject ) => {\n let entries = window.performance.getEntriesByName( lqipImg.src );\n if ( entries && entries[ 0 ] ) {\n // console.log( [ 'perf', entries[ 0 ] ] )\n resolve( entries[ 0 ] );\n } else {\n const po = new PerformanceObserver( ( list, observer ) => {\n let lqipEntry = list.getEntriesByName( lqipImg.src );\n if ( lqipEntry && lqipEntry[ 0 ] ) {\n // console.log( [ 'po', lqipEntry[ 0 ] ] )\n resolve( lqipEntry[ 0 ] );\n }\n } );\n po.observe( { entryTypes: [ \"resource\" ] } );\n }\n} );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`---\n\n## the buisness`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"fullsize_url = input_url.replace(/q_lqip/g,\"q_auto\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"fullsizeImage = promisedImage(fullsize_url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"fullDimensions = {\n await fullsizeImage;\n return { 'width': fullsizeImage.naturalWidth, 'height': fullsizeImage.naturalHeight };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"calculate_blur_strength = ( {\n\toriginalWidth,\n\toriginalHeight\n} ) => 2 * Math.sqrt(originalWidth * originalHeight)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"calculate_lqip_dimensions = function( {\n\ttargetBytes,\n\toriginalWidth,\n\toriginalHeight\n} ) {\n\n\t// q_auto:low for small JPEGs appears to spend ~300 bytes overhead for huffman tables and headers + ~10 bytes / block\n\t// bytes = 300 + blocks * 10\n\tconst targetBlocks = ( targetBytes - 300 ) / 10;\n\n\tconst targetPixels = targetBlocks * 8 * 8,\n\t\t\t ar = originalWidth / originalHeight,\n\t\t \th = Math.sqrt( targetPixels / ar ),\n\t\t \tw = ar * h;\n\n\t// round to nearest block boundaries\n\tconst width = 8 * Math.round( w / 8 ),\n\t\t\t height = 8 * Math.round( h / 8 );\n\n\t// const resultBlocks = width * height / 64,\n\t// errorBlocks = resultBlocks - targetBlocks;\n\t// console.log( { resultBlocks, targetBlocks, errorBlocks } )\n\t\n\treturn { width, height };\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"lqipDimensions = calculate_lqip_dimensions( {\n targetBytes: targetBytes,\n\toriginalWidth: fullDimensions.width,\n\toriginalHeight: fullDimensions.height\n} )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"rewrite_url = function( {\n input_url,\n lqip_width,\n lqip_height,\n full_width,\n full_height\n} ) {\n \n const q_lqip_match = input_url.match( /(.+)\\/([^/]*q_lqip[^/]*)\\/(.+)/ );\n \n if ( !q_lqip_match ) {\n return input_url;\n }\n \n const [ , before, q_lqip_group, after ] = q_lqip_match,\n strip_q_lqip = q_lqip_group.split( ',' ).filter( t => t !== 'q_lqip' ).join( ',' );\n \n let new_group;\n if ( exifSupport ) {\n new_group = `f_jpg,q_auto:low,w_${ lqip_width },h_${ lqip_height },dn_${ full_width }x${ full_height }`; \n } else {\n const sigma = full_width / lqip_width,\n strength = Math.round( sigma * 100 );\n new_group = `f_auto,q_auto:low,e_blur:${ strength }`;\n }\n\n return `${ before }/${ strip_q_lqip }/${ new_group }/${ after }`;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"promisedImage = (url) => new Promise( ( resolve, reject ) => {\n const i = new Image();\n i.crossOrigin = \"anonymous\";\n i.addEventListener( 'load', () => resolve( i ) );\n i.src = url;\n return i;\n} );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"