Кайсы HTML теги ар кандай экран чечимдери үчүн ар кандай сүрөттөрдү жүктөөгө жардам берет?

HTMLде экран чечимине жараша ар башка сүрөттөр жүктөө үчүн <picture> теги колдонулат. Анын ичинде, сүрөттү тандоо шарттарын аныктоо үчүн media атрибуту менен бир нече <source> көрсөтүлүшү мүмкүн жана резервдик сүрөт менен <img> теги бар.

Мисал:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Мисал сүрөт">
</picture>

Бул мисалда браузер экрандын кеңдиги 800px жана андан жогору болсо, large.jpg тандайт, 400pxден 799pxке чейин болсо, medium.jpg, жана кичинекей экрандар үчүн small.jpg.

Ошондой эле, жөнөкөй учурларда, <img> тегинде srcset атрибутун колдонуп, ар башка сүрөттөрдү алардын өлчөмдөрү менен көрсөтүүгө болот.