HTML img Etiketi: src, alt, width, height, loading ve fetchpriority

Temel kullanım

MDN'ye göre her <img> için en az iki özniteliğe ihtiyacınız vardır ve bunlar çoğunlukla src ile alt'tır. src zorunlu görünse de kural biraz daha esnektir: src ve srcset özniteliklerinden en az birinin bulunması gerekir. alt ise MDN'nin ifadesiyle erişilebilirlik için zorunlu ve son derece yararlıdır.

<img
  src="/gorseller/ofis-masasi.jpg"
  alt="Üzerinde dizüstü bilgisayar ve not defteri olan ahşap çalışma masası"
  width="800"
  height="533" />

Sondaki /> isteğe bağlıdır; <img> boş bir öğe olduğu için <img ...> yazmak da aynı sonucu verir. Geçersiz olan tek şey </img> biçiminde bir kapanış etiketi eklemektir. <img> akış, metin düzeyi (phrasing), gömülü ve somut (palpable) içerik kategorilerine girer; yani gömülü içerik kabul eden her öğenin, örneğin bir paragrafın içinde durabilir. usemap özniteliği taşıyorsa etkileşimli içerik sayılır.

alt metni: görselin yerine ne okunacak?

alt, görselin yerini tutabilecek metindir. MDN tarayıcıların görselleri her zaman göstermediğini hatırlatır: görme engelli kullanıcıların kullandığı görsel olmayan tarayıcılar, bant genişliği veya gizlilik nedeniyle görselleri kapatan kullanıcılar ve görsel dosyanın bozuk ya da desteklenmeyen bir biçimde olması bunun tipik nedenleridir. Bu durumlarda tarayıcı görselin yerine alt metnini koyabilir. Ağ hatası, içerik engelleme veya kırık bağlantı nedeniyle görsel yüklenemezse alt metni sayfada görünür. Ayrıca görsel kopyalanıp metin olarak yapıştırıldığında ya da bağlantılı bir görsel yer imine eklendiğinde de bu metin kullanılır.

İyi bir alt metni görselin içeriğini kısa ve açık biçimde anlatır; görselin varlığını ("resim", "fotoğraf") ya da dosya adını tekrarlamaz. MDN'nin önerdiği test şudur: alt metnini, görselden önce gelen cümleyle birlikte okuyun ve aynı anlamı verip vermediğine bakın.

<p>Gezimde çok sevimli bir hayvan gördüm:</p>

<!-- Kötü: ekran okuyucu "...hayvan gördüm: görsel" diye okur -->
<img src="penguen.jpg" alt="görsel" />

<!-- İyi: cümle anlamlı biçimde tamamlanır -->
<img src="penguen.jpg" alt="Kumsalda duran bir penguen." />

alt özniteliği hiç yazılmazsa bazı ekran okuyucular görselin dosya adını okur; "IMG_2041.jpg" gibi bir dosya adı kullanıcı için anlamsızdır. Bu yüzden alt'ı hiçbir zaman atlamayın.

Dekoratif görseller: alt=""

Görsel içeriğin önemli bir parçası değilse, yani yalnızca süsleme ya da bir izleme pikseliyse, alt özniteliğini boş bırakın: alt="". Bu, görsel olmayan tarayıcılara görseli atlayabileceklerini söyler. Görsel tarayıcılar da alt boşsa ve görsel yüklenemezse kırık görsel simgesini göstermez. Bu fark ARIA rollerine de yansır: boş olmayan bir alt taşıyan ya da hiç alt taşımayan görselin örtük rolü img, boş alt taşıyanınki ise presentation'dır.

<!-- Başlığın yanındaki süs çizgisi: içerik değil -->
<img src="ayrac.svg" alt="" width="120" height="8" />

Bağlantı ve düğme içindeki görseller

Bir görsel bağlantının ya da düğmenin tek içeriğiyse, alt metni görselin neye benzediğini değil, tıklayınca ne olacağını anlatmalıdır. MDN bunu "sağ ok" yerine "sonraki sayfa" yazmak örneğiyle açıklar ve bağlantılı görselde alt'ın, metin bağlantısı kullansaydınız yazacağınız metni taşıması gerektiğini söyler.

<a href="/">
  <img src="logo.png" alt="Ana sayfaya dön" width="160" height="40" />
</a>

title, alt'ın yerini tutmaz

title özniteliği alt'ın yerine kabul edilmez. MDN aynı metni hem alt hem title içine yazmamanızı da önerir; bazı ekran okuyucular metni iki kez okuyabilir. title genellikle fare görselin üzerinde durunca çıkan bir ipucu olarak gösterilir, ama yalnızca klavye ya da dokunmatik ekran kullanan biri bunu hiç görmeyebilir. Görselin bir altyazıya ihtiyacı varsa title yerine <figure> ve <figcaption> kullanın:

<figure>
  <img
    src="sunucu-odasi.jpg"
    alt="Raflara dizilmiş, ışıkları yanan sunucular"
    width="1200"
    height="800" />
  <figcaption>Veri merkezindeki sunucu rafları.</figcaption>
</figure>

<figcaption>, figürün ilk ya da son çocuğu olarak yazılır ve <figure> öğesine erişilebilir ad kazandırır. Altyazı görselin ne olduğunu söylemez, bağlamını anlatır; bu yüzden alt ile altyazı aynı metin olmamalıdır. Karmaşık grafikler için WCAG yönergesi de aynı sayfada ya da bir bağlantıyla ulaşılabilen erişilebilir bir alternatif, örneğin bir veri tablosu sunulmasını önerir (bkz. HTML tablo oluşturma).

width ve height: sayfa kaymasını önlemek

width ve height görselin piksel cinsinden doğal (intrinsic) genişliğini ve yüksekliğini verir. Değer birimsiz bir tam sayı olmalıdır: width="800" doğru, width="800px" ya da width="50%" yanlıştır. İkisini birlikte yazdığınızda tarayıcı görsel yüklenmeden önce en-boy oranını hesaplayabilir ve görsel için gereken alanı ayırır. MDN bunun, görsel indirilip ekrana çizildiğinde oluşan düzen kaymasını azalttığını, hatta tamamen önlediğini belirtir.

Bu öznitelikler görselin ekranda kaç piksel görüneceğini kesin olarak dayatmaz; ekrandaki boyutu CSS ile değiştirebilirsiniz. Önemli olan oranın baştan bilinmesidir. Düzen kaymasının sayfa deneyimi ölçümleriyle ilişkisini Core Web Vitals yazısında bulabilirsiniz.

loading: tembel yükleme

loading iki değer alır. eager varsayılandır ve görseli görünür alanda olsun olmasın hemen yükler. lazy ise yüklemeyi, görsel tarayıcının hesapladığı bir mesafe kadar görünür alana yaklaşana dek erteler. MDN bunun, görsele gerçekten ihtiyaç duyulacağı neredeyse kesinleşene kadar ağ ve depolama kullanımından kaçındığını ve tipik kullanımlarda performansı iyileştirdiğini söyler.

<img
  src="galeri-12.jpg"
  alt="Gün batımında sahil yolu"
  width="640"
  height="427"
  loading="lazy" />

Tembel yüklemenin MDN'de belirtilen dört önemli ayrıntısı vardır:

• Boyutlar daha da önemlidir: Yüklenmemiş bir görselin genişliği ve yüksekliği 0'dır. Tembel yüklenen görseller bir öğenin görünen kısmıyla kesişmezse hiç yüklenmez; width ve height yoksa içerik okuma sırasında kayabilir.
• load olayı onları beklemez: Window load olayı hemen yüklenen görsellere göre tetiklenir. Sayfa açıldığında görünür alanda olan tembel görseller bu olay anında henüz görünmüyor olabilir.
• JavaScript kapalıysa ertelenmez: Erteleme yalnızca JavaScript etkinken yapılır. Bu bir izleme önlemidir; aksi hâlde sunucu hangi görselin ne zaman istendiğine bakarak kullanıcının kaydırma konumunu tahmin edebilirdi.
• sizes="auto" yalnızca lazy ile: sizes özniteliğindeki auto değeri, aşağıda göreceğimiz gibi, yalnızca loading="lazy" ile birlikte geçerlidir.

decoding ve fetchpriority

decoding, tarayıcıya görselin kodunun nasıl çözüleceği konusunda bir ipucu verir. sync görseli diğer içerikle birlikte eşzamanlı çözüp hepsini tek seferde sunmayı, async önce diğer içeriği çizip görseli sonra çözmeyi, auto (varsayılan) ise tercihi tarayıcıya bırakmayı ifade eder. MDN, sayfadaki sabit görsellerde bu özniteliğin etkisini fark etmenin çoğu zaman zor olduğunu, farkın daha çok JavaScript ile sonradan eklenen görsellerde ortaya çıktığını belirtir.

fetchpriority, görselin diğer görsellere göre hangi öncelikle indirileceğine dair bir ipucudur: high, low ve varsayılan auto. Geçersiz ya da boş bir değer auto sayılır. MDN'nin örneği, sayfanın en büyük içerik boyamasına (LCP) önemli katkı yapan bir görseldir: bu görsel için önce ön yükleme yapılabilir, ardından önceliği fetchpriority ile artırılabilir. Önceliğin nasıl uygulanacağı tamamen tarayıcıya bağlıdır ve MDN özniteliğin idareli kullanılmasını, aşırı veya yanlış önceliklendirmenin performansı düşürebileceğini vurgular.

<!-- Sayfanın ilk ekranındaki ana görsel -->
<img
  src="kapak.jpg"
  alt="Dağların arasından geçen tren yolu"
  width="1600"
  height="900"
  fetchpriority="high" />

Ön yükleme ve öncelik ipuçlarının birlikte kullanımını preload, preconnect ve prefetch yazısında anlatıyoruz.

srcset ve sizes: kısa bir bakış

srcset, tarayıcının seçebileceği birden fazla görsel adresini virgülle ayrılmış olarak listeler. Her adayın yanına ya bir genişlik tanımlayıcısı (480w gibi, görselin gerçek piksel genişliği) ya da bir piksel yoğunluğu tanımlayıcısı (2x gibi) yazılır. İki tür aynı srcset içinde karıştırılamaz, aynı tanımlayıcı iki kez kullanılamaz; tanımlayıcı yazılmazsa aday 1x sayılır. x tanımlayıcıları kullanıldığında src de 1x adayı olarak hesaba katılır; w tanımlayıcıları kullanıldığında ise src dikkate alınmaz ve seçim sizes ile yapılır.

<!-- Yüksek yoğunluklu ekranlar için 2x sürüm -->
<img src="logo-72.png" srcset="logo-144.png 2x" alt="Firma logosu" width="72" height="72" />

<!-- Genişlik tanımlayıcıları ve sizes -->
<img
  src="saat-200.png"
  srcset="saat-200.png 200w, saat-400.png 400w"
  sizes="(width <= 600px) 200px, 50vw"
  alt="Saat 12.45'i gösteriyor" />

sizes görselin sayfada kaplayacağı genişliği medya koşullarıyla tarif eder; koşullar görselin değil görüntü alanının (viewport) özelliklerini sınar. Yüzde değerleri kullanılamaz, sizes hiç verilmezse varsayılanı 100vw'dir. Belirtime göre sizes yalnızca srcset genişlik tanımlayıcıları kullandığında bulunmalıdır. auto değeri, tarayıcının görselin düzen sonrası gerçek genişliğini kullanmasını ister ve yalnızca loading="lazy" ile geçerlidir; desteklemeyen tarayıcılar için ardına yedek boyutlar yazılabilir. Tarayıcı desteği için MDN uyumluluk tablosuna bakın.

<img
  loading="lazy"
  width="200"
  height="200"
  sizes="auto, (max-width: 30em) 100vw, 50vw"
  srcset="kettlebell-200.jpg 200w, kettlebell-400.jpg 400w, kettlebell-800.jpg 800w"
  src="kettlebell-400.jpg"
  alt="Kettlebell ile salınım hareketi" />

Seçim mantığının ayrıntıları, sanat yönetimi ve biçim yedekleme picture ve source yazısında anlatılıyor.

Öznitelik özeti

crossorigin ve referrerpolicy

crossorigin belirtilmezse görsel CORS olmadan istenir ve tarayıcı görseli "kirli" (tainted) olarak işaretler; bu görselin piksel verisine erişilemez, örneğin <canvas> üzerinde işlenemez. Öznitelik verildiğinde CORS isteği gönderilir: anonymous kimlik bilgisi (çerez, sertifika, Authorization başlığı) göndermez, use-credentials gönderir. Sunucu uygun Access-Control-Allow-Origin yanıtını vermezse tarayıcı görselin yüklenmesini engeller ve konsola bir CORS hatası yazar. Geçersiz bir değer anonymous sayılır.

referrerpolicy, görsel istenirken Referer başlığında ne kadar bilgi gönderileceğini belirler. Örneğin no-referrer başlığı hiç göndermez, origin yalnızca şema, alan adı ve bağlantı noktasını gönderir. Varsayılan strict-origin-when-cross-origin aynı kökene tam adresi, farklı kökene yalnızca kökeni gönderir; HTTPS'ten HTTP'ye inen isteklerde ise başlık göndermez. MDN unsafe-url değerini, güvenli sayfaların adres bilgisini güvensiz kökenlere sızdırdığı için açıkça güvensiz olarak niteler.

<img
  src="https://cdn.example.com/urun.jpg"
  alt="Mavi seramik kupa"
  width="600"
  height="600"
  crossorigin="anonymous"
  referrerpolicy="no-referrer" />

crossorigin özniteliğinin bütünlük denetimiyle birlikte kullanımı integrity ve crossorigin yazısında ele alınıyor.

SVG görseller ve role="img"

MDN, VoiceOver'daki bir hata nedeniyle SVG görsellerin her zaman görsel olarak duyurulmadığını belirtir ve kaynağı SVG olan tüm <img> öğelerine role="img" eklenmesini önerir. Ayrıca kök svg öğesinde genişlik ve yükseklik tanımlı değilse SVG'nin doğal boyutu olmadığını da not eder; böyle durumlarda width ve height yazmak daha da önemlidir.

<img src="mdn.svg" alt="MDN" role="img" width="120" height="40" />

Görsel neden yüklenmez?

MDN, görsel yüklenirken ya da çizilirken hata oluşan ve error olayını tetikleyen durumları şöyle sıralar:

• src veya srcset boş ("") ya da null.
• src adresi, kullanıcının o an bulunduğu sayfanın adresiyle aynı.
• Görsel dosyası yüklenemeyecek şekilde bozuk.
• Görselin üst verisi boyutları okunamayacak kadar bozuk ve öğede boyut öznitelikleri de yok.
• Görsel, tarayıcının desteklemediği bir biçimde.

Bu listedeki ilk madde sık görülen bir hatadır: şablonlarda "sonra doldururuz" diye bırakılan src="" bir hata olarak değerlendirilir. Görsel geçici olarak yoksa öğeyi hiç yazmamak daha temiz bir çözümdür.

Kullanımdan kalkan öznitelikler

align, border, hspace, vspace ve name kullanımdan kalkmıştır; yerlerine sırasıyla CSS float veya vertical-align, border, margin ve id özniteliği önerilir. longdesc ise HTML belirtiminde geçersiz kabul edilir; MDN uzun açıklama için aria-describedby veya aria-details gibi ARIA alternatiflerini işaret eder, MDN'nin WCAG rehberi de longdesc yerine sıradan bir bağlantı kullanılmasını önerir. Diğer eski öğeler için kullanımdan kalkan etiketler yazısına bakın.

Sık yapılan hatalar

• alt özniteliğini atlamak: Ekran okuyucu dosya adını okuyabilir; görsel yüklenmezse yerinde hiçbir şey görünmez.
• alt metnine "resim" veya dosya adı yazmak: Görselin varlığını değil içeriğini anlatın.
• Aynı metni alt ve title içine yazmak: Metin iki kez okunabilir.
• width ve height'a birim eklemek: Değerler birimsiz tam sayı olmalıdır.
• Tembel görsellerde boyut vermemek: Yüklenmemiş görselin boyutu 0 olduğu için düzen kayar.
• Her görsele fetchpriority="high" vermek: MDN aşırı önceliklendirmenin performansı düşürebileceğini belirtir.
• srcset içinde w ve x karıştırmak: Geçersizdir; tek tür tanımlayıcı kullanın.
• Boş src bırakmak: error olayına yol açan durumlardan biridir.
• </img> yazmak: <img> boş bir öğedir, kapanış etiketi geçersizdir.

Sık Sorulan Sorular

alt özniteliği zorunlu mu?

MDN alt'ı erişilebilirlik için zorunlu sayar. İçerik taşıyan görsellerde anlamlı bir metin, dekoratif görsellerde boş değer (alt="") yazın; özniteliği hiç atlamayın.

width ve height verirsem görsel esneyebilir mi?

Bu öznitelikler doğal boyutu ve oranı bildirir. Ekranda kaç piksel yer kaplayacağını CSS ile ayrıca belirleyebilirsiniz. Boyut özniteliklerinin asıl kazancı, MDN'nin belirttiği gibi, görsel yüklenmeden önce en-boy oranına göre alanın ayrılmasıdır.

Tüm görsellere loading="lazy" ekleyebilir miyim?

Öznitelik her görselde geçerlidir, ama MDN tembel görsellerin sayfa açılışında görünür alanda olsalar bile load olayı anında henüz görünmeyebileceğini belirtir. Sayfanın ilk ekranındaki ana görsel için ise MDN'nin fetchpriority sayfası farklı bir örnek verir: böyle bir görselin önceliğini fetchpriority="high" ile artırmak.

Görsele açıklama yazısı nasıl eklenir?

<figure> içine görseli ve bir <figcaption> koyun. title özniteliği altyazı yerine kullanılmamalıdır.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · picture ve source etiketi · Görsel optimizasyonu · preload ve fetchpriority · integrity ve crossorigin · Core Web Vitals · Erişilebilir ad