Responsive image with Picture HTML tag

<picture> <source media="(orientation: landscape)" srcset="img/banner-large.jpg 2048w, img/banner-medium.jpg 1400w, img/banner-small.jpg 800w" /> <source srcset="img/banner-square-large.jpg 1000w, img/banner-square-medium.jpg 800w" /> <img src="img/banner-medium.jpg" alt="Photograph of my Banner" class="banner-image" /> </picture>
From TreeHouse.

With this you can choose with image display on different viewport sizes improving the website speed and the art direction.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.