?? ? ???? ???? ?? HTML5? ?? ??? ???? ??? ?? ??? ?? ?? ??? ??? ???????? ????. ?? ??? ??? ????. 1. ??? ?? ? ??? <img alt="?? ? ???? ?? HTML5 ?? ??? ???? ??" >? ???? ????? ??? ???? ????? ? ????, ??? ??? <img alt="?? ? ???? ?? HTML5 ?? ??? ???? ??" >?? ?????. 2. SRCSET ? ?? ??? ???? ????? ??? ??? ???? ?????????. 3. ?? ??? ?????? ?? ?? (? : Webp)????? ???? ??? ?? ??? ?? ?????? ?? ?????. 4. ?????? ???? <img alt="?? ? ???? ?? HTML5 ?? ??? ???? ??" >? ????? ???? SEO ???? ??????.

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

1. <picture></picture> ??? ?? ??

<picture></picture> ? ?? <source></source> ? ?? <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165330584448.jpeg" class="lazy" alt="?? ? ???? ?? HTML5 ?? ??? ???? ??" > ?? ??? ???? ?????. ? <source></source> ?? ??? ?? (???), ??? ?? (??) ? ?? ??? ?? (SRCSET)? ??? ? ????. ????? <source></source> ??? ???? ??? ??? ?????. ??? ???? ?? ??? ??? ?????. ???? ??? <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165330584448.jpeg" class="lazy" alt="?? ? ???? ?? HTML5 ?? ??? ???? ??" > ??? ???? ?????.

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

 <??>
  <?? ??? = "(min-width : 800px)"srcset = "large.jpg">
  <?? ??? = "(min-width : 400px)"srcset = "medium.jpg">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175165330330954.jpeg"  class="lazy"  src = "small.jpg"alt = "description">
</??>

? ??? :

• ?? ??? 800px?? ??? ?? ? ? ? .jpg???????.
• 400?? 799px ??? ???? Load Medium.jpg;
• ????? 400px ????? ???? ??? picture small.jpg??????.

2. srcset ? sizes ?????? ??? ??? ??????.

??? ??? ?? ?? ??? ???? ? ??? srcset ? sizes ???? ????? ????? ??? ??? ??? ? ????.

?? ??:

 <??>
  <?? 
    srcset = "image-320w.jpg 320w,
            ??? -480w.jpg 480w,
            image-800w.jpg 800w "
    ?? = "(min-width : 600px) 800px,
           (?? ? : 400px) 480px,
           320px "
    type = "image/jpeg">
  <img src = "fallback.jpg"alt = "default picture">
</??>

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

• ????? ?? ???? ??? ?? ??? ??? ???? ?? ??? ????? ?????.
• sizes ????? ??? ?? ????. "??? 600px?? ???? 800px? ?? ??? ???? ?? ? ????? ????????? ? ???? ??? ? ????.
• ????? ??? ??? ???? ??? Fallback.jpg? ?????.

3. ?? ??? ?? (? : Webp)? ?????.

??? ??? ?? (? : Webp)? ???? ????? ?? ???? ???????? ?? ????? JPG/PNG? ????? ?? ? ? ????????.

??? ??? ? ? ???? :

 <??>
  <?? ?? = "image/webp"srcset = "image.webp">
  <?? ?? = "image/jpeg"srcset = "image.jpg">
  <img src = "image.jpg"alt = "?? ??">
</??>

????? Webp ??????? ? ?? ??? ???? ???? ??? JPEG? ?????. ??? ?? ????? ??? ?? ??? ????? ? ??????.

4. ?? ?? ? FAQ

<picture></picture> ??? ? ?? ???? ?? ??? ????.

• ??? ?? ????? . ????? <source></source> ??? ??? ?? ???? ???? ?? ?? ?? ??? ?? ?? ?? ? ??????.
• <img alt="?? ? ???? ?? HTML5 ?? ??? ???? ??" > ??? ???? : ?? <source></source> ?????? <img alt="?? ? ???? ?? HTML5 ?? ??? ???? ??" > ??? ?? ?? ???? ???????.
• ??? ?? ?? : ?? ????? ?? <picture></picture> ????? ?? ?? ?????? PolyFill ?? Server ?? ????? ??? ? ????.
• SEO ? ALT ???? ?? ???? : <img alt="?? ? ???? ?? HTML5 ?? ??? ???? ??" > ? alt ??? ??? ?????? ?? ? ? ????.

????? ?? ??. <picture></picture> ?? ??? ???? ??? "?? ?? ???"?? ??? ???? ? ????? ??? ????.

? ??? ?? ? ???? ?? HTML5 ?? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!