🚀 HTML Images: Görsel Yönetimi ve Performans Sırları

Pikselleri Ekrana Basmak: <img> Etiketi

Selamlar. Bugün web'in en 'ağır' konusuna, görsellere giriyoruz. HTML'de resim eklemek için kullandığımız <img> etiketi, nadir bulunan self-closing (kendi kendine kapanan) etiketlerden biridir. Yani bir kapanış etiketine (</img>) ihtiyaç duymaz.

Temelde iki zorunlu nitelikle başlarız:

  1. src (Source): Resmin yolu (dosya adı veya URL).
  2. alt (Alternative Text): Resim yüklenemezse görünecek metin.

Erişilebilirlik ve SEO: alt Neden Kritik?

Birçok kişi alt niteliğini boş geçer ancak bu büyük bir hatadır. Görme engelli bir kullanıcı ekran okuyucu ile sitenizi gezdiğinde, o görselin ne olduğunu alt metni sayesinde anlar. Ayrıca Google botları resmin içeriğini buradan okur. Eğer bir butonunuzda ikon varsa ve alt metni yoksa, arama motorları için o buton 'görünmez'dir.

Performans: loading="lazy" ve Boyutlandırma

Efsanevi NFS Underground 2 projemizi tarayıcıya taşıma sürecimizde, Gigabyte'larca veriyi (harita dokuları, araç modelleri) yönetmek en büyük teknik meydan okumamızdı. Bir web sayfasında da onlarca görseli aynı anda yüklemeye çalışmak tarayıcıyı kilitler.

İşte burada loading="lazy" niteliği devreye girer. Bu nitelik, resmin sadece kullanıcı oraya 'kaydırdığında' (scroll) yüklenmesini sağlar. Böylece sayfa açılış hızı devasa oranda artar. Ayrıca width ve height değerlerini HTML tarafında önceden belirtmek, tarayıcının resim yüklenmeden önce o alanı ayırmasını sağlayarak 'layout shift' (sayfanın resim yüklenince zıplaması) sorununu çözer.

🚀 Sanal Kodlama Alanı Yükleniyor...

Geliştirici İpuçları

  • WebP formatı kullanın: JPEG veya PNG yerine modern .webp formatını tercih etmek, görsel kalitesini bozmadan dosya boyutunu %30-40 oranında düşürür.
  • Kırık Resimler: alt metnini asla boş bırakmayın. Eğer resim dekoratifse (yani bir anlamı yoksa), alt="" şeklinde boş bırakabilirsiniz, bu sayede ekran okuyucular o görseli atlar.
  • Responsive Resimler: CSS tarafında max-width: 100% kuralı, resimlerin konteyner dışına taşmasını engeller.

Bir sonraki derste, verileri hiyerarşik bir düzende sunmamızı sağlayan Tables (Tablolar) konusuna geçeceğiz. Veri madenciliğine hazır olun!

Ovid Game Mühendislik Notları: ovidgame.com