Zach’s ugly mug (his face)

Zach Leatherman

imaging-heap, Measuring Responsive Image Efficiency

March 21, 2018

From deep in the archives (2 years late!), filed under β€œthings I built but never posted on my web site”:

A command line tool to measure the efficiency of your responsive image markup across viewport sizes and device pixel ratios.

Works out-of-the-box with img (of course), img[srcset], img[srcset][sizes], picture, picture[srcset], picture[srcset][sizes]. Ignores *.svg files. No support for background images yet.

  • npm install -g imaging-heap
  • e.g. imagingheap
  • View on: GitHub or npm
  • Retweet

Inspired by

  • Hugely inspired by the NCC Image Checker Chrome Extension (which is a great visual tool). The main difference here is that imaging-heap will collate data across viewport sizes and device pixel ratios.
  • RespImageLint a Linter Bookmarklet for Responsive Images

Sample output

β•‘          β”‚ Image    β”‚ @1x   β”‚ @1x        β”‚ @2x    β”‚ @2x        β”‚ @3x    β”‚ @3x        β•‘
β•‘          β”‚ Width in β”‚ Image β”‚ Percentage β”‚ Image  β”‚ Percentage β”‚ Image  β”‚ Percentage β•‘
β•‘ Viewport β”‚ Layout   β”‚ Width β”‚ Match      β”‚ Width  β”‚ Match      β”‚ Width  β”‚ Match      β•‘
β•‘ 320px    β”‚ 161px    β”‚ 301px β”‚ 187.0%     β”‚ 301px  β”‚ 93.5%      β”‚ 601px  β”‚ 125.2%     β•‘
β•‘ 480px    β”‚ 241px    β”‚ 301px β”‚ 124.9%     β”‚ 601px  β”‚ 125.2%     β”‚ 601px  β”‚ 83.5%      β•‘
β•‘ 640px    β”‚ 321px    β”‚ 601px β”‚ 187.2%     β”‚ 601px  β”‚ 93.6%      β”‚ 901px  β”‚ 93.9%      β•‘
β•‘ 800px    β”‚ 401px    β”‚ 601px β”‚ 149.9%     β”‚ 901px  β”‚ 112.6%     β”‚ 1201px β”‚ 100.1%     β•‘
β•‘ 960px    β”‚ 480px    β”‚ 600px β”‚ 125.0%     β”‚ 900px  β”‚ 93.8%      β”‚ 1200px β”‚ 83.3%      β•‘
β•‘ 1120px   β”‚ 560px    β”‚ 600px β”‚ 107.1%     β”‚ 1200px β”‚ 107.1%     β”‚ 1200px β”‚ 71.4%      β•‘
β•‘ 1280px   β”‚ 640px    β”‚ 900px β”‚ 140.6%     β”‚ 1200px β”‚ 93.8%      β”‚ 1200px β”‚ 62.5%      β•‘
Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking rΓ©sumΓ© includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Google Open Source Award for Eleventy
It’s Dangerous to Go Stallone. Take Glyphhanger
    Social Card Image Preview

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)