Di sebagian besar situs, gambar adalah hal terberat di halaman, sering kali lebih besar dari HTML, CSS, dan JavaScript digabung. Kalau sebuah halaman terasa lambat, gambar adalah tempat pertama yang harus diperiksa, dan perbaikannya biasanya cepat.
Tiga teknik mengerjakan hampir semuanya: resize gambar ke ukuran yang benar-benar ditampilkan, kompres, dan sajikan dalam format modern. Diterapkan bersamaan, ketiganya rutin memangkas bobot gambar hingga 70% atau lebih.
Resize ke ukuran yang benar-benar ditampilkan
Ini kesalahan paling umum sekaligus paling boros. Foto langsung dari kamera bisa jadi selebar 6000 piksel, tapi artikel Anda menampilkannya dalam kolom selebar 800 piksel. Browser mengunduh keenam ribu piksel itu lalu membuang sebagian besarnya saat memperkecil gambar agar muat.
Menyajikan gambar 6000 piksel di slot 800 piksel bisa berarti mengunduh lima sampai sepuluh kali lebih banyak data dari yang diperlukan. Perbaikannya sederhana: resize file ke kira-kira lebar yang akan ditempatinya, plus sedikit ruang lebih untuk layar berkepadatan tinggi.
Aturan praktisnya:
- Hero image selebar penuh: 1600–2000 px sudah lebih dari cukup.
- Gambar dalam artikel: 1000–1400 px.
- Thumbnail: 300–500 px.
Gunakan Image Resizer untuk mengecilkan tiap gambar sebelum sampai ke halaman Anda. Rasio aspek dikunci sehingga tidak ada yang melar.
Kompres untuk membuang pemborosan
Setelah dimensinya pas, kompresi menghapus detail yang tidak bisa dilihat mata. Untuk foto, kualitas sekitar 75–85% adalah titik manisnya: file turun drastis sementara gambar tampak sama saja. Untuk grafik datar dan tangkapan layar yang disimpan sebagai PNG, pengurangan jumlah warna (kuantisasi ke 256 warna) bisa menyusutkan file ke sebagian kecil ukuran aslinya.
Image Compressor menangani keduanya. Ia meng-encode ulang JPEG dan WebP berdasarkan kualitas, mengkuantisasi PNG, dan menjamin tidak akan pernah menghasilkan file yang lebih besar dari yang Anda mulai. Kalau Anda punya satu galeri penuh, jalankan sekaligus sebagai batch dan unduh ZIP-nya.
Beralih ke format modern
Pilihan format saja bisa memangkas separuh ukuran file. Berikut perbandingan pilihan umum untuk foto.
| Format | Ukuran khas vs JPEG | Paling cocok untuk |
|---|---|---|
| JPEG | Patokan | Fallback universal; foto |
| WebP | ~25–35% lebih kecil | Foto dan grafik; dukungan browser luas |
| AVIF | ~50% lebih kecil | Foto yang mengutamakan ukuran terkecil |
| PNG | Jauh lebih besar untuk foto | Logo, ikon, grafik datar, transparansi |
WebP adalah default yang aman di 2026 — setiap browser kini membacanya dan ia mengungguli JPEG dengan nyaman. AVIF bisa lebih kecil lagi tapi lebih lama di-encode dan dukungannya sedikit lebih sempit. Image Converter memungkinkan Anda menargetkan AVIF dan diam-diam beralih ke WebP saat AVIF bukan pilihan yang pas, jadi Anda dapat hasil terbaik yang tersedia tanpa menebak-nebak.
Satu peringatan: jangan gunakan PNG untuk foto. PNG unggul untuk logo, ikon, dan apa pun yang butuh transparansi, tapi untuk foto ia bisa beberapa kali lebih besar dari WebP dengan kualitas yang sama.
Menyatukan semuanya
Alur kerja yang andal untuk gambar apa pun yang menuju web:
- Resize ke lebar tampilan (plus ruang lebih untuk layar retina).
- Convert ke WebP, atau AVIF kalau Anda ingin file sekecil mungkin.
- Kompres pada kualitas 75–85% untuk mengikis sisa pemborosan.
Lakukan itu dan foto kamera 5 MB bisa menjadi WebP 120 KB yang tampak identik di kolom artikel. Kalikan sepanjang satu halaman dan selisih waktu muatnya dramatis.
Semuanya berjalan di browser Anda menggunakan Canvas dan WebAssembly, jadi tidak ada yang diunggah dan alat tetap bekerja offline setelah kunjungan pertama. Artinya Anda bisa menyiapkan satu folder gambar untuk situs Anda tanpa menyerahkannya ke server mana pun.
Melampaui file-nya
Dua kebiasaan lagi membantu, dan tanpa biaya:
- Lazy-load gambar di bawah lipatan dengan
loading="lazy"agar browser hanya mengambilnya saat pembaca scroll mendekat. - Setel atribut width dan height supaya tata letak tidak melompat saat gambar termuat, yang juga membantu skor Core Web Vitals Anda.
Ingin tahu persis gambar mana yang membebani sebuah halaman? Panduan SEO gambar kami membahas cara audit, dan pengecekan kecepatan halaman akan mendaftar aset terberat sehingga Anda tahu harus membidik mana lebih dulu.