Responsive picture element with support mulitple sources and dppx


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
13Oct 24, 2017Nov 17, 2015Minified + gzip package size for @economist/component-picture in KB



This component provides a responsive picture element with support multiple sources.

Simply feed it a list of images, their widths, heights and dppx and it'll pick the best image to use given the width and height of the container element.


  • Provide one unified interface for adding images with multiple dppx (ala )
  • Provide an abstracted interface for loading multiple crops and dppx of an image (ala breakpoints)
  • Decouple the notion of "media queries" from images - making a truly responsive element (not just browser-window responsive).


See example.es6 for how to use


npm install --save @economist/component-picture;

Run tests

npm test;

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.