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.
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.](https://web.dev/static/learn/design/responsive-images/image/two-screenshots-first-s-fbd980b13ed58.png?authuser=19&hl=tr)
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.
![Ağzında top olan mutlu görünümlü yakışıklı bir köpeğin profili, ancak resim sıkıştırılmış.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-6886fa1061908.jpg?authuser=19&hl=tr)
Esneme veya esneme hareketlerini önlemek için
object-fit
mülkündeki her mülk.
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;
}
![Ağzında top olan mutlu görünümlü yakışıklı bir köpeğin profili; resmin iki tarafında da boşluk vardır.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-19f229b25e797.jpg?authuser=19&hl=tr)
![Ağzında top olan mutlu görünümlü yakışıklı bir köpeğin profili; Resim üstte ve alttan kırpıldı.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-9a3c6aedc16d2.jpg?authuser=19&hl=tr)
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.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
![Ağzında top olan mutlu görünümlü yakışıklı bir köpeğin profili; Resim yalnızca alttan kırpıldı.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-a9de08840e85f.jpg?authuser=19&hl=tr)
object-position
öğeyi kırpılacak şekilde ayarlayabilirsiniz
bir tarafı olmalıdır.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"
>
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"
>
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.
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).](https://web.dev/static/learn/design/responsive-images/image/two-versions-the-same-im-f13b154ee2cc8.png?authuser=19&hl=tr)
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.
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
contain
ve cover
gibi anahtar kelimelerle nasıl duracağını belirtin.image-fit
fit-image
aspect-ratio
Resimlere height
ve width
eklerseniz CSS'nin resimlere farklı stil özellikleri koymasını engeller.
srcset
özelliği, src
özelliğini _______ değil, _______.
srcset
, kesinlikle src
özelliğinin yerine geçmez.Bir resimde alt
eksikliği, boş alt
değeriyle aynıdır.
alt
özelliği, ekran okuyucuya bu resmin sunum amaçlı olduğunu belirtir.alt
yönergesinin olmaması, ekran okuyucuya hiçbir şeyin işaretlenmediğini gösterir.