🗞️ Manisa Haber

IMG kodu nedir?

15 Haziran 2025 Manisa Haber

IMG Kodu Nedir ve Neden Önemlidir?

Web sitelerinde görselleri göstermenin temel taşı IMG etiketidir. Bir web sayfasında bir resmi görüntülemek istediğinde, tarayıcıya hangi dosyayı yüklemesi ve nerede göstermesi gerektiğini söyleyen komuttur. Basitçe söylemek gerekirse, görselin web'deki adresini ve bazı ek bilgilerini içeren bir "talimat"dır.

Deneyimlerime göre, IMG kodunu doğru kullanmak sitenin hem görünürlüğü hem de kullanıcı deneyimi açısından fark yaratır. Yanlış kullanılan bir IMG kodu, resmin yüklenmemesi, sitenin yavaşlaması veya arama motorları tarafından içeriğin yanlış anlaşılması gibi sorunlara yol açabilir. Bu yüzden bu etiketin temel bileşenlerini bilmek çok önemli.

Temel IMG Kodu Yapısı ve Özellikleri

Bir IMG etiketinin en temel hali şöyledir:

<img src="resim_dosyasi.jpg" alt="Resim Açıklaması">

Burada:

  • src (source): Bu, resmin dosya yolunu belirtir. Bu, göreceli bir yol olabilir (örn. images/logo.png - yani `img` klasörü içindeki `logo.png`) veya mutlak bir URL olabilir (örn. https://www.siteadi.com/resimler/banner.jpg). Resmin doğru bir şekilde yüklenebilmesi için bu yolun hatasız olması gerekir. Yanlış bir yol, tarayıcının resmi bulamamasına neden olur.
  • alt (alternative text): Bu özellik çok kritiktir. Erişilebilirlik ve SEO için olmazsa olmazdır. Eğer resim yüklenmezse veya görme engelli bir kullanıcı siteyi ziyaret ederse, bu metin ekranda görüntülenir veya okunur. Dosya adı gibi kuru bir şey yerine, resmin neyi temsil ettiğini açıkça anlatan bir metin yazmalısın. Örneğin, "logo.png" yerine "Ana Sayfa İçin Şirket Logosu" yazmak çok daha bilgilendirici. Arama motorları da bu metni okuyarak resmin içeriğini anlar.

Ek Özellikler ve Kullanım İpuçları

IMG etiketi sadece `src` ve `alt` ile sınırlı değildir. Site tasarımını ve performansını iyileştirmek için kullanabileceğin başka özellikler de bulunur:

  • width ve height: Bu öznitelikler, resmin sayfa üzerinde kaplayacağı alanı belirtmek için kullanılır. Genellikle piksel (`px`) cinsinden veya yüzde (`%`) olarak belirtilir. Örneğin: width="300" height="200". Bu değerleri belirtmek, tarayıcının sayfayı oluştururken resmi yüklemeden önce o alanın ne kadar yer kaplayacağını bilmesini sağlar. Bu, sayfanın aniden kaymasını önler ve kullanıcı deneyimini iyileştirir. Ancak, resmi kırpmadan veya kalitesini bozmadan bu değerleri kullanmaya dikkat etmelisin. Genellikle CSS ile boyutlandırma yapmak daha esnek bir çözüm sunar.
  • title: Bu öznitelik, kullanıcı fare imlecini resmin üzerine getirdiğinde gösterilen bir ipucu metni ekler. Örneğin, bir ürün resminin altına title="Ürün Detayları için Tıklayın" eklemek, kullanıcıya ek bilgi verebilir. Ancak, `alt` kadar önemli değildir ve `alt` ile aynı metni kullanmaktan kaçınmalısın.

Deneyimlerime göre, görsellerin dosya boyutunu optimize etmek de sitenin yüklenme hızını ciddi şekilde etkiler. JPEG, PNG ve GIF gibi farklı formatların uygun olduğu durumlar vardır. Örneğin, fotoğraflar için JPEG, şeffaf arka planlı grafikler veya logolar için PNG daha uygundur. WebP gibi daha modern formatlar da daha iyi sıkıştırma oranları sunarak dosya boyutunu düşürebilir.

Performans ve SEO için İpuçları

Web sitelerinin hem kullanıcılar hem de arama motorları için hızlı ve anlaşılır olması gerekir. IMG kodunu kullanırken şunlara dikkat etmek önemlidir:

  • Görsel Optimizasyonu: Resimlerinizi web için optimize edin. Photoshop, GIMP gibi araçlar veya TinyPNG, Compressor.io gibi çevrimiçi araçlarla dosya boyutunu küçültün. 200KB'nin altındaki görseller genellikle iyi performans gösterir.
  • Anlamlı Alt Metinler: Daha önce de belirttiğim gibi, `alt` metinleri hem erişilebilirlik hem de SEO için hayati önem taşır. Anahtar kelimeleri doğal bir şekilde kullan, ama anahtar kelime doldurmaktan kaçın.
  • Doğru Dosya Adları: Resim dosyalarınızın adlarını da anlamlı tut. IMG_001.jpg yerine kirmizi-bisiklet.jpg gibi adlar kullanmak, hem sizin için düzenlemeyi kolaylaştırır hem de arama motorlarına ek ipuçları verir.
  • Lazy Loading (Tembel Yükleme): Büyük görsellerin olduğu sayfalarda, kullanıcı sayfayı kaydırıp görsele yaklaştıkça yüklenmesini sağlayan lazy loading teknikleri (genellikle JavaScript ile) sayfanın ilk açılış hızını artırır. loading="lazy" HTML özniteliği de modern tarayıcılarda bu işlevi görebilir.

Bu noktalara dikkat ederek, sitene eklediğin görsellerin hem estetik hem de işlevsel olarak en iyi sonucu vermesini sağlayabilirsin.