Google I/O'ya katıldığınız için teşekkürler! İçerikleri isteğe bağlı olarak izleyin.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Uyumlu görseller

Web'deki metin, ekranın kenarından otomatik olarak kaydırılır. taşma. Öte yandan, görsellerin doğal bir boyutu vardır. Resim ekrandan genişse resim taşar ve kullanıcının sayfayı yatay olarak görüntüleyebilirsiniz.

Neyse ki CSS, bunun olmasını önleyecek araçlar sağlar.

Resimlerinizi kısıtlama

Stil sayfanızda max-inline-size değerini kullanabilirsiniz. görsellerin hiçbir zaman boyutlarından daha geniş bir boyutta oluşturulamayacağını belirtmek öğesidir.

Tarayıcı Desteği

Kaynak

img {
  max-inline-size: 100%;
  block-size: auto;
}

Aynı kuralı, videolar gibi diğer yerleştirilmiş içerik türlerine de uygulayabilirsiniz. ve iframe'ler.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

Bu kural geçerli olduğunda, tarayıcılar, görselleri web sitesine sığacak şekilde otomatik olarak ölçeklendirir. tıklayın.

İki ekran görüntüsü; ilkinde, tarayıcı genişliğinden geçen bir resim görüntülenir; ikincisinde, aynı resim tarayıcı görünümü içinde kısıtlanmış olarak gösterilir. — Resminizi kısıtlamak kullanıcıların resmin tamamını görmesine olanak tanır kullanarak daha fazla bilgi edinebilirsiniz.

block-size ekleme auto değeri, tarayıcının resimlerinizi koruduğu anlamına gelir. en-boy oranına yeniden boyutlandırır.

Bazen bir resmin boyutları bir içerik yönetim sistemi (İYS) tarafından ayarlanır veya başka bir içerik gönderme sistemi var. Tasarımınız farklı bir en boy oranı gerektiriyorsa İYS'nin varsayılan ayarından, aspect-ratio özelliğini kullanın:

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

Maalesef bu durumda çoğu zaman tarayıcının resmi sıkıştırması veya genişletmesi gerekir istenen alana sığdırır.

Resmin en boy oranını değiştirdiğinizde esnemiş veya esnetilmiş olabilir.

Esneme veya esneme hareketlerini önlemek için object-fit mülkündeki her mülk.

Tarayıcı Desteği

Kaynak

object-fit değeri olan contain, tarayıcıya resmin en-boy oranını girin. Gerekirse resmin etrafında boş alan bırakın.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

object-fit değeri olan cover, tarayıcıya resmin en boy oranı sağlanmalıdır (gerekirse resim kırpılır).

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

"Nesne sığdırma" için iki farklı değer uygulanmış aynı resim. Birincisinin "object-fit" değeri "şunu içerir:". İkincisinin "object-fit" değeri "cover"dır.

ziyaret edin. 'nı inceleyin.

Kırpılan resmin konumunu object-position Bu işlem, kırpmanın odağını ayarlar. Böylece, fotoğraflarınızın resmin önemli bir bölümü görünmeye devam ediyor.

Tarayıcı Desteği

Kaynak

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

object-position öğesini kırpılacak şekilde ayarlayabilirsiniz tek taraflı olarak gösterilir.

Resimlerinizi yayınlama

Bu CSS kuralları, tarayıcıya resimlerin nasıl oluşturulmasını istediğinizi bildirir. Şunları yapabilirsiniz: ayrıca, HTML'nizde tarayıcının bu resimleri nasıl işlemesi gerektiğine ilişkin ipuçları sağlar.

Boyutlandırma ipuçları

Resminizin boyutlarını biliyorsanız width ve height değerlerini her zaman ekleyin özellikleri hakkında daha fazla bilgi edinin. Bağlantınız nedeniyle resim farklı bir boyutta oluşturulsa bile, max-inline-size kuralı uygulanırsa tarayıcı genişlik-yükseklik oranını bilir ve gereken miktarda alan ayırabiliriz. Bu işlem, diğer içeriklerinizin etrafta zıplayıp zıplayarak.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

İlk videoda, tanımlanmış resim boyutları olmayan bir düzen gösteriliyor. Nasıl olduğuna dikkat edin resimler yüklendiğinde metin atlıyor. İkinci videoda, resim boyutları sağlandığından, tarayıcı resim ve metin için yer bırakır resim yüklenirken etrafta zıplıyor.

Yüklemeyle ilgili ipuçları

Tarayıcıya,loading görüntü alanına girene kadar veya yakın bir yere gelene kadar resim üzerinde kalır. Ekranın alt kısmındaki resimler için bir değer kullanın / lazy. Kullanıcı çok fazla kaydırana kadar tarayıcı geç resimleri yüklemez resmin görünmesi için yeterince aşağı yerleştirin. Kullanıcı hiçbir zaman resim hiçbir zaman yüklenmez.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

Geç yüklenen görüntüler, kullanıcı yüklenene kadar yüklenmeyi bekler kaydırmak üzere.

Ekranın üst kısmında hero resim için loading kullanmayın. Siteniz otomatik olarak loading="lazy" özelliğini uyguladığından, genellikle loading öğesini resimlerin geç yüklenmesini önlemek için varsayılan eager değeri:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Getirme Önceliği

LCP resmi gibi önemli resimler için Getirme Önceliği'ni kullanarak yüklemeyi önceliklendirmek için fetchpriority özelliğini high olarak ayarlamak:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

Bu, tarayıcının resmi hemen ve yüksek öncelikte getirmesini söyler tamamlamak yerine, tarayıcının düzeni tamamlamasını ve sisteme görüntüler.

Ancak tarayıcıdan bir kaynağın indirilmesine öncelik vermesini istediğinizde tarayıcıda komut dosyası veya tarayıcı gibi başka bir kaynağın önceliğini yazı tipi dosyası ekleyin. fetchpriority="high" özelliğini yalnızca gerçekten çok önemliyse resimlere yerleştirin.

Önceden yüklemeyle ilgili ipuçları

Mümkün olduğunda önceden yüklemeden kaçınmak için en iyi yöntem, tüm resimleri ilk HTML dosyası olabilir. Ancak resim gibi bazı görseller kullanılamayabilir. JavaScript veya bir CSS arka plan resmi tarafından eklenen resimler.

Tarayıcının bu önemli resimleri uygulamadan önce getirmesini sağlamak için gerekir. Gerçekten önemli resimler için bu önceden yükleme ile fetchpriority özelliği:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Yine de tarayıcının tespit etme yöntemlerini çok sık kullanıyor. Aşırı kullanılması performansa neden olabilir dönüşüme yol açabilir.

Bazı tarayıcılar duyarlı resimlerin önceden yüklenmesini destekler imagesrcset ve imagesizes özelliklerini kullanarak srcset değerine göre. Örneğin:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

href yedeğini hariç tutarak srcset içermeyen tarayıcılarda destek ekibi, doğru resmin önceden yüklenmesini sağlayabilir.

Şu tarayıcı desteğine bağlı olarak farklı biçimlerdeki resimleri önceden yükleyemezsiniz: belirli biçimlerdir. Bunu yapmaya çalışmak, kullanıcıların boşa çıkmasına neden olan ekstra indirmelerle sonuçlanabilir dışı verilerdir.

Resim kodu çözme

Ayrıca img öğelerine ekleyebileceğiniz bir decoding özelliği de vardır. Örneğin, resmin eşzamansız olarak çözülebildiğini ve dolayısıyla diğer içerikleri işleme alabilir.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
>

Resmin kendisi en önemli parçaysa sync değerini kullanabilirsiniz daha fazla bilgi edineceksiniz.

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 decoding="sync"
>

decoding özelliği, resmin kodu çözme hızını değiştirmez. Etkiler yalnızca tarayıcının bu resim kodu çözme işleminin tamamlanmasını bekleyip beklemeye devam oluşturarak başlayın.

Çoğu durumda bu, çok fazla etki göstermez ancak bazen tarayıcınızın, resminizi veya diğer içerikleri biraz daha hızlı görüntülemesini sağlar. Örneğin, oluşturulması zaman alan çok sayıda öğe içeren ve boyutu büyük olan, kodu çözmesi uzun süren resimler. Önemli resimlere sync değeri eklemek tarayıcının resmi beklemesine ve her ikisini de aynı anda oluşturmasına izin verir. Alternatif olarak: Tarayıcının, içeriği daha hızlı ve daha az trafik gerektirmeden görüntülemesini sağlamak için async resmin kodunu çözmesi bekleniyor.

Ancak daha iyi seçenek genellikle aşırı DOM boyutlarından kaçının ve kod çözme süresini kısaltmak için decoding yerine duyarlı resimler kullanın.

`srcset` ile duyarlı resimler

Bu max-inline-size: 100% beyanı sayesinde resimleriniz seçilemiyor sağlayabilir. Ancak kullanıcının ekranı küçükse ve bant genişliği düşükse ağ, bu da büyük ekranlı kullanıcılarla aynı boyutta görseller indirmelerini sağlar veri israfına neden olur.

Bu sorunu düzeltmek için aynı resmin farklı boyutlarda birden çok sürümünü ekleyin. ve srcset özelliğini kullanın.

Genişlik tanımlayıcısı

Virgülle ayrılmış değer listesi kullanarak bir srcset tanımlayabilirsiniz. Her bir değer Bir resmin URL'sini, ardından bir boşluk ve ardından videoyla ilgili bazı meta verileri açıklayıcı adı verilen bir resim içerir.

Bu örnekte, meta veriler her resmin genişliğini w kullanarak açıklar. girin. w, bir pikselin genişliğidir.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

srcset özelliği, src özelliğini değiştirmek yerine tamamlar. Geçerli bir src özelliğinizin olması gerekir ancak tarayıcı, bu özelliği değiştirebilir değerini srcset içinde listelenen seçeneklerden biriyle değiştirin. Bant genişliğinden tasarruf etmek için tarayıcı yalnızca gerekliyse büyük resmi indirir.

Boyutlar

Genişlik tanımlayıcısını kullanıyorsanız, sizes özelliğini kullanın. Bu, tarayıcıya hangi boyutun resmin farklı koşullarda görüntülenmesini beklersiniz. Bu koşulları bir ortam sorgusunda belirtilir.

sizes özelliği, medya sorgularının ve resmin virgülle ayrılmış bir listesini alır emin olun.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

Bu örnekte, tarayıcıya, genişliğinin üzerinde olan bir görüntü alanında 66em, resmi ekranın üçte birinden daha geniş olmayacak şekilde görüntülemelidir (örneğin, üç sütunlu bir düzen içinde).

44em ile 66em arasındaki görüntü alanı genişlikleri için, resmi ekranın ekranın genişliğine (iki sütunlu düzende olduğu gibi) izin verir.

44em değerinden daha dar öğelerde resmi tıklayın.

Bu, en büyük resmin her zaman en geniş boyut için kullanılmayacağı anlamına gelir tıklayın. Çok sütunlu düzeni görüntüleyebilen geniş bir tarayıcı penceresinde bir sütuna sığan bir resim; metin sayfası için kullanılan bir resimden daha daha dar bir ekranda tek sütunlu düzen.

Sayfanızın görünümünü değiştirmek için boyut tanımlayıcıları kullanın arka planda çalışır.

Piksel yoğunluğu tanımlayıcısı

Ayrıca, açıklayıcı reklamlar göstermek için görsellerin alternatif bir sürümünü görüntülerin yüksek oranda keskin görünmesi için yüksek yoğunluklu ekranlarda gösterilir. bir çözüm sunabilir.

Ağzında top olan mutlu görünümlü yakışıklı bir köpeğin aynı resminin iki versiyonu (biri berrak, diğeri bulanık görünüyor). — Daha düşük piksel yoğunluklarına sahip resimler bulanık görünebilir.

Yoğunluk tanımlayıcısını kullanarak resmin piksel yoğunluğunu src özelliğindeki resimle ilişkilidir. Yoğunluk tanımlayıcısı bir sayıdır ve ardından x harfi eklenir (ör. 1x veya 2x).

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

small-image.png boyutunun 300 x 200 piksel olması ve medium-image.png değerinin 600 x 400 piksel, ardından medium-image.png,2x srcset listesi.

Tam sayıları kullanmanız gerekmez. Resmin başka bir sürümü 450 300 piksel boyutundaysa 1.5x ile açıklayabilirsiniz.

Sunu resimleri

HTML'deki resimler içeriktir. Bu nedenle alt özelliğini eklediniz. Ekran okuyucular ve arama motorları için resmin bir açıklamasıyla birlikte.

Herhangi bir anlamlı tasarıma sahip olmadan dekoratif bir resim yerleştirirseniz içerik için boş bir alt özelliği kullanabilirsiniz.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

alt özelliğini, boş olsa bile her zaman eklemeniz gerekir. Boş bir alt özelliği, ekran okuyucuya resmin sunumdur. Eksik bir alt özelliği, bu bilgiyi sağlamaz.

İdeal olan, sunum amaçlı veya dekoratif resimlerin yerine CSS'ye eklenmesi HTML'ye dokunun. HTML yapı içindir. CSS sunum içindir.

Arka plan resimleri

Sunu resimlerini yüklemek için CSS'de background-image özelliğini kullanın.

element {
  background-image: url(flourish.png);
}

Şunu kullanarak birden fazla resim önerisi belirtebilirsiniz: image-set fonksiyonudur.background-image

CSS'deki image-set işlevi, HTML'deki srcset özelliğine benzer şekilde çalışır. Her biri için piksel yoğunluğu tanımlayıcısıyla birlikte bir resim listesi sağlayın.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

Tarayıcı, cihazın piksel yoğunluğu için en uygun resmi seçer.

Sitenize resim eklerken dikkate almanız gereken birçok faktör vardır. şunları içerir:

Her resim için doğru alanı ayırmak.
Kaç boyuta ihtiyacınız olduğunu belirleme.
Resmin içerik mi yoksa dekoratif mi olduğuna karar verme.

Resimlerinizi doğru şekilde oluşturmak için zaman ayırmaya değer. Kötü resim stratejileri kullanıcılarınızı rahatsız edip hayal kırıklığına uğratabilir. İyi bir resim stratejisi, sitenizin daha iyi görünmesini sağlar kullanıcının cihazından veya ağ bağlantısından bağımsız olarak hızlı ve keskindir.

Araç setinizde kullanabileceğiniz bir HTML öğesi daha var. resimler: picture öğesi.

Öğrendiklerinizi sınayın

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

Resimlerin görüntü alanına sığması için stiller eklenmelidir.

Doğru

Çevreleme içermeyen resimler doğal boyutları kadar büyük olur.

Yanlış

Stiller gerekli.

Bir resmin yüksekliği ve genişliği doğal olmayan bir en boy oranına zorunlu tutulduğunda, hangi stiller resmin bu oranlara sığacağını ayarlamanıza yardımcı olabilir?

object-fit

Resmin contain ve cover gibi anahtar kelimelerle nasıl duracağını belirtin.

image-fit

Bu mülk mevcut değil, ben uydurdum.

fit-image

Bu mülk mevcut değil, ben uydurdum.

aspect-ratio

Bu durum, doğal olmayan resim oranına neden olabilir veya sorunu giderebilir.

Resimlere height ve width eklerseniz CSS'nin resimlere farklı stil özellikleri koymasını engeller.

Doğru

Bunları kurallardan çok ipuçları olarak düşünün.

Yanlış

Yükseklik ve genişlik etikette satır içinde olsa bile CSS, resimleri boyutlandırmak için çok sayıda dinamik seçeneğe sahiptir.

srcset özelliği, src özelliğini _______ değil, _______.

tamamlayıcı, değiştirir

srcset, kesinlikle src özelliğinin yerine geçmez.

değiştirme, tamamlayanlar

Uygunsa tarayıcının aralarından seçim yapabileceği ek seçenekler sağlar.

Bir resimde alt eksikliği, boş alt değeriyle aynıdır.

Doğru

Boş bir alt özelliği, ekran okuyucuya bu resmin sunum amaçlı olduğunu belirtir.

Yanlış

alt yönergesinin olmaması, ekran okuyucuya hiçbir şeyin işaretlenmediğini gösterir.

Uyumlu görseller

Resimlerinizi kısıtlama

Resimlerinizi yayınlama

Boyutlandırma ipuçları

Yüklemeyle ilgili ipuçları

Getirme Önceliği

Önceden yüklemeyle ilgili ipuçları

Resim kodu çözme

srcset ile duyarlı resimler

Genişlik tanımlayıcısı

Boyutlar

Piksel yoğunluğu tanımlayıcısı

Sunu resimleri

Arka plan resimleri

Öğrendiklerinizi sınayın

`srcset` ile duyarlı resimler