Responsive Images made easy

Responsive images adapt the image size according to the screen size of the end user, thereby allowing your website or mobile app to load faster across various screen sizes. For example, on an iPhone, Cloudimage will deliver smaller images than it would on a 15" computer screen, thus accelerating the page loading time.

The HTML <picture> element with the underlying <source> elements allow to specify which image size will be delivered to which screen size. Examples below.

Without responsive design

The following HTML code delivers the same image size (800x180px) to all screen sizes (15" laptop monitor, iPad, smartphone, ...)

<img src="https://demo.cloudimg.io/crop/800x180/q80/http://sample.li/flat1.jpg" />

This image size might be optimized for 13" screens but is too large for 4" smartphone screens, where it would be better delivered in 400x90px. To achieve this, HTML 5 introduced the <picture> element to give developers more flexibility with image resources.

With responsive design

The following code must replace the <img> element above to make your website or app responsive. It also takes into account high-resolution screens such as Retina: 1.5x, 2x, 3x.

<picture>
<source media="(max-width:576px)" srcset="
https://demo.cloudimg.io/crop/400x90/q80/http://sample.li/flat1.jpg 1x,
https://demo.cloudimg.io/crop/600x135/q80/http://sample.li/flat1.jpg 1.5x,
https://demo.cloudimg.io/crop/800x180/q80/http://sample.li/flat1.jpg 2x,
https://demo.cloudimg.io/crop/1200x270/q80/http://sample.li/flat1.jpg 3x">
<source media="(max-width:768px)" srcset="
https://demo.cloudimg.io/crop/500x140/q80/http://sample.li/flat1.jpg 1x,
https://demo.cloudimg.io/crop/750x210/q80/http://sample.li/flat1.jpg 1.5x,
https://demo.cloudimg.io/crop/1000x280/q80/http://sample.li/flat1.jpg 2x,
https://demo.cloudimg.io/crop/1500x420/q80/http://sample.li/flat1.jpg 3x">
<source media="(max-width:992px)" srcset="
https://demo.cloudimg.io/crop/280x280/q80/http://sample.li/flat1.jpg 1x,
https://demo.cloudimg.io/crop/420x420/q80/http://sample.li/flat1.jpg 1.5x,
https://demo.cloudimg.io/crop/560x560/q80/http://sample.li/flat1.jpg 2x,
https://demo.cloudimg.io/crop/840x840/q80/http://sample.li/flat1.jpg 3x">
<source media="(max-width:1200px)" srcset="
https://demo.cloudimg.io/crop/320x320/q80/http://sample.li/flat1.jpg 1x,
https://demo.cloudimg.io/crop/480x480/q80/http://sample.li/flat1.jpg 1.5x,
https://demo.cloudimg.io/crop/640x640/q80/http://sample.li/flat1.jpg 2x,
https://demo.cloudimg.io/crop/960x960/q80/http://sample.li/flat1.jpg 3x">
<source media="(max-width:1920px)" srcset="
https://demo.cloudimg.io/crop/550x450/q80/http://sample.li/flat1.jpg 1x,
https://demo.cloudimg.io/crop/825x675/q80/http://sample.li/flat1.jpg 1.5x,
https://demo.cloudimg.io/crop/1100x900/q80/http://sample.li/flat1.jpg 2x,
https://demo.cloudimg.io/crop/1650x1350/q80/http://sample.li/flat1.jpg 3x">
</picture>

The <picture> tag is compatible with the following browsers.

As you can see, implementing the <picture> element is cumbersome. Therefore, the Cloudimage team has developed a JS plugin to automate everything for you. Check it out here as well as a demo.