Note from 27 March 2020

images-responsiver is a simple solution for most responsive images needs

Is it catchy enough? 😁

Here's my latest pet project, trying to help people struggling with responsive images: https://nhoizey.github.io/images-responsiver/

If you use #Eleventy, there's also a plugin: https://github.com/nhoizey/eleventy-plugin-images-responsiver

Documentation is still a little rough around the edges, but should be enough at least for people already knowing npm and JS.


  1. How do you deal with images that need to have a fluid width but fixed height?

    I tend to start from the lowest width/height ratio and increase, knowing larger images will have hidden parts above and below… 😔

    Anything better?

  2. I accidentally moved my hero image onto Cloudinary (who I also adore!). But, a less-optimised image served from the same origin is always faster than a more-optimised image from a third party. Self-host your static assets! csswizardry.com/2019/05/self-host-your-static-assets/

    True!

    But most images are currently not or badly optimized. 😔

    They would benefit a lot from an image CDN: resize, compression, modern formats, etc.