Cara membuat gambar situs dimuat lebih cepat
Lima perubahan yang meringankan gambar di situs mana pun, urut dari yang paling berdampak.
Di kebanyakan situs, gambar menyumbang sebagian besar data yang diunduh pengunjung. Satu foto ponsel yang tidak dioptimalkan bisa lebih berat daripada seluruh isi halaman lainnya. Membereskan gambar biasanya adalah peningkatan kecepatan terbesar dengan biaya paling kecil, dan halaman yang cepat mendapat peringkat lebih baik, ditinggalkan lebih jarang dan menghasilkan konversi lebih banyak.
1. Muat gambar seukuran tampilannya
Foto dari ponsel lebarnya 4000 piksel atau lebih. Kolom konten jarang melebihi 1200 piksel, dan kartu atau thumbnail jauh lebih kecil. Setiap piksel berlebih tetap diunduh lalu dibuang browser. Ubah ukurannya sebelum diunggah: sekitar 2000 piksel untuk banner selebar layar agar tetap tajam di layar beresolusi tinggi, 1200 sampai 1600 untuk gambar dalam artikel, dan 600 sampai 800 untuk kartu. Alat ubah ukuran bisa memproses satu folder sekaligus.
2. Kompres
Setelah dimensinya benar, kompresi mengerjakan sisanya. Foto yang disimpan pada kualitas 80 terlihat sama dengan kualitas 100 di halaman web dan sering hanya sepertiga bobotnya. Kompresor gambar bekerja per batch dan menampilkan penghematan untuk setiap file.
3. Pakai WebP
WebP didukung semua browser saat ini dan umumnya 25 sampai 35 persen lebih ringan dari JPG pada kualitas yang terlihat sama, ditambah dukungan transparansi sehingga bisa menggantikan banyak PNG juga. Konversi lewat JPG ke WebP atau PNG ke WebP. AVIF lebih ringan lagi, tetapi lebih lambat dikodekan dan lebih jarang diterima sistem unggahan, jadi pilihan praktis tetap WebP.
4. Pilih format sesuai isinya
| Isi | Format terbaik |
|---|---|
| Foto | WebP, atau JPG di tempat yang tidak menerima WebP |
| Logo dan ikon | SVG bila ada, kalau tidak PNG atau WebP |
| Tangkapan layar berisi teks | PNG atau WebP lossless |
| Animasi sederhana | Video pendek, bukan GIF |
5. Bantu browser memuatnya dengan cerdas
- Pemuatan tertunda. Gambar di bawah layar pertama sebaiknya baru dimuat ketika pengunjung menggulir mendekatinya. Kebanyakan platform sudah melakukannya sendiri; pada HTML biasa, tambahkan loading="lazy" pada tag img yang tidak terlihat di awal.
- Dimensi. Beri setiap gambar lebar dan tinggi agar halaman tidak melompat saat gambar berdatangan. Pergeseran tata letak termasuk dalam Core Web Vitals Google.
- Gambar utama lebih dulu. Gambar besar di bagian atas, yang biasanya dihitung sebagai Largest Contentful Paint, tidak boleh memakai pemuatan tertunda. Ia justru harus dimuat secepat mungkin.
Seberapa besar bedanya
Halaman biasa dengan sepuluh foto langsung dari ponsel bisa berbobot 30 MB. Setelah diubah ke lebar yang wajar dan dikompres, halaman yang sama biasanya turun ke sekitar 2 MB. Setelah dikonversi ke WebP, sekitar 1,4 MB. Di koneksi seluler, itu beda antara halaman yang muncul dalam satu detik dan halaman yang ditinggalkan banyak pengunjung.
Memeriksa hasilnya
PageSpeed Insights dari Google dan panel Lighthouse di alat pengembang Chrome mendaftar gambar yang terlalu besar, gambar yang sebaiknya jadi WebP, dan elemen mana yang menjadi Largest Contentful Paint. Ukur sebelum dan sesudah, dan mulailah dari halaman dengan kunjungan terbanyak.