Cara kompres gambar untuk website tanpa mengurangi kualitas

Saat halaman terbuka, browser harus mengunduh setiap gambar sebelum bisa menampilkannya. Di banyak website, gambar adalah bagian terberat dari halaman, dan elemen terbesar yang terlihat di layar pertama sering kali juga sebuah gambar. Google mengukur seberapa cepat elemen itu tampil sebagai Largest Contentful Paint (LCP), salah satu Core Web Vitals. Gambar yang lebih ringan berarti halaman tampil lebih cepat, kuota pengunjung lebih hemat, dan pengalaman yang lebih baik di ponsel.

Kabar baiknya, sebagian besar ukuran gambar bisa dikurangi tanpa penurunan kualitas yang terlihat. Berikut caranya.

1. Sesuaikan ukuran gambar dengan ukuran tampilnya

Ini langkah dengan dampak terbesar. Foto dari kamera ponsel biasanya berukuran 4000 piksel atau lebih, padahal di website mungkin hanya ditampilkan selebar 800 piksel. Browser tetap mengunduh seluruh 4000 piksel itu, lalu mengecilkannya sendiri.

Cara menentukan ukuran yang tepat:

1. Buka halaman Anda, klik kanan gambar, lalu pilih Inspect. Lihat lebar gambar saat tampil di layar, misalnya 800 piksel.
2. Kalikan dua untuk layar beresolusi tinggi (Retina), jadi 1600 piksel.
3. Ubah gambar ke lebar tersebut, bukan lebih besar.

Mengubah gambar 4000 piksel menjadi 1600 piksel saja sudah mengurangi jumlah piksel lebih dari enam kali lipat.

2. Pilih format yang tepat

WebP dan AVIF adalah format modern yang menghasilkan file jauh lebih kecil dari JPG dan PNG untuk kualitas yang sama. Menurut Google, WebP rata-rata 25 sampai 34 persen lebih kecil dari JPEG. Perbandingan lengkapnya ada di panduan WebP vs AVIF.

3. Atur tingkat kualitas

Kompresi lossy membuang detail yang hampir tidak terlihat mata untuk mendapatkan file yang jauh lebih kecil. Kompresi lossless tidak membuang apa pun, tetapi hasilnya lebih besar. Untuk foto di website, lossy hampir selalu pilihan yang tepat.

Pada skala kualitas 1 sampai 100, nilai sekitar 70 sampai 80 biasanya menjadi titik terbaik: ukurannya jauh lebih kecil, dan perbedaannya sulit dilihat. Di atas 90, ukuran file naik tajam dengan peningkatan kualitas yang nyaris tidak terasa. Selalu bandingkan hasilnya dengan mata Anda sendiri, terutama untuk gambar dengan teks atau gradasi halus.

4. Kirim ukuran berbeda untuk layar berbeda

Pengunjung di ponsel tidak butuh gambar selebar 1600 piksel. Dengan atribut srcset dan sizes, browser memilih sendiri versi yang paling sesuai:

<img src="banner-800.jpg"
     srcset="banner-480.jpg 480w, banner-800.jpg 800w, banner-1600.jpg 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="1600" height="600" alt="Promo akhir tahun">

srcset memberi tahu browser versi apa saja yang tersedia dan lebarnya. sizes memberi tahu seberapa lebar gambar akan tampil. Browser lalu mengunduh satu versi saja, yang terkecil namun tetap tajam.

5. Selalu tulis width dan height

Tanpa atribut width dan height, browser belum tahu ukuran gambar sebelum gambar selesai dimuat. Akibatnya, teks di bawahnya bergeser saat gambar muncul. Pergeseran ini diukur Google sebagai Cumulative Layout Shift (CLS). Tulis ukuran asli gambar, dan CSS max-width: 100%; height: auto; akan tetap membuatnya responsif.

6. Pakai lazy loading, kecuali untuk gambar utama

Gambar yang berada jauh di bawah halaman tidak perlu dimuat saat halaman pertama kali dibuka. Tambahkan loading="lazy", dan browser menunggu sampai pengunjung menggulir mendekatinya:

<img src="galeri-1.jpg" width="800" height="600" alt="…" loading="lazy">

Namun jangan pakai lazy loading untuk gambar utama di layar pertama, seperti banner atau foto produk utama. Gambar itu justru harus dimuat secepat mungkin. Untuk gambar tersebut, Anda bisa menambahkan fetchpriority="high".

7. Otomatiskan dengan CDN gambar

Langkah 1 sampai 4 bisa dilakukan secara manual dengan aplikasi edit gambar, tetapi harus diulang untuk setiap gambar dan setiap ukuran. Di situlah CDN gambar membantu: Anda mengunggah satu file asli, lalu meminta ukuran, format, dan kualitas lewat link.

Dengan Simpanan, contoh srcset di atas cukup ditulis seperti ini, tanpa menyiapkan tiga file:

<img src="https://cdn.simpananawan.com/tr:w-800,f-auto/u/anda/banner.jpg"
     srcset="https://cdn.simpananawan.com/tr:w-480,f-auto/u/anda/banner.jpg 480w,
             https://cdn.simpananawan.com/tr:w-800,f-auto/u/anda/banner.jpg 800w,
             https://cdn.simpananawan.com/tr:w-1600,f-auto/u/anda/banner.jpg 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="1600" height="600" alt="Promo akhir tahun">

f-auto mengirim AVIF atau WebP sesuai browser pengunjung, dan kualitas bawaan 80 sudah berada di titik terbaik yang disebut di langkah 3. Semua opsi ada di dokumentasi.

Cara mengecek hasilnya

• PageSpeed Insights (pagespeed.web.dev): masukkan alamat halaman Anda. Perhatikan saran seperti "Properly size images" dan "Serve images in next-gen formats".
• DevTools di browser: tekan F12, buka tab Network, pilih filter Img, lalu muat ulang halaman. Kolom Size menunjukkan berapa besar setiap gambar yang benar-benar diunduh.

Ringkasan

• Ubah ukuran gambar sesuai ukuran tampil, dikali dua untuk layar Retina.
• Pakai AVIF atau WebP untuk foto, SVG untuk logo dan ikon.
• Kualitas sekitar 70 sampai 80 untuk foto.
• Pakai srcset dan sizes untuk layar yang berbeda.
• Tulis width dan height di setiap gambar.
• Lazy loading untuk gambar di bawah, tidak untuk gambar utama.
• Otomatiskan semuanya dengan CDN gambar agar tidak perlu diulang manual.

Pertanyaan umum