HTML'ye Resim Nasıl Doğru Şekilde Eklenir

Kerem Aydın·10 Temmuz 2026·⏱3 dk

HTML'ye resim eklemek için src (dosya yolu) ve alt (metinsel açıklama) zorunlu özniteliklerine sahip tekli <img> etiketi kullanılır. Temel söz dizimi örneği: <img src="photo.jpg" alt="Fotoğraf açıklaması" width="800" height="600">. Dosya yollarının ve özniteliklerin doğru kullanımı; görselin görüntülenmesi, sitenin yükleme hızı ve erişilebilirliği açısından kritiktir.

img Etiketinin Söz Dizimi ve Temel Öznitelikler

<img> etiketi boş bir elemandır — kapanış etiketi yoktur. İşlevselliği tamamen özniteliklere bağlıdır.

Zorunlu Öznitelikler

src (source): Resmin yolunu belirtir. Bu öznitelik olmadan resim görüntülenmez.
alt (alternative text): Alternatif metin. Resim yüklenemediğinde görüntülenir ve görme engelli kullanıcılar için ekran okuyucular tarafından seslendirilir. Ayrıca arama motorları tarafından indeksleme sırasında dikkate alınır.

Resim yalnızca dekoratif amaçlıysa ve anlamsal bir yük taşımıyororsa, boş alt="" özniteliğini kullanın. Bu, ekran okuyucuya resmin yok sayılabileceğini bildirir ve gereksiz kelimelerle yayını kirletmez.

Performans ve Duyarlılık İçin Öznitelikler

width ve height: Resmin genişliğini ve yüksekliğini piksel cinsinden belirler. Bu parametrelerin belirtilmesi, tarayıcının resim yüklenmeden önce onun için yer ayırmasını sağlar ve düzen kaymalarını (CLS — Cumulative Layout Shift) önler; bu da SEO açısından önemlidir.
loading: Geç yüklemeyi yönetir. lazy değeri (loading="lazy"), tarayıcının resmi yalnızca kullanıcının görünür alanına girdiğinde yüklemesini sağlayarak sayfanın ilk yüklenme hızını artırır.

Dosya Yolları: Mutlak ve Göreceli

Tarayıcının src içinde belirtilen yola göre dosyayı nasıl bulduğunu anlamak, doğru kodlamanın temelidir.

Göreceli Yollar

Yerel siteler geliştirilirken çoğunlukla kullanılır. Yol, HTML dosyasının mevcut konumuna göre oluşturulur.

Yol Türü	Söz Dizimi	Açıklama
Aynı klasörde	`src="image.jpg"`	Dosya HTML belgesinin yanında durur.
Alt klasörde	`src="images/photo.jpg"`	Dosya, mevcut dizinde bulunan `images` klasöründedir.
Bir üst seviyede	`src="../assets/logo.png"`	`..`, mevcut klasörden bir seviye yukarı çıkmayı ifade eder.

Göreceli yollar, Linux/Unix sunucularında büyük-küçük harfe duyarlıdır. Photo.jpg ve photo.jpg farklı dosyalardır. Her zaman tutarlı bir adlandırma stili uygulayın (küçük harf önerilir).

Mutlak Yollar

Protokol ve alan adı dahil olmak üzere kaynağın tam adresini belirtir.

Harici kaynaklar: src="https://example.com/img/pic.jpg". Diğer sitelerden veya CDN'lerden resim bağlamak için kullanılır.
Kök göreceli yollar: src="/images/pic.jpg". Başındaki eğik çizgi, sitenin (alan adının) kökünden sayılmaya başlandığını gösterir. Bu yol, mevcut HTML sayfasının hangi klasörde bulunduğundan bağımsız olarak doğru çalışacaktır.

Optimizasyon ve Modern Formatlar

Sadece resim eklemek yeterli değildir. Modern web için format ve duyarlılık önemlidir.

Format Seçimi

JPEG: Çok sayıda renk ve gradyan içeren fotoğraflar için.
PNG: Şeffaflık veya net geometrik şekiller içeren grafikler için.
WebP / AVIF: Kalite korunurken daha iyi sıkıştırma sağlayan modern formatlar. 2026 yılında tüm güncel tarayıcılar tarafından desteklenmektedir. Bunları ana format olarak kullanmanız önerilir.

Duyarlı Resimler (srcset)

srcset özniteliği, tarayıcının cihazın ekran çözünürlüğüne bağlı olarak en uygun resmi seçmesine olanak tanır.

<img 
  src="photo-small.jpg" 
  srcset="photo-small.jpg 600w, photo-large.jpg 1200w" 
  sizes="(max-width: 600px) 100vw, 50vw" 
  alt="Duyarlı fotoğraf"
>

Burada tarayıcı, photo-large.jpg dosyasını yalnızca geniş ekranlarda yüklerken, mobil cihazlarda hafif photo-small.jpg ile yetinerek kullanıcının veri trafiğini tasarruf ettirir.

Resimlerle Çalışırken Sık Yapılan Hatalar

alt eksikliği. Bu, erişilebilirlik standartlarının (WCAG) ihlalidir ve SEO performansını düşürür.
Unutulan width ve height. Sayfa yüklenirken içeriğin "zıplamasına" neden olur; bu, kullanıcıları rahatsız eder ve arama motorları tarafından cezalandırılır.
Hatalı dosya yolları. "Bozuk" resimlerin en yaygın nedenidir. Klasör yapısını ve ../ kullanımının doğruluğunu kontrol edin.
Çok büyük dosyaların kullanılması. 200x200 piksellik bir küçük resim için 5 MB ağırlığında bir fotoğraf yüklemek kabul edilemez. Siteye yüklemeden önce her zaman resimleri sıkıştırın.
Resim içindeki metin. Önemli metin içeriğini (başlıklar, telefon numaraları) doğrudan resme gömmeyin. Arama motorları resim üzerindeki metni okuyamaz ve kullanıcılar bunu kopyalayamaz.

SSS

Dosya yolunda dosya uzantısını belirtmek gerekir mi? Evet, mutlaka. Tarayıcı, .jpg, .png, .webp vb. dahil olmak üzere dosyanın tam adını bilmelidir.

Resim görüntülenmiyorsa ne yapılmalı? Geliştirici konsolunu kontrol edin (F12 -> Network veya Console). Genellikle src yolundaki bir hatayı işaret eden 404 hatası (dosya bulunamadı) görünecektir. Yolun mevcut HTML dosyasına göre doğru belirtildiğinden emin olun.

Arka plan için <img> etiketi kullanılabilir mi? Hayır. Dekoratif arka planlar için CSS özelliği background-image kullanılmalıdır. <img> etiketi yalnızca anlamsal değeri olan içerikler için tasarlanmıştır.