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 https://www.zachleat.com/
• 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%      ║
╚══════════╧══════════╧═══════╧════════════╧════════╧════════════╧════════╧════════════╝