2e:null 2f:["$","title",null,{"children":"Hitting a target filesize, using quality (and scale!) | Eric Portis | Observable"}] 34:[] 32:{"id":"a18ca51e273d9c34","slug":"hitting-a-target-filesize-using-quality-and-scale","title":"Hitting a target filesize, using quality (and scale!)","thumbnail":"5f0818ea533e87aeeb2a9f1c38c67be72caba78286f1644f2c75e31acad46f03","access_level":"public","create_time":"$D2020-04-10T06:29:58.835Z","update_time":"$D2020-05-12T14:48:27.090Z","view_time":null,"first_public_time":"$D2020-04-14T19:27:09.330Z","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":366,"publish_version":366,"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":"Hitting a target filesize, using quality (and scale!)","cells":[{"id":0,"value":"md`# Hitting a target filesize, using quality (and scale!)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"viewof originalURL = {\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":33,"value":"viewof bytesBudget = {\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":348,"value":"viewof displayAt = {\n const form = html`\n \n `;\n const update = () => { form.value = parseInt( form.querySelector(':checked').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":197,"value":"md`### Original image:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"originalImage = promisedImage( originalURL )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"html`\n

Encoded to a target filesize using just quality

\n\n

Quality:: ${ justQualitySettings.quality }
Missed by:: ${ prettyBytesError( bytesBudget, justQualityPerformance.bytes ) }
In memory (naïve):: ${ prettyBytes( dimensions.w * dimensions.h * 3 ) }

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"justQualityImage = promisedImage( justQualityURL )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"html`\n

Encoded to a target filesize using both quality and scale

\n\n

Quality:: ${ qualityAndScaleTogetherSettings.quality }
Scale:: ${ qualityAndScaleTogetherSettings.scale * 100 }%
Missed by:: ${ prettyBytesError( bytesBudget, qualityAndScaleTogetherPerformance.bytes ) }
In memory (naïve):: ${ prettyBytes( dimensions.w * dimensions.h * 3 * Math.pow( qualityAndScaleTogetherSettings.scale, 2 ) ) }${ qualityAndScaleTogetherSettings.scale < 1 ? ` (${ Math.round( 100 * ( Math.pow( qualityAndScaleTogetherSettings.scale, 2 ) - 1 ) ) }%)` : '' }

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"qualityAndScaleTogetherImage = promisedImage( qualityAndScaleTogetherURL )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"dimensions = ( { w: originalImage.naturalWidth, h: originalImage.naturalHeight } )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"targetBitsPerPixel = (bytesBudget * 8) / (dimensions.w * dimensions.h)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"qualityAndScaleTogetherBPP = (qualityAndScaleTogetherPerformance.bytes * 8) / (dimensions.w * dimensions.h)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"justQualityBPP = (justQualityPerformance.bytes * 8) / (dimensions.w * dimensions.h)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"justQuality = (targetBPP) => {\n \n const qualityBreakpoint = 60,\n bppBreakpoint = Math.pow( ( qualityBreakpoint / 48.671 ), ( 1 / 1.3768 ) );\n \n // 0-60\n const firstRegression = ( bpp ) => Math.round( 48.671 * Math.pow( bpp, 1.3768 ) );\n \n // 60-100 (or whatever the vertex of the parabola is)\n const a = -13.262,\n b = 71.526,\n c = - 4.4757,\n secondRegression = ( bpp ) => Math.round( a * Math.pow( bpp, 2 ) + b * bpp + c ),\n maxBPP = ( -1 * b ) / ( 2 * a );\n \n if ( targetBPP <= 0 ) {\n return 0;\n } else if ( targetBPP <= bppBreakpoint ) {\n return firstRegression( targetBPP );\n } else if ( targetBPP <= maxBPP ) {\n return secondRegression( targetBPP );\n } else {\n return secondRegression( maxBPP );\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"qualityAndScaleTogether = {\n \n const scale = (targetBPP) => {\n const regression = Math.round( 100 * ( 0.2006 * Math.log( targetBPP ) + 0.9467 ) ) / 100;\n if ( regression <= 0 ) {\n return 1e-5; // can't be zero...\n } else if ( regression >= 1 ) {\n return 1\n } else {\n return regression;\n }\n };\n \n const quality = (targetBPP) => {\n const a = -12.373,\n b = 64.681,\n c = 6.3629,\n regression = bppp => Math.round( a * Math.pow( bppp, 2 ) + b * bppp + c ),\n maxBPPP = (-1 * b) / (2 * a); // vertex/max of the parabola\n if ( targetBPP <= 0 ) {\n return 0;\n } else if ( targetBPP > maxBPPP ) {\n return regression(maxBPPP);\n } else {\n return regression(targetBPP);\n }\n };\n \n return (targetBPP) => {\n return {\n scale: scale(targetBPP),\n quality: quality(targetBPP)\n }\n };\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"justQualitySettings = ({ quality: justQuality(targetBitsPerPixel) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"qualityAndScaleTogetherSettings = qualityAndScaleTogether(targetBitsPerPixel)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"transformURL = ( url, transformations ) => `https://o.img.rodeo/image/fetch/${ transformations }/${ url }`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"justQualityURL = transformURL(originalURL, `f_jpg,fl_progressive,q_${ justQuality( targetBitsPerPixel ) }` )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"qualityAndScaleTogetherURL = { \n const { quality, scale } = qualityAndScaleTogether( targetBitsPerPixel );\n return transformURL( originalURL, `f_jpg,fl_progressive,q_${ quality },w_${ alwaysPrintDecimal( scale ) }` ) + `?contentDPR=${ scale }`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"justQualityPerformance = {\n return new Promise( ( resolve, reject ) => {\n const po = new PerformanceObserver( ( list, obj ) => {\n for ( const entry of list.getEntriesByName( justQualityURL ) ) {\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 // po.disconnect();\n }\n } );\n po.observe( { entryTypes: [\"resource\"] } );\n } );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"qualityAndScaleTogetherPerformance = {\n return new Promise( ( resolve, reject ) => {\n const po = new PerformanceObserver( ( list, obj ) => {\n for ( const entry of list.getEntriesByName( qualityAndScaleTogetherURL ) ) {\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 // po.disconnect();\n }\n } );\n po.observe( { entryTypes: [\"resource\"] } );\n } );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"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":207,"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":210,"value":"prettyBytesError = ( target, actual ) => {\n \n const sign = ( number ) => {\n if ( number === 0 ) { return ''; }\n else {\n return ( number > 0 ? '+' : '-' );\n }\n }\n\n const error = target - actual,\n absoluteError = Math.abs( error ),\n relativeError = Math.abs( 1 - (actual / target) ),\n percentageError = Math.abs( (target - actual) / target );\n \n return sign( -1 * error ) + \n prettyBytes( absoluteError ) + \n ` (${ Math.round( percentageError * 100 ) }%)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"alwaysPrintDecimal = (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":365,"value":"displayAtStyle = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"html`