Görseller konuşmaz ama HTML’de çok şey anlatır
Merhaba sevgili kod sihirbazı 🧙♂️💻
Bugün HTML dünyasının en sessiz ama en etkili karakterlerinden biriyle baş başayız: <img> etiketi.
Bu etiket konuşmaz, kapanış etiketi yoktur, JavaScript gibi drama yapmaz… ama bir sayfanın kaderini değiştirebilir.
Yanlış kullanılırsa:
- ❌ Kırık görsel ikonu
- ❌ Yavaş sayfa
- ❌ SEO’nun sana küsməsi
Doğru kullanılırsa:
- ✅ Profesyonel görünüm
- ✅ Hızlı site
- ✅ Google: “Bu geliştirici işini biliyor” bakışı 😎
Hazırsan başlayalım. Kahveni al ☕, görselleri açıyoruz!
🧱 <img> Etiketi Nedir, Ne Değildir?
<img> etiketi, HTML sayfasına resim eklemek için kullanılır. Ama küçük bir detay var:
<img>etiketi self-closing’dir. Yani kapanış etiketi YOKTUR.
❌ Yanlış kullanım:
<img src="foto.jpg"></img>
✅ Doğru kullanım:
<img src="foto.jpg" alt="Açıklama metni">
🧠 Tarayıcı mantığı:
“Ben bu etiketi gördüm mü? Tamam, görseli basıyorum.”
🔑 Temel Özellikler (Attributes) – İşin Mutfağı 🍳
📌 src — Görselin Adresi
src (source), görselin nereden geleceğini söyler.
<img src="images/kedi.jpg" alt="Uyuyan kedi">
📂 Görsel aynı klasördeyse:
<img src="kedi.jpg" alt="Kedi">
🌍 İnternetten geliyorsa:
<img src="https://site.com/kedi.png" alt="Online kedi">
⚠️ İpucu:
- Dosya adı büyük/küçük harfe duyarlıdır (
Kedi.jpg≠kedi.jpg) - Türkçe karakter kullanma (
ç, ğ, ş) → ileride ağlatır 😭
🧠 alt — Sessiz Kahraman
alt metni:
- Ekran okuyucular için
- SEO için
- Görsel yüklenmezse kullanıcı için
<img src="kopek.jpg" alt="Topla oynayan golden retriever köpek">
❌ Kötü alt metni:
alt="resim1"
✅ İyi alt metni:
alt="Bilgisayar başında çalışan yazılımcı"
📢 Kural:
Alt metni, görseli göremeyen birine anlatır gibi yaz.
📐 width ve height — Ölçü Meselesi
<img src="manzara.jpg" alt="Dağ manzarası" width="400" height="250">
Ama modern dünyada genelde HTML değil, CSS kullanırız:
img {
max-width: 100%;
height: auto;
}
📱 Bu ne işe yarar?
- Mobil uyum
- Taşma yok
- Responsive tasarım ❤️
⚡ Performans İpuçları – Siteyi Uçur 🚀
💤 loading="lazy"
<img src="buyuk-gorsel.jpg" alt="Uzun sayfa görseli" loading="lazy">
🧠 Tarayıcı diyor ki:
“Kullanıcı aşağı inerse yüklerim.”
Sonuç:
- Daha hızlı açılan sayfa ⚡
- Daha mutlu kullanıcı 😄
🗜️ Görsel Boyutu Küçült
HTML küçültmez, sadece gösterir.
❌ 5000px görsel koyup width=300 demek
✅ Görseli optimize et:
- WebP kullan
- TinyPNG, ImageOptim gibi araçlar
🧩 <figure> ve <figcaption> ile Profesyonellik
<figure>
<img src="orman.jpg" alt="Sisli orman manzarası">
<figcaption>Sabah 6, kahve yok, motivasyon %3 🌫️</figcaption>
</figure>
🎯 Ne kazandın?
- Semantic HTML
- Daha iyi SEO
- Anlamlı yapı
🚫 En Sık Yapılan Hatalar (Yapma Bunları 🙃)
- ❌
altyazmamak - ❌ Görseli arka plan sanmak
- ❌ Her yere PNG basmak
- ❌ Dosya yollarında kaos
🧪 Mini Pratik Örnek
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Img Etiketi Deneme</title>
<style>
img { max-width: 100%; height: auto; }
</style>
</head>
<body>
<h1>Profil Kartı</h1>
<img src="profile.jpg" alt="Gülümseyen yazılımcı">
</body>
</html>
🎯 Özetin Özeti
<img>kapanmazsrcadresi,altanlamı verir- CSS ile kontrol et
- Performansı unutma
- Görsel = içerik
🚀 Son Söz
HTML’de görsel koymak kolaydır.
Ama doğru, hızlı, erişilebilir ve anlamlı koymak seni geliştirici yapar 😎
