Sebuah halaman web dapat menampilkan ilustrasi berwarna, animasi bergerak, dan tombol interaktif dalam waktu singkat. Namun, sebelum seluruh elemen tersebut muncul, browser harus menerima berbagai data dari server, mulai dari kode HTML hingga berkas gambar yang membentuk tampilan.

Untuk mengurangi jumlah data yang dikirim melalui jaringan, pengembang menggunakan teknologi kompresi. Dua pendekatan yang sering dibahas adalah Brotli dan kompresi gambar melalui format seperti WebP atau AVIF.

Walaupun sama-sama bertujuan mengurangi ukuran data, keduanya bekerja pada lapisan dan jenis informasi yang berbeda. Brotli terutama digunakan untuk mengompresi data berbasis teks selama pengiriman HTTP, sedangkan format gambar menggunakan teknik khusus untuk menyimpan informasi visual secara lebih efisien.

Mahjong Ways 2 dari PG Soft dapat dijadikan konteks pembelajaran karena produk ini mendukung teknologi HTML5 dan memiliki elemen visual interaktif. Namun, pembahasan ini merupakan studi konseptual, bukan hasil pemeriksaan langsung terhadap konfigurasi server atau berkas internal permainan tersebut.

Mengapa Halaman Web Membutuhkan Berbagai Jenis Kompresi?

Ketika browser membuka sebuah halaman, data yang diterima tidak selalu berupa satu berkas tunggal. Sebuah aplikasi web dapat terdiri atas HTML untuk struktur halaman, CSS untuk tampilan, JavaScript untuk perilaku interaktif, serta gambar dan sumber daya lainnya.

Setiap jenis data memiliki karakteristik berbeda. Berkas teks sering mengandung pola karakter yang berulang, sedangkan gambar raster menyimpan informasi piksel, warna, dan detail visual.

Menurut dokumentasi MDN Web Docs, kompresi web dapat berlangsung pada tingkat format berkas maupun tingkat pengiriman HTTP.

Perbedaan tersebut penting karena metode yang efektif untuk mengecilkan HTML belum tentu menghasilkan pengurangan ukuran berarti pada gambar JPEG atau WebP yang sudah dikompresi.

Dengan demikian, optimasi halaman tidak cukup dilakukan menggunakan satu teknologi kompresi untuk seluruh sumber daya.

Brotli Bekerja dengan Mengurangi Ukuran Data Tanpa Mengubah Isinya

Brotli merupakan algoritma kompresi lossless atau tanpa kehilangan data. Teknologi ini dirancang untuk menemukan pola dan pengulangan informasi sehingga data dapat disimpan atau dikirim dengan ukuran lebih kecil.

Ketika data didekompresi, informasi aslinya dapat dipulihkan tanpa perubahan isi.

Dalam pengiriman web, Brotli banyak digunakan untuk sumber daya berbasis teks, seperti:

• Dokumen HTML yang menyusun halaman.
• Stylesheet CSS yang mengatur tampilan.
• Berkas JavaScript untuk fungsi interaktif.
• Data JSON yang dikirim melalui layanan web.
• Gambar SVG yang menggunakan struktur teks XML.

Google melalui dokumentasi web.dev menjelaskan bahwa Brotli dapat memberikan efisiensi kompresi teks yang baik dibandingkan gzip dalam sejumlah kondisi.

Namun, hasil akhirnya bergantung pada ukuran berkas, pola data, dan pengaturan kompresi. Brotli tidak otomatis menjadi pilihan tercepat untuk setiap situasi, terutama jika proses kompresi dilakukan secara langsung dengan beban server tinggi.

Bagaimana Browser Menerima Data yang Dikompresi Brotli?

Dalam komunikasi HTTP, browser dan server dapat menentukan metode kompresi yang akan digunakan melalui informasi pada header.

Browser dapat mengirimkan header Accept-Encoding untuk memberitahukan metode kompresi yang didukung.

Sebagai contoh, browser dapat menyatakan dukungan terhadap Brotli dan gzip melalui nilai br dan gzip.

Apabila server memilih Brotli, respons dapat memuat header Content-Encoding: br.

Browser kemudian mendekompresi data sebelum menggunakannya untuk membangun halaman atau menjalankan fungsi aplikasi.

MDN menjelaskan bahwa mekanisme tersebut merupakan bagian dari negosiasi konten HTTP. Server juga perlu mengelola variasi respons secara benar, termasuk penggunaan header Vary: Accept-Encoding ketika relevan untuk sistem cache.

Dengan pendekatan ini, pengguna tidak perlu mendekompresi berkas secara manual. Proses berlangsung sebagai bagian dari komunikasi browser dan server.

Kompresi Gambar Menggunakan Pendekatan yang Berbeda

Berbeda dari Brotli, kompresi gambar dirancang dengan mempertimbangkan karakteristik visual seperti warna, tekstur, bentuk, dan hubungan antarpiksel.

Format JPEG, PNG, WebP, dan AVIF menggunakan teknik pengkodean yang tidak sama.

Dalam panduan optimasi gambar web.dev, terdapat dua kategori utama kompresi gambar, yaitu lossy dan lossless.

Lossy compression mengurangi ukuran data dengan membuang sebagian informasi visual. Jika diterapkan secara tepat, perubahan kualitas mungkin sulit diperhatikan. Namun, kompresi terlalu tinggi dapat menyebabkan gambar kehilangan detail atau menampilkan artefak.

Lossless compression mengurangi ukuran tanpa menghilangkan informasi yang diperlukan untuk merekonstruksi piksel asli secara identik.

WebP dan AVIF mendukung pendekatan lossy maupun lossless. PNG menggunakan kompresi lossless, sedangkan JPEG pada penggunaan umum memakai pendekatan lossy.

Pilihan format bergantung pada kebutuhan visual. Ilustrasi dengan garis tajam, tulisan kecil, dan banyak detail mungkin memerlukan pengaturan berbeda dari foto dengan gradasi warna yang kompleks.

Perbedaan Brotli, WebP, AVIF, dan PNG dalam Satu Halaman

Untuk memahami perbedaannya, berikut perbandingan fungsi beberapa metode kompresi yang umum ditemukan dalam pengembangan web.

Perbedaan terpenting adalah bahwa Brotli merupakan algoritma kompresi umum yang dapat digunakan pada representasi data HTTP, sedangkan WebP, AVIF, dan PNG merupakan format gambar.

Keduanya tidak selalu saling menggantikan. Sebuah halaman dapat menggunakan Brotli untuk HTML dan JavaScript sekaligus menggunakan AVIF atau WebP untuk ilustrasinya.

Mahjong Ways 2 sebagai Ilustrasi Pengiriman Aset Web

Dokumentasi resmi PG Soft menjelaskan bahwa Mahjong Ways 2 mendukung HTML5 pada browser desktop dan mobile.

Dalam studi efisiensi pengiriman data, sebuah antarmuka web bertema Mahjong Ways 2 dapat digunakan sebagai contoh hipotetis yang memiliki kode aplikasi, gambar simbol, latar, dan elemen dekoratif.

Bayangkan pengembang membuat halaman demonstrasi berisi struktur HTML, JavaScript, serta ilustrasi ubin mahjong.

Brotli dapat diterapkan pada respons yang memuat HTML dan JavaScript. Sementara itu, ilustrasi ubin dapat dioptimalkan menggunakan format gambar yang sesuai agar ukuran unduhannya lebih kecil.

Jika terdapat dekorasi berbasis SVG, berkas tersebut juga dapat memperoleh manfaat dari kompresi teks karena SVG menggunakan struktur berbasis XML.

Namun, tidak tepat menyimpulkan bahwa seluruh gambar perlu dikompresi kembali menggunakan Brotli. MDN menjelaskan bahwa kompresi tambahan pada berkas yang sudah terkompresi sering memberikan manfaat kecil, bahkan dapat meningkatkan ukuran akibat overhead.

Contoh ini menggambarkan prinsip optimasi web secara umum, bukan konfigurasi yang telah diverifikasi pada server Mahjong Ways 2.

Mengapa Brotli Tidak Menggantikan Optimasi Gambar?

Misalnya, sebuah halaman menggunakan gambar latar berukuran besar. Mengaktifkan Brotli pada HTML tidak otomatis mengubah ukuran atau kualitas berkas gambar latar tersebut.

Untuk mengurangi ukuran gambar, pengembang perlu mempertimbangkan format, dimensi, tingkat kompresi, dan kualitas visual yang diinginkan.

Halaman yang ditujukan untuk smartphone juga tidak selalu membutuhkan gambar dengan dimensi sebesar versi desktop.

Teknik gambar responsif memungkinkan browser memilih sumber gambar yang sesuai berdasarkan informasi perangkat dan tata letak.

Selain itu, pengembang dapat menunda pemuatan gambar yang belum diperlukan selama strategi tersebut tidak menghambat konten penting pada tampilan awal.

Dengan demikian, efisiensi pengiriman gambar memerlukan pendekatan tersendiri. Brotli membantu mengurangi ukuran teks yang ditransfer, tetapi tidak menggantikan pemilihan format dan dimensi gambar yang tepat.

Memeriksa Hasil Kompresi Menggunakan Chrome DevTools

Untuk mengetahui apakah sebuah halaman menggunakan Brotli, pengembang dapat memeriksa respons server melalui Chrome DevTools.

Dokumentasi Chrome for Developers menjelaskan bahwa panel Network menyediakan informasi mengenai permintaan sumber daya, ukuran transfer, waktu pemuatan, dan header HTTP.

Langkah pemeriksaan pada website pengujian dapat dilakukan sebagai berikut:

1. Buka halaman melalui Google Chrome.
2. Tekan F12 untuk membuka Developer Tools.
3. Pilih tab Network, kemudian muat ulang halaman.
4. Pilih salah satu permintaan HTML, CSS, atau JavaScript.
5. Buka bagian Headers dan periksa nilai Content-Encoding.
6. Bandingkan ukuran data yang ditransfer dengan ukuran setelah didekompresi jika tersedia.
7. Periksa sumber daya gambar secara terpisah untuk mengetahui format serta ukuran transfernya.

Apabila header respons menampilkan Content-Encoding: br, hal tersebut menunjukkan penggunaan Brotli pada respons tersebut.

Namun, keberadaan Brotli tidak langsung membuktikan bahwa halaman telah dioptimalkan sepenuhnya. Pengembang tetap perlu memeriksa jumlah permintaan, ukuran gambar, beban JavaScript, dan waktu rendering.

Menentukan Strategi Kompresi yang Sesuai dengan Kebutuhan

Pengaturan kompresi yang terlalu agresif tidak selalu menghasilkan pengalaman terbaik.

Untuk berkas statis yang jarang berubah, kompresi dapat dilakukan sebelum file disajikan sehingga server tidak perlu mengulang proses yang sama pada setiap permintaan.

Sebaliknya, kompresi dinamis memerlukan pertimbangan terhadap penggunaan CPU dan waktu pemrosesan.

Dokumentasi web.dev menjelaskan bahwa pemilihan tingkat kompresi merupakan kompromi antara ukuran hasil dan biaya pemrosesan.

Pengembang juga perlu mempertimbangkan cache, kemampuan browser, serta jumlah sumber daya yang dikirim.

Oleh sebab itu, keputusan optimasi sebaiknya dibuat berdasarkan hasil pengukuran pada halaman yang benar-benar diuji, bukan hanya mengikuti satu pengaturan yang dianggap paling tinggi.

Kesimpulan

Brotli dan kompresi gambar memiliki tujuan umum yang sama, yaitu mengurangi jumlah data, tetapi bekerja melalui pendekatan berbeda.

Brotli merupakan algoritma lossless yang sangat berguna untuk pengiriman sumber daya berbasis teks seperti HTML, CSS, dan JavaScript. Sementara itu, format WebP, AVIF, dan PNG menggunakan teknik khusus untuk menyimpan informasi gambar secara efisien.

Melalui contoh antarmuka bertema Mahjong Ways 2, terlihat bahwa optimasi web membutuhkan kombinasi pengelolaan teks, gambar, dan proses pengiriman data.

Strategi yang baik bukan sekadar mengaktifkan kompresi, tetapi memastikan setiap jenis sumber daya menggunakan metode yang sesuai dan hasilnya diperiksa melalui pengujian performa.

FAQ

Apakah Brotli dapat digunakan untuk mengompresi gambar?

Secara teknis, Brotli dapat mengompresi berbagai jenis data. Namun, penerapan kompresi tambahan pada gambar yang sudah dikompresi seperti JPEG atau WebP biasanya tidak memberikan manfaat berarti. SVG berbasis teks merupakan contoh gambar yang dapat memperoleh manfaat dari Brotli.

Apakah WebP dan AVIF selalu lebih baik daripada PNG?

Tidak selalu. Pilihan format bergantung pada karakteristik gambar, kebutuhan kualitas, transparansi, serta kompatibilitas perangkat. Pengujian diperlukan untuk menentukan kombinasi ukuran dan kualitas terbaik.

Apakah penggunaan Brotli otomatis membuat halaman lebih cepat?

Tidak otomatis. Brotli dapat mengurangi ukuran transfer data, tetapi waktu pemuatan juga dipengaruhi server, jaringan, jumlah permintaan, pemrosesan JavaScript, serta ukuran gambar dan aset lainnya.

Bagaimana mengetahui sebuah website menggunakan Brotli?

Gunakan panel Network pada Chrome DevTools, pilih respons sumber daya, lalu periksa header Content-Encoding. Nilai br menunjukkan bahwa respons tersebut menggunakan kompresi Brotli.