CSS arka plan resimlerini medya sorgularıyla optimize etme

Demián Renzulli

Birçok site, belirli ekranlar için optimize edilmemiş resimler gibi ağır kaynaklar ister ve bazı cihazların asla kullanmayacağı stilleri içeren büyük CSS dosyaları gönderir. Medya sorgularını kullanmak, kullanıcılara aktarılan veri miktarını azaltmak ve sayfa yükleme performansını artırmak için farklı ekranlara özel stil sayfaları ve öğeler sunmaya yönelik popüler bir tekniktir. Bu kılavuzda, yalnızca gerektiği kadar büyük olan resimleri göndermek için medya sorgularını nasıl kullanacağınız gösterilmektedir. Bu teknik, genellikle duyarlı resimler olarak bilinir.

Ön koşullar

Bu rehberde, Chrome Geliştirici Araçları hakkında bilgi sahibi olduğunuz varsayılmaktadır. İsterseniz başka bir tarayıcının geliştirici araçlarını kullanabilirsiniz. Bu kılavuzdaki Chrome Geliştirici Araçları ekran görüntülerini, seçtiğiniz tarayıcıdaki ilgili özelliklerle eşlemeniz yeterlidir.

Duyarlı arka plan resimlerini anlama

İlk olarak, optimize edilmemiş demoya ait ağ trafiğini analiz edin:

1. Optimum hale getirilmemiş demoyu yeni bir Chrome sekmesinde açın.
2. Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.
3. Ağ sekmesini tıklayın.
4. Sayfayı tekrar yükleyin.

Not: Geliştirici Araçları ile ilgili daha fazla yardıma ihtiyacınız varsa Chrome Geliştirici Araçları ile Ağ Etkinliğini İnceleme başlıklı makaleye göz atın.

İstenen tek resmin background-desktop.jpg olduğunu ve bu resmin boyutunun 1006 KB olduğunu görürsünüz:

Tarayıcı penceresini yeniden boyutlandırın ve Ağ Günlüğü'nde sayfa tarafından yapılan yeni isteklerin gösterilmediğini fark edin. Bu, tüm ekran boyutları için 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: Resim yalnızca bir kez gösterilir.
• background-attachment: fixed: Arka plan resminin kaydırılmasını önleyin.
• background-size: cover: Resmi, kapsayıcının tamamını 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ı söylenir. Bu, duyarlı bir arka plan elde etmenin ilk adımıdır.

Tüm ekran boyutları için tek bir arka plan resmi kullanmanın bazı sınırlamaları vardır:

• Ekran boyutundan bağımsız olarak aynı miktarda bayt gönderilir. Telefon gibi bazı cihazlarda daha küçük ve daha hafif bir görüntü arka planı aynı derecede iyi görünse bile bu durum değişmez. Genel olarak, performansı artırmak ve kullanıcı verilerini kaydetmek için kullanıcının ekranında iyi görünen en küçük resmi göndermek istersiniz.
• Daha küçük cihazlarda, resim tüm ekranı kaplayacak şekilde uzatılır veya kesilir. Bu durumda, arka planın alakalı kısımları kullanıcılar için gizlenebilir.

Sonraki bölümde, kullanıcının cihazına göre farklı arka plan resimleri yüklemek için optimizasyonu nasıl uygulayacağınızı öğreneceksiniz.

Medya sorgularını kullanma

Yalnızca belirli medya veya cihaz türleri için geçerli olacak stil sayfalarını bildirmek için medya sorgularını kullanmak yaygın bir tekniktir. Bunlar, belirli stillerin tanımlandığı bir dizi kesme noktası tanımlamanıza olanak tanıyan @media kuralları kullanılarak uygulanır. @media kuralı tarafından tanımlanan koşullar karşılandığında (ör. belirli bir ekran genişliği), kesme noktası içinde tanımlanan stil grubu uygulanır.

Sayfayı isteyen cihazın maksimum genişliğine bağlı olarak farklı resimler kullanılabilmesi için siteye medya sorguları uygulamak üzere aşağıdaki adımlar kullanılabilir.

• style.css içinde arka plan resmi 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);
}

• Ardından, mobil, tablet ve masaüstü ekranlarının genellikle sahip olduğu ortak piksel boyutlarına göre her ekran genişliği için bir kesme noktası oluşturun:

Mobil cihazlarda:

@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.

Not: Optimize edilmiş demoda kullanılan resimler, farklı ekran boyutlarına uyacak şekilde yeniden boyutlandırılmıştır. Resimlerin nasıl yeniden boyutlandırılacağı bu kılavuzun kapsamı dışındadır. Ancak bu konuda daha fazla bilgi edinmek isterseniz Duyarlı resim sunma kılavuzunda, sharp npm paketi ve ImageMagick CLI gibi bazı yararlı araçlar ele alınmaktadır.

Farklı cihazlar için ölçüm yapma

Ardından, ortaya çıkan siteyi farklı ekran boyutlarında ve simüle edilmiş mobil cihazlarda görselleştirin:

1. Optimize edilmiş siteyi yeni bir Chrome sekmesinde açın.
2. Görünüm alanınızı daraltın (480px'dan az).
3. Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.
4. Ağ sekmesini tıklayın.
5. Sayfayı tekrar yükleyin. background-mobile.jpg resminin nasıl istendiğine dikkat edin.
6. Görüntü alanınızı genişletin. 480px'dan daha geniş olduğunda background-tablet.jpg'nin nasıl istendiğine dikkat edin. 1025px'dan daha geniş olduğunda background-desktop.jpg'nin nasıl istendiğine dikkat edin.

Tarayıcı ekranının genişliği değiştirildiğinde yeni resimler istenir.

Özellikle genişlik, mobil kesme 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ü arka planının boyutundan % 67 daha küçüktür.

Largest Contentful Paint (LCP) üzerindeki etkiler

CSS arka plan resimlerine sahip öğeler, Largest Contentful Paint (LCP) için aday olarak kabul edilir. Ancak CSS arka plan resimleri tarayıcı önceden yükleme tarayıcısı tarafından keşfedilemez. Bu nedenle, dikkatli olmazsanız sitenizin LCP'sini geciktirebilirsiniz.

İlk olarak, LCP aday resminizin duyarlılık için srcset ve sizes özelliklerine sahip bir <img> öğesinde çalışıp çalışamayacağını değerlendirmeniz gerekir. Tarayıcı ön yükleme tarayıcısı, <img> öğelerini keşfeder ve ayrıştırıcı oluşturma işlemi engellenmişken bu öğeler için istek gönderir.

CSS arka plan resmi kullanmaktan kaçınamıyorsanız (veya kaçınmak istemiyorsanız) ikinci seçenek, uygun görüntü alanı boyutu için doğru resmi önceden yüklediğinizden emin olmak üzere duyarlı resimleri önceden yüklemektir. <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ğunu bildirir. Böylece, yalnızca mevcut görüntü alanına uygun olan kaynağı yüklemek istediğinizde birden fazla gereksiz ön yükleme yapılmaz.

Özet

Bu kılavuzda, belirli ekran boyutlarına göre uyarlanmış arka plan resimleri istemek için medya sorgularını nasıl uygulayacağınızı 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 olan image-set(), aynı amaçla daha az kod satırı kullanılarak kullanılabilir. Bu makalenin yazıldığı sırada bu özellik tüm tarayıcılarda desteklenmemektedir. Ancak bu teknik için ilginç bir alternatif olabileceğinden, kullanımının nasıl geliştiğini takip etmek isteyebilirsiniz.