Digital Transformation
Image Optimization (Optimasi Gambar Web)
Image optimization adalah praktik menyusutkan ukuran file gambar tanpa mengorbankan kualitas visual, dengan kombinasi format modern (WebP/AVIF), kompresi, resize, dan lazy loading agar halaman lebih cepat dimuat.
TL;DR: Image optimization adalah serangkaian teknik menurunkan ukuran file gambar agar halaman lebih cepat tanpa terlihat buruk di mata pengguna. Tiga pilar utama: pilih format yang tepat (WebP atau AVIF), kompres ke level optimal, dan kirim ukuran sesuai kebutuhan layar. Gambar sering memakan 50-70% bobot halaman, sehingga optimasinya berdampak paling besar ke kecepatan.
Apa itu Image Optimization?
Image optimization adalah proses memperkecil ukuran file gambar (KB/MB) sambil menjaga kualitas visual yang acceptable bagi pengguna. Proses ini menggabungkan tiga lapisan: konversi format (WebP atau AVIF menggantikan JPG/PNG), kompresi (lossy atau lossless), dan responsive delivery (mengirim ukuran berbeda untuk layar berbeda lewat atribut srcset). Hasil akhir: file 30-70% lebih kecil dari versi orisinal tanpa perbedaan visual berarti.
Empat Teknik Utama
| Teknik | Fungsi | Penghematan tipikal |
|---|---|---|
| Format modern (WebP/AVIF) | Kompresi lebih efisien dari JPG/PNG | 25-50% lebih kecil |
| Resize per breakpoint | Layar mobile tidak perlu gambar 4K | 40-70% di mobile |
| Lazy loading | Gambar di luar viewport ditunda muat | Hemat bandwidth + LCP |
| Compression tuning | Atur quality 75-85 untuk JPEG | 30-50% tanpa terlihat |
Di Next.js, komponen next/image menggabungkan keempat teknik ini secara default. Kombinasikan dengan CDN untuk delivery cepat lintas geografi.
Kenapa Penting?
Untuk website bisnis Indonesia yang banyak diakses lewat 4G dengan kuota terbatas, gambar berat menyebabkan halaman lambat dan bounce rate naik. Setiap detik penundaan halaman bisa menurunkan konversi 7-10% berdasarkan studi industri. Optimasi gambar juga langsung memperbaiki LCP, salah satu metrik Core Web Vitals yang menjadi faktor ranking Google sejak 2021.
Pertanyaan Umum
Apakah AVIF lebih baik dari WebP?
AVIF menghasilkan file 20-30% lebih kecil dari WebP pada kualitas setara, tapi encoding-nya lebih lambat dan dukungannya baru menyeluruh sejak 2023. Strategi aman: serve AVIF dengan fallback WebP, lalu JPEG untuk browser lama.
Berapa quality JPEG yang ideal?
Untuk foto dengan detail tinggi, quality 75-85 cukup. Mata manusia hampir tidak bisa membedakan dengan quality 100, namun ukurannya 40-60% lebih kecil.
Apakah perlu menyimpan original gambar?
Iya. Selalu simpan master file (RAW atau PNG lossless) di storage terpisah. Versi optimized untuk web sebaiknya di-generate ulang saat diperlukan.