How much image-data are you sending your users for nothing?

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 wasted on the wire(less)?

This script enables to evaluate possible savings by properly resizing images for various viewports, with the ultimate goal of enabling fitting of responsive images into a performance budget.

Usage

./sizer.py <URL> ./bulkSizer <Text file with URLs>

Results

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.

Dependencies

• Python
• PhantomJS
• image_optim (A CLI version of ImageOptim)
• ImageMagick
• python-slugify
• python-magic

How to install

If you're on Ubuntu/Debian, run ubuntu_install.sh. If you're on OSX/Other-linux, install the dependencies projects and you should be good to go. If you're on Windows, Install Ubuntu :P

How it works

• getImageDimensions.js is a phantomjs script that downloads the requested URL, and outputs all of its content images as well as their dimensions.
• downloadr.py downloads the image resources.
• resizeBenefits.py gets the results of getImageDimensions.js, and resizes the 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.
• sizer.py iterates over the other scripts with several viewport sizes. Adding more viewports is simple, but it slows down the running time.

What's with the name????

It's Saturday.