Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa gambar di halaman dapat dioptimalkan untuk memperkecil ukuran filenya tanpa memengaruhi kualitas visualnya secara signifikan.
Ringkasan
Sebagian besar jumlah byte yang didownload pada halaman sebagian besar teralokasikan untuk gambar. Akibatnya, mengoptimalkan gambar sering kali dapat menghemat sebagian besar byte dan meningkatkan performa: semakin kecil byte yang harus didownload oleh browser, semakin kecil peluang bandwith klien untuk berkompetisi, dan semakin cepat browser mendownload dan merender konten pada layar.
Saran
Menemukan format yang optimal dan strategi pengoptimalan untuk aset gambar Anda memerlukan analisis yang cermat pada berbagai dimensi: jenis data yang dienkode, kemampuan format gambar, setelan kualitas, resolusi, dan lainnya. Selain itu, Anda perlu mempertimbangkan apakah beberapa gambar ditayangkan paling baik dalam format vektor, apakah efek yang diinginkan dapat dicapai melalui CSS, dan cara memberikan aset skala yang sesuai untuk tiap jenis perangkat.
Pengoptimalan untuk semua jenis gambar
- Ikuti praktik terbaik untuk menayangkan gambar responsif
- Ikuti checklist pengoptimalan gambar untuk gambar tunggal
Pengoptimalan untuk gambar GIF, PNG, dan JPEG
96% dari seluruh traffic gambar Internet memiliki format GIF, PNG, dan JPEG. Oleh karena itu, PageSpeed Insights memberikan saran pengoptimalan khusus. Untuk memudahkan, Anda dapat mendownload gambar yang dioptimalkan langsung dari PageSpeed Insights (yang menggunakan library pengoptimalan gambar dari modpagespeed.com).
Anda juga dapat menggunakan fitur seperti biner konversi yang dibuat oleh ImageMagick yang dapat menerapkan pengoptimalan yang serupa - lihat petunjuk di bawah.
Jika menggunakan fitur pihak ketiga, harap diingat bahwa transformasi gambar dapat membuat ukuran gambar menjadi lebih besar, jika gambar Anda sudah dioptimalkan dengan maksimal. Jika hal ini teradi, harap gunakan gambar asli Anda.
GIF dan PNG memiliki format lossless, sehingga proses kompresinya tidak menghasilkan perubahan visual apa pun pada gambar. Untuk gambar yang tidak bergerak, PNG memiliki rasio kompresi yang lebih baik dengan kualitas visual yang lebih bagus. Untuk gambar animasi, pertimbangkan untuk menggunakan elemen video bukannya GIF, agar dapat terkompresi dengan lebih baik.
- Selalu konversikan GIF ke PNG kecuali gambar asli adalah gambar animasi atau berukuran kecil (kurang dari beberapa ratus byte).
- Untuk GIF dan PNG, hapus saluran alfa jika semua piksel tampak buram.
Misalnya, Anda dapat menggunakan biner konversi untuk mengoptimalkan gambar GIF dan PNG dengan perintah berikut (parameter di dalam tanda kurung bersifat opsional):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG adalah format lossy. Proses kompresi menghapus detail visual gambar, namun rasio kompresinya bisa 10x lebih besar dari GIF atau PNG.
- Kurangi kualitas gambar menjadi 85 jika kualitas aslinya lebih tinggi. Dengan kualitas gambar yang lebih besar dari 85, gambar menjadi lebih besar dengan cepat, sementara peningkatan visualnya sedikit.
- Kurangi pemberian sampel Chroma menjadi 4:2:0, karena sistem visual manusia kurang sensitif terhadap warna jika dibandingkan dengan pencahayaan.
- Gunakan format progresif untuk gambar dengan ukuran lebih dari 10.000 byte. JPEG progresif biasanya memiliki rasio kompresi lebih tinggi daripada JPEG awal untuk gambar besar, dan memiliki manfaat dari perenderan progresif.
- Gunakan rentang warna hitam putih jika gambarnya hitam dan putih.
Misalnya, Anda dapat menggunakan biner konversi untuk mengoptimalkan gambar JPEG Anda dengan perintah berikut (parameter di dalam tanda kurung bersifat opsional):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
