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

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.

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

Original Source: https://www.html5rocks.com/en/tutorials/responsive/picture-element/