31:T88f,{ const percentageChange = ( oldValue, newValue ) => { return ( newValue - oldValue ) / oldValue; } const betterOrWorse = ( percentageChange, whatsGood ) => { if ( percentageChange === 0 ) { return ''; } if ( 'lower' === whatsGood ) { if ( percentageChange < 0 ) { return 'better'; } else { return 'worse'; } } else if ( 'higher' === whatsGood ) { if ( percentageChange < 0 ) { return 'better'; } else { return 'worse'; } } } return html` ${ compressedURLs.map( ( u, index ) => { const ssimulacraPercentageChange = percentageChange( ssimulacraScores[ selectedComparisonImageIndex ], ssimulacraScores[ index ] ), bitsPerPixelPercentageChange = percentageChange( compressedData[ selectedComparisonImageIndex ].bitsPerPixel, compressedData[ index ].bitsPerPixel ), ssimulacraBetterOrWorse = betterOrWorse( ssimulacraPercentageChange, 'lower' ), bitsPerPixelBetterOrWorse = betterOrWorse( bitsPerPixelPercentageChange, 'lower' ); return ` `; } ).join('') }

URL	File size	SSIMULACRA		Bits per pixel
${ u }	${ prettyBytes( compressedData[ index ].bytes ) }	`${ Math.round( 1e5 * ssimulacraScores[ index ] ) / 1e5 }`	(${ Math.round( Math.abs( ssimulacraPercentageChange ) * 100 ) }% ${ ssimulacraBetterOrWorse })	`${ Math.round( 1e5 * compressedData[ index ].bitsPerPixel ) / 1e5 }`	(${ Math.round( Math.abs( bitsPerPixelPercentageChange ) * 100 ) }% ${ bitsPerPixelBetterOrWorse })

` }32:T53d,html``33:[{"id":"90c21619a8c7285b45edbc0dafa8830a1f6d22fbe8fd5a6dcf24008e5687bca09930deb01b0d20b29cc035783a653d4884391ddadb888ad82896e52c3d144adb","href":"https://static.observableusercontent.com/files/90c21619a8c7285b45edbc0dafa8830a1f6d22fbe8fd5a6dcf24008e5687bca09930deb01b0d20b29cc035783a653d4884391ddadb888ad82896e52c3d144adb","name":"ssimulacra.js","type":"application/javascript","lastModified":1617828972186.517,"size":388615},{"id":"7931d1a51deeda9b34c7a41a19baa27a55321c1d5c1d9074f8740f0c91cc4eabf02ff9812c8ed7f618a063aff6b3763ea0260cd238bd577c7f1d7d52a7da7e75","href":"https://static.observableusercontent.com/files/7931d1a51deeda9b34c7a41a19baa27a55321c1d5c1d9074f8740f0c91cc4eabf02ff9812c8ed7f618a063aff6b3763ea0260cd238bd577c7f1d7d52a7da7e75","name":"ssimulacra.wasm","type":"application/wasm","lastModified":1617828972186.517,"size":1939845}] 2f:{"title":"Comparing formats (w/ JXL)","cells":[{"id":0,"value":"md`# Comparing formats (w/ JXL)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"viewof referenceURL = {\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"},{"id":827,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"viewof chart = vegaembed({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v3.json\",\n \"width\": 600,\n \"height\": 600,\n \"autosize\": {\n \"type\": \"fit\",\n \"contains\": \"padding\"\n },\n \"data\": { \"values\": dataForChart },\n \"mark\": { \"type\": \"line\", \"point\": \"true\" },\n \"encoding\": {\n \"x\": { \n \"field\": \"Bits per pixel\",\n \"type\": \"quantitative\"\n },\n \"y\": {\n \"field\": \"SSIMULACRA\",\n \"type\": \"quantitative\",\n },\n \"color\": {\"field\": \"Format\", \"type\": \"nominal\"},\n \"tooltip\": [\n {\"field\": \"URL\", \"type\":\"nominal\"}\n ]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"qualities = [ 'auto:best', 'auto:good', 'auto:eco', 'auto:low' ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"html`

👀 See for yourself

Let's see how the compressed versions stack up. Select one:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"viewof selectedComparisonImageIndex = {\n const form = html`\n \n `;\n const select = form.querySelector('select');\n const update = () => {\n form.value = parseInt( select.value );\n };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"html`

The selected weighs ${ prettyBytes( compressedData[ selectedComparisonImageIndex ].bytes ) }. Here's an A/B test that flickers between it and the uncompressed original.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"viewof density = {\n const form = html`\n \n `;\n const output = form.querySelector('output');\n const update = () => {\n form.value = form.input.value;\n output.textContent = form.input.value + 'x';\n };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"comparator = html`\n

\n ${ referenceData.img.cloneNode() }\n

${ referenceData.url } (reference)

\n\n

\n ${ compressedData[selectedComparisonImageIndex].img.cloneNode() }\n

${ compressedData[ selectedComparisonImageIndex ].url } (compressed)

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"md`✌️`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"formats = ['jpg', 'webp', 'avif', 'jxl']","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"compressedURLs = formats.map( f =>\n qualities.map( q => \n `https://o.img.rodeo/image/fetch/f_${f},q_${q}/${referenceURL}`\n )\n ).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"compressedURLs[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"vegaembed = require('vega-embed')","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"dataForChart = compressedURLs.map( ( u, index ) => {\n return {\n \"URL\": u,\n \"SSIMULACRA\": ssimulacraScores[ index ],\n \"Bits per pixel\": compressedData[ index ].bitsPerPixel,\n \"Format\": compressedData[ index ].format,\n \"Highlighted\": index === selectedComparisonImageIndex\n }\n} )","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"'abc'.match(/1/)","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"url2Data = async ( url ) => {\n const response = await fetch( url ),\n blob = await response.clone().blob(),\n objectURL = URL.createObjectURL( blob ),\n img = await promisedImage( objectURL ),\n canvas = await img2canvas( img, img.naturalWidth, img.naturalHeight ),\n uint8array = await canvas2uint8array( canvas ),\n w = img.naturalWidth,\n h = img.naturalHeight,\n bytes = await response.headers.get('content-length'),\n bitsPerPixel = ( bytes * 8 ) / ( w * h ),\n f = url.match(/f_(\\w+)/),\n format = ( f ? f[1] : '' );\n \n \n return {\n url: url,\n response: response,\n blob: blob,\n objectURL: objectURL,\n img: img,\n canvas: canvas,\n uint8array: uint8array,\n width: w,\n height: h,\n bytes: bytes,\n bitsPerPixel: bitsPerPixel,\n format: format\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"referenceData = await url2Data( referenceURL );","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"compressedURLs","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"compressedData = Promise.all( compressedURLs.map( async url => await url2Data( url ) ) );","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"ssimulacra = {\n const module = window.Module = {wasmBinaryFile: await FileAttachment(\"ssimulacra.wasm\").url()};\n const promise = new Promise(resolve => {\n module.onRuntimeInitialized = () => {\n const ssimulacra = module.cwrap(\"ssimulacra\", \"int\", [\"string\", \"string\"]);\n ssimulacra.FS = window.FS; // Re-attach the global.\n resolve(ssimulacra);\n };\n });\n require(await FileAttachment(\"ssimulacra.js\").url()).catch(() => {});\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"md`Emscripten'd SSIMULACRA stolen from Dominik Homberger – http://libwebpjs.hohenlimburg.org/ssimulacra/\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"ssimulacraScores = { \n ssimulacra.FS.writeFile(\"in1.ext\", referenceData.uint8array, {encoding: \"binary\"});\n return compressedData.map( d => {\n ssimulacra.FS.writeFile(\"in2.ext\", d.uint8array, {encoding: \"binary\"});\n return ssimulacra(\"in1.ext\", \"in2.ext\");\n } );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"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"},{"id":223,"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"},{"id":210,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"listStyles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"img2canvas = function( img, w, h ) {\n const c = document.createElement( 'canvas' ),\n x = c.getContext('2d');\n c.width = w;\n c.height = h;\n x.drawImage( img, 0, 0, w, h )\n return c\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"canvas2uint8array = async function( canvas ) {\n return new Promise( ( resolve, reject ) => {\n canvas.toBlob( async function( blob ) { // returns the bytes of a lossless PNG, by default\n // const a = await blob.arrayBuffer(); // doesn't work in safari yet\n // https://stackoverflow.com/a/55204517/6411742\n const a = await new Response(blob).arrayBuffer();\n resolve( new Uint8Array( a ) );\n } );\n } );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"viewof frequency = {\n const form = html`\n \n `;\n const output = form.querySelector('output');\n const update = () => {\n form.value = form.input.value;\n output.textContent = form.input.value + ' Hz';\n };\n form.addEventListener( 'input', update );\n update();\n return form;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}