HTML'de görseller
img, alt metni, boyut, figure ve figcaption.
Tüm dersler · HTML dersleri: sıfırdan öğren
img elemanı ve alt metni
Görsel boş <img> elemanıyla eklenir: src dosyayı, alt ise görsel görünmediğinde veya ekran okuyucular için metin açıklamasını belirtir. Salt süs görselde alt="" boş bırakılır.
<img src="images/bridge.jpg"
alt="Evening view of a stone bridge over a river"
width="640" height="400">- Alt kısa ve anlamlı olsun, «görsel» sözüyle başlamasın.
- width ve height yazmak sayfanın yüklenirken sıçramasını önler.
Biçimler ve hafif görseller
Fotoğraflar için JPEG veya WebP, şeffaflık gereken logolar için PNG, çok basit çizimler için SVG uygundur. Büyük dosyaları yüklemeden önce küçült. loading="lazy" ekranda görünmeyen görsellerin geç yüklenmesini sağlar.
<img src="photo.webp" alt="Mountain village" loading="lazy" width="800" height="500">
figure ve figcaption
Görseli açıklamasıyla göstermek için <figure> ve <figcaption> kullan; böylece yazı görsele mantıksal olarak bağlanır. Farklı ekran boyutları için <picture> ile birden çok kaynak verilebilir.
<figure> <img src="map.png" alt="Map of the old town"> <figcaption>Fig. 1 — The old town and its main gates.</figcaption> </figure> <picture> <source media="(min-width: 800px)" srcset="wide.webp"> <img src="narrow.webp" alt="Harbour at sunrise"> </picture>