Resimler

Düğmelerdeki arka plan gradyanları veya içeriğin veya tam sayfanın tamamındaki arka plan resimleri gibi dekoratif resimler, sunum amaçlıdır ve CSS ile birlikte uygulanmalıdır. Bir resim dokümana bağlam kattığında içeriktir ve yerleştirilmelidir.

Resimleri eklemek için ana yöntem, src içeren <img> etiketidir özelliği ile birlikte bir resim kaynağına ve resmi açıklayan alt özelliğine referans veren özellik.

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

Hem <img> öğesindeki srcset özelliği hem de <picture> öğesi, Her biri bir yedek resim kaynağına sahip olan ilişkili medya sorgularının kullanılması, cihazın özelliklerine göre en uygun resim dosyasının çözünürlüğü, tarayıcı özelliklerini ve görüntü alanı boyutunu belirler. srcset özelliği, birden fazla resim sürümü sağlamaya olanak tanır. değeri temel alır. sizes özelliğiyle birlikte tarayıcı görüntü alanı boyutuna da bağlıdır.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

Bu, <picture> öğesiyle birlikte, varsayılan kaynak olarak <img> atan <source> alt öğeleri ile 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>

Bu yerleşik HTML duyarlı resim yöntemlerine ek olarak HTML, aynı zamanda geliştirme performansının iyileştirilmesine yardımcı olur. <img> etiketi ve dolayısıyla grafik gönder düğmeleri <input type="image">, içerik düzeni kaymasını azaltmak üzere resmin en boy oranını ayarlamak için height ve width özelliklerini içerebilir. lazy özelliği, geç yüklemeyi etkinleştirir.

SVG, SVG resimlerin doğrudan <svg> kullanılarak eklenmesini de destekler (ancak SVG) .svg uzantılı (veya data-uri) resimler, <img> öğesi kullanılarak yerleştirilebilir.

Her ön plan resmi en azından src ve alt özelliklerini içermelidir.

src dosyası, yerleştirilmiş resmin yoludur 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; olmadan da hiçbir şey kullanır.

alt özelliği, resim için alternatif metin sağlayarak ekranı (arama motorlarını, yardımcı teknolojileri, hatta Alexa, Siri ve Google Asistan'ı düşünün) ve tarayıcıda gösterilebilir. resim yüklenmez. alt metni, yavaş ağları veya sınırlı bant genişliği olan kullanıcılara ek olarak, HTML'de de son derece yararlıdır. kullanıcılar e-posta uygulamalarında resimleri engelledi.

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

Resim SVG dosya türündeyse role="img" etiketini de ekleyin. VoiceOver hataları nedeniyle gereklidir.

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

Etkili alt resim açıklamaları yazma

Alt öznitelikleri kısa ve öz olmayı, resmin atlanarak aktardığı tüm alakalı bilgileri sağlamayı amaçlar gereksiz bilgi barındıran veya belgedeki diğer içeriklere dahil edilmeyen bilgiler içerir. Metni yazarken üslup yansıtmalıdır.

Etkili bir alternatif metin yazmak için tüm sayfayı göremeyen bir kişiye okuduğunuzu düşünün. Şunu kullanarak: anlamsal <img> öğesi, ekran okuyucu kullanıcıları ve bot'lara öğenin bir resim olduğu unutulmamalıdır. "Bu bir resim/ekran görüntüsü/fotoğrafıdır" ifadesini eklemek gereksizdir. alt. Kullanıcı bir resim olduğunu bilirler ancak resmin hangi bilgiyi ilettiğini bilmeleri gerekir.

Normalde "Bu, kırmızı şapka takmış bir köpeğin grenli resmi" demezsiniz. Bunun yerine resmin ne olduğunu ilgili bir belgenin geri kalanının bağlamıyla ilişkili olarak aktarma; ve anlattıklarınız bağlama göre ve etrafındaki metnin içeriği.

Örneğin, bir köpeğin fotoğrafı bağlama bağlı olarak farklı şekillerde açıklanabilir. Fluffy bir arka planın yanındaki Yuckymeat köpek maması incelemesi, alt="Fluffy" yeterlidir.

Fotoğraf, Fluffy'nin bir hayvan barınağı web sitesindeki sahiplendirme sayfasında yer alıyorsa hedef kitle potansiyel köpek olur üst öğesidir. Metinde, resimde aktarılan ve kopyalanmayan, kullanıcıya hitap eden bilgiler açıklanmalıdır. çevredeki metnin içinde görünü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 sahip olunan evcil hayvanın türünü, cinsini, yaşını ve cinsiyetini içerir. alternatif metinde tekrarlanması gerekmez. Ama köpeğin yazılı biyografisi muhtemelen saç uzunluğu, renk ve tercih edebilir. Resmi açıklamadığımıza dikkat edin: Potansiyel köpek sahibinin, köpeğin köpeğin ya da kırmızı yakalı ve mavi tasmalı

İkonografi için resim kullanırken alt özelliği erişilebilir adı sağladığından simgenin anlamını iletir. resmin bir açıklaması olmamalıdır. Örneğin, büyüteç simgesinin alt özelliği search şeklindedir. Gösterilen simgenin home gibi bir evin alternatif metni vardır. 5 inç'lik disket simgesinin açıklaması save şeklindedir. İki Fluffy simgesi kullanılıyorsa en iyi uygulamaları ve karşıt kalıpları belirtmek için, yeşil bereli gülümseyen köpek alt="good", hırıldayan köpek ise kırmızı berede alt="bad" yazıyor olabilir. Bununla birlikte, yalnızca standart ikonları kullanın ve iyi ve kötü Fluffy'yi tanımanız, bir açıklama ekleyin ve kullanıcı arayüzü öğelerinizin anlamını anlamak için yalnızca simgelerin olmadığından emin olun.

Resim bir ekran görüntüsü veya grafikse, görünümü açıklamak yerine görüntüden öğ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 bir şekilde bilgi verdiği bilgileri çıkarmamak. Örneğin, Tarayıcı ayarlarını değiştirmeyle ilgili bir eğitim sayfasındaysanız ve tarayıcı Chrome'daki simgeleri tıklama ile ilgili bir sayfaysa çok önemli değildir. alt bölümünü mevcut konuyla sınırlandırın: Ayarları değiştirme. alt: "Ayarlar simgesi, arama alanının altındaki gezinme çubuğunda yer alır." "Ekran görüntüsü" eklemeyin veya "makine öğrenimi atölyesi" gibi Böylece kullanıcının ekran görüntüsü olduğunu bilmesi ve teknoloji yazarının yazı yazarken nerede gezindiğini bilmesi gerekmez. izleyin. Görselin açıklaması, resmin neden ilk sırada yer aldığıyla ilgili bağlama dayalıdır.

Ekran görüntüsünde, chrome://version/ adresine giderek tarayıcı sürüm numarasının nasıl bulunacağı gösteriliyorsa URL'yi içeriğini talimat olarak sunmalı ve resim herhangi bir bilgi sağlamadığından alt özelliği olarak boş bir dize sağlamalıdır etrafındaki metinde bulunmayanları kapsıyor.

Resimde ek bilgi sağlanmıyorsa veya yalnızca dekoratif bir nitelikteyse özellik boş bir dize olarak yine de kaldırılmalıdır.

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

MachineLearningWorkshop.com'da yedi ön plan resmi vardır. Yani alt özelliklere sahip yedi resim vardır: bir paskalya yumurtası anahtarı ve manuel simge, Hal ve Eve'in iki biyografik fotoğrafı, bir karıştırıcı, bir elektrikli süpürge ve bir ekmek kızartma makinesinin üç avatarı. İlgili içeriği oluşturmak için kullanılan dergi gibi görünen ön plan resmi tamamen dekoratif olan tek resimdir. Sayfada ayrıca iki arka plan resmi; Bunlar aynı zamanda dekoratiftir ve CSS ile eklendikleri için erişilemez.

Tamamen dekoratif olan dergide boş bir alt özelliği bulunuyor. Resim tamamen olduğu için role (none) değeri de var. sunulu SVG'dir. Anlamlıysa SVG resimleri role="img" ifadesini içermelidir.

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

Sayfanın alt kısmında, her birinde posterin resmi bulunan üç yorum var. Ad genellikle alt metnidir bir resimdir.

<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 görmemeleri için önemli noktaları anlatmanız gerekir. mizah anlayışı; karakterin adını kullanmak yerine alt olarak orijinal makine işlevini kullanırız:

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

Eğitmenlerin fotoğrafları sadece avatarlar değildir, biyografik görüntülerdir ve bu nedenle daha ayrıntılı açıklamalar içerir.

Bu gerçek bir site olsaydı, öğretmenin nasıl göründüğüne dair asgari düzeyde açıklama sağlamanız gerekirdi; böylece gelecek bir öğrenci onları tanımanıza yardımcı olur.

<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ğu için 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ı bir arkadaşınıza telefonda okuyorsanız, kırmızı noktanın neye benzediğini ilgilendirmez. Bu durumda, geçmişi önem taşır.

Açıklayıcı metin yazarken resmin kullanıcı için önemli ve alakalı olan hangi bilgileri aktardığını düşünün ve bazı bilgiler vereceğim. Bir görselde alt özelliğinin içeriğinin bağlama göre değiştiğini unutmayın. Resimde aktarılan tüm bilgiler Görme engelli bir kullanıcının erişebileceği ve bağlama uygun olduğundan, aktarılması gereken bilgidir; başka hiçbir şey yok. Kısa, net, ve yararlı hale getirir.

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. Farklı ekran çözünürlükleri de vardır. Mobil cihaz kullanıcılarının büyük ekranlı monitör için yeterince geniş bir resim sunarak bant genişliğine bakar ancak daha yüksek çözünürlük normal ekran çözünürlüğünün dört katı olan küçük cihazların resimlerini kullanır. Farklı resimler yayınlamanın birkaç yolu vardır. görüntü alanının boyutuna ve ekran çözünürlüğüne göre değiştirilir.

<img> srcset özellik

srcset özelliği, birden fazla resim dosyası ö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ğini seçer.

Her <img> öğesi için tek bir srcset özelliği olabilir ancak bu srcset, birden çok resme bağlantı verebilir. srcset özelliğinin her biri öğenin URL'sini ve ardından bir boşluk bırakan, virgülle ayrılmış değerler listesini kabul eder açıklayıcıları eklemektir. Genişlik açıklayıcısı kullanılıyorsa medya ile sizes özelliğini de eklemeniz gerekir sorgu veya kaynak boyutu (sonuncu dışındaki her srcset seçenek için) srcset içeren duyarlı resimler ve açıklayıcı söz dizimleri gibi konuları ele alan Öğren bölümlerimizi okumanızı öneririz.

Eşleşme olması durumunda srcset resmi, src resmine göre öncelikli olur.

<picture> ve <source>

Birden çok kaynak sağlamanın ve tarayıcının en uygun öğeyi oluşturmasına olanak tanımanın başka bir yöntemi de <picture> öğesi. <picture> öğesi bir kapsayıcı Sınırsız sayıda <source> içinde listelenen birden çok resim seçeneğine ait öğe öğeleri ve tek bir gerekli <img> öğesi.

<source> özellikleri arasında srcset, sizes, media, width ve height bulunur. srcset özelliği; img, source ve link için ortaktır ancak genellikle kaynakta biraz farklı uygulanır. Bunun yerine, medya sorguları <srcset> ürününün medya özelliğinde listelenebilir. <source>, type özelliğinde tanımlanan resim biçimlerini de destekler.

Tarayıcı her alt <source> öğesini dikkate alır ve aralarında en iyi eşleşmeyi seçer. Eşleşme bulunmazsa URL, <img> öğesinin src özelliğinden biri seçildi. Erişilebilir ad, iç içe yerleştirilmiş <img> öğesinin alt özelliğinden gelir. <picture> öğesini kapsayan Öğrenme bölümleri ve kurallı söz dizimleri de okunmaya değer.

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, resmin Resim, görünür görüntü alanının dışında olsa bile, HTML ayrıştırılırken hemen yüklenir. loading="lazy" ayarlayarak Resim yükleme işlemi, görüntü alanına girene kadar ertelenir. "Büyük" tarayıcı tarafından uzaklığa göre tanımlanır resim görüntü alanından alınır. Kullanıcı sayfayı kaydırdıkça bu sayfa güncellenir. Geç yükleme, bant genişliğinden ve CPU'dan tasarruf ederek performansı artırır büyük önem taşıyor. JavaScript devre dışı bırakılırsa güvenlik nedeniyle tüm resimler varsayılan olarak eager değerine ayarlanır.

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

En boy oranı

Tarayıcılar HTML'yi aldığında oluşturmaya başlar ve karşılaştığında öğeler için istekte bulunur. Bu, tarayıcının <img> etiketiyle karşılaştığında HTML'yi halihazırda oluşturuyor ve istekte bulunuyor. Ayrıca, resimlerin yüklenmesi biraz zaman alabilir. Varsayılan olarak tarayıcılar, alt metnini oluşturmak için gerekli boyuttan başka resimlere yer ayırmaz.

<img> öğesi her zaman birimsiz height ve width özelliklerini desteklemiştir. Bu mülkler artık lehinde yardımcı olur. CSS, resim boyutlarını tanımlayabilir ve en boy oranının korunmasını sağlamak için genellikle max-width: 100%; gibi tek bir boyut ayarlayabilir. CSS genellikle <head> içine eklendiğinden herhangi bir <img> ile karşılaşılmadan önce ayrıştırılır. Ancak, height veya en boy oranı için ayrılan alan, alt metninin yüksekliğidir (veya genişliğidir). Çoğu geliştirici yalnızca bir genişlik tanımladığından, Resimlerin alınması ve oluşturulması kümülatif düzen kaymasına yol açarak web vitals'a zarar verir. Tarayıcılar, bu sorunu çözmek için resim en boy oranlarını destekler. <img> öğesine height ve width özellikleri eklendiğinde, boyutlandırma ipuçları, tarayıcıya en boy oranı hakkında bilgi verir, doğru nihai resim oluşturma için ayrılacak alan miktarı. Bir resme yükseklik ve genişlik değeri ekleyerek, tarayıcı resmin en boy oranını biliyor. Tarayıcı, %50'lik örneğimiz gibi tek bir boyutla karşılaştığında alandan tasarruf sağlar (ör. CSS boyutuna bağlı ve diğer boyutta genişlik-yükseklik en boy oranını koruyan resim) için.

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

CSS, duyarlı olacak şekilde doğru şekilde ayarlanmışsa resimleriniz duyarlı olmaya devam eder. Evet, dahil edilen birimsiz height ve width değerleri CSS ile geçersiz kılınır. Bu özellikleri eklemenin amacı, Böylece düzen kaymasını azaltarak performansı iyileştirebilirsiniz. Sayfada yine de yaklaşık olarak aynı miktarda yer alacaktır. gereken süreyi ifade eder, ancak resim ekranda 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 özellikleri. Nadiren kullanılır. Resim sunucu tarafı haritasının parçasıysa ismap Boole özelliğini ekleyin ve <img> öğesini, işaret cihazları olmayan kullanıcılar için bir bağlantıyla iç içe yerleştirin.

ismap özelliği, x ve y olarak <input type="image" name="imageSubmitName"> üzerinde gerekli değildir ve hatta desteklenmemektedir. Tıklama konumunun koordinatları, form gönderilirken gönderilir ve değerler varsa giriş adına eklenir. Örneğin, kullanıcı resmi tıkladığında formla birlikte &imageSubmitName.x=169&imageSubmitName.y=66 gibi bir şey gönderilir. gönderir. Resimde name özelliği yoksa x ve y gönderilir: &x=169&y=66.

Öğrendiklerinizi sınayın

Görüntülerle ilgili bilginizi test edin.