imaging-heap
Thereβs beauty in the breakdown of bitmap image data. 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?).
Installation
npm install --global imaging-heapUsage
imagingheap https://filamentgroup.com/imagingheap http://example.com/ [options]
Options:
--version Show version number [boolean]
--min Minimum viewport width [default: 320]
--max Maximum viewport width [default: 1280]
--by Increment viewport by [default: 80]
--dpr List of Device Pixel Ratios [string] [default: "1,2,3"]
--minimagewidth Ignore images smaller than image width [default: 5]
--csv Output CSV [boolean] [default: false]
--help Show help [boolean]Debug Output
DEBUG=ImagingHeap* imagingheap https://filamentgroup.com/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% β
ββββββββββββ§βββββββββββ§ββββββββ§βββββββββββββ§βββββββββ§βββββββββββββ§βββββββββ§βββββββββββββRelated Projects
- 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
Important Links
- A big big thank you for pre-release feedback from noted responsive images expert Eric Portis (@eeeps).
- Idea originally documented at @zachleat/idea-book/3
- βThereβs beauty in the breakdown of bitmap image data.ββ@jefflembeck
- Responsive Images Community Group