HTML resim ekleme (<img>)

Question

Resim eklemek için etiketini kullanıyorum ama resimler sayfada görünmüyor. Resimlerin doğru görüntülenmesi için hangi özellikleri eklemem gerekiyor? Ayrıca resim boyutlandırmayı nasıl yapabilirim?

Answer 1

# HTML Resim Ekleme () Rehberi

🌐 Görsel Zenginlik: Web Sayfalarına Resim Ekleme Sanatı

Web sayfalarınızı sadece metinlerle sınırlamayın! HTML resim ekleme, sitenizi görsel olarak zenginleştirmenin ve kullanıcı deneyimini iyileştirmenin temel yollarından biridir. Bu rehberde, <img> etiketini kullanarak web sayfalarınıza nasıl resim ekleyeceğinizi öğreneceksiniz.

📸 Etiketi Nedir?

<img> etiketi, HTML'de resim eklemek için kullanılan kendinden kapanan bir etikettir. Diğer HTML etiketlerinden farklı olarak kapanış etiketi (</img>) gerektirmez.

🛠️ Temel Kullanım ve Zorunlu Özellikler

🎯 Gerekli Özellikler:

• 📁 src (source): Resmin yolunu belirtir
• 📝 alt (alternative text): Resim yüklenemediğinde görünecek alternatif metin

Örnek Kullanım:

<img src="resimler/kedi.jpg" alt="Sevimli bir kedi">

📍 Resim Yolları (src) - 3 Farklı Yöntem

• 📂 Yerel Dosya: src="images/foto.jpg"
• 🌐 URL ile: src="https://site.com/resim.jpg"
• 📁 Klasör Dışı: src="../profil-foto.png"

🎨 İsteğe Bağlı Özellikler

• 📏 width & height: Resim boyutlarını belirler
• 🏷️ title: Fare üzerine gelindiğinde görünen açıklama
• 🎭 loading: Yükleme davranışını kontrol eder ("lazy" önerilir)

Gelişmiş Örnek:

<img src="manzara.jpg" alt="Dağ manzarası" width="800" height="600" title="Harika bir manzara" loading="lazy">

⚡ En İyi Uygulamalar

• ✅ Alt metinleri asla atlamayın - Erişilebilirlik için kritiktir
• ✅ Boyutları belirleyin - Sayfa düzeninin kaymasını önler
• ✅ Resimleri optimize edin - Yükleme sürelerini kısaltır
• ✅ Lazy loading kullanın - Performansı artırır
• ❌ Aşırı büyük resimler kullanmayın
• ❌ Telif hakkı olan resimleri izinsiz kullanmayın

🚀 Pratik Örnekler

1. Basit Profil Resmi

<img src="profil.jpg" alt="Kullanıcı profil fotoğrafı" width="150" height="150">

2. Dış Kaynaktan Logo

<img src="https://firma.com/logo.png" alt="Firma Logosu" width="200">

3. Optimize Edilmiş Galeri Resmi

<img src="urunler/telefon.jpg" alt="Yeni model akıllı telefon" width="400" height="300" loading="lazy" title="En yeni teknoloji">

💡 İpucu: Resimlerinizin web uyumlu formatlarda (JPEG, PNG, WebP) olduğundan emin olun ve boyutlarını ihtiyaca göre optimize edin.

Artık <img> etiketini kullanarak web sayfalarınıza profesyonel görünümlü resimler ekleyebilirsiniz. Unutmayın, doğru kullanılan görseller kullanıcı deneyimini önemli ölçüde iyileştirir! 🎉