HTML Resim Ekleme Rehberi: Web Sitenize Fotoğraf Nasıl Eklenir?

Web Sitelerinde Görsel Kullanımının Önemi

Web sitenizin kullanıcı deneyimini (UX) artırmak, ziyaretçilerin sayfada kalma süresini uzatmak ve arama motorlarında üst sıralara tırmanmak için görseller kritik bir rol oynar. Sadece düz metinden oluşan bir sayfa kullanıcıyı sıkar; doğru yerleştirilmiş bir HTML fotoğraf ekleme yöntemi ise içeriğinizi canlandırır.

Bu rehberde, internet sitenize nasıl html ile resim ekleme işlemi yapacağınızı, kullanmanız gereken temel resim kodu yapısını ve arama motorlarının görsellerinizi seveceği SEO tekniklerini adım adım inceleyeceğiz.

HTML Resim Ekleme Kodu Nedir? 

HTML'de sayfaya bir görsel yerleştirmek için (image) etiketi kullanılır. Bu etiket, kendi kendini kapatan (kapanış etiketi olmayan) bir yapıya sahiptir.

Temel Resim Kodu Yapısı

Bir web sayfasına resim eklemek için en temel html resim ekleme kodu şu şekildedir:

<img src="resim-adresi.jpg" alt="Resmin Açıklaması">

• src (Source / Kaynak): Resmin internet üzerindeki veya sunucunuzdaki dosya yolunu belirtir.

• alt (Alternative Text / Alternatif Metin): Resim herhangi bir sebeple yüklenemezse görünecek olan ve ekran okuyucuların okuduğu metindir (SEO için hayati önem taşır).

Adım Adım HTML ile Resim Ekleme Yöntemleri

Görselleri projenize dahil ederken iki farklı dosya yolu yöntemi kullanabilirsiniz: Yerel (Lokal) kaynaklar ve Harici (Uzak) kaynaklar.

Yerel Bilgisayardan/Sunucudan Resim Ekleme

Eğer resim web sitenizin dosyalarıyla aynı klasörde veya bir alt klasörde yer alıyorsa, göreceli (relative) yol kullanılır.

• Aynı Klasördeyse:

  <img src="logo.png" alt="Şirket Logosu">
  

• "images" Adlı Bir Alt Klasördeyse:

  <img src="images/blog-gorseli.jpg" alt="HTML Eğitimi Görseli">
  

İnternetteki Başka Bir Siteden (URL ile) Resim Ekleme

İnternette açık kaynaklı veya linkine sahip olduğunuz bir görseli doğrudan URL adresiyle sitenize çekebilirsiniz.

<img src="https://ornek.com/gorseller/manzara.jpg" alt="Doğa Manzarası">

Not: Başka sitelerin görsellerini doğrudan linklemek (Hotlinking), karşı sitenin band genişliğini tükettiği için etik dışı kabul edilir ve link kırılması riskine sahiptir. Görselleri kendi sunucunuzda barındırmanız önerilir.

Farklı Formatlarda Görsel Kullanımı: HTML PNG Ekleme

HTML içerisinde .jpg, .jpeg, .gif, .webp formatlarında olduğu gibi şeffaf arka plana sahip html png ekleme işlemini de aynı kod yapısıyla yapabilirsiniz:

<img src="buton-ikonu.png" alt="Giriş Yap Butonu İkonu">

Resim Boyutlandırma ve Öznitelikler (Attributes)

Görsellerin sayfada ne kadar yer kaplayacağını ve nasıl davranacağını belirlemek için belirli nitelikler ekleriz.

• width (Genişlik) ve height (Yükseklik): Resmin boyutlarını piksel (px) cinsinden belirler.

• title (Başlık): Fare imleci resmin üzerine geldiğinde açılan küçük ipucu metnini gösterir.

<img src="manzara.jpg" alt="Göl Manzarası" width="600" height="400" title="Yedi Göller Tabiat Parkı">

Önemli İpucu: Modern web tasarımında (Responsive / Mobil Uyumlu) resim boyutlarını HTML yerine CSS ile yönetmek çok daha sağlıklıdır: style="max-width: 100%; height: auto;" kullanımı resmin ekran boyutuna göre otomatik küçülmesini sağlar.

Görsel SEO'su: Google'da Görsellerle Öne Çıkın

Sadece html resim ekleme kodunu bilmek yetmez; bu resimlerin Google Görseller'de indekslenmesini sağlamak sitenize organik trafik çeker.

• Doğru Alt Metin (alt) Kullanımı: Arama motoru botları resimleri "göremez", alt metinleri okur. alt="resim" yazmak yerine alt="kırmızı spor araba modeli" gibi açıklayıcı olun.

• Dosya İsimlerini Optimize Edin: Kamera çıktısı olan DCIM001.jpg yerine anahtar kelime içeren html-resim-ekleme-kodu.jpg şeklinde isimlendirme yapın. Kelimeler arasına alt çizgi (_) yerine tire (-) koyun.

• WebP Formatını Tercih Edin: PNG ve JPG formatlarına göre çok daha yüksek sıkıştırma ve hız sunan yeni nesil .webp formatı, sayfa hızınızı (Core Web Vitals) artırır.

Sıkça Sorulan Sorular (SSS)

HTML resim ekleme kodu neden çalışmıyor? En yaygın sebebi src içerisindeki dosya yolunun veya dosya uzantısının (.png yerine .PNG veya .jpg yerine .jpeg yazılması gibi) hatalı olmasıdır. Dosya adında Türkçe karakter veya boşluk olmamasına dikkat edin.

Resme nasıl tıklanabilir link ekleyebilirim? etiketini bir (link) etiketinin içerisine alarak resmi tıklanabilir yapabilirsiniz:

<a href="https://imgr.tr"><img src="logo.png" alt="IMGR Logo">a>