Mengoptimalkan gambar latar CSS dengan kueri media

Demián Renzulli

Banyak situs meminta sumber daya berat, seperti gambar, yang tidak dioptimalkan untuk layar tertentu, dan mengirim file CSS besar berisi gaya yang tidak akan pernah digunakan oleh sebagian perangkat. Menggunakan kueri media adalah teknik yang populer untuk menampilkan stylesheet dan aset yang disesuaikan ke berbagai layar guna mengurangi jumlah data yang ditransfer kepada pengguna dan meningkatkan performa pemuatan halaman. Panduan ini menunjukkan cara menggunakan kueri media untuk mengirim gambar yang berukuran hanya sebesar yang seharusnya, teknik yang umumnya dikenal sebagai gambar responsif.

Prasyarat

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

Memahami gambar latar responsif

Pertama, analisis traffic jaringan dari 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 Network
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 memiliki ukuran 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 dari setiap properti yang digunakan:

• background-position: center center: Memusatkan gambar secara vertikal dan horizontal.
• background-repeat: no-repeat: Menampilkan gambar hanya sekali.
• background-attachment: fixed: Hindari meng-scroll gambar latar.
• background-size: cover: Mengubah ukuran gambar untuk mencakup seluruh penampung.
• background-image: url(images/background-desktop.jpg): URL gambar.

Saat dikombinasikan, gaya ini memberi tahu browser untuk menyesuaikan gambar latar dengan berbagai tinggi dan lebar layar. Ini adalah langkah pertama untuk mencapai latar belakang responsif.

Penggunaan gambar latar tunggal untuk semua ukuran layar memiliki beberapa batasan:

• Jumlah byte yang dikirim sama, berapa pun ukuran layarnya, meskipun untuk beberapa perangkat, seperti ponsel, latar belakang gambar yang lebih kecil dan lebih ringan akan terlihat sama bagusnya. Secara umum, Anda sebaiknya mengirim gambar sekecil mungkin yang masih terlihat bagus di layar pengguna untuk meningkatkan performa dan menghemat data pengguna.
• Pada perangkat yang lebih kecil, gambar akan direntangkan atau dipotong untuk menutupi seluruh layar, yang berpotensi menyembunyikan bagian latar belakang yang relevan kepada pengguna.

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

Menggunakan kueri media

Menggunakan kueri media adalah teknik umum untuk mendeklarasikan stylesheet yang hanya akan berlaku pada jenis media atau perangkat tertentu. Tema tersebut diimplementasikan menggunakan aturan@media, yang memungkinkan Anda menentukan kumpulan titik henti sementara, tempat gaya tertentu ditentukan. Saat 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 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 dibuat.

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

Mengukur untuk berbagai perangkat

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

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

Saat lebar layar browser diubah, gambar baru akan diminta.

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

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

Efek pada Largest Contentful Paint (LCP)

Elemen dengan gambar latar CSS dianggap sebagai kandidat untuk Largest Contentful Paint (LCP), tetapi gambar latar CSS tidak dapat ditemukan oleh pemindai pramuat 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 saat rendering.

Jika Anda tidak dapat (atau tidak ingin) menghindari penggunaan gambar latar CSS, opsi kedua adalah memuat gambar responsif untuk memastikan Anda memuat awal gambar yang tepat untuk ukuran area pandang yang tepat. Elemen <link> media, imagesrcset, dan imagesizes memberikan petunjuk ke browser bahwa petunjuk resource tertentu hanya berlaku dalam kondisi area pandang tertentu, sehingga menghindari beberapa pramuat yang sia-sia saat Anda hanya ingin memuat satu resource yang sesuai untuk area pandang 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 baris kode yang lebih sedikit. Pada saat penulisan ini, fitur ini tidak didukung di semua browser, namun Anda dapat memperhatikan bagaimana perkembangan adopsi, karena dapat merupakan alternatif yang menarik untuk teknik ini.