HTML Görseller

Yer imleri sizi metin içinde gezdirir. Görseller fotoğrafları, diyagramları ve logoları sayfaya getirir. Temel HTML aracı boş img elementidir: normal kullanımda açılış ve kapanış etiketleri arasında bir başlık sarmayaz. Dosyayı src ile gösterir ve metin alternatifini alt ile sunar.

img ne yapar

img bir replaced elementtir. Tarayıcı src adresindeki kaynağı alır ve düzen içinde boyar. Dosya eksik veya engellenmişse ziyaretçilerin yine de yararlı bir alta ihtiyacı vardır (veya salt süs için açıkça boş alt=""). Yollar, bağlantılar ve favicon’lar için zaten kullandığınız göreli ve mutlak kuralları izler.

Doğrudan yanıt

<img src="path/to/file.jpg" alt="short description"> yazın.

• src — görsel dosyasının yeri
• alt — görsel görülemediğinde veya yüklenemediğinde metin alternatifi
  İsteğe bağlı width ve height yer ayırabilir ve düzen sıçramasını azaltabilir. Yavaş bağlantıdaki her öğrenene çok megabaytlık dosya göndermek yerine aşırı büyük fotoğrafları sıkıştırmayı tercih edin.

Temel özniteliklere kısa bakış

Temel bilgilendirici bir görsel

Görselleri images/ gibi net bir klasöre koyun ve alt içinde önemli olanı açıklayın.

Temel örneği okumak

• src="images/team.jpg" HTML dosyasından göreli bir yoldur
• alt ekran okuyucular ve başarısız yüklemeler için fotoğrafın anlamını açıklar
• Normal HTML yazımında ayrı bir kapanış </img> yoktur — öznitelikler tek etikette yaşar
• Klasör veya dosya adı yanlışsa etiket mükemmel görünse bile görsel bozulur

Width ve height ipuçları

Width ve height vermek, baytlar gelmeden önce tarayıcının yer ayırmasına yardımcı olur. Gerçek dosyanın en-boy oranını mümkün olduğunca eşleştirin ki görsel gerilmiş görünmesin. Dev bir fotoğrafı yalnızca HTML öznitelikleriyle küçültmek yine de dev dosyayı indirir — varlıkları web için yeniden boyutlandırın ve sıkıştırın.

Dekoratif görseller ve boş alt

Bir görsel bilgi eklemiyorsa — yakındaki metnin zaten kapsadığı salt süs — alt="" kullanın. Özniteliği atlamayın. altı atlamak ile boş alt="" yazmak farklıdır: boş “erişilebilirlik ağacında beni yok say” demektir; eksik çoğu zaman “işarette bir şey ters gitti” anlamına gelir.

alt’ı spam için değil, anlam için yazın

İyi alt, bağlamda görselin kısa bir yerine geçenidir: gören kullanıcının sayfayı anlamak için ihtiyaç duyduğu şey. Kötü alt anahtar kelime doldurur, görselin yanına zaten basılmış bir başlığı tekrarlar veya içeriksiz “image” der. Grafikse çıkarı özetleyin; aynı zamanda ana sayfa bağlantısı olan bir logosa bağlantının erişilebilir adı genellikle görsel altından veya çevresindeki metinden gelir — dürüst tutun.

Yeni başlayanların karşılaştığı dosya biçimleri

JPEG (.jpg) fotoğraflara uygundur. PNG keskin kenarlı veya şeffaf grafiklere uygundur. SVG, net ölçekleme istediğinizde basit ikon ve logolara uygundur (SVG kalıplarını sonra daha çok göreceksiniz). İçeriğe uyan biçimi seçin, sonra dosya ağırlığını makul tutun.

Editörünüzde pratik

1. images klasörüne küçük bir .jpg veya .png koyun.
2. Doğru göreli src ve net alt ile bir img ekleyin.
3. En-boy oranına uyan width ve height ekleyin.
4. Yolu bir kez kasıtlı bozun — altın (veya kırık görsel arayüzünün) hatayı fark ettirdiğini doğrulayın, sonra yolu düzeltin.
5. alt="" ile bir dekoratif görsel ekleyin ve özniteliği tamamen silmediğinizi doğrulayın.

Kolay hatalar

• Bilgilendirici görsellerde alt eksik
• src içinde yanlış klasör veya yazım
• Daha küçük bir web boyutu yeterken çok megabaytlık kamera fotoğrafı yayınlamak
• altı anahtar kelime çöplüğü gibi kullanmak
• Uyumsuz width/height ile logoları germek
• src (görseller) ile href (bağlantılar) karıştırmak

Özet

• Görseller src ve alt ile img kullanır
• Yollar diğer site dosyalarıyla aynı kuralları izler
• alt erişilebilirliği ve başarısız yüklemeleri destekler; alt="" yalnızca salt süs için
• Width ve height yer ayırabilir; gerçek dosya boyutunu yine de optimize edin
• Mantıklı bir biçim seçin ve indirmeleri hafif tutun