HTML <resim> Öğesi
HTML <picture>öğesi, farklı cihazlar veya ekran boyutları için farklı resimler görüntülemenize olanak tanır.
HTML <resim> Öğesi
HTML <picture>öğesi, web geliştiricilerine görüntü kaynaklarını belirlemede daha fazla esneklik sağlar.
Öğe, her biri öznitelik aracılığıyla farklı görüntülere atıfta bulunan bir <picture>veya daha fazla öğe içerir . Bu şekilde tarayıcı, mevcut görünüme ve/veya cihaza en uygun görüntüyü seçebilir.<source>srcset
Her <source>öğenin,
mediagörüntünün en uygun olduğu zamanı tanımlayan bir özelliği vardır.
Örnek
Farklı ekran boyutları için farklı resimler göster:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Not:<img> Her zaman bir öğeyi, öğenin son alt öğesi olarak belirtin <picture>. Öğe , öğeyi <img>desteklemeyen tarayıcılar tarafından <picture>veya <source>etiketlerin hiçbiri eşleşmediğinde kullanılır.
Resim Öğesi ne zaman kullanılır?
<picture>Öğenin iki ana amacı vardır :
1. Bant genişliği
Küçük bir ekranınız veya cihazınız varsa, büyük bir resim dosyası yüklemeniz gerekmez. Tarayıcı, eşleşen öznitelik değerlerine sahip ilk öğeyi kullanacak <source>
ve aşağıdaki öğelerden herhangi birini yok sayacaktır.
2. Format Desteği
Bazı tarayıcılar veya cihazlar tüm görüntü biçimlerini desteklemeyebilir. Öğeyi kullanarak,
<picture>tüm biçimlerdeki görüntüleri ekleyebilirsiniz; tarayıcı, tanıdığı ilk biçimi kullanacak ve aşağıdaki öğelerden herhangi birini yok sayacaktır.
Örnek
Tarayıcı, tanıdığı ilk görüntü biçimini kullanır:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Not: Tarayıcı, eşleşen öznitelik değerlerine sahip ilk öğeyi kullanacak <source>ve aşağıdaki <source>öğeleri yok sayacaktır.
HTML Resim Etiketleri
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Mevcut tüm HTML etiketlerinin tam listesi için HTML Etiket Referansımızı ziyaret edin .