Responsive Images Efficiency Analyzer

[zachleat]

Tests the efficiency of the bitmap images you have on your page at different screen resolutions.

Resize the page and then measure an image’s rendered dimensions versus the image’s natural dimensions, report retina rating (2x, 3x, .5x) and give some kind of efficiency score.

Maybe also report amount of wire-weight image savings between breakpoints.

Not sure if this would be a build tool or a bookmarklet (or both).

[nhoizey]

Looks a little like @yoavweiss' Sizer Soze: https://blog.yoav.ws/who_is_sizer_soze/

[zachleat]

Ah yes! I’d forgotten about this (I’m even listed on the contributors list there 😱), thanks @nhoizey!

Looks like it might be down though, I got this error when I tried it: ResponsiveImagesCG/Sizer-Soze-frontend#51

[nhoizey]

You're welcome! ;-)

I hope it will be fixed.

[zachleat]

Closing, this is exactly what I wanted: https://chrome.google.com/webstore/detail/ncc-image-checker/fphiheficgnpphmjdliclanppccfgifl

[zachleat]

Hmm, I think I’m going to reopen this. It’s very close! I want to see a report across a bunch of different viewport sizes.

[zachleat]

https://github.com/nccgroup/image-checker/issues

[nhoizey]

Also, it doesn't seem to work very well: keysight-eggplant/image-checker#29

[zachleat]

You mean, not yet! Let’s contribute to this thing 🙂

[nhoizey]

Indeed! ;-)

[simonhearne]

Perhaps combining the image checker with something like Breakpoint Tester would provide a good solution?

[zachleat]

@simonhearne that’s a fantastic idea! Y’all should put that recommendation in the docs somewhere

[zachleat]

Just for posterity I’m going to include https://webspeedtest.cloudinary.com/ here as well, although it uses a fixed viewport size and DPI.

[nhoizey]

https://twitter.com/zachleat/status/974838687338041344

[zachleat]

Launched! https://github.com/filamentgroup/imaging-heap