Sajikan Gambar Format Generasi Berikutnya

Peringatan Lighthouse berarti konversikan file JPEG dan PNG Anda ke WebP atau AVIF, lalu sajikan melalui elemen picture dengan file asli sebagai cadangan (fallback). Audit ini termasuk salah satu yang paling mudah diselesaikan, karena perbaikannya bersifat mekanis dan bukan arsitektural.

Lighthouse memunculkan peringatan ketika menemukan gambar yang diyakininya dapat berukuran jauh lebih kecil dalam format modern. Perkiraan ini didasarkan pada file yang diunduhnya, sehingga penghematan yang dilaporkan biasanya realistis dan terkadang tergolong konservatif.

Apa yang diukur oleh Lighthouse

Lighthouse mengodekan ulang setiap gambar sebagai WebP secara internal dan melaporkan perbedaannya saat penghematan melebihi ambang batas tertentu. Angka dalam laporan tersebut merupakan estimasi nyata dan bukan sekadar rekomendasi generik.

Gambar di bawah ambang batas akan diabaikan, itulah sebabnya halaman dengan 30 gambar mungkin hanya menampilkan 4 gambar dalam audit. File yang terdaftar adalah file yang paling layak diperbaiki terlebih dahulu. Menyelesaikannya biasanya menghapus peringatan secara keseluruhan, meskipun gambar lain di halaman tersebut tetap menggunakan format lama.

Markup yang memenuhi audit

Gunakan elemen picture dengan AVIF di urutan pertama, WebP di urutan kedua, dan JPEG asli di dalam tag img. Peramban memilih sumber pertama yang didukungnya, sehingga peramban baru mendapatkan file kecil dan peramban lama tetap bisa menampilkan gambar.

Tag img harus tetap ada, karena membawa teks alt, dimensi, dan cadangan. Menghilangkan atribut width dan height menyebabkan pergeseran tata letak (layout shift) saat gambar dimuat, yang dapat merusak pengukuran Core Web Vitals lainnya saat Anda mencoba memperbaiki yang satu ini. Tetapkan kedua atribut sesuai dengan ukuran piksel intrinsik dari gambar cadangan.

Cara menyelesaikan audit

Untuk mengatasi peringatan ini dengan benar, ikuti 6 langkah berikut.

1. Buka laporan Lighthouse dan catat gambar yang disebutkan, yaitu gambar dengan potensi penghematan yang terukur.
2. Periksa ukuran tampilan setiap gambar, karena banyak gambar berukuran terlalu besar selain salah format.
3. Ubah ukuran setiap gambar ke lebar tampilan sebenarnya, digandakan untuk layar dengan kepadatan tinggi (high density).
4. Konversikan ke WebP pada kualitas 80, dan ke AVIF pada kualitas 65 untuk gambar terbesar di halaman tersebut.
5. Sajikan hasilnya melalui elemen picture dengan gambar asli sebagai cadangan tag img.
6. Jalankan ulang Lighthouse untuk memastikan peringatan telah hilang dan tidak ada pergeseran tata letak yang muncul.

Langkah 3 lebih penting daripada langkah 4. Dimensi mengontrol sebagian besar ukuran file, dan WebP yang terlalu besar tetaplah gambar yang terlalu besar. Mengonversi secara massal hanya membutuhkan beberapa menit, sedangkan menulis markup biasanya memakan waktu lebih lama.

Format mana untuk gambar yang mana

Apakah platform Anda sudah melakukannya secara otomatis

Banyak sistem konten dan hosting mengonversi gambar secara otomatis, jadi periksalah sebelum membuatnya secara manual. Mengerjakan hal yang sama dua kali sering terjadi dan membuang-buang waktu.

Uji dalam 2 menit. Buka halaman yang sudah dipublikasikan, klik kanan pada gambar dan buka di tab baru, lalu baca ekstensi file di bilah alamat. Ekstensi .webp pada file yang Anda unggah sebagai JPEG berarti platform tersebut sudah melakukan konversi. Shopify, sebagian besar hosting WordPress terkelola, dan beberapa pembuat situs web melakukan ini secara bawaan.

Mengapa peringatan terkadang muncul kembali

Unggahan baru dapat menimbulkan masalah kembali jika langkah konversi dilakukan secara manual, bukan otomatis. Situs yang dibersihkan pada bulan Januari akan menampilkan peringatan lagi pada bulan Juni jika editor mengunggah gambar langsung dari kamera.

Perbaiki prosesnya, bukan hanya file-filenya. Aktifkan konversi otomatis di tingkat platform, atau sepakati aturan sederhana bahwa gambar harus diubah ukurannya dan dikonversi sebelum diunggah. Menuliskan aturan ini sangat penting pada situs tempat lebih dari satu orang memublikasikan konten, karena audit mengukur gambar terburuk, bukan rata-rata.

Haruskah Anda menggunakan AVIF, WebP, atau keduanya

Gunakan WebP saja di sebagian besar situs, dan tambahkan AVIF hanya untuk gambar terbesar di halaman tersebut. Mendukung keduanya melipatgandakan jumlah file yang harus dibuat, disimpan, dan disinkronkan untuk penghematan yang relatif kecil pada gambar biasa.

Perhitungannya berubah pada situs yang kaya akan fotografi, di mana AVIF menghemat 20 hingga 30 persen lebih banyak pada file yang sudah berukuran ratusan kilobita. Pada halaman yang memuat gambar utama berukuran 600 KB, itu adalah pengurangan yang signifikan. Pada halaman dengan gambar mini (thumbnail) berukuran 40 KB, alur kerja ekstra membutuhkan usaha yang lebih besar daripada hasilnya, dan WebP saja sudah cukup untuk menyelesaikan audit.

Memeriksa hasil dengan benar

Jalankan ulang Lighthouse di jendela pribadi (incognito) dengan ekstensi dinonaktifkan, karena ekstensi peramban dapat menyimpangkan hasil pengukuran. Skor juga dapat bervariasi antar-pengujian, jadi bandingkan hasil dari 3 kali pengujian daripada hanya mempercayai satu angka.

Pastikan peramban benar-benar menerima format baru alih-alih sekadar mengasumsikannya. Buka alat pengembang (developer tools), beralih ke tab Network, filter berdasarkan gambar, lalu muat ulang halaman. Kolom Type menampilkan apa yang sebenarnya disajikan. Halaman yang masih menyajikan JPEG setelah konversi biasanya menandakan markup elemen picture salah, atau ada lapisan cache yang masih menyimpan versi sebelumnya.

Audit terkait yang sering muncul bersamaan

• Properly size images. Gambar lebih besar daripada ruang tampilannya. Ubah ukuran alih-alih mengompresnya.
• Efficiently encode images. Kompresi terlalu ringan. Turunkan pengaturan kualitas.
• Defer offscreen images. Tambahkan lazy loading pada gambar di bawah lipatan layar (below the fold).
• Largest Contentful Paint element. Biasanya berupa gambar utama Anda, yang perlu mendapat perhatian terlebih dahulu.
• Image elements do not have explicit width and height. Tambahkan kedua atribut ini untuk mencegah pergeseran tata letak.

Kelima audit tersebut biasanya muncul bersamaan, dan mengubah ukuran serta mengonversi gambar yang terdaftar dalam laporan dapat menyelesaikan sebagian besar dari audit tersebut dalam satu langkah.

Seberapa besar langkah ini benar-benar meningkatkan performa halaman

Mengonversi ke format modern biasanya mengurangi 25 hingga 35 persen bobot gambar, dan mengubah ukurannya terlebih dahulu sering kali mengurangi jauh lebih banyak. Pada halaman yang kaya akan gambar, efek gabungannya sering kali mencapai 70 hingga 80 persen.

Peningkatan ini akan terlihat pada Largest Contentful Paint, yang mengukur seberapa cepat konten utama muncul. Pengukuran tersebut biasanya ditentukan oleh satu gambar, sehingga memperkecil file gambar utama memiliki dampak yang sangat besar melebihi proporsi porsinya di halaman. Memperkecil 20 gambar kecil tidak terlalu berdampak dibandingkan memperkecil 1 gambar besar.

Apa yang jangan dilakukan

Jangan menghapus cadangan JPEG, dan jangan mengonversi gambar yang akan diunduh oleh pengunjung. Kedua kesalahan ini mengorbankan fungsionalitas nyata hanya demi peningkatan skor yang kecil.

Kit pers, panduan yang dapat dicetak, templat yang dapat diunduh, dan file dari pemasok harus tetap berformat JPEG atau PNG, karena WebP kurang didukung di luar peramban. Menyajikan file-file tersebut dalam format modern akan memicu permintaan bantuan dari orang-orang yang tidak dapat membukanya, yang akhirnya memakan lebih banyak biaya daripada bandwidth yang dihemat.

Mengonversi gambar yang terdaftar dalam laporan

Konversikan dari file asli alih-alih dari versi yang sudah dipublikasikan, karena JPEG yang sudah dikompresi membawa kerusakan ke dalam file baru. Pengode (encoder) tidak dapat membedakan artefak kompresi lama dengan detail asli, sehingga membuang bit untuk mempertahankan kerusakan tersebut.

Masukkan hingga 500 file sekaligus, atau tarik arsip ZIP langsung ke dalamnya, dan seluruh rangkaian file akan dikonversi dalam satu proses. Semuanya berjalan di dalam peramban Anda menggunakan prosesor Anda sendiri, sehingga situs klien, aset staging, dan halaman yang belum dipublikasikan tidak pernah dikirim ke server. Konversi seluruh situs dapat selesai dalam beberapa menit tanpa ada satu file pun yang melewati jaringan.

Simpan file hasil konversi berdampingan dengan file asli menggunakan nama yang cocok, sehingga markup elemen picture dapat dibuat dengan pola yang konsisten alih-alih diedit secara manual untuk setiap gambar. Folder yang berisi hero.jpg, hero.webp, dan hero.avif sangat mudah dibuatkan templatnya, dan membuat migrasi format berikutnya menjadi proses konversi massal alih-alih menulis ulang setiap halaman.