??? ?? ???? HTML ?? ??? ???? ???? ?? ?? ??? ?? ? ???? ??? ? ? ??? ?? ??? ?????. ? ??? ???? ??? ? ???? ? ???? ?? ??? ??? ???? ???? ?? ???? ???? ??? ? ???? ? ???? ??? ???? ?????. ?? ??? ?? ??? ??? ? ??? ? ???? ?? ??? ???? ???? ?????. ?? ??? HTML 5?? ???????.

??:

HTML? ?? ???? ? ?? ??? ??? ???? ????. ? ?? ??? ?? ??? ??? ? ??? ? ??? ????? ? ???? ?? ?? ??? ???? ??? ? ?? ?????. ???. ??? ??? ????

<picture>
<source .>
.
.
<source .>
<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png" class="lazy" . alt="HTML ?? ??" >
</source></source></picture>

?? ???? ?? ??? ??? ?? ? ?? ??? ??? ??? ?? ??? ????. ??? ??? ?? ?? ?? ? ???? ???. ?? ??? ??? ???? ?? ??? ??? ???? ??? ??? ????.

HTML ?? ??? ??

??? ?? ?? ???? ?? ? ?? ?? ??? . ? ? ??? ?? ??? ??? ?? ??? ?????.

1. ??

? ??? ???. ? ??? ???? ??? ???? ??? URL? ??? ? ????. ? ??? ???? ?? ??? ??? ??? ???? ???. ??? ???? ???? ?? ?? ??? ??? ? ????.

2. ????

? ??? ?? ??? HTML 5? ??? ?????. ? ??? ??? "src" ??? ????? ? ?? ?? ??? ? ????. ? ??? ? ?? ?? ???? ?????. ? ??? ??? ?? ?? URL?? ? ??? (100w)? ?? ???? ?? ??? ?? (3x)? ?? ???? ?? ?? ??????. ? ??? ?? w? x? ???.

3. ???

? ??? ???. ? ??? ???? ???? ???? ??? ??? ? ????. ? ??? ?? ??? ??? ???? ???? ??? ?????. ??? ??? ???? ?? ??, ?? ?? ??? ? ????.

??? ???? ??? ?? ? ??? ??? ???? ??? ???? ?? ? ????. ??.

4. ???

? ??? ??? ??. ???? ?? ??? ????? ? ??? ???? ??? ??? ?? ??? ??? ????? ??? ? ????. ??? ??? ?? ???? ?? “max-width: 800px”? ?? ??? ?????. ?? ???? ?? ??? ??? ?? ? ?? ??? ??? ??? ?? ??? ????. ??? ??? ?? ?? ?? ? ???? ???. ?? ??? ??? ???? ?? ??? ??? ???? ??? ??? ????. ?? ??? ?? ?? ? ? ??? ??? ??? ??? ? ????. ?? ??? ???? ?? ?? ???? ??? ? ?? ??? ? ???? ?? ?????.

5. ??

? ??? ???. ? ??? ???? ??? ??? MIME ??? ????? ??? ? ????.

HTML ?? ??? ?

HTML? ? ???? ??? ???? ??? ? ?? ???? ???? ? ?????.???? HTML ?? ??? ????.

?? #1

??:

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>
picture tag in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2> picture tag in HTML </h2>
<span> Resize the browser to see the effect.. </span>
<div class="resultText">
<picture>
<source media="(min-width: 550px)" srcset="https://cdn.educba.com/triangle.png">
<source media="(min-width: 465px)" srcset="https://cdn.educba.com/rectangle.png">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png" class="lazy" alt="HTML ?? ??"   style="max-width:90%">
</source></source></picture>
</div>
</div>

??:

???? ???? ?? ? ?? ???? ????.

????? ???? ???? ?? ?? ?? ??? ??? ??????. ??? ??? ? ???? ??? ??? ???. ??? ?? ?? ???? ?????.

??? 550px?? ? ??:

??? 465???? ? ??:

?? ??, ? ??? 465px ??? ??:

Note, the outer border of the images clarifies the resolution of images. In most of the cases, all these images will be the same but with different resolutions.

Example #2

Code:

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>
picture tag in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
.img {
max-width: 100%;
}
</style>


<div class="results">
<h2> picture tag in HTML </h2>
<span> Resize the browser to see the effect.. </span>
<div class="resultText">
<picture>
<source media="(min-width: 550px)" srcset="https://cdn.educba.com/triangle.png">
<source media="(min-width: 465px)" srcset="https://cdn.educba.com/rectangle.png">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543851554073.png" class="lazy" alt="HTML ?? ??" srcset="https://cdn.educba.com/HTML ?? ??.png 2000w" sizes="900vw"   style="max-width:90%">
</source></source></picture>
</div>
</div>

Output:

Here, we have used the attribute size with the tag. The maximum width of an image is limited by using CSS first, but these sizes attribute, along with srcset, forces to use the width depending on the size specified in terms of the viewport.

Conclusion

Web developers use HTML picture tag in responsive web page designing. This tag consists of two child tags source and img. Using different attributes available for these tags makes it possible to display images dynamically depending on the conditions.

? ??? HTML ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!