Dipublikasikan: 8 Okt 2025
Mengurangi waktu download gambar dapat meningkatkan waktu pemuatan halaman dan LCP.
Penyebab kegagalan insight
Insight ini akan menandai gambar yang memiliki ukuran download terlalu besar. Estimasi penghematan byte dihitung dengan membandingkan ukuran download gambar dengan rasio byte/piksel yang efisien untuk format gambar.
Cara meningkatkan waktu download gambar
Ada beberapa strategi yang direkomendasikan oleh insight ini untuk meningkatkan waktu download gambar, bergantung pada ukuran dan format file gambar yang ditampilkan. Men-deploy CDN gambar dapat sangat membantu semua strategi ini.
Meningkatkan faktor kompresi gambar
Sebagian besar format gambar mendukung tingkat kompresi yang dapat disesuaikan untuk meningkatkan ukuran file gambar dengan mengorbankan kualitas gambar. Anda dapat menggunakan alat gambar seperti ImageOptim, Squoosh, dan Imagemin untuk mengoptimalkan faktor kompresi gambar.
Menggunakan format gambar modern
AVIF dan WebP adalah format gambar yang memiliki karakteristik kompresi dan kualitas yang lebih baik dibandingkan dengan JPEG dan PNG yang lebih lama. Mengenkode gambar dalam format yang lebih baru ini adalah strategi yang baik untuk mengurangi ukuran download gambar.
AVIF didukung di versi terbaru semua browser utama dan menawarkan ukuran file yang lebih kecil dibandingkan dengan format lain dengan setelan kualitas yang sama. Lihat Codelab Penayangan Gambar AVIF untuk mengetahui informasi selengkapnya tentang AVIF.
WebP didukung oleh semua browser utama dan memberikan kompresi lossy dan lossless yang lebih baik untuk gambar di web. Lihat Menggunakan gambar WebP untuk mengetahui informasi selengkapnya tentang WebP.
Menggunakan format video untuk konten animasi
GIF berukuran besar tidak efisien untuk menayangkan konten animasi dibandingkan dengan video. Sebaiknya gunakan video MPEG4/WebM sebagai animasi dan PNG/WebP sebagai gambar statis untuk menggantikan GIF guna menghemat byte jaringan.
Lihat Mengganti GIF animasi dengan video agar halaman dimuat lebih cepat untuk mempelajari cara mengganti gambar GIF dengan video.
Menayangkan gambar dengan ukuran responsif
Idealnya, halaman Anda tidak boleh menyajikan gambar yang lebih besar daripada versi yang dirender di layar pengguna. Ukuran yang lebih besar dari itu hanya akan membuang-buang byte dan memperlambat waktu pemuatan halaman.
Salah satu strateginya adalah menggunakan format gambar berbasis vektor, seperti SVG. Dengan jumlah kode yang terbatas, gambar SVG dapat diskalakan ke ukuran apa pun. Lihat Mengganti ikon kompleks dengan SVG untuk mempelajari lebih lanjut.
Jika gambar berbasis vektor bukan opsi, sebaiknya tayangkan gambar yang "responsif". Dengan gambar responsif, Anda membuat beberapa versi setiap gambar, lalu menentukan versi mana yang akan digunakan dalam HTML atau CSS menggunakan kueri media, dimensi area pandang, dan sebagainya.
Misalnya, elemen <img> memiliki atribut srcset dan sizes yang dapat menentukan URL gambar untuk ukuran yang berbeda:
Jika Anda perlu mengubah gambar sepenuhnya, Anda dapat menggunakan elemen <picture>:
Lihat Gambar responsif dan Elemen gambar untuk mempelajari lebih lanjut.
Panduan khusus stack
Insight ini juga menawarkan panduan khusus stack untuk halaman yang menggunakan teknologi berikut:
AMP
- Sebaiknya tampilkan semua komponen
amp-imgdalam format WebP saat menentukan fallback yang tepat untuk browser lainnya. - Untuk konten animasi, gunakan
amp-animuntuk meminimalkan penggunaan CPU saat konten tidak berada di layar.
Drupal
- Sebaiknya gunakan modul yang otomatis mengoptimalkan dan mengurangi ukuran gambar yang diupload melalui situs dengan tetap mempertahankan kualitas.
- Pastikan Anda menggunakan Responsive Image Styles bawaan yang disediakan oleh Drupal untuk semua gambar yang dirender di situs.
Joomla
Sebaiknya gunakan plugin atau layanan yang otomatis mengonversi gambar yang diupload ke format optimal.
Magento
Sebaiknya gunakan ekstensi Magento pihak ketiga yang mengoptimalkan gambar.
WordPress
Sebaiknya gunakan plugin WordPress untuk pengoptimalan gambar yang mengompresi gambar Anda dengan tetap mempertahankan kualitas.