<!DOCTYPE html>
<html>
<body>
<h1>Basic picture element example</h1>
<p>Adjust the screen width to see the image change.</p>
<picture>
<source
media="(min-width: 800px)"
srcset="
https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_320/image/fired.jpg 320w,
https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_800/image/fired.jpg 800w,
https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_1200/image/fired.jpg 1200w
"
sizes="(min-width: 60rem) 35vw,
(min-width: 40rem) 45vw,
100vw"
/>
<source
media="(min-width: 400px)"
srcset="
https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_320/image/thumbs-down.png 320w,
https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_800/image/thumbs-down.png 800w,
https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_1200/image/thumbs-down.png 1200w
"
sizes="(min-width: 60rem) 35vw,
(min-width: 40rem) 45vw,
100vw"
/>
<source
media="(min-width: 200px)"
srcset="
https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_320/image/thumbs-up-large.png 320w,
https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_800/image/thumbs-up-large.png 800w,
https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_1200/image/thumbs-up-large.png 1200w
"
sizes="(min-width: 60rem) 35vw,