Resimler ve Nesneler için HTML IMG Etiketinin Kullanımı
HTML IMG etiketi, bir web sayfasındaki resimlerin ve diğer statik grafiksel nesnelerin eklenmesini yönetir. Bu yaygın etiket, ilgi çekici ve görüntü odaklı bir web sitesi tasarlama yeteneğinize zenginlik katan çeşitli zorunlu ve isteğe bağlı özellikleri destekler.
Tam olarak oluşturulmuş bir HTML IMG etiketinin bir örneği şuna benzer:
Gerekli IMG Etiketi Nitelikler
SRC. Bir web sayfasında görüntülenecek bir resim elde etmek için ihtiyacınız olan tek özellik SRC özniteliğidir. Bu özellik, görüntülenecek görüntü dosyasının adını ve yerini tanımlar.
ALT. Geçerli XHTML ve HTML4 yazmak için, ALT özelliği de gereklidir. Bu özellik, görsel olmayan tarayıcılara resmi tanımlayan metin sağlamak için kullanılır. Tarayıcılar alternatif metni farklı şekillerde gösterir. Bazıları, farenizi görüntü üzerine koyduğunuzda bir pop-up olarak görüntüler, diğerleri görüntüyü sağ tıklattığınızda özelliklerde görüntülenir ve bazıları hiç görüntülenmez.
Web sayfasının metni ile alakalı olmayan veya önemli olmayan resim hakkında ek bilgi vermek için alt metni kullanın. Ancak, ekran okuyucularında ve diğer salt metin tarayıcılarında, metnin sayfadaki metnin geri kalanıyla birlikte okunacağını unutmayın. Karışıklığı önlemek için, yalnızca "logo" yerine "Web Tasarım ve HTML Hakkında" yazan açıklayıcı alt metni kullanın.
HTML5'te, ALT özelliği her zaman gerekli değildir, çünkü daha fazla açıklama eklemek için bir altyazı kullanabilirsiniz. Tam açıklamayı içeren bir kimliği belirtmek için ARIA-DESCRIBEDBY özelliğini de kullanabilirsiniz.
Resim, bir web sayfasının veya simgelerin üst kısmındaki grafik gibi tamamen dekoratifse, alt metin de gerekli değildir. Ancak emin değilseniz, her durumda alt metni ekleyin.
Önerilen IMG Öznitelikleri
GENİŞLİK ve YÜKSEKLİK . Her zaman WIDTH ve HEIGHT özelliklerini kullanmanın alışkanlığına girmelisiniz. Ve her zaman gerçek boyutu kullanmalı ve görüntülerinizi tarayıcı ile yeniden boyutlandırmamalısınız.
Bu nitelikler sayfanın oluşturulmasını hızlandırır, çünkü tarayıcı görüntü için tasarıma yer ayırabilir ve tüm görüntünün indirilmesini beklemek yerine içeriğin geri kalanını indirmeye devam edebilir.
Diğer Faydalı IMG Öznitelikleri
TITLE . Bu özellik, herhangi bir HTML öğesine uygulanabilecek global bir özelliktir. Üstelik TITLE özniteliği, görüntü hakkında daha fazla bilgi eklemenizi sağlar.
Çoğu tarayıcı TITLE özelliğini destekler, ancak bunu farklı şekillerde yaparlar. Bazıları metni bir açılır pencere olarak gösterirken, diğerleri görüntüyü sağ tıklattığında bilgi ekranlarında görüntüler. Görüntü hakkında ek bilgi yazmak için TITLE özniteliğini kullanabilir, ancak gizli veya görünür olan bu bilgilere güvenmeyin. Arama motorları için anahtar kelimeleri gizlemek için bunu kesinlikle kullanmamalısınız. Bu uygulama artık çoğu arama motoru tarafından cezalandırılıyor.
USEMAP ve ISMAP . Bu iki özellik, istemci tarafındaki () ve sunucu tarafındaki (ISMAP) görüntü haritalarını resimlerinize göre ayarlar.
LONGDESC . Özellik, URL'leri görüntünün daha uzun bir tanımına kadar destekler. Bu özellik, resimlerinizi daha erişilebilir hale getirir.
Onaylanmamış ve Eski IMG Öznitelikleri
Artık HTML5'te bazı özellikler artık kullanılmıyor veya HTML4'te kullanımdan kaldırıldı. En iyi HTML için, bu özellikleri kullanmak yerine başka çözümler bulmalısınız.
BORDER . Özellik, resmin çevresindeki herhangi bir sınırın genişliğini piksel cinsinden tanımlar. HTML4'te CSS lehine kullanımdan kaldırılmıştır ve HTML5'te kullanılmamaktadır.
ALIGN . Bu özellik, metnin içine bir görüntü yerleştirmenize ve metnin etrafına akmasını sağlar. Bir resmi sağa veya sola hizalayabilirsiniz. HTML4'teki float CSS özelliği lehine kullanımdan kaldırılmıştır ve HTML5'te kullanılmamaktadır.
HSPACE ve VSPACE . HSPACE ve VSPACE öznitelikleri yatay boşluk (HSPACE) ve dikey olarak (VSPACE) beyaz boşluk ekler. Grafiğin her iki tarafına da beyaz boşluk eklenir (üst ve alt veya sol ve sağ), böylece sadece bir tarafa yer açmanız gerekiyorsa, CSS'yi kullanmalısınız. Bu nitelikler HTML4'te marj CSS özelliği lehine kullanımdan kaldırılmıştır ve HTML5'te geçerliliğini yitirmişlerdir.
LOWSRC . LOWSRC özniteliği, görüntü kaynağınız çok yavaş yüklendiğinde çok büyük olduğunda alternatif bir görüntü sağlar. Örneğin, web sayfanızda görüntülemek istediğiniz 500 KB'lik bir resminiz olabilir, ancak 500 KB’nin yüklenmesi uzun zaman alır. Böylece, görüntünün çok daha küçük bir kopyasını yaratırsınız, belki de siyah beyaz ya da sadece son derece optimize edilmiş ve bunu LOWSRC özniteliğine yerleştirirsiniz. Daha küçük olan resim ilk önce indirilecek ve görüntülenecektir ve daha büyük görüntü göründüğünde düşük kaynaklı olanın yerini alacaktır.
LOWSRC özniteliği, Netscape Navigator 2.0'a IMG etiketine eklenmiştir. DOM düzey 1'in bir parçasıydı ancak daha sonra DOM düzey 2'den kaldırıldı. Tarayıcı desteği, tüm modern tarayıcılar tarafından desteklendiğini iddia etmesine rağmen, bu özellik için taslak oluşturuldu. HTML4'te kullanımdan kaldırılmamıştır veya HTML5'te eski değildir, çünkü hiçbir şartın resmi bir parçası olmadığından.
Bu özelliği kullanmaktan kaçının ve bunun yerine resimlerinizi hızlı bir şekilde yüklenecek şekilde optimize edin. Sayfa yükleme hızı, iyi Web tasarımının önemli bir parçasıdır ve büyük görüntüler, LOWSRC özelliğini kullansanız bile büyük ölçüde sayfaları yavaşlatır.