HTML’de “<img>” Etiketi
Web sitelerinde görseller, bir mesajı güçlendirmek, bir konuyu daha iyi açıklamak veya kullanıcıların ilgisini çekmek için oldukça önemlidir. Ancak, bir görseli rastgele eklemek yerine, dikkat edilmesi gereken bazı temel kurallar vardır. Bu bölümde, HTML’de resim eklemeyi, uygun formatları seçmeyi ve web için resim optimizasyonunu detaylıca ele alacağız.
HTML’de Resim Eklerken Nelere Dikkat Etmeliyiz?
Bir web sayfasına çeşitli sebeplerden ötürü resim eklemek isteyebilirsiniz. Zira kelimelerin kifayetsiz kaldığı yerlerde bir resim ile imdadımıza yetişebilir. Zaten HTML belgelerinde de metinlerin yanında bolca resim kullanılır. Ancak HTML belgelerine görselleri seçerken ve hazırlarken göz önünde bulundurulması gereken birkaç şey vardır:
- Alaka: Eklediğiniz resim, yazıyla doğrudan ilgili olmalı. Yazının içeriğine katkı sağlamayan görseller, okuyucunun dikkatini dağıtabilir.
- Anlam katma: Resimler, yazıyı daha anlaşılır kılmak için kullanılmalıdır. Örneğin, bir yemek tarifi anlatılırken yemeğin bitmiş halinin görseli yazıyı daha etkili hale getirir.
- Hız ve performans: Gereksiz resim kullanımı, web sitenizin yüklenme hızını yavaşlatabilir. Özellikle mobil kullanıcılar için bu büyük bir sorun olabilir.
- Resim optimizasyonu: Web performansını artırmak için görselleri optimize etmek oldukça önemlidir. İşte dikkat edilmesi gerekenler:
- Dosya boyutunu küçültme: Yüksek çözünürlüklü görselleri Photoshop, TinyPNG, veya benzeri araçlarla sıkıştırarak boyutlarını küçültün.
- Doğru boyutlandırma: Resimleri sayfada kullanılacak boyuta uygun şekilde kırpın veya yeniden boyutlandırın. Örneğin, bir görsel 200×200 piksel olarak gösterilecekse, gereksiz yere 4000×4000 piksel bir dosya kullanmayın.
- Lazy loading (Geç Yükleme): Tarayıcıya, yalnızca kullanıcı ekranında görünen resimleri yüklemesini söylemek için
loading="lazy"özelliğini kullanabilirsiniz. Bu özellik, sayfanın daha hızlı yüklenmesini sağlar:
Yaygın Kullanılan Resim Formatları
Aşağıdaki tabloda Chrome, Edge, Firefox, Safari, Opera gibi tarayıcılarda desteklenen en yaygın görüntü dosyası türleri derlenmiştir:
| Kısaltma | Dosya Formatı | Dosya Uzatısı |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
HTML’de Resim Ekleme
HTML’de bir resmi sayfanıza eklemek için <img> etiketi kullanılır. Bu etiketin sözdizimi şu şekildedir:
<img src="resim-dosyasi.jpg" alt="Resmin açıklaması">src(kaynak): Görsel dosyasının yolunu belirtir.- Eğer resim HTML dosyası ile aynı klasörde ise:
src="resim.dosyauzantısı" - Eğer resim farklı bir klasörde ise:
src="/klasorAdi/resim.dosyauzantısı" - Eğer resim başka bir web sitesinden çekiliyor ise:
src="https://site.com/resim.dosyauzantısı"
- Eğer resim HTML dosyası ile aynı klasörde ise:
alt(alternatif metin): Resim yüklenemezse kullanıcıya gösterilen açıklama metnidir. Ayrıca, ekran okuyucular bu metni okuyarak görme engelli kullanıcıların resmi anlamasını sağlar. Ki arama motorları daaltözniteliği aracılığıyla ilgili resim hakkında bilgi edinirler.
❗<img> etiketi boş bir elementtir, yani kapanış etiketi (</img>) yoktur. Bu nedenle, yalnızca açılış etiketi kullanılır.
<html>
<body>
<h2>Resim imajı</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Quokka_family.jpg/800px-Quokka_family.jpg" alt="A family of
quokka" title="Quokkalar evcil kedi ile aynı büyüklüktedir. Kangurugiller familyasındaki diğer keseli hayvanlardan kangurular ve valabiler ile otçul olarak beslenir ve geceleri hareket eder." />
</body>
</html>HTML <img> Etiketinin Öznitelikleri
src: Resmin kaynağını belirtir.alt: Alternatif metin sağlar, erişilebilirlik için kullanılır.width: Resmin genişliğini piksel cinsinden ayarlar.height: Resmin yüksekliğini piksel cinsinden ayarlar.title: Fareyle üzerine gelindiğinde görünen metni belirtir.loading: Resmin yüklenme davranışını belirler (lazyveyaeager).crossorigin: Çapraz alan bağlantı politikasını ayarlar.referrerpolicy: Yönlendirme bilgilerini nasıl göndereceğinizi kontrol eder.decoding: Resmin tarayıcı tarafından nasıl çözüleceğini belirler.ismap: Resmi sunucu tarafı harita olarak işaretler.usemap: Resmi istemci tarafı bir harita ile ilişkilendirir.
Bu öznitelikleri kullanırken aşağıdaki tablodan fayfalanabilirsiniz:
| Öznitelik | Açıklama | Önem Durumu |
|---|---|---|
src | Resmin yolunu belirtir | Zorunlu |
alt | Alternatif metin sağlar | Önerilir |
width/height | Resmin boyutlarını ayarlar | İsteğe Bağlı |
title | Açıklama sağlar | İsteğe Bağlı |
loading | Yükleme davranışını kontrol eder | Performans İçin |
crossorigin | Çapraz alan bağlantılarını yönetir | Harici Resimlerde |
referrerpolicy | Yönlendirme bilgisini kontrol eder | İsteğe Bağlı |
decoding | Resim çözümleme yöntemini belirler | Performans İçin |
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Quokka_family.jpg/800px-Quokka_family.jpg"
alt="Bir quokka ailesi resmi"
width="800"
height="533"
title="Mutlu bir quokka ailesi"
loading="lazy"
crossorigin="anonymous"
referrerpolicy="no-referrer"
decoding="async">
❗ Resmi link olarak kullanmak için <a> etiketinden faydalanılır. Bu durumda <a> etiketi, <img> etiketini kapsayacak şekilde yazılır:
<!DOCTYPE html>
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
<h1>Bu bir başlık</h1>
<p>Bu bir paragraf</p>
</body>
</html>