Merhabalar,

HTML5 sürümüne gelen yeni bir özellik sayesinde artık yalnızca HTML kodları ile ekran boyutuna göre farklı resim kaynakları gösterebiliyoruz. Bu işlem için CSS, jQuery veya Bootstrap gibi kütüphanelere ihtiyacınız yok.

Peki nasıl yapılıyor? Hemen örnekle açıklayalım:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Ekran Çözünürlüğüne Göre Resim</title>

<picture>
  <source media="(max-width: 360px)" srcset="mobil.jpg">
  <source media="(min-width: 750px)" srcset="genis.jpg">
  <img src="varsayilan.jpg" alt="Varsayılan Görsel">
</picture>

<picture> etiketi tek başına görsel göstermez. Farklı cihazlar ve ekran boyutlarına göre farklı resimleri göstermek için bir kapsayıcı görevi görür.

İçerisine birden fazla <source> etiketi yerleştirerek, her biri için bir media koşulu ve bir srcset tanımlanır. Eğer bu koşul sağlanırsa ilgili resim ekrana getirilir.

Bu özelliği desteklemeyen tarayıcılarda sorun yaşamamak için <picture> etiketinin en altına varsayılan olarak <img> etiketi ile bir görsel eklemeyi unutmamalısınız.

Özetle:

• İşlem <picture> etiketi içinde gerçekleştirilir.
• <source media="(max-width: 360px)" srcset="mobil.jpg"> → 360px altındaki ekranlarda mobil.jpg gösterilir.
• <source media="(min-width: 750px)" srcset="genis.jpg"> → 750px üzeri ekranlarda genis.jpg gösterilir.
• Diğer durumlarda <img src="varsayilan.jpg"> gösterilir.

Basit ve efektif bir yöntemdir. Özellikle mobil uyumluluk açısından oldukça faydalı olabilir.

Mutlu kodlamalar! :)