Görseller

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.