Düğmelerdeki arka plan gradyanları veya içeriğin ya da sayfanın tamamındaki arka plan resimleri gibi süsleme resimleri sunum amaçlıdır ve CSS ile uygulanmalıdır. Bir resim, bir dokümana bağlam eklediğinde içeriktir ve HTML ile yerleştirilmelidir.
Resimleri eklemenin ana yöntemi, bir resim kaynağına referans veren src
özelliğine sahip <img>
etiketi ve resmi açıklayan alt
özelliğidir.
<img src="images/eve.png" alt="Eve">
Hem <img>
hem de <picture>
öğesindeki srcset
özelliği, her biri yedek resim kaynağına sahip olan ilişkili medya sorgularıyla birden fazla resim kaynağının eklenmesine olanak tanır. Böylece cihazın çözünürlüğü, tarayıcı özellikleri ve görüntü alanı boyutuna göre en uygun resim dosyasının sunulması sağlanır. srcset
özelliği, çözünürlüğe ve sizes
özelliğiyle birlikte tarayıcı görüntü alanı boyutuna göre birden fazla resim sürümü sağlanmasını sağlar.
<img src="images/eve.png" alt="Eve"
srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
sizes="(max-width: 800px) 400px, 800px" />
Bu işlem, <picture>
öğesi ve <source>
alt öğeleri ile de yapılabilir. <img>
, varsayılan kaynak olarak kabul edilir.
<picture>
<source src="images/eve.png" media="(max-width: 800px)" />
<source src="images/eve-xl.jpg" />
<img src="images/eve.png" alt="Eve" />
</picture>
Bu yerleşik HTML duyarlı resim yöntemlerine ek olarak, HTML ayrıca çeşitli özelliklerle resim oluşturma performansının iyileştirilmesini sağlar. <img>
etiketi ve bu nedenle grafik gönderme düğmeleri <input type="image">
, içerik düzeni kaymasını azaltmak amacıyla resmin en boy oranını ayarlamak için height
ve width
özelliklerini içerebilir. lazy
özelliği, geç yüklemeyi etkinleştirir.
HTML, doğrudan <svg>
kullanılarak SVG resimlerinin eklenmesini de destekler. .svg
uzantısına (veya data-uri olarak) sahip SVG resimleri, <img>
öğesi kullanılarak yerleştirilebilir.
Her ön plan resmi en azından src
ve alt
özelliklerini içermelidir.
src
dosyası, yerleştirilen resmin yolu ve dosya adıdır. src
özelliği, resmin URL'sini sağlamak için kullanılır.
Daha sonra, tarayıcı öğeyi getirir ve sayfada oluşturur. Bu özellik <img>
için gereklidir. Özellik olmadan oluşturulacak hiçbir şey yoktur.
alt
özelliği, ekranı göremeyen (arama motorları, yardımcı teknolojiler, hatta Alexa, Siri ve Google Asistan gibi) için resimle ilgili bir açıklama sağlayan alternatif metin sağlar ve resim yüklenmezse tarayıcı tarafından görüntülenebilir. Birçok kullanıcı e-posta uygulamalarındaki resimleri engellediğinden, yavaş ağları veya sınırlı bant genişliğine sahip kullanıcılara ek olarak, alt
metni de HTML e-postalarında son derece yararlıdır.
<img src="path/filename" alt="descriptive text" />
Resim, SVG dosya türündeyse VoiceOver bugs nedeniyle gerekli olan role="img"
özelliğini de ekleyin.
<img src="switch.svg" alt="light switch" role="img" />
alt
için etkili resim açıklamaları yazma
Alt özniteliklerinin amacı, resmin sağladığı tüm alakalı bilgileri sağlayarak kısa ve öz olmaktır. Bununla birlikte, belgedeki diğer içeriklerde gereksiz olan veya yararlı olmayan bilgileri atlamaktır. Metni yazarken üslup, sitenin üslubunu yansıtmalıdır.
Etkili alternatif metin yazmak için, sayfanın tamamını göremeyen bir kişiye okuduğunuzu varsayın. Ekran okuyucu kullanıcıları ve bot'lar, semantik <img>
öğesi kullanılarak öğenin bir resim olduğu konusunda bilgilendirilir. alt
öğesine "Bu bir resim/ekran görüntüsü/fotoğraftır" ifadesini eklemek gereksizdir. Kullanıcının resim olduğunu bilmesine gerek yoktur, ancak resmin ilettiği bilgileri bilmesi gerekir.
Normalde, "Bu, kırmızı şapka takmış bir köpeğin grenli bir resmidir" diyebilirsiniz. Bunun yerine resmin, belgenin geri kalanına göre ne ilettiğini aktarırsınız. Aktardığınız şey, bağlama ve etrafındaki metnin içeriğine göre değişir.
Örneğin, bir köpeğin fotoğrafı, bağlama göre farklı şekillerde açıklanır. Fluffy, Yuckymeat köpek maması ile ilgili bir yorumun yanında avatarsa alt="Fluffy"
yeterlidir.
Fotoğraf, Fluffy'nin bir hayvan barınağı web sitesindeki sahiplendirme sayfasında yer alıyorsa hedef kitle, potansiyel köpek ebeveyni olur. Metin, resimde aktarılan, kullanıcı için alakalı olan ve etrafındaki metinde yinelenmeyen bilgileri açıklamalıdır. alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her
mouth"
gibi daha uzun bir açıklama uygundur. Sahiplendirme sayfasındaki metin genellikle sahiplenilebilir evcil hayvanın türünü, cinsini, yaşını ve cinsiyetini içerir. Bu nedenle bunun alternatif metinde tekrarlanması gerekmez. Ancak köpeğin yazılı biyografisinde muhtemelen saç uzunluğu,
renkler veya oyuncak tercihleri bulunmaz. Resmi açıklamadığımıza dikkat edin: Potansiyel köpek sahibinin, köpeğin içeride mi yoksa açık havada mı olduğunu
ya da kırmızı bir tasması ve mavi tasması olduğundan haberdar olmasına gerek yoktur.
İkonografi için resimleri kullanırken alt
özelliği erişilebilir adı sağladığından resmin açıklamasını değil simgenin anlamını aktarın. Örneğin, büyüteç simgesinin alt özelliği search
. Ev gibi görünen simgenin alternatif metni home
şeklindedir. 5 inç disket simgesinin açıklaması save
şeklindedir. En iyi uygulamaları ve kalıpların karşıtlığını göstermek için kullanılan iki Fluffy simgesi varsa yeşil bereli gülümseyen köpek alt="good"
özelliğini ayarlayabilir, kırmızı şapkalı hırıldayan köpek ise alt="bad"
yazabilir. Bununla birlikte, yalnızca standart ikonografiyi kullanın. İyi ve kötü Fluffy gibi standart olmayan simgeler kullanıyorsanız
açıklama ekleyin ve simgelerin, kullanıcı arayüzü öğelerinizin anlamını anlamanın tek yolu olmadığından emin olun.
Resim bir ekran görüntüsü veya grafikse görünümü açıklamak yerine görselden öğrendiklerinizi yazın. Bir görsel binlerce kelimeye bedel olsa da açıklama, öğrenilen her şeyi kısaca aktarmalıdır.
Kullanıcının zaten bildiği ve içerikte hakkında bilgi verilen bilgileri bağlamdan çıkarın. Örneğin,
tarayıcı ayarlarını değiştirmeyle ilgili bir eğitim sayfasındaysanız ve sayfa, tarayıcı tarayıcısında simgeleri
tıklamakla ilgiliyse ekran görüntüsündeki sayfanın URL'si önemli değildir. alt
konusunu yalnızca elinizdeki konuyla sınırlandırın: ayarlar nasıl değiştirilir? alt
, "Ayarlar simgesi, arama alanının altındaki gezinme çubuğundadır" olabilir. Kullanıcının ekran görüntüsü olduğunu bilmesi ve talimatları yazarken teknoloji yazarının nerede gezindiğini bilmesi gerekmediğinden, "ekran görüntüsü" veya "makine öğrenimi atölyesi" gibi ifadelere yer vermeyin. Görselin açıklaması, görselin neden dahil edildiği bağlamına dayanır.
Ekran görüntüsü, chrome://version/
adresine gidilerek tarayıcı sürüm numarasının nasıl bulunacağını gösteriyorsa URL'yi talimatlar olarak sayfanın içeriğine ekleyin ve resim, çevresindeki metnin içinde olmayan hiçbir bilgi sağlamadığından alt özelliği olarak boş bir dize ekleyin.
Resim ek bilgi sağlamıyorsa veya yalnızca süsleme amaçlıysa özellik, boş bir dize gibi görünmeye devam etmelidir.
<img src="svg/magazine.svg" alt="" role="none" />
MachineLearningWorkshop.com'da yedi ön plan resmi, dolayısıyla da alt özelliklere sahip yedi resim bulunmaktadır: paskalya yumurtası ışık düğmesi, manuel bir simge, Hal ile Eve'in iki biyografik fotoğrafı, üç tane robot, elektrikli süpürge ve tost makinesi. Ön planda bulunan ve dergi gibi görünen resim, yalnızca dekoratif olarak görünür. Sayfanın iki arka plan resmi de vardır. Bunlar aynı zamanda dekoratiftir ve CSS ile eklendiği için erişilemez.
Yalnızca süsleme amaçlı olduğu için dergide boş bir alt
özelliği ve resim tamamen sunum amaçlı bir SVG olduğu için role
değeri none
bulunur. Anlamlıysa SVG resimleri role="img"
öğesini içermelidir.
<img src="svg/magazine.svg" alt="" role="none" />
Sayfanın alt kısmında, her biri posterin resmini içeren üç yorum vardır. Genellikle alt
metni, gösterilen
kişinin adıdır.
<img src="images/blender.svg" alt="Blendan Smooth" role="img" />
Bunun yerine, bu bir şaka sayfası olduğundan, az gören kullanıcılara mizahı kaçırmamaları için bariz olmayan şeyleri iletmelisiniz. Karakterin adını kullanmak yerine alt
olarak orijinal makine işlevini kullanırız:
<img src="images/blender.svg" alt="blender" role="img" />
Eğitmen fotoğrafları yalnızca bir avatar değildir. Bu fotoğraflar, biyografik resimlerdir ve daha ayrıntılı bir açıklama sağlar.
Bu gerçek bir site olsaydı, öğretmen adayının sınıfa girerken tanıyabilmesi için, öğretmenin görünümünü en aza indirecek şekilde açıklamanız gerekecekti.
<img src="svg/hal.svg" role="img"
alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />
Bu bir şaka sitesi olduğundan bunun yerine şaka bağlamında alakalı bilgiler sağlayın:
<img src="svg/hal.svg" role="img"
alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />
Sayfayı telefonda bir arkadaşınıza okuduysanız, kırmızı noktanın nasıl göründüğünü fark etmezdi. Bu durumda film referansının geçmişi önemlidir.
Açıklayıcı metin yazarken resmin kullanıcı açısından önemli ve alakalı olarak hangi bilgileri aktardığını göz önünde bulundurun ve bunlara yer verin. Bir resmin alt
özelliğinin içeriğinin bağlama göre farklılık gösterdiğini unutmayın. Görülen bir kullanıcının erişebileceği ve bağlamla alakalı olan bir resimde aktarılan tüm bilgiler aktarılmalıdır; başka bir şey değildir. Kısa, net ve
faydalı olmasına özen gösterin.
src
ve alt
özellikleri, yerleştirilmiş resimler için minimum gereksinimlerdir. Konuşmamız gereken birkaç özellik daha var.
Uyumlu görseller
Çok sayıda görüntü alanı boyutu vardır. Ayrıca farklı ekran çözünürlükleri vardır. Mobil kullanıcılara büyük ekranlı monitörler için yeterince geniş bir görüntü sunarak bant genişliğini boşa harcamamalısınız, ancak normal ekran çözünürlüğünün dört katı olan küçük cihazlar için daha yüksek çözünürlüklü görüntüler sunmak isteyebilirsiniz. Görüntü alanı boyutuna ve ekran çözünürlüğüne bağlı olarak farklı resimler sunmanın birkaç yolu vardır.
<img> srcset
özellik
srcset
özelliği, birden fazla resim dosyası önerilmesini sağlar. Böylece tarayıcı, görüntü alanı boyutu ve ekran çözünürlüğü dahil olmak üzere birden fazla medya sorgusuna göre hangi resmin isteneceğini seçer.
<img>
öğesi başına tek bir srcset
özelliği olabilir, ancak bu srcset
birden fazla resme bağlantı verebilir. srcset
özelliği, virgülle ayrılmış değerler listesini kabul eder. Bu listede öğelerin her biri, öğenin URL'sini, ardından boşluk ve ilgili resim seçeneğinin tanımlayıcılarını içerir. Genişlik açıklayıcısı kullanılıyorsa sizes
özelliğini, sonuncu dışındaki her srcset
seçeneği için bir medya sorgusu veya kaynak boyutu ile de eklemeniz gerekir. srcset
içeren duyarlı resimler ve açıklayıcı söz dizimi konularındaki Learn bölümlerini okumanız önerilir.
Eşleşme varsa srcset
resmi, src
resmine göre öncelikli olur.
<picture>
ve <source>
Birden fazla kaynak sağlamanın ve tarayıcının en uygun öğeyi oluşturmasına izin vermenin bir başka yöntemi de <picture>
öğesidir. <picture>
öğesi, sınırsız sayıda <source>
öğesinde ve tek bir gerekli <img>
öğesinde listelenen birden fazla resim seçeneğinin kapsayıcı öğesidir.
<source>
özellikleri arasında srcset
, sizes
, media
, width
ve height
bulunur.
srcset
özelliği img
, source
ve link
için ortaktır, ancak medya sorguları bunun yerine <srcset>
medya özelliğinde listelenebileceğinden genellikle kaynakta biraz farklı uygulanır. <source>
, type
özelliğinde tanımlanan resim biçimlerini de destekler.
Tarayıcı, her bir alt <source>
öğesini dikkate alır ve bunlar arasından en iyi eşleşmeyi seçer. Eşleşme bulunmazsa <img>
öğesinin src
özelliğinin URL'si seçilir. Erişilebilir ad, iç içe yerleştirilmiş <img>
öğesinin alt
özelliğinden gelir.
<picture>
öğesini ve talimatları söz dizimini kapsayan Learn bölümlerini de okumanız önerilir.
Ek performans özellikleri
Geç yükleme
loading
özelliği, JS özellikli tarayıcıya resmin nasıl yükleneceğini bildirir. Varsayılan eager
değeri, resim görünür görüntü alanının dışında olsa bile, HTML ayrıştırılırken resmin hemen yükleneceği anlamına gelir. loading="lazy"
ayarlandığında, resmin yüklenmesi, görüntü alanına girme olasılığı yüksek olana kadar ertelenir. "Olası" ifadesi, tarayıcı tarafından resmin görüntü alanından uzaklığına göre tanımlanır. Bu bölüm, kullanıcı sayfayı kaydırdıkça güncellenir. Geç yükleme, bant genişliği ve CPU'dan tasarruf edilmesine yardımcı olarak çoğu kullanıcı için performansın iyileştirilmesini sağlar. JavaScript devre dışı bırakılırsa güvenlik nedeniyle tüm resimler varsayılan olarak eager
olur.
<img src="switch.svg" alt="light switch" loading="lazy" />
En boy oranı
Tarayıcılar HTML alındığında HTML oluşturmaya başlar ve karşılaşılan öğeler için istekte bulunur. Bu, tarayıcının <img>
etiketiyle karşılaştığında ve istekte bulunduğunda HTML'yi zaten oluşturmakta olduğu anlamına gelir. Görüntülerin yüklenmesi biraz zaman alabilir.
Varsayılan olarak tarayıcılar, alt
metnini oluşturmak için gereken boyuttan başka resimlere yer ayırmaz.
<img>
öğesi, birimsiz height
ve width
özelliklerini her zaman desteklemiştir. Bu özellikler artık CSS'nin lehine kullanılmamıştır. CSS, en boy oranının korunmasını sağlamak için genellikle max-width: 100%;
gibi tek bir boyut ayarlayarak resim boyutlarını tanımlayabilir.
CSS genellikle <head>
içine dahil edildiğinden herhangi bir <img>
ile karşılaşılmadan önce ayrıştırılır. Ancak height
veya en boy oranı açıkça belirtilmeden ayrılan alan, alt
metninin yüksekliğidir (veya genişliğidir). Çoğu geliştirici yalnızca genişlik belirttiğinden, görüntülerin alınması ve oluşturulması kümülatif düzen kaymasına yol açar. Bu da web vitals verileri olumsuz etkiler.
Tarayıcılar, bu sorunu çözmek için resim en boy oranlarını destekler. <img>
öğesine height
ve width
özelliklerinin eklenmesi boyutlandırma ipuçları görevi görür ve tarayıcıyı en boy oranı konusunda bilgilendirerek nihai resim oluşturma için doğru miktarda alanın ayrılmasını sağlar. Tarayıcı, bir resme yükseklik ve genişlik değeri ekleyerek söz konusu resmin en boy oranını bilir. Tarayıcı, %50'lik örneğimiz gibi tek bir boyutla karşılaştığında, resim için CSS boyutuna ve diğer boyutla genişlik-yükseklik en boy oranını koruyarak yer kaplar.
<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />
CSS'nin duyarlı hale getirmek için doğru ayarlandıysa resimleriniz yine de duyarlı olur. Evet, dahil edilen birimsiz height
ve width
değerleri CSS ile geçersiz kılınır. Bu özellikleri eklemenin amacı, alanı doğru en boy oranında ayırarak, düzen kaymasını azaltarak performansı artırmaktır. Sayfanın yüklenmesi yine de yaklaşık olarak aynı sürede tamamlanacaktır, ancak görüntü ekrana boyandığında kullanıcı arayüzü atlamaz.
Diğer görüntü özellikleri
<img>
öğesi ayrıca crossorigin
, decoding
, referrerpolicy
ve Blink tabanlı tarayıcılarda fetchpriority
özelliklerini destekler. Nadiren kullanılır. Resim bir sunucu tarafı haritasının parçasıysa ismap
boole özelliğini ekleyin ve <img>
değerini, cihazları işaret etmeden kullanıcılar için bir bağlantıya iç içe yerleştirin.
Tıklama konumunun x
ve y
koordinatlarını form gönderme sırasında gönderildiğinden <input type="image" name="imageSubmitName">
üzerinde ismap
özelliği gerekli değildir, hatta desteklenmez. Bu durumda değerler giriş adına (varsa) eklenir. Örneğin, kullanıcı resmi tıkladığında formla birlikte &imageSubmitName.x=169&imageSubmitName.y=66
gibi bir şey de gönderilir ve gönderilir. Resimde name
özelliği yoksa x ve y değerleri gönderilir: &x=169&y=66
.
Öğrendiklerinizi sınayın
Görseller hakkındaki bilginizi test edin.
Bir ön plan resminin hangi iki özelliğe sahip olması gerekir?
size
alt
src