Birçok site, belirli ekranlar için optimize edilmemiş yoğun kaynaklar (ör. resimler) ister ve bazı cihazların hiçbir zaman kullanmayacağı stilleri içeren büyük CSS dosyaları gönderir. Medya sorguları kullanımı, kullanıcılara aktarılan veri miktarını azaltmak ve sayfa yükleme performansını iyileştirmek üzere uyarlanmış stil sayfaları ve öğeleri farklı ekranlara yayınlamak için kullanılan popüler bir tekniktir. Bu kılavuzda, genellikle duyarlı resimler olarak bilinen bir teknik olan, olması gereken kadar büyük olan resimleri göndermek için medya sorgularını nasıl kullanacağınız gösterilmektedir.
Ön koşullar
Bu kılavuzda Chrome Geliştirici Araçları hakkında bilgi sahibi olduğunuz varsayılır. İsterseniz bunun yerine başka bir tarayıcının Geliştirici Araçları'nı kullanabilirsiniz. Yalnızca bu kılavuzdaki Chrome Geliştirici Araçları ekran görüntülerini, seçtiğiniz tarayıcıdaki alakalı özelliklerle eşlemeniz gerekir.
Duyarlı arka plan resimlerini anlama
Öncelikle, optimize edilmemiş demonun ağ trafiğini analiz edin:
- Optimize edilmemiş demoyu yeni bir Chrome sekmesinde açın.
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Sayfayı tekrar yükleyin.
İstekte bulunulan tek resmin boyutu 1006 KB olan background-desktop.jpg olduğunu göreceksiniz:
Tarayıcı penceresini yeniden boyutlandırın ve Ağ Günlüğünün sayfa tarafından yapılan yeni istekleri göstermediğine dikkat edin. Bu, tüm ekran boyutlarında aynı resim arka planının kullanıldığı anlamına gelir.
Arka plan resmini kontrol eden stilleri style.css dosyasında görebilirsiniz:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
Kullanılan özelliklerin her birinin anlamı aşağıda verilmiştir:
background-position: center center: Resmi dikey ve yatay olarak ortalayın.background-repeat: no-repeat: Resmi yalnızca bir kez gösterir.background-attachment: fixed: Arka plan resmini kaydırma yapmaktan kaçının.background-size: cover: Resmi tüm kapsayıcıyı kaplayacak şekilde yeniden boyutlandırın.background-image: url(images/background-desktop.jpg): Resmin URL'si.
Bu stiller birleştirildiğinde tarayıcıya, arka plan resmini farklı ekran yüksekliklerine ve genişliklerine uyarlamasını söyler. Bu, duyarlı bir arka plan elde etmek için atmanız gereken ilk adımdır.
Tüm ekran boyutlarında tek bir arka plan resmi kullanılmasıyla ilgili bazı sınırlamalar vardır:
- Ekran boyutundan bağımsız olarak, telefon gibi bazı cihazlarda daha küçük ve daha hafif bir resim arka planı da iyi görünecek olsa bile aynı miktarda bayt gönderilir. Genel olarak, performansı artırmak ve kullanıcı verilerinden tasarruf etmek için kullanıcının ekranında iyi görünen mümkün olan en küçük resmi göndermek istersiniz.
- Daha küçük cihazlarda görüntü tüm ekranı kaplayacak şekilde uzatılır veya kesilerek arka planın ilgili kısımları kullanıcılara gizlenir.
Sonraki bölümde, kullanıcının cihazına göre farklı arka plan resimleri yüklemek için optimizasyonun nasıl uygulanacağını öğreneceksiniz.
Medya sorgularını kullanma
Medya sorguları, yalnızca belirli medya veya cihaz türleri için geçerli olacak stil sayfalarını belirtmek amacıyla yaygın olarak kullanılan bir tekniktir. Bunlar, belirli stillerin tanımlandığı bir ayrılma noktası grubu tanımlamanıza olanak tanıyan @media kuralları kullanılarak uygulanır.
@media kuralıyla tanımlanan koşullar karşılandığında (ör. belirli bir ekran genişliği), ayrılma noktası içinde tanımlanmış stil grubu uygulanır.
Sayfayı isteyen cihazın maksimum genişliğine bağlı olarak, farklı resimlerin kullanılması amacıyla siteye medya sorguları uygulamak için aşağıdaki adımlar kullanılabilir.
style.cssiçinde, arka plan resminin URL'sini içeren satırı kaldırın:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
- Daha sonra, mobil cihaz, tablet ve masaüstü ekranlarında genellikle bulunan piksellerdeki yaygın boyutlara dayalı olarak her ekran genişliği için bir ayrılma noktası oluşturun:
Mobil cihazlar için:
@media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
Tabletler için:
@media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
Masaüstü cihazlar için:
@media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
Yapılan değişiklikleri görmek için tarayıcınızda style.css dosyasının optimize edilmiş sürümünü açın.
Farklı cihazlar için ölçüm yapma
Ardından, oluşturulan siteyi farklı ekran boyutlarında ve simüle edilmiş mobil cihazlarda görselleştirin:
- Optimize edilmiş siteyi yeni bir Chrome sekmesinde açın.
- Görüntü alanınızı dar hale getirin (en fazla
480px). - Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Sayfayı tekrar yükleyin.
background-mobile.jpggörselinin nasıl istendiğine dikkat edin. - Görüntü alanınızı genişletin. Genişlik
480pxsınırını aştığındabackground-tablet.jpgiçin nasıl istekte bulunulduğuna dikkat edin. Genişlik1025pxsınırını aştığındabackground-desktop.jpgiçin nasıl istekte bulunulduğuna dikkat edin.
Tarayıcı ekranının genişliği değiştirildiğinde yeni resimler istenir.
Özellikle genişlik, mobil ayrılma noktasında (480 piksel) tanımlanan değerin altında olduğunda aşağıdaki Ağ Günlüğünü görürsünüz:
Yeni mobil arka planın boyutu, masaüstünden % 67 daha küçük.
Largest Contentful Paint (LCP) üzerindeki etkiler
CSS arka plan resimlerine sahip öğeler Largest Contentful Paint (LCP) için aday olarak kabul edilirler. Ancak, CSS arka plan resimleri tarayıcının ön yükleme tarayıcısı tarafından keşfedilemez. Bu, dikkatli değilseniz sitenizin LCP'sini geciktirebileceğiniz anlamına gelir.
Dikkate almanız gereken ilk seçenek, LCP aday resminizin duyarlılık için srcset ve sizes özelliklerine sahip bir <img> öğesinde çalışıp çalışmayacağıdır. Tarayıcı ön yükleme tarayıcısı, <img> öğelerini bulacak ve ayrıştırıcı, oluşturma sırasında engellenmişken bunlar için istek gönderecektir.
CSS arka plan resmini kullanmaktan kaçınamıyorsanız (veya kullanmak istemiyorsanız) ikinci seçenek, uygun görüntü alanı boyutu için doğru resmi önceden yüklediğinizden emin olmak amacıyla duyarlı resimleri önceden yüklemek olacaktır. <link> öğeleri media, imagesrcset ve imagesizes özellikleri tarayıcıya, belirli bir kaynak ipucunun yalnızca belirli görüntü alanı koşullarında geçerli olduğuna dair ipucu verir. Böylece, yalnızca geçerli görüntü alanına uygun olan tek bir kaynağı yüklemek istediğinizde boşa yapılan birden fazla önceden yüklemeyi önler.
Özet
Bu kılavuzda, belirli ekran boyutlarına uyarlanmış arka plan resimleri istemek için medya sorgularını uygulamayı ve siteye cep telefonları gibi daha küçük cihazlardan erişirken bayt tasarrufu yapmayı öğrendiniz.
Duyarlı bir arka plan uygulamak için @media kuralını kullandınız. Bu teknik, tüm tarayıcılar tarafından yaygın olarak desteklenir.
Yeni bir CSS özelliği: image-set(), daha az kod satırıyla aynı amaç için kullanılabilir. Bu yazının yazıldığı tarihte, bu özellik tüm tarayıcılarda desteklenmemektedir, ancak söz konusu tekniğe ilginç bir alternatif sunabileceğinden, benimsenmenin nasıl geliştiğini takip etmek isteyebilirsiniz.