Pertanyaan pertama yang harus Anda tanyakan pada diri sendiri adalah apakah gambar, nyata, diperlukan untuk mencapai efek yang Anda inginkan. Desain yang baik itu sederhana dan akan selalu menghasilkan kinerja terbaik. Jika Anda dapat menghilangkan resource gambar, yang sering kali membutuhkan banyak byte yang relatif terhadap HTML, CSS, JavaScript, dan aset lain di halaman, maka itu selalu menjadi strategi pengoptimalan terbaik. Meskipun demikian, gambar yang ditempatkan dengan baik juga dapat mengomunikasikan lebih banyak informasi daripada seribu kata, jadi terserah Anda untuk menemukan keseimbangannya.
Selanjutnya, Anda harus mempertimbangkan apakah ada teknologi alternatif yang dapat memberikan hasil yang diinginkan, tetapi dengan cara yang lebih efisien:
- Efek CSS (seperti bayangan atau gradien) dan animasi CSS dapat digunakan untuk menghasilkan aset yang tidak bergantung pada resolusi yang selalu terlihat tajam di setiap resolusi dan tingkat zoom, sering kali dalam ukuran tak sampai byte yang dibutuhkan oleh file gambar.
- Font web memungkinkan penggunaan typeface yang indah sekaligus mempertahankan kemampuan untuk memilih, menelusuri, dan mengubah ukuran teks—peningkatan kegunaan yang signifikan.
Jika Anda pernah mengenkode teks dalam aset gambar, berhentilah dan pertimbangkan kembali. Tipografi yang bagus sangat penting untuk desain, branding, dan keterbacaan yang baik, tetapi teks dalam gambar 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 kumpulan pengoptimalannya sendiri, tetapi penggunaan font ini dapat mengatasi semua masalah ini dan selalu menjadi 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 dalam memilih jenis gambar yang tepat untuk pekerjaan tersebut.
- Grafik vektor menggunakan garis, titik, dan poligon untuk merepresentasikan gambar.
- Grafis raster mewakili gambar dengan mengenkode nilai individual dari setiap piksel dalam grid persegi panjang.
Setiap format memiliki kelebihan dan kekurangannya masing-masing. Format vektor secara ideal cocok untuk gambar yang terdiri dari bentuk geometris sederhana seperti logo, teks, atau ikon. Iklan ini memberikan hasil yang tajam di setiap setelan resolusi dan zoom, sehingga menjadikannya format ideal untuk layar dan aset resolusi tinggi yang perlu ditampilkan pada berbagai ukuran.
Namun, format vektor tidak cukup ketika tampilan tampak rumit (misalnya, foto): jumlah markup SVG untuk mendeskripsikan semua bentuk bisa sangat tinggi dan outputnya mungkin masih belum terlihat "fotorealistik". Jika demikian, di sinilah Anda harus menggunakan format gambar raster, seperti PNG, JPEG, WebP, atau AVIF.
Gambar raster tidak memiliki properti bagus yang sama, yaitu tidak bergantung pada resolusi atau zoom —saat memperbesar gambar raster, Anda akan melihat grafis yang bergerigi dan buram. Akibatnya, Anda mungkin perlu menyimpan beberapa versi gambar raster dengan berbagai resolusi untuk memberikan pengalaman yang optimal kepada pengguna.
Implikasi layar resolusi tinggi
Ada dua jenis piksel yang berbeda: piksel CSS dan piksel perangkat. Satu piksel CSS mungkin terkait langsung dengan satu piksel perangkat, atau mungkin didukung oleh beberapa piksel perangkat. Apa gunanya? Jadi, semakin banyak piksel perangkat yang ada, semakin 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 halus, tetapi aset dasarnya sama dan tidak bergantung pada resolusi.
Di sisi lain, gambar raster menimbulkan tantangan yang jauh lebih besar karena gambar ini mengenkode data gambar per piksel. Oleh karena itu, semakin besar jumlah {i>pixel<i}, semakin besar ukuran {i>file<i} dari gambar raster. Sebagai contoh, mari kita 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 |
Jika kita menggandakan resolusi layar fisik, jumlah total piksel akan bertambah empat kali: dua kali lipat jumlah piksel horizontal, dikalikan dua kali jumlah piksel vertikal. Oleh karena itu, layar "2x" tidak hanya berlipat dua, tetapi juga empat kali lipat jumlah piksel yang dibutuhkan!
Jadi, apa artinya ini dalam praktiknya? Layar resolusi tinggi memungkinkan Anda menghasilkan gambar yang indah, yang bisa menjadi fitur produk yang hebat. Namun, layar resolusi tinggi juga memerlukan gambar beresolusi tinggi, oleh karena itu:
- Pilih gambar vektor jika memungkinkan karena gambar tersebut tidak bergantung pada resolusi dan selalu memberikan hasil yang tajam.
- Jika gambar raster diperlukan, tampilkan gambar responsif.
Fitur berbagai format gambar raster
Selain algoritme kompresi lossy dan lossless yang berbeda, format gambar yang berbeda mendukung fitur seperti animasi dan saluran transparansi (alfa). Akibatnya, pilihan "format yang tepat" untuk gambar tertentu merupakan kombinasi antara hasil visual yang diinginkan dan persyaratan fungsional.
| Format | Transparansi | Animasi | Browser |
|---|---|---|---|
| PNG | Ya | Tidak | Semua |
| JPEG | Tidak | Tidak | Semua |
| WebP | Ya | Ya | Semua browser modern. Lihat Dapatkah saya menggunakannya? |
| AVIF | Ya | Ya | Tidak. Lihat Apakah saya dapat menggunakannya? |
Ada dua format gambar raster yang didukung secara universal: PNG dan JPEG. Selain format tersebut, browser modern mendukung format WebP yang lebih baru, sementara hanya sebagian yang mendukung format AVIF yang lebih baru. Kedua format yang lebih baru menawarkan kompresi keseluruhan yang lebih baik dan lebih banyak fitur. Jadi, format manakah yang harus Anda gunakan?
WebP dan AVIF umumnya akan 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 alternatif. Lihat Menggunakan gambar WebP untuk detail selengkapnya.
Terkait format gambar lama, pertimbangkan hal-hal berikut:
- Apakah Anda memerlukan animasi? Gunakan elemen
<video>.- Bagaimana dengan GIF? GIF membatasi palet warna maksimal hingga 256 warna,
dan membuat ukuran file yang jauh lebih besar daripada elemen
<video>. Lihat Mengganti GIF animasi dengan video.
- Bagaimana dengan GIF? GIF membatasi palet warna maksimal hingga 256 warna,
dan membuat ukuran file yang jauh lebih besar daripada elemen
- Apakah Anda perlu mempertahankan detail halus dengan resolusi tertinggi? Gunakan PNG atau WebP lossless.
- PNG tidak berlaku untuk algoritma kompresi lossy di luar pilihan ukuran palet warna. Hasilnya, gambar berkualitas paling tinggi akan dihasilkan, tetapi ukuran filenya jauh lebih tinggi daripada 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 menjadi 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 menyampaikan tampilan khusus (untuk branding atau alasan lainnya), gunakan font web.
- Apakah Anda mengoptimalkan foto, screenshot, atau aset gambar serupa? Gunakan JPEG, WebP lossy, atau AVIF lossy.
- JPEG menggunakan kombinasi pengoptimalan lossy dan lossless untuk mengurangi ukuran file aset gambar. Coba beberapa tingkat kualitas JPEG untuk menemukan kompensasi kualitas terbaik versus ukuran file untuk aset Anda.
- Lossy WebP atau lossy AVIF mungkin merupakan alternatif JPEG yang dapat diterima, tetapi perlu diketahui bahwa mode lossy WebP khususnya akan membuang beberapa informasi kroma untuk mendapatkan gambar yang lebih kecil. Artinya, warna tertentu mungkin tidak sama dengan JPEG yang setara.
Terakhir, perhatikan bahwa jika Anda menggunakan WebView untuk merender konten di aplikasi khusus platform, 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, yang sangat bermanfaat.
Dampak pada Largest Contentful Paint (LCP)
Gambar mungkin berupa kandidat LCP. Hal ini berarti ukuran gambar memengaruhi waktu pemuatan gambar tersebut. Jika suatu gambar merupakan kandidat LCP, encoding gambar tersebut secara efisien sangat penting untuk meningkatkan LCP.
Anda harus berusaha untuk menerapkan saran yang diberikan dalam artikel ini sehingga kinerja persepsi halaman secepat mungkin untuk semua pengguna. LCP adalah bagian dari performa persepsi, karena mengukur seberapa cepat elemen terbesar (dan karenanya paling terlihat) di halaman ditampilkan.