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:

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.

 <picture>
  <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;">
</picture> 

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 SAFHATECH.com 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: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681