In a responsive website, you might want to serve different images depending on the size of the viewport. The <picture> tag enables you to do this.
With a minimum width of 900 pixels, you'll see the big pies image below. At smaller viewport sizes, you'll see a different image. Try resizing your browser window to see the difference. Text is embedded in the images so you can more easily see which is which.
This is a demonstration file from Web Design in Easy Steps by Sean McManus.
Back to demo files index.