Pertanyaan pertama yang harus Anda tanyakan pada diri sendiri adalah apakah gambar, memang diperlukan untuk mencapai efek yang Anda inginkan. Jika Anda dapat menghilangkan aset gambar, yang sering kali memerlukan sejumlah besar byte dibandingkan dengan HTML, CSS, JavaScript, dan aset lainnya di halaman, maka itu selalu menjadi strategi pengoptimalan terbaik. Namun, gambar yang ditempatkan dengan baik juga dapat menyampaikan lebih banyak informasi daripada seribu kata, jadi Anda yang menentukan keseimbangan tersebut.
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 independen resolusi yang selalu terlihat tajam pada setiap resolusi dan tingkat zoom, sering kali dengan sebagian kecil byte yang diperlukan 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 mendapati diri Anda menyandikan teks dalam aset gambar, hentikan 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 DPI tinggi. Penggunaan font web memerlukan serangkaian pengoptimalan sendiri, tetapi mengatasi semua masalah ini dan selalu menjadi pilihan yang lebih baik untuk menampilkan teks.
Memilih format gambar yang tepat
Jika Anda yakin bahwa gambar adalah opsi yang tepat, Anda harus memilih jenis gambar yang tepat untuk pekerjaan tersebut dengan cermat.
- Grafis vektor menggunakan garis, titik, dan poligon untuk merepresentasikan gambar.
- Grafik raster merepresentasikan gambar dengan mengenkode nilai individual setiap piksel dalam petak persegi panjang.
Setiap format memiliki kelebihan dan kekurangannya masing-masing. Format vektor sangat cocok untuk gambar yang terdiri dari bentuk geometris yang tidak terlalu rumit seperti logo, teks, atau ikon. Format ini memberikan hasil yang tajam pada setiap resolusi dan setelan zoom, sehingga menjadikannya format yang ideal untuk layar beresolusi tinggi dan aset yang perlu ditampilkan dalam berbagai ukuran.
Namun, format vektor tidak memadai jika adegannya rumit (misalnya, foto): jumlah markup SVG untuk mendeskripsikan semua bentuk bisa sangat tinggi dan outputnya mungkin masih tidak terlihat "fotorealistis". Jika demikian, Anda harus menggunakan format gambar raster seperti PNG, JPEG, WebP, atau AVIF.
Gambar raster tidak memiliki properti yang sama dengan gambar yang tidak bergantung pada resolusi atau zoom —saat Anda menskalakan gambar raster, Anda akan melihat grafik 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 beresolusi tinggi
Ada dua jenis piksel: piksel CSS dan piksel perangkat. Satu piksel CSS dapat berkorespondensi langsung dengan satu piksel perangkat, atau dapat didukung oleh beberapa piksel perangkat. Apa gunanya? Nah, makin banyak piksel perangkat, makin halus detail konten yang ditampilkan di layar.
Layar DPI Tinggi (HiDPI) menghasilkan hasil yang bagus, tetapi ada satu kelemahan yang jelas: aset gambar memerlukan lebih banyak detail untuk memanfaatkan jumlah piksel perangkat yang lebih tinggi. Kabar baiknya, gambar vektor sangat 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 yang mendasarinya sama dan tidak bergantung pada resolusi.
Di sisi lain, gambar raster menimbulkan tantangan yang jauh lebih besar karena mengenkode data gambar berdasarkan per piksel. Oleh karena itu, makin banyak jumlah piksel, makin besar ukuran file gambar raster. Pertimbangkan perbedaan antara aset foto yang ditampilkan pada 100x100 piksel (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 |
Saat kita menggandakan resolusi layar fisik, jumlah total piksel meningkat empat kali lipat: dua kali lipat jumlah piksel horizontal, dikali dua kali lipat jumlah piksel vertikal. Oleh karena itu, layar "2x" tidak hanya menggandakan, tetapi melipatgandakan jumlah piksel yang diperlukan.
Jadi, bagaimana praktiknya? Layar beresolusi tinggi memungkinkan Anda menampilkan 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 gambar vektor tidak bergantung pada resolusi dan selalu memberikan hasil yang tajam.
- Jika gambar raster diperlukan, sajikan gambar responsif.
Fitur berbagai format gambar raster
Selain algoritma kompresi lossy dan lossless yang berbeda, format gambar yang berbeda mendukung fitur yang berbeda seperti animasi dan saluran transparansi (alfa). Oleh karena itu, pilihan "format yang tepat" untuk gambar tertentu merupakan kombinasi dari hasil visual yang sesuai dan persyaratan fungsional.
| Format | Transparansi | Animasi | Browser |
|---|---|---|---|
| PNG | Ya | Ya (APNG) | Semua |
| JPEG | Tidak | Tidak | Semua |
| WebP | Ya | Ya | Semua browser modern. Lihat Dapatkah saya menggunakan? |
| AVIF | Ya | Ya | Semua browser modern. Lihat Dapatkah saya menggunakan? |
Ada dua format gambar raster yang didukung secara universal: PNG dan JPEG. Selain format ini, browser modern mendukung format gambar WebP dan AVIF yang lebih baru. Kedua format yang lebih baru ini menawarkan kompresi keseluruhan yang lebih baik dan lebih banyak fitur. Jadi, format mana yang sebaiknya 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 bersama dengan gambar JPEG atau PNG sebagai penggantian. Lihat Menggunakan gambar WebP untuk mengetahui detail selengkapnya.
Terkait format gambar lama, pertimbangkan hal berikut:
- Apakah Anda memerlukan animasi? Gunakan elemen
<video>.- Bagaimana dengan GIF? GIF membatasi palet warna hingga maksimal 256 warna, dan membuat ukuran file yang jauh lebih besar daripada elemen
<video>. APNG menawarkan lebih banyak warna daripada GIF, tetapi juga jauh lebih besar daripada format video dengan kualitas visual yang cukup setara. Lihat Mengganti GIF animasi dengan video.
- Bagaimana dengan GIF? GIF membatasi palet warna hingga maksimal 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 tanpa kehilangan kualitas.
- PNG tidak menerapkan algoritma kompresi lossy apa pun di luar pilihan ukuran palet warna. Akibatnya, format ini akan menghasilkan gambar berkualitas tertinggi, tetapi dengan ukuran file yang jauh lebih besar daripada format lainnya. Gunakan dengan bijak.
- WebP memiliki mode encoding lossless yang mungkin lebih efisien daripada PNG.
- Jika aset gambar berisi gambar yang terdiri dari 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 "diperbesar". Jika Anda perlu menyampaikan tampilan kustom (untuk branding atau alasan lain), 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. Coba beberapa tingkat kualitas JPEG untuk menemukan kompromi terbaik antara kualitas dan ukuran file aset Anda.
- WebP lossy atau AVIF lossy adalah alternatif JPEG yang bagus untuk gambar berkualitas web, tetapi perlu diketahui bahwa mode lossy menghapus beberapa informasi untuk menghasilkan 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 platform lainnya menggunakan WebP untuk mengirimkan semua gambar dalam aplikasi mereka—penghematannya sangat berharga.
Dampak pada Largest Contentful Paint (LCP)
Gambar mungkin merupakan kandidat LCP. Artinya, ukuran gambar memengaruhi waktu pemuatannya. Jika gambar adalah kandidat LCP, mengenkode gambar tersebut secara efisien sangat penting untuk meningkatkan LCP.
Anda harus berupaya menerapkan saran yang diberikan dalam panduan ini agar performa perseptual halaman secepat mungkin bagi semua pengguna. LCP adalah bagian dari performa perseptual, karena mengukur seberapa cepat elemen terbesar (dan oleh karena itu paling terlihat) di halaman ditampilkan.