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