Resimler

Düğmelerdeki arka plan gradyanları veya içerik bölümlerindeki ya da tam sayfadaki arka plan resimleri gibi dekoratif resimler, sunum amaçlıdır ve CSS ile uygulanmalıdır. Bir belgeye bağlam ekleyen resimler içerik olarak kabul edilir ve HTML ile yerleştirilmelidir.

Resim eklemenin temel yöntemi, bir resim kaynağına referans veren src özelliği ve resmi açıklayan alt özelliğiyle birlikte kullanılan <img> etiketidir.

<img src="images/eve.png" alt="Eve">

Hem <img> üzerindeki srcset özelliği hem de <picture> öğesi, her biri yedek resim kaynağına sahip olan ve ilişkili medya sorgularıyla birden fazla resim kaynağı eklemenin bir yolunu sunar. Bu sayede, cihazın çözünürlüğüne, tarayıcı özelliklerine ve görünüm alanı boyutuna göre en uygun resim dosyası sunulabilir. srcset özelliği, çözünürlüğe ve sizes özelliğiyle birlikte tarayıcı görünüm alanı boyutuna göre birden fazla resim sürümü sağlamayı mümkün kı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, varsayılan kaynak olarak <img> öğesini alan <source> alt öğeleriyle birlikte <picture> öğesiyle de yapılabilir.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

HTML, bu yerleşik HTML duyarlı resim yöntemlerine ek olarak, çeşitli özellikler aracılığıyla resim oluşturma performansının iyileştirilmesini de sağlar. <img> etiketi ve dolayısıyla grafik gönder düğmeleri <input type="image">, içeriğin düzen kaymasını azaltmak için resmin en-boy oranını ayarlamak üzere height ve width özelliklerini içerebilir. lazy özelliği, geç yüklemeyi etkinleştirir.

HTML, <svg> etiketi kullanılarak SVG resimlerinin eklenmesini de destekler. Bununla birlikte, .svg uzantılı (veya data-uri olarak) SVG resimleri <img> öğesi kullanılarak yerleştirilebilir.

Her ön plan resminde en azından src ve alt özellikleri bulunmalıdır.

src dosyası, yerleştirilmiş resmin yolu ve dosya adıdır. src özelliği, resmin URL'sini sağlamak için kullanılır. Ardından tarayıcı, öğeyi getirir ve sayfada oluşturur. Bu özellik, <img> tarafından zorunlu kılınır. Bu olmadan oluşturulacak bir şey yoktur.

alt özelliği, ekranı göremeyen kullanıcılar için resmin açıklamasıyla birlikte alternatif metin sağlar (arama motorları, yardımcı teknolojiler ve hatta Alexa, Siri ve Google Asistan gibi). Ayrıca, resim yüklenmezse tarayıcı tarafından görüntülenebilir. Yavaş ağlara veya sınırlı bant genişliğine sahip kullanıcıların yanı sıra, birçok kullanıcı e-posta uygulamalarında resimleri engellediği için alt metni HTML e-postalarda son derece faydalıdır.

<img src="path/filename" alt="descriptive text" />

Resim SVG dosya türündeyse role="img" karakterini de ekleyin. Bu karakter, VoiceOver hataları nedeniyle gereklidir.

<img src="switch.svg" alt="light switch" role="img" />

Etkili alt resim açıklamaları yazma

Alternatif metin özellikleri, kısa ve öz olmayı amaçlar. Belgedeki diğer içeriklerle gereksiz olan veya başka bir şekilde yararlı olmayan bilgileri atlayarak, resmin ilettiği tüm ilgili bilgileri sağlar. Metin yazılırken sitenin üslubu yansıtılmalıdır.

Etkili alternatif metin yazmak için sayfayı, göremeyen bir kişiye okuduğunuzu hayal edin. Anlamsal <img> öğesi kullanıldığında ekran okuyucu kullanıcıları ve botlar, öğenin bir resim olduğu konusunda bilgilendirilir. alt bölümüne "Bu, bir resim/ekran görüntüsü/fotoğrafıdır" ifadesini eklemek gereksizdir. Kullanıcının resim olduğunu bilmesi gerekmez ancak resmin hangi bilgileri ilettiğini bilmesi gerekir.

Normalde, "Bu, kırmızı şapka takan bir köpeğin grenli görüntüsü" demezsiniz. Bunun yerine, resmin belgenin geri kalanındaki bağlamla ilişkili olarak ne anlattığını aktarmanız gerekir. Ne aktardığınız, bağlama ve çevreleyen metnin içeriğine bağlı olarak 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ıyla ilgili bir yorumun yanındaki avatar ise alt="Fluffy" yeterlidir.

Fotoğraf, bir hayvan barınağı web sitesindeki Tüylü'nün sahiplendirme sayfasında yer alıyorsa hedef kitle, köpeği sahiplenmek isteyen kişidir. Metin, resimde aktarılan ve benimseyen kullanıcı için alakalı olan, çevreleyen metinde tekrarlanmayan 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. Bir sahiplendirme sayfasının metninde genellikle sahiplendirilebilecek evcil hayvanın türü, cinsi, yaşı ve cinsiyeti yer alır. Bu nedenle, alternatif metinde bu bilgiler tekrarlanmaz. Ancak köpeğin yazılı biyografisinde muhtemelen tüy uzunluğu, renkleri veya oyuncak tercihleri yer almıyordur.

En önemlisi, resmi tam olarak açıklamadık. Köpeğin olası sahibi, köpeğin iç mekanda mı yoksa dış mekanda mı olduğunu ya da kırmızı bir tasması ve mavi bir ipi olduğunu bilmek zorunda değildir.

Simge olarak resim kullanırken alt özelliği erişilebilir adı sağladığından resmin açıklamasını değil, simgenin anlamını iletin. Örneğin, büyüteç simgesinin alt özelliği search. Ev gibi görünen simgenin alternatif metni home. 5 inçlik disket simgesinin açıklaması save. En iyi uygulamaları ve anti-desenleri belirtmek için iki Fluffy simgesi kullanılıyorsa, yeşil bereli gülümseyen köpek alt="good" olarak ayarlanabilirken, kırmızı bereli hırlayan köpek alt="bad" olarak okunabilir. Bununla birlikte, yalnızca standart simgeler kullanın. İyi ve kötü Fluffy gibi standart olmayan simgeler kullanıyorsanız bir açıklama ekleyin ve simgelerin, kullanıcı arayüzü öğelerinizin anlamını çözmenin tek yolu olmadığından emin olun.

Resim bir ekran görüntüsü veya grafikse görünümü açıklamak yerine resimden öğrenilenleri yazın. Bir resim kesinlikle bin kelimeye bedel olabilir ancak açıklama, öğrenilen her şeyi kısa ve öz bir şekilde aktarmalıdır.

Kullanıcının bağlamdan zaten bildiği ve içerikte başka şekilde bilgilendirildiği bilgileri atlayın. Örneğin, tarayıcı ayarlarını değiştirme hakkında bir eğitim sayfasındaysanız ve sayfa, tarayıcıda Chrome simgelerini tıklamayla ilgiliyse ekran görüntüsündeki sayfanın URL'si önemli değildir. alt simgesini, ele alınan konuyla (ayarları değiştirme) sınırlayın.

alt "Ayarlar simgesi, arama alanının altındaki gezinme çubuğunda bulunur." olabilir. Kullanıcının bunun bir ekran görüntüsü olduğunu bilmesi gerekmediği ve teknik yazarın talimatları yazarken nerede gezindiğini bilmesi gerekmediği için "ekran görüntüsü" veya "makineöğrenimiatölyesi" ifadelerini eklemeyin. Resmin açıklaması, resmin neden eklendiğiyle ilgili bağlama dayanır.

Ekran görüntüsünde chrome://version/ bölümüne giderek tarayıcı sürüm numarasının nasıl bulunacağı gösteriliyorsa URL'yi sayfa içeriğine talimat olarak ekleyin ve resim, çevreleyen metinde olmayan bir bilgi sağlamadığından alt özelliği olarak boş bir dize girin.

Resim ek bilgi sağlamıyorsa veya tamamen dekoratif amaçlıysa özellik yine de boş bir dize olarak bulunmalıdır.

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com'da yedi ön plan resmi, dolayısıyla alt özelliklere sahip yedi resim var: Paskalya yumurtası şeklinde bir ışık anahtarı, bir kılavuz simgesi, Hal ve Eve'in iki biyografik fotoğrafı ve blender, elektrikli süpürge ve ekmek kızartma makinesi olmak üzere üç avatar. Dergi gibi görünen ön plan resmi, tamamen dekoratif amaçlı kullanılan tek resimdir. Sayfada iki arka plan resmi de var. Bu resimler dekoratif amaçlıdır ve CSS ile eklendiği için erişilemez.

Tamamen dekoratif olan derginin alt özelliği boş ve resim tamamen sunum amaçlı bir SVG olduğundan role of none özelliği var. Anlamlıysa SVG resimleri role="img" içermelidir.

<img src="svg/magazine.svg" alt="" role="none" />

Sayfanın alt kısmında, her birinde poster resmi bulunan üç inceleme yer alıyor. Genellikle alt metni, resimdeki 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ıların mizahı kaçırmaması için onlara açıkça belli olmayabilecek şeyleri iletmeniz gerekir. Karakterin adını kullanmak yerine alt olarak orijinal makine işlevini kullanıyoruz:

<img src="images/blender.svg" alt="blender" role="img" />

Eğitmenlerin fotoğrafları yalnızca avatarlardan ibaret değildir. Biyografik görüntüler olduklarından daha ayrıntılı bir açıklama alırlar.

Bu gerçek bir site olsaydı öğretmenin görünümüyle ilgili en kısa açıklamayı yapardınız. Böylece, sınıfa giren öğrenciler öğretmeni tanıyabilirdi.

<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ı bilgileri 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 okuyorsanız kırmızı noktanın nasıl göründüğüyle ilgilenmez. Bu durumda, film referansının geçmişi önemlidir.

Açıklayıcı metin yazarken resmin ilettiği, kullanıcı için önemli ve alakalı bilgileri göz önünde bulundurun ve bu bilgileri ekleyin. Bir resmin alt özelliğinin içeriğinin bağlama göre değiştiğini unutmayın. Görme engelli bir kullanıcının erişebileceği ve bağlamla alakalı olan, resimde aktarılan tüm bilgiler aktarılmalıdır. Başka bir bilgi aktarılmamalıdır. Kısa, net ve faydalı olsun.

src ve alt özellikleri, yerleştirilmiş resimler için minimum koşullardır. Konuşmamız gereken birkaç özellik daha var.

Uyumlu görseller

Çok sayıda görüntü alanı boyutu ve ekran çözünürlüğü vardır. Mobil kullanıcıların bant genişliğini, büyük ekran monitör için yeterince geniş bir resim sunarak boşa harcamak istemezsiniz. Ancak normal ekran çözünürlüğünün dört katı çözünürlüğe sahip küçük cihazlar için daha yüksek çözünürlüklü resimler sunmak isteyebilirsiniz. Görüntü alanı boyutuna ve ekran çözünürlüğüne göre farklı resimler sunmanın birkaç yolu vardır.

<img> srcset özellik

srcset özelliği, birden fazla resim dosyasının önerilmesini sağlar. Tarayıcı, görüntü alanı boyutu ve ekran çözünürlüğü gibi birden fazla medya sorgusuna göre hangi resmin isteneceği konusunda seçim yapar.

Her <img> öğesinde tek bir srcset özelliği olabilir ancak bu srcset özelliği birden fazla resme bağlanabilir. srcset özelliği, virgülle ayrılmış bir değer listesini kabul eder. Bu değerlerin her biri, öğenin URL'sini, ardından bir boşluğu ve ardından bu resim seçeneğinin tanımlayıcılarını içerir. Genişlik tanımlayıcısı kullanılıyorsa son seçenek dışındaki her srcset seçeneği için medya sorgusu veya kaynak boyutu içeren sizes özelliğini de eklemeniz gerekir. srcset ile duyarlı resimler ve açıklayıcı söz dizimleri hakkında bilgi veren Öğrenme bölümlerini okumanızı öneririz.

Eşleşme varsa srcset resmi, src resmine göre önceliklidir.

<picture> ve <source>

Birden fazla kaynak sağlamanın ve tarayıcının en uygun öğeyi oluşturmasına izin vermenin bir diğer yöntemi ise <picture> öğesini kullanmaktır. <picture> öğesi, sınırsız sayıda <source> öğesinde listelenen birden fazla resim seçeneği ve tek bir zorunlu <img> öğesi için kullanılan bir kapsayıcı öğedir.

<source> özellikleri arasında srcset, sizes, media, width ve height yer alır. srcset özelliği img, source ve link için ortaktır ancak kaynakta genellikle biraz farklı şekilde uygulanır. Bunun nedeni, medya sorgularının <srcset> öğesinin medya özelliğinde listelenebilmesidir. <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 kuralcı söz dizimlerini kapsayan Öğrenme bölümlerini de okumanızı öneririz.

Ek performans özellikleri

Sitenizin performansını artırabilecek çeşitli ek resim özellikleri vardır.

Geç yükleme

loading özelliği, JS'nin etkin olduğu tarayıcıya resmi nasıl yükleyeceğ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üklendiği anlamına gelir. loading="lazy" ayarını yaparak resim yükleme işlemini, görüntü alanına girme olasılığı yüksek olana kadar erteleyebilirsiniz. "Olası", tarayıcı tarafından resmin görünüm alanına olan mesafesine göre tanımlanır. Bu değer, kullanıcı kaydırdıkça güncellenir. Geç yükleme, bant genişliği ve CPU'dan tasarruf etmenize yardımcı olarak çoğu kullanıcı için performansı artırır. 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'yi aldıklarında işlemeye başlar ve karşılaştıkları öğeler için istekte bulunur. Bu, tarayıcının <img> etiketiyle karşılaştığında ve isteği gönderdiğinde HTML'yi zaten oluşturduğu anlamına gelir. Resimlerin yüklenmesi de biraz zaman alabilir. Tarayıcılar, varsayılan olarak alt metnini oluşturmak için gereken boyut dışındaki resimler için yer ayırmaz.

<img> öğesi, birimsiz height ve width özelliklerini her zaman desteklemiştir. Bu özellikler, CSS lehine kullanımdan kaldırıldı. CSS, en boy oranının korunmasını sağlamak için genellikle tek bir boyut (ör. max-width: 100%;) belirleyerek resim boyutlarını tanımlayabilir.

CSS genellikle <head> içinde yer aldığından, herhangi bir <img> ile karşılaşılmadan önce ayrıştırılır. Ancak height veya en-boy oranı açıkça belirtilmediğinde ayrılan alan, alt metninin yüksekliği (veya genişliği) olur.

Geliştiriciler yalnızca genişlik bildirdiğinde, resimlerin alınması ve oluşturulması kümülatif düzen kaymasına yol açar. Bu durum, web hayati metriklerine zarar verir. Bu sorunu çözmek için tarayıcılar, resim en-boy oranlarını destekler. height ve width özelliklerinin <img> öğesine eklenmesi, boyutlandırma ipuçları olarak işlev görür. Bu özellikler, tarayıcıyı en boy oranı hakkında bilgilendirerek nihai görüntü oluşturma için doğru miktarda alan ayrılmasını sağlar. Tarayıcı tek bir boyutla karşılaştığında (ör. %50 örneğimizde olduğu gibi) CSS boyutuna uyan resim için yer ayırır ve diğer boyutta genişlik-yükseklik en boy oranını korur.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

CSS, duyarlı hale getirmek için doğru şekilde ayarlanmışsa resimleriniz duyarlıdır. Evet, birimsiz height ve width değerleri CSS ile geçersiz kılınır. Bu özelliklerin eklenmesinin amacı, doğru en-boy oranında yer ayırmak ve düzen kaymasını azaltarak performansı artırmaktır. Sayfanın yüklenmesi yine yaklaşık olarak aynı süreyi alır ancak resim ekrana çizildiğinde kullanıcı arayüzü atlamaz.

Diğer görüntü özellikleri

<img> öğesi crossorigin, decoding, referrerpolicy ve Blink tabanlı tarayıcılarda fetchpriority özelliklerini de destekler. Resim, sunucu tarafı haritanın bir parçasıysa nadiren kullanılır. Bu durumda, ismap boolean özelliğini ekleyin ve işaretleme cihazı olmayan kullanıcılar için <img> öğesini bir bağlantının içine yerleştirin.

Form gönderimi sırasında tıklama konumunun x ve y koordinatları gönderildiğinden, değerler varsa giriş adına eklenerek ismap özelliği <input type="image" name="imageSubmitName"> üzerinde gerekli değildir, hatta desteklenmez. Örneğin, kullanıcı resmi tıklayıp gönderdiğinde formla birlikte &imageSubmitName.x=169&imageSubmitName.y=66 gibi bir değer gönderilir. Resimde name özelliği yoksa x ve y gönderilir: &x=169&y=66.

Anlayıp anlamadığınızı kontrol etme

Resimlerle ilgili bilginizi test edin.