Pertanyaan pertama yang harus Anda tanyakan pada diri sendiri adalah apakah suatu gambar, sebenarnya, diperlukan untuk mencapai efek yang diinginkan. Jika Anda bisa menghilangkan resource gambar, yang sering kali memerlukan banyak byte dibandingkan HTML, CSS, JavaScript, dan aset lain di halaman, berarti itu selalu menjadi strategi pengoptimalan terbaik. Meskipun demikian, gambar yang ditempatkan dengan baik juga dapat mengomunikasikan lebih banyak informasi dari seribu kata, jadi terserah Anda untuk menemukan keseimbangan itu.
Selanjutnya, Anda harus mempertimbangkan apakah ada teknologi alternatif yang dapat memberikan hasil yang lebih baik, tetapi dengan cara yang lebih efisien:
- Efek CSS (seperti bayangan atau gradien) dan animasi CSS dapat digunakan untuk menghasilkan aset resolusi bebas yang selalu terlihat tajam pada setiap resolusi dan tingkat zoom, sering kali berukuran lebih kecil dari byte yang dibutuhkan oleh file gambar.
- Font web memungkinkan penggunaan typeface yang indah sembari tetap mempertahankan kemampuan untuk memilih, mencari, dan mengubah ukuran teks—peningkatan kegunaan yang signifikan.
Jika Anda pernah mengenkode teks dalam aset gambar, berhentilah dan pertimbangkan kembali. Tipografi yang hebat sangat penting untuk mendapatkan desain, {i>branding<i}, dan keterbacaan yang baik, tetapi text-in-images memberikan pengalaman pengguna yang buruk: teks tidak dapat dipilih, tidak dapat ditelusuri, tidak dapat di-zoom, tidak dapat diakses, dan tidak cocok untuk perangkat dengan DPI tinggi. Penggunaan font web memerlukan rangkaian pengoptimalan sendiri, tetapi mengatasi semua masalah ini dan selalu merupakan pilihan yang lebih baik untuk menampilkan teks.
Pilih format gambar yang tepat
Jika Anda yakin bahwa gambar adalah pilihan yang tepat, Anda harus berhati-hati memilih jenis gambar yang tepat untuk pekerjaan tersebut.
- Grafis vektor menggunakan garis, titik, dan poligon untuk merepresentasikan sebuah gambar.
- Grafis raster mewakili gambar dengan mengkodekan nilai-nilai individual dari setiap {i>pixel<i} dalam kisi-kisi persegi panjang.
Setiap format memiliki kelebihan dan kekurangannya masing-masing. Format vektor idealnya cocok untuk gambar yang terdiri dari bentuk geometris yang tidak terlalu kompleks seperti logo, teks, atau ikon. Mereka memberikan hasil yang tajam pada setiap resolusi dan pengaturan zoom, sehingga format ini ideal untuk layar dan aset beresolusi tinggi yang perlu ditampilkan dalam berbagai ukuran.
Namun, format vektor gagal jika adegannya rumit (misalnya foto): jumlah markup SVG untuk mendeskripsikan semua bentuk bisa sangat tinggi dan output-nya mungkin masih belum terlihat "fotorealistik". Jika demikian, saat itulah Anda seharusnya menggunakan format gambar raster seperti PNG, JPEG, WebP, atau AVIF.
Gambar raster tidak memiliki sifat yang sama bagusnya dengan resolusi atau zoom yang independen —saat memperbesar gambar raster, Anda akan melihat grafis yang bergerigi dan buram. Akibatnya, Anda mungkin perlu menyimpan beberapa versi gambar raster dalam berbagai resolusi untuk memberikan pengalaman yang optimal kepada pengguna.
Implikasi layar resolusi tinggi
Ada dua jenis piksel: piksel CSS dan piksel perangkat. Satu piksel CSS mungkin berkaitan secara langsung dengan satu piksel perangkat, atau mungkin didukung oleh beberapa piksel perangkat. Apa gunanya? Makin banyak piksel perangkat yang ada, makin halus detail konten yang ditampilkan di layar.
Layar DPI tinggi (HiDPI) menghasilkan hasil yang indah, tetapi ada satu kompromi yang jelas: aset gambar memerlukan lebih banyak detail untuk memanfaatkan jumlah piksel perangkat yang lebih tinggi. Kabar baiknya adalah, gambar vektor idealnya cocok untuk tugas ini, karena dapat dirender pada resolusi apa pun dengan hasil yang tajam— Anda mungkin dikenai biaya pemrosesan yang lebih tinggi untuk merender detail yang lebih baik, tetapi aset yang mendasarinya sama dan tidak bergantung pada resolusi.
Di sisi lain, gambar raster menimbulkan tantangan yang jauh lebih besar karena gambar tersebut mengenkode data gambar berdasarkan per piksel. Oleh karena itu, semakin besar jumlah piksel, semakin besar ukuran file dari gambar raster. Pertimbangkan perbedaan antara aset foto yang ditampilkan pada piksel 100x100 (CSS):
| Resolusi layar | Total piksel | Ukuran file yang tidak dikompresi (4 byte per piksel) |
|---|---|---|
| 1x | 100 x 100 = 10.000 | 40.000 byte |
| 2x | 100 x 100 x 4 = 40.000 | 160.000 byte |
| 3x | 100 x 100 x 9 = 90.000 | 360.000 byte |
Ketika kita menggandakan resolusi layar fisik, jumlah total {i>pixel<i} akan bertambah dengan faktor empat: menggandakan jumlah piksel horizontal, dikalikan dua kali jumlah piksel vertikal. Oleh karena itu, "2x" layar tidak hanya berlipat ganda, tetapi juga empat kali lipat jumlah {i>pixel<i} yang dibutuhkan!
Jadi, apa artinya ini dalam praktiknya? Layar resolusi tinggi memungkinkan Anda menghasilkan gambar yang indah, yang dapat menjadi fitur produk yang hebat. Namun, layar beresolusi tinggi juga memerlukan gambar beresolusi tinggi, oleh karena itu:
- Pilih gambar vektor jika memungkinkan karena tidak bergantung pada resolusi dan selalu memberikan hasil yang tajam.
- Jika gambar raster diperlukan, tampilkan gambar responsif.
Fitur berbagai format gambar raster
Selain berbagai algoritma kompresi lossy dan lossless, format gambar yang berbeda mendukung fitur yang berbeda seperti saluran animasi dan transparansi (alfa). Akibatnya, pilihan "format yang tepat" untuk gambar tertentu merupakan kombinasi dari hasil visual dan persyaratan fungsional yang sesuai.
| Format | Transparansi | Animasi | Browser |
|---|---|---|---|
| PNG | Ya | Ya (APNG) | Semua |
| JPEG | Tidak | Tidak | Semua |
| WebP | Ya | Ya | Semua browser modern. Lihat Bisakah saya menggunakan? |
| AVIF | Ya | Ya | Semua browser modern. Lihat Bisakah saya menggunakan? |
Ada dua format gambar raster yang didukung secara universal: PNG dan JPEG. Selain format tersebut, browser modern mendukung format gambar WebP dan AVIF yang lebih baru. Kedua format yang lebih baru menawarkan kompresi keseluruhan yang lebih baik dan lebih banyak fitur. Jadi, format mana yang harus Anda gunakan?
WebP dan AVIF umumnya memberikan kompresi yang lebih baik daripada format lama, dan harus digunakan jika memungkinkan. Anda dapat menggunakan gambar WebP atau AVIF beserta gambar JPEG atau PNG sebagai penggantian. Lihat Menggunakan gambar WebP untuk mengetahui detail selengkapnya.
Untuk format gambar lama, pertimbangkan hal berikut:
- Apakah Anda memerlukan animasi? Gunakan elemen
<video>.- Bagaimana dengan GIF? GIF membatasi palet warna
paling banyak 256 warna,
dan membuat ukuran file yang jauh lebih besar dari elemen
<video>. APNG menawarkan lebih banyak warna daripada GIF, tetapi juga jauh lebih besar dibandingkan video format dengan kualitas visual yang setara. Lihat Ganti GIF animasi dengan video.
- Bagaimana dengan GIF? GIF membatasi palet warna
paling banyak 256 warna,
dan membuat ukuran file yang jauh lebih besar dari elemen
- Apakah Anda perlu mempertahankan detail halus dengan resolusi tertinggi? Gunakan PNG atau WebP lossless.
- PNG tidak menerapkan algoritma kompresi lossy di luar pilihan ukuran palet warna. Hasilnya, gambar dengan kualitas tertinggi, tetapi dengan biaya ukuran file yang jauh lebih besar dibandingkan format lain. Gunakan dengan bijak.
- WebP memiliki mode encoding lossless yang mungkin lebih efisien daripada PNG.
- Jika aset gambar berisi citra yang terdiri dari bentuk-bentuk geometris, pertimbangkan untuk mengonversinya ke format vektor (SVG).
- Jika aset gambar berisi teks, hentikan dan pertimbangkan kembali. Teks dalam gambar tidak dapat dipilih, ditelusuri, atau "dapat di-zoom". Jika Anda perlu memberikan tampilan kustom (untuk branding atau alasan lainnya), gunakan font web.
- Apakah Anda mengoptimalkan foto, screenshot, atau aset gambar serupa? Gunakan JPEG, WebP lossy, atau AVIF.
- JPEG menggunakan kombinasi pengoptimalan lossy dan lossless untuk mengurangi ukuran file aset gambar. Cobalah beberapa tingkat kualitas JPEG untuk menemukan kompromi kualitas terbaik dibandingkan ukuran file untuk aset Anda.
- WebP lossy atau AVIF lossy adalah alternatif JPEG yang bagus untuk gambar berkualitas web, namun perlu diketahui bahwa mode lossy membuang beberapa informasi untuk mendapatkan gambar yang lebih kecil. Artinya, warna yang dipilih mungkin tidak sama dengan JPEG yang setara.
Terakhir, perhatikan bahwa jika Anda menggunakan WebView untuk merender konten di aplikasi khusus platform, berarti Anda memiliki kontrol penuh atas klien dan dapat menggunakan WebP secara eksklusif. Facebook dan banyak lainnya menggunakan WebP untuk mengirimkan semua gambar dalam aplikasi mereka— penghematannya sangat sepadan.
Dampak pada Largest Contentful Paint (LCP)
Gambar dapat menjadi kandidat LCP. Artinya, ukuran gambar memengaruhi waktu pemuatan. Jika suatu gambar adalah kandidat LCP, mengenkode gambar tersebut secara efisien sangat penting untuk meningkatkan LCP.
Sebaiknya Anda berusaha menerapkan saran yang diberikan dalam panduan ini agar persepsi performa halaman dapat secepat mungkin untuk semua pengguna. LCP adalah bagian dari performa persepsi, karena mengukur seberapa cepat elemen terbesar (dan karenanya yang paling terlihat) di halaman ditampilkan.