2d:null 2e:["$","title",null,{"children":"Comparing lossily-compressed images | Eric Portis | Observable"}] 33:T76c,md`Let’s say I've got two different versions of an image. For instance: a JPEG and a WebP, or two different JPEGs from two different compression pipelines. How can we compare them? Which one’s better? Can we quantify that “better”-ness? *Excellent questions!* Let’s start at the beginning; when performing [lossy compression](https://en.wikipedia.org/wiki/Lossy_compression), we care about two fundamental things: 1. Quality 2. File size Lossy compression introduces artifacts. *Good* lossy compression introduces artifacts that you don’t notice much. When we talk about lossy compression “quality,” we’re talking about *how noticable* introduced artifacts are. In order to judge that “noticability,” we need to compare the input and output of our lossy compression process. We need to compare the original, uncompressed image against the lossily-compressed result. So! To compare *two, differently-compressed images*, we really need *three images*: the original, input image, and the two different output images. Complicating all of this is the fact that “noticability” is, by definition, subjective. The best way to quantify it is with large numbers of humans in rigorous, controlled studies. That’s rarely practical (or possible), which often leaves us with two options: 1. Judging the images yourself (a sort of very informal study, with *n=1*). 2. Asking a computer to judge them for you, using computational models that clever people have developed in order to measure the the differences between images, and estimate/quantify how “noticeable” they’ll be to humans. This article is a tool that, given a lossless original and any number of differently-compressed derivatives, lets you do both of those things – while also comparing the compressed images’ filesizes, which are (blessedly) perfectly objective and trivial to quantify and compare. `34:T1239,viewof compressedURLs = { // utilities const randomString = () => { const s = Math.random().toString(36).replace(/[^a-z]+/g, ''); if (s.length < 3) { // there's a chance return randomString(); // do over } return s; }, selfOrNearestAncestorMatchingSelector = ( element, selector ) => { if ( element.matches( selector ) ) { return element; } else if ( element === document.body.rootNode ) { return null; } return selfOrNearestAncestorMatchingSelector( element.parentNode, selector ); }; // drag and drop const dragStart = ( e ) => { // e.target is the e.target.parentNode.classList.add( 'gettinDragged' ); // pointer-events: none on everything inside any of the LI drop targets // otherwise these children buttons/inputs trigger dragleave on the LI when drag-hovered // https://stackoverflow.com/a/18582960/6411742 theList.classList.add( 'somethingsBeingDragged' ); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', e.target.parentNode.getAttribute( 'id' ) ); e.dataTransfer.setDragImage( e.target.parentNode, 0, 0 ); }, dragEnd = ( e ) => { // e.target is the e.target.parentNode.classList.remove( 'gettinDragged' ); theList.classList.remove( 'somethingsBeingDragged' ); }, dragEnter = ( e ) => { e.preventDefault(); // Necessary. Allows us to drop. e.target.classList.add( 'dragHover' ); }, dragOver = ( e ) => { e.preventDefault(); // Necessary. Allows us to drop. e.dataTransfer.dropEffect = 'move'; // ? return false; }, dragLeave = ( e ) => { e.target.classList.remove( 'dragHover' ); }, drop = ( e ) => { e.target.classList.remove( 'dragHover' ); const draggedNode = document.getElementById( e.dataTransfer.getData('text/plain') ); e.target.parentNode.insertBefore( draggedNode, e.target ); updateListValue(); return false; }; // list stuff const editableList = html`

Compressed image URLs:

`, addButton = editableList.querySelector( '.addButton' ), theList = editableList.querySelector( '.theList' ), templateItem = html`

≡

`, updateListValue = () => { const inputs = [ ...editableList .querySelectorAll( '.itemInput:not(.lastDropTarget > .itemInput)' ) ]; editableList.value = inputs.map( i => i.value ); editableList.dispatchEvent( new CustomEvent( 'input' ) ); // https://observablehq.com/@tmcw/exploring-viewof }, mintANewItem = () => { const newItem = templateItem.cloneNode( true ); newItem.setAttribute( 'id', randomString() ); newItem.querySelector( 'input' ).addEventListener( 'input', updateListValue ); newItem.querySelector( '.deleteButton' ).addEventListener( 'click', ( e ) => { e.preventDefault(); theList.removeChild( e.target.parentNode ); updateListValue(); } ); const grabber = newItem.querySelector( '.grabber' ); grabber.addEventListener( 'dragstart', dragStart ); grabber.addEventListener( 'dragend', dragEnd ); newItem.addEventListener( 'dragenter', dragEnter ); newItem.addEventListener( 'dragover', dragOver ); newItem.addEventListener( 'dragleave', dragLeave ); newItem.addEventListener( 'drop', drop ); return newItem; }, addANewItem = () => { theList.insertBefore( mintANewItem(), lastDropTarget ); updateListValue(); }; // make the invisible last drop target const lastDropTarget = mintANewItem(); lastDropTarget.classList.add('lastDropTarget'); theList.appendChild( lastDropTarget ); // activate the add button addButton.addEventListener( 'click', ( e ) => { e.preventDefault(); addANewItem(); updateListValue(); } ); // start off with one blank item addANewItem(); updateListValue(); return editableList; }35: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 })

` }36:T53d,html``37:[{"id":"90c21619a8c7285b45edbc0dafa8830a1f6d22fbe8fd5a6dcf24008e5687bca09930deb01b0d20b29cc035783a653d4884391ddadb888ad82896e52c3d144adb","href":"https://static.observableusercontent.com/files/90c21619a8c7285b45edbc0dafa8830a1f6d22fbe8fd5a6dcf24008e5687bca09930deb01b0d20b29cc035783a653d4884391ddadb888ad82896e52c3d144adb","name":"ssimulacra.js","type":"application/javascript","lastModified":1595539935864.245,"size":388615},{"id":"7931d1a51deeda9b34c7a41a19baa27a55321c1d5c1d9074f8740f0c91cc4eabf02ff9812c8ed7f618a063aff6b3763ea0260cd238bd577c7f1d7d52a7da7e75","href":"https://static.observableusercontent.com/files/7931d1a51deeda9b34c7a41a19baa27a55321c1d5c1d9074f8740f0c91cc4eabf02ff9812c8ed7f618a063aff6b3763ea0260cd238bd577c7f1d7d52a7da7e75","name":"ssimulacra.wasm","type":"application/wasm","lastModified":1595539935864.245,"size":1939845}] 31:{"id":"88c6d435ce3760d1","slug":"comparing-lossily-compressed-images","title":"Comparing lossily-compressed images","thumbnail":"f31fa6782b42e098072ea906fb2198819ce1787264ff9240a6f9920076694990","access_level":"public","create_time":"$D2020-07-23T21:32:15.864Z","update_time":"$D2021-02-25T05:28:07.429Z","view_time":null,"first_public_time":"$D2020-07-30T14:05:53.663Z","fork":true,"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":815,"publish_version":815,"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":2,"collection":null,"type":"notebook","body":{"title":"Comparing lossily-compressed images","cells":[{"id":0,"value":"md`# Comparing lossily-compressed images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"html`

✏️ Inputs

\n\n

Let's start with a lossless reference image.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"html`

Now, let's grab some differently-compressed variants of that image.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"html`

👀 See for yourself

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"html`

🤖 Ask a computer

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"html`\n

There are various models that try to estimate the noticeability of lossy compression artifacts; I've chosen SSIMULACRA. Lower SSIMULACRA scores are better; 0 means that the image is identical to the reference image. Scores below 0.01 mean that any differences are imperceptible. Scores above 0.1, on the other hand, mean that the artifacts are very noticable (and probably unacceptable).

\n\n

As for the file sizes: lower is better! I’m also showing the number of bits per image pixel, in order to better compare between images with different resolutions.

\n\n

To the numbers!

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"html`

Now that we've got some numbers, let's make a chart. Lower is better on both axes, so the bottom-left here is the place to be.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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\": \"point\", \"size\": \"50\" },\n \"encoding\": {\n \"x\": { \n \"field\": \"Bits per pixel\",\n \"type\": \"quantitative\"\n },\n \"y\": {\n \"field\": \"SSIMULACRA\",\n \"type\": \"quantitative\",\n },\n \"fill\": {\n \"condition\": {\n \"test\": \"datum['Highlighted']\",\n \"value\": \"lemonchiffon\"\n }\n },\n \"stroke\": {\n \"condition\": {\n \"test\": \"datum['Highlighted']\",\n \"value\": \"goldenrod\"\n }\n },\n \"tooltip\": [\n {\"field\": \"URL\", \"type\":\"nominal\"}\n ]\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"md`✌️`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"vegaembed = require('vega-embed')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 \"Highlighted\": index === selectedComparisonImageIndex\n }\n} )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 \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 }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"referenceData = await url2Data( referenceURL );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"compressedData = Promise.all( compressedURLs.map( async url => await url2Data( url ) ) );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`Emscripten'd SSIMULACRA stolen from Dominik Homberger – http://libwebpjs.hohenlimburg.org/ssimulacra/\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"listStyles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"