HTML resim ekleme (<img>)

Örnek 02 / 04
Soru:

Sosyoloji dersi için hazırladığınız bir web sayfasında, "toplum_yapisi.png" adlı resmin yüklenemediği durumlarda, kullanıcıların ne göreceğini belirlemek istiyorsunuz. Ayrıca resmin, sayfa yüklendiğinde hemen görünmesini değil, kullanıcı sayfayı aşağı kaydırdığında yüklenmesini istiyorsunuz. Bu iki şartı sağlayan bir <img> etiketi nasıl yazılır?

Çözüm:

💡 Bu soruda, lazy loading ve alternatif metin kavramlarını birlikte kullanacağız.

  • ➡️ Resmin yüklenememesi durumunda görünecek alternatif metni alt niteliği ile belirliyoruz: alt="Toplumsal Tabakalaşma Şeması"
  • ➡️ Gecikmeli yüklemeyi (lazy loading) aktif etmek için loading niteliğini "lazy" olarak ayarlıyoruz: loading="lazy"
  • ➡️ Resmin kaynağını da src niteliği ile eklemeyi unutmuyoruz.

✅ Sonuç olarak, oluşturulan HTML kodu şöyle olacaktır:
<img src="toplum_yapisi.png" alt="Toplumsal Tabakalaşma Şeması" loading="lazy">

1 2 3 4
Konuya Geri Dön: