How can I Implement the picture element for optimized and responsive images?

December 9, 2016

I know what you’ve been thinking.

“I want to benefit from natively optimized image loading”.  

Me too, and this is why the <picture> element is so great. This element allows web developers to handle images in responsive designs, without using hacky CSS or Javascript. When you use this element with the sizes and srcset attribute, the browser will only download the image explicitly stated for the matching parameters. It even takes into account high-resolution displays by using pixel density descriptors like 1.5x, 2x, 3x. This is important since retina screens are starting to take over. Here’s an example.

    media=”(min-width: 650px)”
                   images/go-packers@1.5x.png 1.5x,
                   images/go-packers@2x.png 2x”>
<!– at a different breakpoint, show this image instead –>
    media=”(min-width: 465px)”
                   images/boo-vikings@1.5x.png 1.5x,
                   images/boo-vikings@2x.png 2x”>
<!– fallback image in case browsers don’t support–>
    srcset=”images/lalala-lambeau@1.5x.png 1.5x,
                   images/lalala-lambeau@2x.png 2x”
    alt=”go packers!”>


Original Source:

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive