Optimasi Gambar untuk Web: Panduan Lengkap

Pemuatan halaman yang lambat mematikan konversi. Studi menunjukkan 40% pengguna meninggalkan situs yang membutuhkan waktu lebih dari 3 detik. Penyebab terbesarnya? Gambar yang tidak dioptimalkan. Satu foto berukuran 5 MB di beranda Anda dapat menghabiskan waktu muat bahkan pada koneksi cepat.

Daftar periksa pengoptimalan gambar

1. Dimensi yang tepat — jangan mengirimkan gambar 4000 piksel saat Anda menampilkan 800 piksel
2. Format yang tepat — WebP/AVIF modern, JPG/PNG pengganti
3. Kompresi yang tepat — kualitas 75–85% untuk foto, lossless untuk grafis
4. Pengiriman tepat — pemuatan lambat, srcset responsif

Dimensi yang direkomendasikan pada tahun 2026

• Gambar pahlawan: maks 1920×1080 (Full HD) atau 2560×1440 (2K)
• Pahlawan postingan blog: 1200×675 (16:9)
• Foto produk: 1500×1500 dengan dukungan zoom, tampilan default 800×800
• Avatar: 256×256 (thumbnail akan diperkecil)
• Grafik Terbuka (berbagi sosial): 1200×630
• Favikon: 32×32, 192×192, 512×512 PNG

Ubah ukuran foto ke dimensi ini dengan alat pengubah ukuran gambar kami sebelum diunggah.

Format: kapan menggunakan apa

• WebP: Default untuk 95% gambar web. 25–35% lebih kecil dari JPG dengan kualitas yang sama. Dukungan browser universal.
• AVIF: Bahkan lebih kecil (50% lebih kecil dari JPG). Gunakan untuk gambar pahlawan. Browser baru mendukungnya.
• JPG: Foto tanpa transparansi. Kompatibilitas luar biasa.
• PNG: Logo, tangkapan layar, apa pun yang transparan. Tanpa rugi.
• SVG: Grafik vektor, ikon, ilustrasi sederhana. Ukuran file kecil, skala tak terbatas.

Konversi antara format-format ini dengan Konversi Gambar PDF7.

Kompresi: seberapa agresif atau terlalu agresif?

Untuk foto: mulai dengan kualitas 85%. Turun menjadi 75% untuk halaman yang memerlukan bandwidth penting. Di bawah 70%, artefak menjadi terlihat. Gunakan alat kompres gambar kami untuk menemukan keseimbangan yang tepat.

Gambar responsif dengan srcset

Jangan menayangkan gambar 2K ke ponsel. Gunakan atribut srcset HTML:

Browser memilih gambar terkecil yang sesuai. Anda memerlukan 3 ukuran per gambar.

Pemuatan lambat

Tambahkan loading="lazy" ke semua gambar di paro bawah. Browser modern tidak memuatnya sampai pengguna menggulirnya, sehingga menghemat bandwidth pada setiap pemuatan halaman.

Aturan 100 KB

Bidik masing-masing gambar di bawah 100KB. Gambar pahlawan dapat mencapai 200KB. Jika satu foto berukuran lebih dari 500 KB, Anda telah melakukan kesalahan — ubah ukuran dan kompres ulang.