Node version of the wonderful Sizer-Soze project
npm install sizer-sozeNode version of the wonderful Sizer-Soze project
We've been talking about responsive images for years now, but what is
the actual cost of delivering non-responsive images to narrow viewports?
How many bytes are we sending for nothing?
@grigs wrote a blog post on responsive images breakpoints and their
relation to a site's performance budget, which got me thinking: "We cannot manage a budget if we cannot measure costs".
So, I wrote this small script that measures a certain site in multiple
viewports and outputs the bytes we can optimize losslessly and the bytes
we can optimize if we'd tailor the images to this specific viewport.
npm install sizer-soze``
var soze = require( './sizer-soze' );
soze.sizer( url, function( err, data ){
if( err ){ throw err; }
console.log( data );
});
`
Besides the summary results printed to screen, you can see detailed
per-image results in your /tmp/ directory. Each tested site creates a
directory there, and the original, optimized and resized images are
stored there, as well as result logs per viewport.
* image_optim
* ImageMagick
* curl
* PhantomJS
* run.sh simply iterates over 2 other scripts with several viewportgetImageDimensions.js
sizes. Adding more viewports is simple, but it slows down the
running time.
* is a phantomjs script that downloads thegetResizedBenefits.sh
requested URL, and outputs all of its content images as well as their
dimensions.
* is a bash script that gets the results ofgetImageDimensions.js`, downloads the original images and resizes
these images to see what their resized size is. It also optimizes the
original images using image_optim, to see how much lossless optimization
can get us.
I was aiming to minimize dependencies, so I went with bash. And well, now it's wrapped in Node.
It's Saturday.