Çalıştırılabilir HTML Dokümanları: Resim ekleme

Q: HTML'de resim nasıl eklenir?

src içinde dosya, alt içinde açıklama olacak şekilde etiketini kullan: . etiketinin kapanış etiketi yoktur.

Q: HTML'de resmin boyutunu nasıl değiştiririm?

Piksel cinsinden width ve height özelliklerini ayarla ya da img { width: 300px; height: auto; } gibi bir CSS kullan. Yalnızca bir boyutu ayarlayıp diğerini auto bırakmak oranları korur.

Q: HTML'de resmim neden görünmüyor?

Genellikle src yolu yanlıştır: yol HTML dosyasına göredir, çoğu sunucuda dosya adları büyük küçük harfe duyarlıdır ve C:\photos\cat.jpg gibi bir yol yalnızca senin bilgisayarında vardır. Kontrol etmek için resmin URL'sini doğrudan tarayıcıda aç.

Q: HTML'de alt metni nedir?

alt özelliği resmin yerine geçen metindir. Ekran okuyucular onu okur, resim yüklenemediğinde de tarayıcılar onu gösterir. Resmin ne gösterdiğini ya da ne işe yaradığını anlat; tamamen dekoratif resimler için alt="" kullan.

Q: Bir resmi nasıl responsive yaparım?

CSS'te ona max-width: 100%; height: auto; ekle. Resim bu durumda dar bir kapsayıcıya sığacak kadar küçülür ve asla doğal genişliğinden büyük olmaz.

HTML'de resim nasıl eklenir

<img> elementini kullan. src resim dosyasıdır, alt onu tanımlar, width ve height de piksel cinsinden boyutunu verir. <img> boş bir elementtir: kapanış etiketi yoktur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image</title>
</head>
<body>
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3Cpath d='M0 150 Q80 90 160 140 T300 130 V200 H0Z' fill='%2316a34a'/%3E%3C/svg%3E"
    alt="Green hills under a yellow sun"
    width="300"
    height="200">
</body>
</html>

Buradaki src, örnek çevrimdışı çalışsın diye URL'nin içine yazılmış küçük bir SVG'dir (bir data URI). Gerçek bir sitede src bir dosyanın yoludur:

`src`	Şuradan yükler
`photo.jpg`	HTML dosyasıyla aynı klasördeki `photo.jpg`
`images/photo.jpg`	HTML dosyasının yanındaki `images` klasöründen
`../photo.jpg`	Bir üst klasörden
`/images/photo.jpg`	Sitenin kökündeki `images` klasöründen
`https://example.com/photo.jpg`	Başka bir siteden (taşınabilir ya da kaybolabilir)

Çoğu web sunucusunda yollar büyük küçük harfe duyarlıdır: Photo.JPG ile photo.jpg farklı dosyalardır.

Alt metni

alt metni resmin yerine geçer. Ekran okuyucular onu sesli okur, resim yüklenemediğinde de tarayıcı onu gösterir. Buradaki iki resim de var olmayan dosyaları gösteriyor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alt text</title>
  <style>
    img { border: 2px dashed #e5e7eb; }
  </style>
</head>
<body>
  <p><img src="missing-logo.png" alt="Coddy logo" width="160" height="60"></p>
  <p><img src="missing-chart.png" alt="" width="160" height="60"> (decorative, empty alt)</p>
</body>
</html>

İlki, resmin olması gereken yerde alt metni olan "Coddy logo" yazısını gösterir. İkincisinin alt değeri boştur, yani gösterilecek metin yoktur ve ekran okuyucular onu atlar. alt nasıl yazılır:

Bağlamda önemli olanı anlat. "Bar chart: sales doubled from March to June", "chart" demekten daha fazlasını söyler.
"Image of" ile başlama. Ekran okuyucular onu zaten resim olarak duyurur.
Dekorasyon için alt="" kullan (bir ayırıcı, bir arka plan süsü), böylece ekran okuyucular onu atlar.
alt özelliğini asla atlama. O olmadan bazı ekran okuyucular onun yerine "IMG underscore 4032 dot jpg" gibi dosya adını okur.
Link içindeki bir resim için hedefi anlat: <a href="/"><img src="logo.svg" alt="Home"></a>.

Resim boyutunu ayarlamak

width ve height özellikleri birimsiz, piksel cinsindendir. CSS boyutları onları geçersiz kılar. Resimler için en kullanışlı CSS, bir resmin kapsayıcısıyla birlikte küçülmesine izin veren ama doğal genişliğinin ötesine asla uzatmayan şu ikilidir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image size</title>
  <style>
    .box { width: 180px; border: 2px solid #2563eb; margin-bottom: 12px; }
    .responsive { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <div class="box">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Overflowing" width="300" height="200">
  </div>
  <div class="box">
    <img class="responsive" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Fits" width="300" height="200">
  </div>
</body>
</html>

İlk resim 300 pikselini korur ve 180 piksellik kutudan taşar. İkincisi 3:2 şeklini koruyarak 180'e 120'ye küçülür. height: auto önemlidir: o olmadan height="200" özelliği resmi 200 piksel yüksekliğinde tutar ve ezer.

Responsive resimler için bile HTML'e her zaman width ve height yaz. Tarayıcı bunları dosya gelmeden önce doğru miktarda yer ayırmak için kullanır, böylece resim yüklendiğinde alttaki metin aşağı zıplamaz.

object-fit ile kırpmak

Bir resmin farklı şekilli bir kutuyu doldurması gerektiğinde (geniş bir fotoğraftan kare bir avatar, eşit yükseklikte kartlar), fazlalığa ne olacağına object-fit karar verir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>object-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 12px; }
    figure { margin: 0; text-align: center; }
    img { width: 120px; height: 120px; border: 2px solid #111827; display: block; }
  </style>
</head>
<body>
  <figure>
    <img style="object-fit: fill" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>fill</figcaption>
  </figure>
  <figure>
    <img style="object-fit: contain" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>contain</figcaption>
  </figure>
  <figure>
    <img style="object-fit: cover" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>cover</figcaption>
  </figure>
</body>
</html>

Kaynak, kare kutularda gösterilen 2:1 oranlı bir daire resmidir:

fill (varsayılan) resmi kutuya göre uzatır, yani daire ovale dönüşür.
contain resmin tamamını içine sığdırır ve boş şeritler bırakır.
cover kutuyu doldurur ve taşan kısmı kırparak daireyi yuvarlak tutar. Küçük resimler ve avatarlar için olağan seçim budur.

object-position kırparken hangi kısmın görünür kalacağını seçer, örneğin portreler için object-position: top.

figure ve figcaption ile resim altı yazısı

Bir resme ait olan resim altı yazısı <figcaption> içine, ikisi birlikte de <figure> içine yazılır. Bu onları ekran okuyucular için birbirine bağlar ve figure tek bir birim olarak stillendirilebilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    figure { display: inline-block; margin: 0; padding: 8px; border: 1px solid #e5e7eb; }
    img { display: block; }
    figcaption { font: 14px system-ui, sans-serif; color: #4b5563; padding-top: 6px; }
  </style>
</head>
<body>
  <figure>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23e5e7eb'/%3E%3Crect x='20' y='70' width='40' height='40' fill='%232563eb'/%3E%3Crect x='80' y='40' width='40' height='70' fill='%232563eb'/%3E%3Crect x='140' y='20' width='40' height='90' fill='%232563eb'/%3E%3C/svg%3E"
      alt="Bar chart: signups rose each quarter" width="240" height="120">
    <figcaption>Figure 1. Signups per quarter.</figcaption>
  </figure>
</body>
</html>

Resim altı yazısı alt yerine geçmez. alt resmin ne gösterdiğini söyler; resim altı yazısı, gören bir okurun da ihtiyaç duyacağı bilgiyi ekler.

Resmin altındaki boşluk

Bir resim, tıpkı bir harf gibi metnin taban çizgisinde durur, bu yüzden kapsayıcısı altında g ve y gibi harflerin aşağı uzanan kısımları için yer bırakır. Bir kenarlık boşluğu görünür yapar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gap under image</title>
  <style>
    div { display: inline-block; border: 2px solid #dc2626; margin-inline-end: 12px; }
    .fixed img { display: block; }
  </style>
</head>
<body>
  <div><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
  <div class="fixed"><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
</body>
</html>

İlk kenarlıkta mavi resmin altında beyaz bir şerit var. Resme display: block vermek (ikinci kutu) onu kaldırır; resim satır içi kalmak zorundaysa vertical-align: middle da kaldırır.

Lazy loading ve responsive kaynaklar

Uzun bir sayfanın aşağısındaki resimler için loading="lazy", okur onlara yaklaşana kadar indirmeyi geciktirir:

<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">

Sayfanın en üstündeki ana resmi lazy load yapma; sayfanın okurların ilk gördüğü kısmını geciktirir.

Küçük ekranlara daha küçük dosyalar göndermek için srcset içinde birkaç boyut listele ve sizes ile tarayıcıya resmin ne kadar geniş gösterileceğini söyle. Dosyayı tarayıcı seçer:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Harbor at dusk" width="800" height="533">

<picture> daha da ileri gider ve farklı biçimler sunar; alt değerini de taşıyan <img> yedek olarak kalır:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>

Resim biçimleri

Biçim	Ne için iyi
JPEG	Fotoğraflar
PNG	Ekran görüntüleri, keskin kenar ya da saydamlık gerektiren resimler
WebP	Fotoğraflar ve grafikler; JPEG ve PNG'den küçük, saydamlık destekli
AVIF	Fotoğraflar, genellikle WebP'den küçük
SVG	Logolar, ikonlar ve diyagramlar; bulanıklaşmadan her boyuta ölçeklenir
GIF	Kısa animasyonlar, ama sessiz ve döngülü bir `<video>` çok daha küçüktür

Sık yapılan hatalar

Kendi bilgisayarından bir yol, örneğin src="C:\Users\me\photo.jpg". Yalnızca senin makinende çalışır. Dosyayı HTML'inin yanına koy ve göreli bir yol kullan.
Eksik alt. Her <img> için bir tane gerekir; dekorasyon için boş.
CSS'te hem width hem height değerini farklı bir şekle göre ayarlamak. Resim uzar. Birini ayarla, diğerini auto bırak ya da object-fit kullan.
width ve height özelliklerinin olmaması, bu durumda resimler yüklendikçe sayfa zıplar.
CSS ile küçültülen devasa dosyalar. 400 pikselde gösterilen 4000 piksellik bir fotoğraf yine de tamamen indirilir. Onu yeniden boyutlandır ya da srcset kullan.
Kapanış </img> etiketi. <img> boş bir elementtir; kapatılacak bir şey yoktur.

Yukarıdaki örneklerdeki resimler küçük satır içi SVG'lerdir. Aynı kodu kendi fotoğraflarınla denemek için onu HTML playground sayfasına yapıştır.

Sıkça Sorulan Sorular

HTML'de resim nasıl eklenir?

src içinde dosya, alt içinde açıklama olacak şekilde <img> etiketini kullan: <img src="photo.jpg" alt="A red bicycle" width="600" height="400">. <img> etiketinin kapanış etiketi yoktur.

HTML'de resmin boyutunu nasıl değiştiririm?

Piksel cinsinden width ve height özelliklerini ayarla ya da img { width: 300px; height: auto; } gibi bir CSS kullan. Yalnızca bir boyutu ayarlayıp diğerini auto bırakmak oranları korur.

HTML'de resmim neden görünmüyor?

Genellikle src yolu yanlıştır: yol HTML dosyasına göredir, çoğu sunucuda dosya adları büyük küçük harfe duyarlıdır ve C:\photos\cat.jpg gibi bir yol yalnızca senin bilgisayarında vardır. Kontrol etmek için resmin URL'sini doğrudan tarayıcıda aç.

HTML'de alt metni nedir?

alt özelliği resmin yerine geçen metindir. Ekran okuyucular onu okur, resim yüklenemediğinde de tarayıcılar onu gösterir. Resmin ne gösterdiğini ya da ne işe yaradığını anlat; tamamen dekoratif resimler için alt="" kullan.

Bir resmi nasıl responsive yaparım?

CSS'te ona max-width: 100%; height: auto; ekle. Resim bu durumda dar bir kapsayıcıya sığacak kadar küçülür ve asla doğal genişliğinden büyük olmaz.

Resmimin altında neden boşluk var?

Resimler varsayılan olarak satır içidir ve metnin taban çizgisinde durur; bu da altlarında harflerin aşağı uzanan kısımları için yer bırakır. Boşluğu kaldırmak için resme display: block ya da vertical-align: middle ver.

İlgili kavramlar