HTML’de bir sayfaya resim/fotoğraf eklemek için <img> etiketi kullanılır. Hem URL ile (uzak sunucudan) hem de yerel dosya yolu ile çalışır.

Temel Kullanım

<img src="resim.jpg" alt="Resim açıklaması">

<img> tek başına bir etikettir — kapanışı (</img>) yoktur.

Önemli Özellikler (Attributes)

• src: resmin URL veya dosya yolu (zorunlu).
• alt: alternatif metin — resim yüklenemezse veya ekran okuyucu için (zorunlu sayılır).
• width / height: piksel cinsinden boyut.
• title: hover edildiğinde gösterilen kısa açıklama.

İki Yöntem: URL vs Yerel

1. URL ile (Uzak)

<img src="https://www.burakbayram.com/wp-content/uploads/2026/foto.jpg" alt="Manzara">

2. Yerel Dosya

HTML dosyasıyla aynı klasörde:

<img src="foto.jpg" alt="Manzara">

Alt klasörde:

<img src="images/foto.jpg" alt="Manzara">

2026 — Modern <img> Best Practices

• loading=”lazy”: ekrandaki konumuna gelene kadar yüklenmez. Sayfa hızı +.
• decoding=”async”: tarayıcı arka planda decode eder.
• srcset: farklı ekran çözünürlükleri için farklı resim dosyaları.
• sizes: farklı viewport’lar için boyut.
• WebP / AVIF formatları: JPG/PNG’den %50-80 daha küçük.
• <picture> etiketi: art-direction ve format fallback.

Modern Örnek

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Manzara"
       width="800" height="600"
       loading="lazy" decoding="async">
</picture>