You are currently viewing HTML Picture Tag | Lesson 16 HTML Tutorial
HTML Picture Tag Image

HTML Picture Tag | Lesson 16 HTML Tutorial

In this HTML Picture Tag lesson you will see the picture tag which is used to allow you to change the image when changing the screen size.

This Video could explain this lesson with more details:

HTML Picture Tag Video

The <picture> Element

HTML5 introduced the <picture> element to add more flexibility when specifying image resources. The <picture> element contains a number of <source> elements, each referring to different image sources. This way the browser can choose the image that best fits the current view and/or device. Each <source> element have attributes describing when their image is the most suitable.

The browser will use the first <source> element with matching attribute values, and ignore any following <source> elements.

  <source media="(min-width: 750px)" srcset="img_pic1.jpg">
  <source media="(min-width: 365px)" srcset="img_pik2.jpg">
  <img src="img_pic3.jpg" alt="pictures" style="width:auto;">

Note: Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags matched.

This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.

Consequently You could follow us at :

Website URL:


Twitter: http://


Facebook: http://


This Post Has One Comment

Leave a Reply