Görseller

Belge bölümlendi ama hâlâ yalnızca metinden oluşuyor. Ölçüm istasyonu sayfasının konumu bir görselle anlatılmalıdır ve bu görsel, göremeyen okuyucu için de bir karşılık taşımalıdır.

img boş bir ögedir; içeriği yoktur, kaynağı src özniteliğiyle bildirilir. İki özniteliği zorunludur: src ve alt.

Alternatif Metin

alt özniteliği, görselin yerine geçecek metni taşır. Görselin betimlemesi değildir; görsel gösterilemediğinde onun işini görecek metindir. Ölçüt şudur: bu görseli metne çevirmem gerekseydi ne yazardım?

Yanıt görselin belgedeki işlevine bağlıdır ve üç durum vardır.

Bilgi taşıyan görsel. Alternatif metin o bilgiyi verir.

<img src="konum.png" alt="İstasyon, kuzeye bakan yamacın orta kesiminde,
     vadi tabanından 400 metre yukarıda.">

Burada yazılan şey görselin nasıl göründüğü —renkler, çizim biçimi— değil, ne söylediğidir.

İşlevsel görsel. Bir bağlantının veya düğmenin içindeki görselde alternatif metin, görselin değil eylemin karşılığıdır.

<a href="/veri/2024-03.csv"><img src="indir.svg" alt="Mart ayı kayıtlarını indir"></a>

Süsleyici görsel. Belgeye bilgi katmayan görselde alternatif metin boş bırakılır.

<img src="ayrac.svg" alt="">

Boş alt ile alt yazmamak aynı şey değildir. Boş değer “bu görselin metin karşılığı yoktur, atlayın” bildirimidir ve ekran okuyucu görseli duyurmaz. Öznitelik hiç yazılmazsa bildirim yapılmamış olur; bu durumda birçok ekran okuyucu dosya adını okur, ki bu kullanıcıya hiçbir şey vermez.

Alternatif metinde “resim”, “görsel”, “fotoğraf” sözcükleri yazılmaz; ögenin türü zaten rolünden duyurulur. Metnin uzunluğu içeriğe bağlıdır; birkaç cümleyi aşan betimlemeler için ayrı bir uzun açıklama bağlantısı yeğlenir.

Boyut Bildirimi

width ve height öznitelikleri görselin iç boyutlarını piksel olarak bildirir. Bu bildirim, sunum katmanı görseli başka bir boyutta gösterse bile anlamlıdır: tarayıcı oranı buradan hesaplar ve görsel inmeden önce ona yer ayırır.

// oran.mjs — en boy orani ve ayrilan yukseklik
const g = 1440, y = 960;
console.log("width/height =", g + "/" + y, "-> oran", (g / y).toFixed(4));
for (const genislik of [300, 480, 720]) {
  console.log(String(genislik).padStart(4), "piksel genislikte yukseklik:", (genislik * y / g).toFixed(1));
}

width/height = 1440/960 -> oran 1.5000
 300 piksel genislikte yukseklik: 200.0
 480 piksel genislikte yukseklik: 320.0
 720 piksel genislikte yukseklik: 480.0

Bildirim yazılmazsa tarayıcı, görsel inene kadar ona sıfır yükseklik ayırır; görsel indiği anda altındaki içerik aşağı kayar. Kullanıcı o sırada okuyor ya da bir düğmeye basmak üzereyse bu kayma somut bir sorundur. Boyut bildirimi bu kaymayı önler ve yerleşim hesabının görselin inmesini beklemeden yapılmasını sağlar.

Öznitelikler birimsiz yazılır; width="960px" yazımı geçersizdir.

loading="lazy" özniteliği, görselin görüntü alanına yaklaşana kadar istenmemesini bildirir. İlk ekranda görünen görsellere yazılmaz — o görseller zaten hemen gerekir ve gecikmeleri açılışı yavaşlatır.

Aday Kümesi

Tek bir görsel dosyası her ekran için uygun değildir. Dar bir ekrana geniş bir dosya göndermek bant genişliği harcar; geniş ve yoğun bir ekrana dar bir dosya göndermek bulanık sonuç verir.

srcset özniteliği aynı görselin farklı genişlikteki adaylarını, sizes özniteliği ise görselin düzendeki genişliğini bildirir. Seçimi tarayıcı yapar.

<img src="yamac-960.jpg"
     srcset="yamac-480.jpg 480w, yamac-960.jpg 960w,
             yamac-1440.jpg 1440w, yamac-1920.jpg 1920w"
     sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 640px"
     width="1440" height="960"
     alt="İstasyon, kuzeye bakan yamacın orta kesiminde.">

Seçim kuralı hesaplanabilir: sizes listesinden ilk uyan koşul kaynak boyutunu verir, her adayın yoğunluğu w değerinin kaynak boyutuna oranıdır, aygıtın piksel oranını karşılayan en küçük yoğunluklu aday seçilir.

// adaylar.mjs — srcset/sizes aday secim kuralinin modeli
const adaylar = [
  { adres: "yamac-480.jpg", w: 480 },
  { adres: "yamac-960.jpg", w: 960 },
  { adres: "yamac-1440.jpg", w: 1440 },
  { adres: "yamac-1920.jpg", w: 1920 },
];

// "(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 640px"
const boyutlar = [
  { enCok: 600, deger: (g) => g * 1.0 },
  { enCok: 1000, deger: (g) => g * 0.5 },
  { enCok: Infinity, deger: () => 640 },
];

function kaynakBoyutu(gorunumGenisligi) {
  return boyutlar.find((k) => gorunumGenisligi <= k.enCok).deger(gorunumGenisligi);
}

function sec(gorunumGenisligi, pikselOrani) {
  const boyut = kaynakBoyutu(gorunumGenisligi);
  const yogunluklar = adaylar.map((a) => ({ ...a, yogunluk: a.w / boyut }));
  const yeterli = yogunluklar.filter((a) => a.yogunluk >= pikselOrani);
  const secilen = yeterli.length > 0
    ? yeterli.reduce((en, a) => (a.yogunluk < en.yogunluk ? a : en))
    : yogunluklar.reduce((en, a) => (a.yogunluk > en.yogunluk ? a : en));
  return { boyut, secilen };
}

const durumlar = [[390, 1], [390, 3], [800, 1], [800, 2], [1440, 1], [1440, 2]];
console.log("gorunum  oran  kaynak boyutu  secilen aday   yogunluk");
for (const [genislik, oran] of durumlar) {
  const { boyut, secilen } = sec(genislik, oran);
  console.log(
    String(genislik).padStart(7),
    String(oran).padStart(5),
    String(boyut).padStart(14),
    "  " + secilen.adres.padEnd(15),
    secilen.yogunluk.toFixed(2),
  );
}

gorunum  oran  kaynak boyutu  secilen aday   yogunluk
    390     1            390   yamac-480.jpg   1.23
    390     3            390   yamac-1440.jpg  3.69
    800     1            400   yamac-480.jpg   1.20
    800     2            400   yamac-960.jpg   2.40
   1440     1            640   yamac-960.jpg   1.50
   1440     2            640   yamac-1440.jpg  2.25

Çıktının ilk iki satırı aynı ekran genişliğini iki farklı piksel yoğunluğuyla karşılaştırır: aynı düzende, aynı boyutta gösterilen görsel için üç kat yoğun bir ekranda üç kat büyük bir dosya seçilir. Üçüncü ve beşinci satırlar ise ekran genişledikçe kaynak boyutunun sizes kuralına göre değiştiğini gösterir — 800 pikselde görselin yarısı, 1440 pikselde sabit 640 piksel.

sizes değerinin yanlış yazılması sessiz bir kusur üretir: tarayıcı bildirilen boyuta göre seçim yapar, gerçek boyuta göre değil. Bildirim düzenle uyumlu tutulmalıdır.

Seçim tarayıcının kararıdır ve ağ koşullarını, önbellekteki dosyaları veya kullanıcı ayarlarını da hesaba katabilir. Yukarıdaki hesap, kuralın kendisidir; sonucun garantisi değildir.

Biçim Seçimi

picture ögesi, aday kümesini farklı dosya biçimleri arasında seçmek için de kullanılır. İçindeki source ögeleri sırayla denenir, ilk desteklenen biçim seçilir; img ögesi hem son çare hem de alternatif metnin taşıyıcısıdır.

<picture>
  <source srcset="yamac.avif" type="image/avif">
  <source srcset="yamac.webp" type="image/webp">
  <img src="yamac.jpg" width="1440" height="960"
       alt="İstasyon, kuzeye bakan yamacın orta kesiminde.">
</picture>

Aynı düzenek, dar ekranda farklı bir kırpma göstermek için de kullanılır: source ögelerine media koşulu yazıldığında seçim ekran genişliğine göre yapılır. srcset ile picture arasındaki ayrım şudur — srcset aynı görselin farklı ölçeklerini, picture farklı görselleri ya da farklı biçimleri seçer.

Özet

• alt görselin betimlemesi değil, yerine geçecek metindir; işlevsel görsellerde eylemin, süsleyici görsellerde boş dizginin karşılığıdır.
• Boş alt ile alt yazmamak farklıdır: birincisi “atla” bildirimidir, ikincisi hiçbir bildirim yapmaz.
• width ve height bildirimi en boy oranını verir ve görsel inmeden yer ayrılmasını sağlayarak içeriğin kaymasını önler.
• srcset adayları, sizes düzendeki genişliği bildirir; seçim, kaynak boyutu ve aygıtın piksel oranından hesaplanır.
• picture farklı biçimler veya farklı kırpmalar arasında seçim yapar; srcset aynı görselin ölçekleri arasında.

Sonraki Adım

Görsel belgeye girdi ama bağlamı hâlâ eksik: hangi ölçüm noktasını gösterdiği, ne zaman çekildiği, hangi metne ait olduğu bildirilmemiş durumda. Sonraki ders görseli bir açıklama metniyle ilişkilendiren ögeyi ele alır ve bu ilişkinin erişilebilir adı nasıl değiştirdiğini gösterir.