Fərqli ekran həlləri üçün müxtəlif şəkillər yükləməyə kömək edən HTML etiketi hansıdır?

HTML-də ekran həllinə görə müxtəlif şəkillər yükləmək üçün <picture> teqi istifadə olunur. İçində, şəkil seçimi üçün şərtləri müəyyən edən media atributu ilə bir neçə <source> və ehtiyat şəkil ilə <img> teqi yerləşdirilə bilər.

Nümunə:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Nümunə şəkil">
</picture>

Bu nümunədə, brauzer ekran eni 800px və ya daha çox olarsa, large.jpg, 400px ilə 799px arasında olarsa, medium.jpg, və daha kiçik ekranlar üçün small.jpg seçəcək.

Həmçinin, sadə hallarda, <img> teqində srcset atributundan istifadə edilərək müxtəlif şəkillər və onların ölçüləri göstərilə bilər.