Web'deki metin, taşmaması için ekranın kenarında otomatik olarak kaydırılır. Bu durum görsellerle ilgilidir. Resimlerin doğuştan gelen bir boyutu vardır. Bir resim ekrandan daha genişse o resim taşar ve yatay bir kaydırma çubuğu görünür.
Neyse ki bunu önlemek için CSS'de önlemler alabilirsiniz.
Görüntülerinizi sınırlama
Stil sayfanızda, resimlerin hiçbir zaman kapsayıcı öğesinden daha geniş bir boyutta oluşturulmaması gerektiğini max-inline-size
kullanarak belirtebilirsiniz.
img {
max-inline-size: 100%;
block-size: auto;
}
Aynı kuralı videolar ve iframe'ler gibi diğer yerleşik içerik türlerine de uygulayabilirsiniz.
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
Bu kural uygulandığında tarayıcılar, görselleri otomatik olarak ekrana sığacak şekilde ölçeklendirir.
block-size
değerinin auto
eklenmesi, resimlerin en boy oranının sabit kalacağı anlamına gelir.
Bazen bir görselin boyutları sizin kontrolünüzün dışında olabilir (örneğin, içerik yönetim sistemi aracılığıyla resim eklenirse). Tasarımınız için bir resmin, resmin gerçek boyutlarından farklı bir en boy oranına sahip olması gerekiyorsa CSS'deki aspect-ratio
özelliğini kullanın.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
Ancak tarayıcı, resmi tercih ettiğiniz en boy oranına uyacak şekilde daraltabilir veya uzatabilir.
Bunu önlemek için object-fit
özelliğini kullanın.
contain
object-fit
değeri, tarayıcının üzerinde ve altında boş alan bırakmak anlamına gelse bile, resmin en boy oranını korumasını sağlar.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
cover
object-fit
değeri, resmin üst ve alttan kırpılması anlamına gelse bile, tarayıcıya resmin en boy oranını korumasını söyler.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
Üstten ve alttan eşit sıklıkta kırpmak bir sorun teşkil ediyorsa kırpmanın odağını ayarlamak için object-position CSS özelliğini kullanın.
En önemli resim içeriğinin 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;
}
Görüntülerinizi iletme
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ğine dair ipuçları da sağlayabilirsiniz.
Boyut ipuçları
Resmin boyutlarını biliyorsanız width
ve height
özelliklerini eklemeniz gerekir. Resim farklı bir boyutta oluşturulmuş olsa bile (max-inline-size: 100%
kuralınız nedeniyle) tarayıcı yine de genişlik-yükseklik oranını bilir ve doğru miktarda alanı bir kenara bırakabilir. Bu, resim yüklendiğinde diğer içeriklerinizin atlamasını önler.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
İpuçları yükleniyor
Tarayıcıya, resmin yüklenmesini, görüntü alanına veya yakınına gelene kadar geciktirip geciktirmeyeceğini bildirmek için loading
özelliğini kullanın. Ekranın alt kısmındaki resimler için lazy
değerini kullanın. Tarayıcı, kullanıcı, resmin görüntülenmek üzere olmasına yetecek kadar aşağı kaydırana kadar geç resimleri yüklemez. Kullanıcı sayfayı 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 resimlerde loading
kullanılmamalıdır. Siteniz loading="lazy"
özelliğini otomatik olarak uyguluyorsa bunun uygulanmasını önlemek için genellikle eager
özelliğini (varsayılan değer) ayarlayabilirsiniz:
<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 fetchpriority
özelliğini high
şeklinde ayarlayarak yüklemenin önceliğini daha da belirleyebilirsiniz:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
fetchpriority="high"
>
Bu, resimler normalde getirildiğinde tarayıcının düzeni tamamlamasını beklemek yerine, tarayıcıya resmi yüksek öncelikli olarak hemen getirmesini bildirir.
Ancak şunu unutmayın: Tarayıcıdan bir kaynağın (ör. görsel) indirilmesine öncelik vermesini istediğinizde, tarayıcının komut dosyası veya yazı tipi dosyası gibi başka bir kaynağın önceliğini kaldırması gerekecektir. Bir resim için fetchpriority="high"
değerini yalnızca gerçekten önemliyse ayarlayın.
Önceden yükleme ipuçları
JavaScript tarafından veya CSS'de arka plan resmi olarak eklenen bazı resimler ilk HTML'de bulunmayabilir. Bu önemli resimlerin önceden getirilmesini sağlamak için de önceden yüklemeyi kullanabilirsiniz. Bu, gerçekten önemli resimler için fetchpriority
özelliğiyle birleştirilebilir:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
Tarayıcı önceliklendirme buluşsal yöntemlerinin çok fazla geçersiz kılınmasını önlemek için bu yöntemi de dikkatli bir şekilde kullanmanız gerekir. Bu da performansta düşüşe neden olabilir.
Duyarlı resimlerin, imagesrcset
ve imagesizes
özellikleri aracılığıyla srcset'e (aşağıda açıklanmıştır) göre önceden yüklenmesi daha gelişmiş bir işlemdir ve bazı tarayıcılarda desteklenir ancak hepsinde desteklenmemektedir:
href
yedeğini hariç tutarak, bunu desteklemeyen tarayıcıların yanlış resmi önceden yüklememesini sağlayabilirsiniz.
Bu resimlerin tarayıcı desteğine bağlı olarak farklı resim biçimlerine göre önceden yükleme şu anda desteklenmemektedir ve fazladan indirme yapılmasına neden olabilir.
İdeal olan, önceden yükleme işleminden kaçınmak ve kodun ilk HTML'de mevcut olmasını sağlamak, kodun tekrarlanmasını önlemek ve tarayıcının desteklediği tüm seçeneklere erişime izin vermektir.
Resim kodu çözme
Ayrıca img
öğelerine ekleyebileceğiniz bir decoding
özelliği de vardır. Tarayıcıya, resmin kodunun eşzamansız olarak çözülebileceğini söyleyebilirsiniz. Böylece tarayıcı diğer içeriklerin işlenmesine öncelik verebilir.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
>
Görsel, ö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 kod çözme hızını değiştirmez. Yalnızca tarayıcının diğer içeriği oluşturmadan önce bu resim kodlamasının gerçekleşmesini bekleyip beklemeyeceğini belirtir.
Çoğu durumda bu küçük bir etkiye sahiptir. Ancak bazı durumlarda resmin veya içeriğin biraz daha hızlı görüntülenmesine izin verebilir. Örneğin, oluşturulması zaman alan birçok öğenin bulunduğu ve kodunun çözülmesi uzun süren büyük bir doküman söz konusu olduğunda, önemli resimlerde sync
politikasının ayarlanması, tarayıcının resmi beklemesini ve aynı anda oluşturmasını sağlar. Alternatif olarak async
politikasının ayarlanması, resmin kodunun çözülmesini beklemeden içeriğin daha hızlı görüntülenmesini sağlayabilir.
Bununla birlikte, genellikle aşırı DOM boyutundan kaçınmaya çalışmak ve duyarlı resimlerin kod çözme süresini kısaltmak için kullanıldığından emin olmak, kod çözme özelliğinin çok az etkiye sahip olmasını sağlamaktır.
srcset
ile uyumlu resimler
Bu max-inline-size: 100%
beyanı sayesinde resimleriniz hiçbir zaman kapsayıcılarından çıkmaz. Ancak, sığacak şekilde küçültülmüş büyük bir resme sahip olmak iyi görünse bile iyi hissetmez. Bir kullanıcı düşük bant genişliğine sahip bir ağda küçük ekranlı bir cihaz kullanırsa, gereksiz şekilde büyük resimler indirir.
Aynı resmin farklı boyutlarda birden fazla sürümünü oluşturursanız srcset
özelliğini kullanarak tarayıcıya bunları bildirebilirsiniz.
Genişlik tanımlayıcısı
Virgülle ayrılmış bir değerler listesi aktarabilirsiniz. Her değer, bir resmin URL'si, ardından bir boşluk ve ardından resimle ilgili meta veriler gelmelidir. Bu meta verilere açıklayıcı adı verilir.
Bu örnekte meta veri, w
birimini kullanan her resmin genişliğini tanımlar. Bir w
, bir pikseldir.
<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ğinin yerini almaz. Bunun yerine srcset
özelliği, src
özelliğini tamamlar. Yine de geçerli bir src
özelliğine sahip olmanız gerekir ancak artık tarayıcı, değerini srcset
özelliğinde listelenen seçeneklerden biriyle değiştirebilir.
Tarayıcı, gerekmedikçe büyük resimleri indirmez. Böylece bant genişliğinden tasarruf edilmiş olur.
Boyutlar
Genişlik açıklayıcısı 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 gösterilmesini beklediğiniz boyutu bildirir. Bu koşullar bir medya sorgusunda belirtilir.
sizes
özelliği, medya sorgularının ve resim 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, 66em
görünüm genişliğinin üzerinde, resmi ekranın üçte birinden daha geniş olmayacak şekilde görüntülemesini (örneğin, üç sütunlu bir düzen içinde) belirtiyorsunuz.
44em
ile 66em
arasındaki görüntü alanı genişlikleri için, resmi ekranın yarısı kadar görüntüleyin (iki sütunlu düzen).
44em
altındaki tüm öğeler 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örüntüleyebilen geniş bir tarayıcı penceresinde, tek bir 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ı
Aynı resmin birden çok sürümünü göndermek isteyebileceğiniz başka bir durum da vardır.
Bazı cihazlarda yüksek yoğunluklu ekranlar vardır. Çift yoğunluklu ekranda iki piksellik bilgiyi bir piksellik alana sığdırabilirsiniz. Bu, resimlerin bu tür ekranlarda net görünmesini sağlar.
src
özelliğindeki resimle ilişkili olarak resmin piksel yoğunluğunu açıklamak için yoğunluk açıklayıcısını kullanın. Yoğunluk açıklayıcısı, bir sayı ve ardından x harfi ile yazılır: 1x
, 2x
vb.
<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
öğesinin boyutu 300x200 piksel, medium-image.png
boyutu ise 600x400 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 1.5x
ile açıklayabilirsiniz.
Sunum amaçlı görseller
HTML'deki resimler içeriktir. Bu nedenle, ekran okuyucular ve arama motorları için her zaman görselin açıklamasını içeren bir alt
özelliği sağlamanız gerekir.
Anlamlı bir içeriği olmayan, tamamen görsel süslemelerden oluşan bir resim yerleştirirseniz boş bir alt
özelliği kullanın.
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
Yine de alt
özelliğini eklemeniz gerekir. Eksik bir alt
özelliği, boş bir alt
özelliği ile aynı değildir. Boş bir alt
özelliği, ekran okuyucuya bu resmin sunum olduğunu bildirir.
İdeal olarak, sunu veya süsleme amaçlı resimlerinizin HTML'nizde hiç olmaması gerekir. 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);
}
background-image
için image-set
işlevini kullanarak birden çok resim ö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 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 göz önünde bulundurmanız gereken birçok faktör vardır:
Her resim için doğru alanı ayırmak. Kaç boyuta ihtiyacınız olduğunu belirlemek. Resmin içerik mi yoksa dekoratif mi olduğuna karar verme.
Görselleri doğru şekilde çekmek için zaman harcamaya değer. Kötü görüntü stratejileri, kullanıcıların hayal kırıklığı ve rahatsız olmasına neden olur. İyi bir resim stratejisi, kullanıcının cihazından veya ağ bağlantısından bağımsız olarak sitenizin hızlı ve net görünmesini sağlar.
Araç setinizde resimleriniz üzerinde daha fazla kontrol sahibi olmanıza yardımcı olacak bir HTML öğesi daha vardır: picture
öğesi.
Öğrendiklerinizi sınayın
Görüntüler 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 resmin bu oranlara sığdırılma şeklinin ayarlanmasına hangi stiller 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
eklemek, CSS'nin resimlerinizi farklı bir şekilde biçimlendirebilmesini engeller.
srcset
özelliği, src
özelliğini _______ değil, _______.
srcset
kesinlikle src
özelliğinin yerine geçmez.Bir resimde alt
bulunmaması, boş bir alt
ile aynıdır.
alt
özelliği, ekran okuyucuya bu resmin sunum olduğunu bildiriralt
yönergesinin olmaması, ekran okuyucuya hiçbir şeyin olmadığını gösterir.