WarsawJS

Responsive images the easy way

Responsive images the easy way

Illarion Khapyorskiy @illarionvk

Which method to choose?

<picture> <img> with srcset
art direction image resizing
complex simple
fallback requires extra markup "src" attribute is the fallback

How to make it even easier?

Tools brought to you by:

Aleksander Farkas

github.com/aFarkas

author of

Step 1

1 <img src="http://placehold.it/150.jpg"

Step 2

1 <img src="http://placehold.it/150.jpg"
2      data-srcset="http://placehold.it/150.jpg 150w,
3        http://placehold.it/300.jpg 300w,
4        http://placehold.it/600.jpg 600w"

Step 3

1 <img src="http://placehold.it/150.jpg"
2      data-srcset="http://placehold.it/150.jpg 150w,
3        http://placehold.it/300.jpg 300w,
4        http://placehold.it/600.jpg 600w"
5      data-sizes="auto"

Step 4

1 <img src="http://placehold.it/150.jpg"
2      data-srcset="http://placehold.it/150.jpg 150w,
3        http://placehold.it/300.jpg 300w,
4        http://placehold.it/600.jpg 600w"
5      data-sizes="auto"
6      class="lazyload" />

Step 5

Add two script elements to the bottom of the page

1 <script src="respimage.min.js"></script>
2 <script src="lazysizes.min.js"></script>

Example

Minimizing page reflows

Image Tailoring Services

Art Direction Example

See you next month at WarsawJS

Fork me on Github