Mengoptimalkan gambar latar CSS dengan kueri media

Demián Renzulli

Banyak situs meminta resource berat, seperti gambar, yang tidak dioptimalkan untuk layar tertentu, dan mengirim file CSS besar yang berisi gaya yang tidak akan pernah digunakan oleh beberapa perangkat. Penggunaan kueri media adalah teknik populer untuk mengirimkan stylesheet dan aset yang disesuaikan ke berbagai layar guna mengurangi jumlah data yang ditransfer ke pengguna dan meningkatkan performa pemuatan halaman. Panduan ini menunjukkan cara menggunakan kueri media untuk mengirim gambar yang ukurannya hanya sebesar yang diperlukan, sebuah teknik yang umumnya dikenal sebagai gambar responsif.

Prasyarat

Panduan ini mengasumsikan bahwa Anda sudah memahami Chrome DevTools. Anda dapat menggunakan DevTools browser lain jika mau. Anda hanya perlu memetakan screenshot Chrome DevTools dalam panduan ini kembali ke fitur yang relevan di browser pilihan Anda.

Memahami gambar latar responsif

Pertama, analisis traffic jaringan demo yang tidak dioptimalkan:

1. Buka demo yang tidak dioptimalkan di tab Chrome baru.
2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
3. Klik tab Jaringan.
4. Muat ulang halaman.

Catatan: Lihat Memeriksa Aktivitas Jaringan dengan Chrome DevTools jika Anda memerlukan bantuan lebih lanjut terkait DevTools.

Anda akan melihat bahwa satu-satunya gambar yang diminta adalah background-desktop.jpg, yang berukuran 1006 KB:

Ubah ukuran jendela browser dan perhatikan bahwa Log Jaringan tidak menampilkan permintaan baru yang dibuat oleh halaman. Artinya, latar belakang gambar yang sama digunakan untuk semua ukuran layar.

Anda dapat melihat gaya yang mengontrol gambar latar di style.css:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

Berikut arti setiap properti yang digunakan:

• background-position: center center: Memusatkan gambar secara vertikal dan horizontal.
• background-repeat: no-repeat: Menampilkan gambar hanya satu kali.
• background-attachment: fixed: Hindari membuat gambar latar belakang di-scroll.
• background-size: cover: Mengubah ukuran gambar agar menutupi seluruh penampung.
• background-image: url(images/background-desktop.jpg): URL gambar.

Jika digabungkan, gaya ini memberi tahu browser untuk menyesuaikan gambar latar belakang dengan tinggi dan lebar layar yang berbeda. Ini adalah langkah pertama untuk mendapatkan latar belakang yang responsif.

Menggunakan satu gambar latar belakang untuk semua ukuran layar memiliki beberapa batasan:

• Jumlah byte yang sama dikirim, terlepas dari ukuran layar, bahkan ketika, untuk beberapa perangkat, seperti ponsel, latar belakang gambar yang lebih kecil dan ringan akan terlihat sama bagusnya. Secara umum, Anda ingin mengirimkan gambar sekecil mungkin yang masih terlihat bagus di layar pengguna untuk meningkatkan performa dan menghemat data pengguna.
• Di perangkat yang lebih kecil, gambar akan diregangkan atau dipotong untuk menutupi seluruh layar, sehingga berpotensi menyembunyikan bagian latar belakang yang relevan bagi pengguna.

Di bagian berikutnya, Anda akan mempelajari cara menerapkan pengoptimalan untuk memuat gambar latar belakang yang berbeda, sesuai dengan perangkat pengguna.

Menggunakan kueri media

Penggunaan kueri media adalah teknik umum untuk mendeklarasikan stylesheet yang hanya akan berlaku untuk jenis media atau perangkat tertentu. Fitur ini diimplementasikan menggunakan aturan@media, yang memungkinkan Anda menentukan serangkaian titik henti sementara, tempat gaya tertentu ditentukan. Jika kondisi yang ditentukan oleh aturan @media terpenuhi (misalnya, lebar layar tertentu), grup gaya yang ditentukan di dalam titik henti sementara akan diterapkan.

Langkah-langkah berikut dapat digunakan untuk menerapkan kueri media ke situs sehingga gambar yang berbeda digunakan, bergantung pada lebar maksimum perangkat yang meminta halaman.

• Di style.css, hapus baris yang berisi URL gambar latar:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

• Selanjutnya, buat titik henti sementara untuk setiap lebar layar, berdasarkan dimensi umum dalam piksel yang biasanya dimiliki layar perangkat seluler, tablet, dan desktop:

Untuk perangkat seluler:

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

Untuk tablet:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

Untuk perangkat desktop:

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

Buka versi style.css yang dioptimalkan di browser Anda untuk melihat perubahan yang dilakukan.

Catatan: Gambar yang digunakan dalam demo yang dioptimalkan sudah diubah ukurannya agar sesuai dengan berbagai ukuran layar. Menunjukkan cara mengubah ukuran gambar berada di luar cakupan panduan ini, tetapi jika Anda ingin mengetahui lebih lanjut tentang hal ini, panduan Menyajikan gambar responsif membahas beberapa alat yang berguna, seperti paket npm sharp dan CLI ImageMagick.

Pengukuran untuk perangkat yang berbeda

Selanjutnya, visualisasikan situs yang dihasilkan dalam berbagai ukuran layar dan di perangkat seluler simulasi:

1. Buka situs yang dioptimalkan di tab Chrome baru.
2. Buat area tampilan Anda sempit (kurang dari 480px).
3. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
4. Klik tab Jaringan.
5. Muat ulang halaman. Perhatikan cara gambar background-mobile.jpg diminta.
6. Buat area pandang Anda lebih lebar. Setelah lebih lebar dari 480px, perhatikan bagaimana background-tablet.jpg diminta. Setelah lebih lebar dari 1025px, perhatikan bagaimana background-desktop.jpg diminta.

Saat lebar layar browser diubah, gambar baru akan diminta.

Khususnya saat lebar di bawah nilai yang ditentukan di titik henti sementara seluler (480 px), Anda akan melihat Log Jaringan berikut:

Ukuran latar belakang seluler baru 67% lebih kecil daripada latar belakang desktop.

Efek pada Largest Contentful Paint (LCP)

Elemen dengan gambar latar belakang CSS dianggap sebagai kandidat untuk Largest Contentful Paint (LCP), tetapi gambar latar belakang CSS tidak dapat ditemukan oleh pemindai pra-muat browser, yang berarti Anda dapat menunda LCP situs jika tidak berhati-hati.

Opsi pertama yang harus Anda pertimbangkan adalah apakah gambar kandidat LCP Anda dapat berfungsi dalam elemen <img> dengan atribut srcset dan sizes untuk responsivitas. Pemindai pramuat browser akan menemukan elemen <img>, dan mengirim permintaan untuk elemen tersebut saat parser diblokir pada rendering.

Jika Anda tidak dapat (atau tidak ingin) menghindari penggunaan gambar latar belakang CSS, opsi kedua adalah memuat gambar responsif terlebih dahulu untuk memastikan Anda memuat gambar yang tepat terlebih dahulu untuk ukuran area tampilan yang sesuai. Elemen <link> media, imagesrcset, dan imagesizes atribut memberi petunjuk kepada browser bahwa petunjuk resource tertentu hanya berlaku dalam kondisi area tampilan tertentu, sehingga menghindari beberapa pramuat yang sia-sia saat Anda hanya ingin memuat satu resource yang sesuai untuk area tampilan saat ini.

Ringkasan

Dalam panduan ini, Anda telah mempelajari cara menerapkan kueri media untuk meminta gambar latar yang disesuaikan dengan ukuran layar tertentu dan menghemat byte saat mengakses situs di perangkat yang lebih kecil, seperti ponsel. Anda menggunakan aturan @media untuk menerapkan latar belakang responsif. Teknik ini didukung secara luas oleh semua browser. Fitur CSS baru: image-set(), dapat digunakan untuk tujuan yang sama dengan lebih sedikit baris kode. Pada saat penulisan ini, fitur ini tidak didukung di semua browser, tetapi Anda mungkin ingin terus memantau perkembangan adopsinya, karena fitur ini dapat menjadi alternatif yang menarik untuk teknik ini.