Responsive Tutorial

Define Responsive

The Viewport

Grid View

Media Query


Responsive Images

Picture Element

Responsive Videos

Page Stats

Visitor: 242

HTML5 Picture Element

HTML5 introduced the <picture> element, which lets you define more than one image. The <picture> element works similar to the <video> and <audio> elements. You set up different sources, and the first source that fits the preferences is the one being used:

Example 1: Picture tag for responsive image

<!DOCTYPE html>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
          <source srcset="img_flowers.jpg">
          <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
      <p>Resize the browser width and the background image will change at 400px.</p>

Example 2: Picture tag with 2 media attributes.

   <source media="(min-width: 768px)" srcset="image/img1.jpg"></source>
   <source media="(max-width: 767px)" srcset="image/img2.jpg"></source>
   <img alt="picture tag example" srcset="image/img.jpg" id="myid">