Web'deki metin, taşmaması için ekranın kenarına otomatik olarak kaydırılır. Öte yandan, görüntülerin doğuştan gelen bir boyutu vardır. Bir resim ekrandan daha genişse resim taşar ve kullanıcının tümünü görmek için ekranı yatay olarak kaydırması gerekir.
Neyse ki CSS size bunu önleyecek araçlar sunuyor.
Görüntülerinizi sınırlama
Resimlerin hiçbir zaman bulundukları öğeden daha geniş bir boyutta oluşturulamayacağını belirtmek için stil sayfanızda max-inline-size
kullanabilirsiniz.
img {
max-inline-size: 100%;
block-size: auto;
}
Aynı kuralı videolar ve iframe'ler gibi diğer yerleştirilmiş içerik türlerine de uygulayabilirsiniz.
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
Bu kural uygulanırken tarayıcılar, görselleri otomatik olarak ekrana sığacak şekilde ölçeklendirir.
![İki ekran görüntüsü; birincisinde tarayıcı genişliğini aşan bir resim, ikincisinde ise aynı resim tarayıcı görüntü alanı içinde sınırlandırılmış olarak gösteriliyor.](https://web.dev/static/learn/design/responsive-images/image/two-screenshots-first-s-fbd980b13ed58.png?authuser=5&hl=tr)
block-size
değerinin auto
eklenmesi, tarayıcının resimlerinizi yeniden boyutlandırırken en boy oranını koruduğu anlamına gelir.
Bazen bir resmin boyutları içerik yönetim sistemi (İYS) veya başka bir içerik yayınlama sistemi tarafından ayarlanır. Tasarımınız İYS'nin varsayılanından farklı bir en boy oranı gerektiriyorsa sitenizin tasarımını korumak için aspect-ratio
özelliğini kullanabilirsiniz:
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
Ne yazık ki bu durum çoğu zaman, tarayıcının resmi istenen alana sığdırmak için sıkıştırması veya uzatması gerektiği anlamına gelir.
![Ezilmiş bir resimle ağzında bir top olan mutlu görünümlü yakışıklı köpeğin profili.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-6886fa1061908.jpg?authuser=5&hl=tr)
Esnemeyi ve esnemeyi önlemek için object-fit
özelliğini kullanın.
contain
object-fit
değeri, tarayıcıya resmin en boy oranını korumasını söyler ve gerekirse resmin etrafında boş alan bırakır.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
cover
object-fit
değeri, tarayıcıya resmin en boy oranını korumasını ve gerekirse resmi kırpmasını bildirir.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
![Ağzında bir top olan mutlu görünümlü yakışıklı bir köpeğin profili. Resmin her iki tarafında fazladan boşluk bırakılmış.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-19f229b25e797.jpg?authuser=5&hl=tr)
![Ağzında bir top olan mutlu görünümlü yakışıklı bir köpeğin profili. Resim yukarıdan ve alttan kırpılmış.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-9a3c6aedc16d2.jpg?authuser=5&hl=tr)
Kırpılan resmin konumunu object-position özelliğini kullanarak değiştirebilirsiniz. Bu işlem kırpma odağını ayarlayarak resmin en önemli kısmının hâlâ görünür olduğundan emin olabilirsiniz.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
![Ağzında bir top olan mutlu görünümlü yakışıklı bir köpeğin profili. Resim yalnızca alttan kırpılmış.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-a9de08840e85f.jpg?authuser=5&hl=tr)
object-position
özelliğini, resminizin yalnızca bir tarafını kırpacak şekilde ayarlayabilirsiniz.Resimlerinizi yayınlama
Bu CSS kuralları, tarayıcıya resimlerin nasıl oluşturulmasını istediğinizi bildirir. Ayrıca, HTML'nizde tarayıcının bu resimleri nasıl işlemesi gerektiği hakkında ipuçları da sağlayabilirsiniz.
Boyutlandırma ipuçları
Resminizin boyutlarını biliyorsanız her zaman width
ve height
özelliklerini ekleyin. max-inline-size
kuralınız nedeniyle resim farklı bir boyutta oluşturulmuş olsa bile tarayıcı genişlik-yükseklik oranını bilir ve doğru miktarda alanı kenara ayırabilir. Bu, resim yüklenirken diğer içeriğinizin
atlamasını önler.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
Yükleme ipuçları
Tarayıcıya, resmin yüklenmesini, görüntü alanının içine veya yakınına gelene kadar geciktirip geciktirmeyeceğini belirtmek için loading
özelliğini kullanın. Ekranın alt kısmındaki resimler için lazy
değerini kullanın. Kullanıcı, resim görünüme gelmek üzere olana kadar ekranı yeterince aşağı kaydırana kadar tarayıcı geç resimleri yüklemez. Kullanıcı hiç kaydırmazsa 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ındaki hero resim için loading
kullanmayın. Siteniz loading="lazy"
özelliğini otomatik olarak uyguluyorsa resimlerin geç yüklenmesini önlemek için loading
değerini genellikle varsayılan eager
değerine ayarlayabilirsiniz:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
>
Getirme Önceliği
LCP resmi gibi önemli resimlerde, fetchpriority
özelliğini high
değerine ayarlayarak Getirme Önceliği'ni kullanarak yüklemeye daha fazla öncelik verebilirsiniz:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
fetchpriority="high"
>
Bu yöntem, tarayıcının düzenini bitirip resimleri normal bir şekilde getirmesini beklemek yerine, resmi hemen ve yüksek öncelikli olarak getirmesini sağlar.
Ancak, tarayıcının resim gibi bir kaynağı indirmeye öncelik vermesini istediğinizde, tarayıcının komut dosyası veya yazı tipi dosyası gibi başka bir kaynağın önceliğini kaldırması gerekir. Bir resim için fetchpriority="high"
değerini yalnızca gerçekten önemliyse ayarlayın.
Önceden yükleme ipuçları
Mümkün olduğunda tüm resimleri başlangıç HTML dosyasına ekleyerek önceden yükleme işleminden kaçınmak en iyisidir. Ancak, JavaScript tarafından eklenen resimler veya bir CSS arka plan resmi gibi bazı resimler kullanılamayabilir.
Tarayıcının bu önemli resimleri önceden getirmesini sağlamak için önceden yüklemeyi kullanabilirsiniz. Gerçekten önemli resimler için bu önceden yüklemeyi fetchpriority
özelliğiyle birleştirebilirsiniz:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
Tarayıcının öncelik belirleme bulgularını çok sık geçersiz kılmamak için bu özellikleri de dikkatli bir şekilde kullanın. Bu parametrelerin aşırı kullanılması performansın düşmesine neden olabilir.
Bazı tarayıcılar, imagesrcset
ve imagesizes
özelliklerini kullanarak srcset değerine göre duyarlı resimleri önceden yüklemeyi destekler.
Ö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
desteği olmayan tarayıcıların da doğru resmi önceden yüklemesini sağlayabilirsiniz.
Belirli biçimlerin tarayıcı desteğine bağlı olarak farklı biçimlerdeki resimleri önceden yükleyemezsiniz. Bunu yapmaya çalışmak, kullanıcı verilerinin boşa harcanmasına yol açan fazladan indirmelere yol açabilir.
Resim kodu çözme
img
öğelerine ekleyebileceğiniz bir decoding
özelliği de vardır. Tarayıcıya, resmin kodunun eşzamansız olarak çözülebileceğini söyleyebilir ve böylece, resim diğer içerikleri işlemeye öncelik verebilir.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
>
Resmin kendisi, öncelik verilmesi gereken en önemli içerikse sync
değerini kullanabilirsiniz.
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
decoding="sync"
>
decoding
özelliği, resmin kodunun çözme hızını değiştirmez. Yalnızca tarayıcının diğer içeriği oluşturmadan önce bu resim kodu çözme işleminin gerçekleşmesini bekleyip beklemeyeceğini etkiler.
Çoğu durumda bunun fazla etkisi olmaz, ancak bazen tarayıcının resminizi veya diğer içerikleri biraz daha hızlı görüntülemesine izin verebilir. Örneğin, oluşturulması zaman alan çok sayıda öğenin bulunduğu ve kodu çözmesi uzun süren büyük resimler içeren büyük bir doküman için önemli resimlerde sync
değerinin ayarlanması, tarayıcının resmi beklemesini ve aynı anda her ikisini de oluşturmasını sağlar. Alternatif olarak, tarayıcının içeriği daha hızlı görüntülemesini sağlamak ve resmin kodunun çözülmesini beklemek için async
seçeneğini ayarlayabilirsiniz.
Ancak, kod çözme süresini kısaltmak için decoding
kullanmak yerine, genellikle aşırı DOM boyutundan kaçınmayı denemek ve duyarlı resimler kullanmak daha iyi bir seçenektir.
srcset
ile uyumlu resimler
Bu max-inline-size: 100%
bildirimi sayesinde görüntüleriniz container'larından ayrılamaz. Ancak, kullanıcının küçük bir ekranı ve düşük bant genişliğine sahip bir ağı varsa bu kullanıcının, daha büyük ekranlı kullanıcılarla aynı boyutlu resimleri indirmesi veri kaybına yol açar.
Bu sorunu düzeltmek için aynı resmin farklı boyutlarda birden fazla sürümünü ekleyin ve tarayıcıya bu boyutların mevcut olup olmadığını ve ne zaman kullanılacağını bildirmek için srcset
özelliğini kullanın.
Genişlik açıklayıcı
Virgülle ayrılmış değer listesi kullanarak bir srcset
tanımlayabilirsiniz. Her değer, resmin URL'si, ardından bir boşluk, ardından da resimle ilgili açıklayıcı adı verilen bazı meta verilerden oluşur.
Bu örnekte meta veri, w
birimini kullanan her resmin genişliğini tanımlar. Bir 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.
Yine de geçerli bir src
özelliğine sahip olmanız gerekir ancak tarayıcı, değerini srcset
politikasında listelenen seçeneklerden biriyle değiştirebilir. Bant genişliğinden tasarruf etmek için tarayıcı yalnızca
büyük resmi indirir.
Boyutlar
Genişlik açıklayıcıyı kullanıyorsanız tarayıcıya daha fazla bilgi vermek için sizes
özelliğini de kullanmanız gerekir. Bu, tarayıcıya resmin farklı koşullarda hangi boyutta görüntülenmesini beklediğinizi bildirir. Bu koşullar bir medya sorgusunda belirtilir.
sizes
özelliği, medya sorgularının ve görüntü genişliklerinin virgülle ayrılmış bir listesini alır.
<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ği 66em
değerinden büyük olan bir görüntü alanında, resmi ekranın üçte birinden daha geniş olmayacak şekilde görüntülemesini (örneğin, üç sütunlu bir düzende) belirtiyorsunuz.
44em
ile 66em
arasındaki görüntü alanı genişlikleri için resmi, ekranın yarısı kadar genişliğinde görüntüleyin (iki sütunlu düzende olduğu gibi).
44em
boyutundan daha dar olan resimler için resmi ekranın tam genişliğinde görüntüleyin.
Bu, en büyük resmin en geniş ekranda kullanılmayacağı anlamına gelir. Çok sütunlu bir düzen gösterebilen geniş bir tarayıcı penceresinde, tek sütuna sığan bir resim kullanılır. Bu resim, daha dar bir ekranda tek sütunlu bir düzen için kullanılan resimden daha küçük olabilir.
Piksel yoğunluğu açıklayıcı
Tanımlayıcılar, resimlerin yüksek yoğunluklu ekranlarda daha yüksek çözünürlüklerde net görünmelerini sağlamak amacıyla görüntülerin alternatif sürümlerini sağlamak için de kullanabilirsiniz.
![Ağzında bir top olan mutlu görünümlü yakışıklı bir köpeğin, biri net diğeri ise bulanık görünen iki versiyonunun iki versiyonu.](https://web.dev/static/learn/design/responsive-images/image/two-versions-the-same-im-f13b154ee2cc8.png?authuser=5&hl=tr)
src
özelliğindeki resimle ilişkili olarak resmin piksel yoğunluğunu açıklamak için yoğunluk açıklayıcıyı kullanın. Yoğunluk açıklayıcısı, 1x
veya 2x
'da olduğu gibi ardından x harfiyle devam eden bir sayıdır.
<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
300 x 200 piksel boyutunda ve medium-image.png
600 x 400 pikselse srcset
listesinde medium-image.png
öğesinden sonra 2x
olabilir.
Tam sayı kullanmanız gerekmez. Resmin başka bir sürümünün boyutu 450x300 pikselse bunu 1.5x
ile açıklayabilirsiniz.
Sunum amaçlı resimler
HTML'deki resimler içeriktir. Bu nedenle, ekran okuyucular ve arama motorları için görselin bir açıklamasına alt
özelliğini eklersiniz.
Anlamlı bir içeriği olmayan dekoratif bir resim yerleştirirseniz boş bir alt
özelliği kullanabilirsiniz.
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
Boş olsa bile her zaman alt
özelliğini eklemeniz gerekir.
Boş bir alt
özelliği, ekran okuyucuya resmin sunum olduğunu bildirir. Eksik alt
özelliği bu bilgiyi sağlamaz.
İdeal olarak, sunum amaçlı veya süsleme amaçlı resimler HTML yerine CSS ile birlikte kullanılır. HTML, yapı içindir. CSS sunum içindir.
Arka plan resimleri
Sunum resimlerini yüklemek için CSS'de background-image
özelliğini kullanın.
element {
background-image: url(flourish.png);
}
background-image
için image-set
işlevini kullanarak birden fazla görüntü önerisi belirtebilirsiniz.
CSS'deki image-set
işlevi, HTML'deki srcset
özelliğine çok benzer.
Her biri için bir piksel yoğunluğu tanımlayıcısı içeren 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 göz önünde bulundurmanız gereken birçok faktör vardır. Örneğin:
- Her resim için doğru alanı ayırma.
- Kaç boyuta ihtiyacınız olduğunu anlama.
- Resmin içerik mi yoksa dekoratif mi olduğuna karar vermek.
Resimlerinizi doğru şekilde hazırlamak için zaman harcamaya 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, kullanıcının cihazından veya ağ bağlantısından bağımsız olarak sitenizin rahatsız edici ve keskin görünmesini sağlar.
Araç setinizde, görselleriniz üzerinde daha fazla kontrol sahibi olmanızı sağlayacak bir HTML öğesi daha bulunur: picture
öğesi.
Öğrendiklerinizi sınayın
Görseller hakkındaki 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 zorlandığında hangi stiller resmin bu oranlara sığdırılacağını ayarlamaya yardımcı olabilir?
object-fit
contain
ve cover
gibi anahtar kelimelerle nasıl uyumlu olacağını belirtin.image-fit
fit-image
aspect-ratio
Resimlerinize height
ve width
yerleştirmek CSS'nin resimleri farklı bir şekilde biçimlendirmesini engeller.
srcset
özelliği, src
özelliğini _______ değil, _______.
srcset
kesinlikle src
özelliğinin yerine geçmez.Bir resimde alt
eksikliği, boş bir alt
ile aynıdır.
alt
özelliği, ekran okuyucuya bu resmin sunum amaçlı olduğunu bildirir.alt
yönergesinin olmaması, ekran okuyucuya hiçbir şeyin olmadığı anlamına gelir.