Web sitelerini yaparken hem okunabilirliği arttırmak hem de görselliği arttırarak kullanıcı etkileşimini iyileştirmek için sayfalarımıza resim, video vb.. eklemeler yaparız. Sadece düz metinlerden oluşan sayfalar tasarım açısından şık durmazlar. Ayrıca yapılan birçok araştırmada da sitenizi ziyaret eden kullanıcıların düz metinden oluşan sayfalarda çok fazla zaman geçirmeden sayfanızı terk ettiği belirtiliyor. İşte bu yazımızda html resim ekleme kodlarını nasıl yazacağımızı öğreneceğiz.
HTML RESİM EKLEME
⇒ Sayfalarımıza resim eklemek için <img> etiketini kullanıyoruz. Sadece bu etiketi kullanmamız yetmiyor. Bu etiket ile birlikte bazı attribute’larıda kullanmamız gerekiyor.
Aşağıdaki attribute’ları kullanarak html resim ekleme işlemlerimizi gerçekleştiriyoruz.
► src attribute : Bu attribute ile resim nerde bulunuyor ise onun yolunu belirtiyoruz.
En basit haliyle html resim ekleme kodu
|
1 2 3 |
<img src="resim yolu"> |
Resmimiz bilgisayarda da yüklü olabilir internet ortamında da. Duruma göre resmin yolunu belirtmemiz gerekiyor.
İki durum için de ayrı ayrı örnek verelim.
|
1 2 3 4 5 |
<img src="img/resim.jpg"> <img src="http://www.internetadresi.com/resim.jpg"> |
Bu şekilde resmin yolunu belirtmiş oluyoruz.
► alt attribute : Eğer resmin yolu yanlış yazılmış veya resim herhangi bir nedenden dolayı görüntülenemezse, resmin yerine alt attribute’una yazmış olduğumuz metin görüntülenecektir.
Örneğin resmimiz bir araba resmi ise, alt attribute’una araba ile ilgili birşeyler yazarsak resim görüntülenemediğinde alt attribute’unun değeri sayesinde neyle ilgili bir resim olduğunu anlayabiliriz.
Mümkün olabildiğince alt attribute’unu kullanmaya çalışın. Çünkü arama motorlarının resim hakkında bilgi sahibi olması için alt attribute’u gerekiyor. Böylece arama motorlarında daha üst sıralarda çıkabiliriz.
Alternatif metin ile resim ekleme kodu
|
1 2 3 |
<img src="resim yolu" alt="resme alternatif yazı"> |
► width ve height attribute’ları : Bu attribute’lar ile resimlere genişlik ve yükseklik değerleri verebiliriz.
Boyutları belirlenmiş resim ekleme kodu
|
1 2 3 |
<img src="resim yolu" alt="resme alternatif yazı" width="200" height="150"> |
Burada resmin genişliğini 200px, yüksekliğini ise 150px yapmış olduk.
Önemli : Bu değerleri verdiğimiz takdirde sayfalarımızın yüklenme süresi olumlu anlamda etkilenecektir. Bunlar belirtilmediğinde resimlerin genişlik ve yükseklik değerleri bilinmediğinden web sayfası biraz daha geç yüklenebilir.
► title attribute : Bu attribute ile resim hakkında ek bilgiler tanımlayabiliriz. Resmin üzerine fare ile gelindiğinde bu bilgiler bir tooltip ile kullanıcıya gösterilir.
Title attribute’u ile resim ekleme kodu
|
1 2 3 |
<img src="resim yolu" title="Burda resmin üzerine fare ile geldiğimizde title değerini bize tooltip ile gösterecektir."> |
Burada resmin üzerine fare ile geldiğimizde title değerini bize tooltip ile gösterecektir.
Önemli : .gif uzantılı yani hareketli resimler de html sayfalarında kullanılabilir.
Önemli : Resimler yüklenirken biraz zaman aldığı için web sitelerinin açılış hızlarını etkilerler. Bu yüzden sayfalarımızda kullanacağımız resim sayısına dikkat etmeliyiz.
Önemli : Yüksek çözünürlükteki resimler sitemizin açılış hızını olumsuz etkileyeceği için olabildiğinde resimleri optimize ederek kullanmaya çalışmalıyız. Tabi burada optimize ederken resmin kalitesini de çok fazla bozmamak gerekiyor.
<picture> ETİKETİNİ KULLANMA
Bu etiket ile cihazların (bilgisayar, tablet, telefon vb..) ekran boyutuna göre daha esnek bir şekilde Html sayfalarımıza resimleri ekleyebiliriz.
Kullanımı şu şekilde;
|
1 2 3 4 5 6 7 |
<picture> <source media="(min-width: 768px)" srcset="orta-resim.jpg"> <source media="(min-width: 480px)" srcset="kucuk-resim.jpg"> <img src="buyuk-resim.jpg"> </picture> |
► Gördüğünüz gibi öncelikle <picture> etiketi yazılır ve sonrasında <source> etiketi ile resimler eklenir.
► <source> etiketinin media attribute’unda koşul olarak ekran genişliklerini veriyoruz. srcset attribute’unda ise bu şart sağlanırsa hangi resim kullanılacaksa o resmin yolunu yazıyoruz.
► Son olarak en alta <img> etiketiyle resmin orjinalini yazıyoruz. Çünkü olur da tarayıcı <picture> etiketini desteklemezse <img> etiketi ile verdiğimiz resim görüntülenecektir.
Şimdi de yukarda yazdığımız kodun ne anlama geldiğine bakalım. Burda diyoruz ki;
► Eğer ekran genişliği 768px den büyükse, orta-resim.jpg resmini görüntüle.
► Eğer ekran genişliği 480px ile 768px arasında ise, kucuk-resim.jpg resmini görüntüle.
► Eğer tarayıcı <picture> etiketini desteklemiyorsa, buyuk-resim.jpg resmini görüntüle.
Evet html resim ekleme işlemleri bu kadar.
Web sayfalarımıza resim ekledikten sonra Css özelliklerini kullanarak çok daha etkili sayfalar oluşturabiliriz. Resim eklerken kullandığımız Css özellikleri hakkında bilgi edinmek isterseniz Css Background Kullanımı yazımı okuyabilirsiniz.
Eklediğimiz resimlere nasıl link verdiğimizi öğrenmek isterseniz Html Resme Link Verme yazımı okuyabilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Html Buton Ekleme – Bağlantılı Html Buton Oluşturma
Yeni bir yazımda görüşmek üzere.
