Published
Edited
Apr 23, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
calculate_blur_strength = ( {
originalWidth,
originalHeight
} ) => 2 * Math.sqrt(originalWidth * originalHeight)
Insert cell
calculate_lqip_dimensions = function( {
targetBytes,
originalWidth,
originalHeight
} ) {

// q_auto:low for small JPEGs appears to spend ~300 bytes overhead for huffman tables and headers + ~10 bytes / block
// bytes = 300 + blocks * 10
const targetBlocks = ( targetBytes - 300 ) / 10;

const targetPixels = targetBlocks * 8 * 8,
ar = originalWidth / originalHeight,
h = Math.sqrt( targetPixels / ar ),
w = ar * h;

// round to nearest block boundaries
const width = 8 * Math.round( w / 8 ),
height = 8 * Math.round( h / 8 );

// const resultBlocks = width * height / 64,
// errorBlocks = resultBlocks - targetBlocks;
// console.log( { resultBlocks, targetBlocks, errorBlocks } )
return { width, height };

}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more