---
title: Görseller
source: 'https://academia.sh/tr/kurslar/web-temelleri-ve-html/gorseller'
course: "Web'in Temelleri ve HTML"
language: tr
updated: '2026-08-17T18:09:33+00:00'
license: 'CC BY-SA 4.0'
---
# Görseller
Alternatif metnin ne söylemesi gerektiği, boyut bildiriminin yerleşime etkisi ve aynı görselin farklı ekranlar için aday kümesiyle sunulması.
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.
```html
```
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.
```html
```
**Süsleyici görsel.** Belgeye bilgi katmayan görselde alternatif metin **boş** bırakılır.
```html
```
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.
```js
// 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.
```html
```
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.
```js
// 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.
```html
```
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.
```
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.
```html
```
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.
```js
// 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.
```html
```
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.
```js
// 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.
```html
