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-fitcontain ve cover gibi anahtar kelimelerle nasıl uyumlu olacağını belirtin.image-fitfit-imageaspect-ratioResimlerinize 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.