HTML Görseller (Images)

Görseller, web sayfalarına görsel zenginlik katarak kullanıcı deneyimini iyileştiren önemli unsurlardır. HTML’de görselleri web sayfalarınıza eklemek için <img> etiketi kullanılır. Bu etiket, kaynak dosyasını ve bazı temel özellikleri belirterek görselin web sayfasında nasıl görüneceğini tanımlar.

1. Görsel Ekleme (Basic Syntax)

Bir görseli web sayfanıza eklemek oldukça basittir. Aşağıdaki gibi bir kod yapısı kullanılır:

<img src="gorsel-dosyasi.jpg" alt="Görsel Açıklaması">

• src: Görselin dosya yolunu veya URL’sini belirtir. Bu, web tarayıcısının görseli yüklemesi için gerekli olan konumdur.
• alt: Alternatif metin anlamına gelir ve görselin yüklenemediği durumlarda kullanıcıya gösterilir. Ayrıca, arama motorları ve ekran okuyucular için önemli bir bilgidir.

2. Görsel Boyutlandırma

Görselin boyutlarını ayarlamak için width ve height özellikleri kullanılır. Bu özellikler, görselin genişlik ve yüksekliğini piksel (px) veya yüzde (%) cinsinden ayarlamanıza olanak tanır.

<img src="gorsel-dosyasi.jpg" alt="Görsel Açıklaması" width="300" height="200">

• width: Görselin genişliğini belirler.
• height: Görselin yüksekliğini belirler.

3. Responsive Görseller

Modern web tasarımında, görsellerin tüm cihazlarda doğru şekilde görüntülenebilmesi için responsive (duyarlı) olmaları önemlidir. Bu amaçla CSS ile görsellerin esnek hale getirilmesi sağlanır:

img {
  max-width: 100%;
  height: auto;
}

Bu CSS kodu, görselin bulunduğu alanın genişliğini aşmamasını ve orantılı olarak yeniden boyutlandırılmasını sağlar.

4. Görsellere Başlık (title) Ekleme

Görsellere açıklayıcı başlık eklemek için title özelliği kullanılır. Bu başlık, fareyle görselin üzerine gelindiğinde görüntülenir.

<img src="gorsel-dosyasi.jpg" alt="Görsel Açıklaması" title="Bu görselin başlığı">

5. SEO ve Görseller

Görsellerin SEO açısından optimize edilmesi, web sitenizin arama motorlarında daha iyi performans göstermesini sağlar. İşte dikkat edilmesi gereken birkaç SEO kriteri:

• alt metni: Arama motorları görselleri doğrudan okuyamaz, ancak alternatif metinleri dikkate alır. Görselin içeriğini açıklayıcı bir alt metni kullanmak, SEO performansını artırır.
• Görsel Dosya Adı: Görsel dosya isimleri açıklayıcı ve anahtar kelimeler içermelidir.
• Görsel Boyutu: Görsellerin boyutu optimize edilmeli, hızlı yüklenmesi sağlanmalıdır. Büyük boyutlu görseller sayfa hızını yavaşlatır, bu da SEO’ya olumsuz etki yapar.

Örnek;

<img src="kedi.jpg" alt="Sarı bir kedi" title="Sevimli sarı kedi" width="500">

Özet

HTML’de görseller, <img> etiketi ile kolayca web sayfalarına eklenir. Görselin kaynağı, alternatif metni ve boyutları belirlenerek kullanıcı deneyimi iyileştirilir. SEO açısından görsellerin optimize edilmesi, web sitenizin arama motorlarındaki sıralamasını olumlu etkiler. Responsive görseller kullanarak tüm cihazlarda uyumlu görüntüler elde etmek de önemlidir.