Gambar besar adalah alasan nomor satu halaman termuat lambat. Perbaikannya hampir selalu dua langkah: buat gambar berukuran dimensi yang tepat, lalu kompres sisanya. Lakukan keduanya dan foto 4 MB jadi foto 150 KB yang terlihat identik di layar.
Mari kita beri angka nyata.
Ukuran target yang harus dibidik
Anda tak perlu menebak. Berikut anggaran bobot praktis yang menjaga halaman tetap cepat:
- Hero / banner selebar penuh: di bawah 200 KB, idealnya ~100–150 KB.
- Foto dalam artikel: 80–150 KB masing-masing.
- Thumbnail / avatar: 10–30 KB.
- Logo atau ikon (PNG/SVG): di bawah 30 KB; sering jauh lebih kecil.
Dan dimensinya:
- Hero selebar penuh: 1600–2000 px sudah lebih dari cukup untuk kebanyakan tata letak (gandakan hanya kalau Anda membidik Retina dan mampu menanggung byte-nya).
- Foto dalam kolom: cocokkan dengan lebar konten Anda — sering 800–1200 px.
- Thumbnail: ukuran saat ia benar-benar ditampilkan, misalnya 300–400 px.
Kalau ada satu gambar di halaman yang di atas ~300 KB, itu biasanya kesalahan yang layak diperbaiki.
Langkah 1: Resize ke lebar tampilan sesungguhnya
Ini langkah yang orang lewati, dan ini tuas terbesar. Foto langsung dari ponsel sering selebar 4000+ piksel. Kalau ia tampil di kolom 800 piksel, Anda mengirim 25 kali lebih banyak piksel dari yang ditampilkan layar — dan jumlah piksel menggerakkan ukuran file lebih dari apa pun.
Gunakan Image Resizer untuk mengecilkan gambar ke lebar saat ia benar-benar tampil. Resize menurut piksel atau persentase, jaga rasio aspek terkunci, dan biarkan pengecil berkualitas tinggi menjaga tepi tetap bersih.
Mengukur pas saja sering memangkas ukuran file 80–90% sebelum Anda mengompres satu byte pun.
Langkah 2: Kompres sisanya
Sekarang susutkan data di dalam dimensi yang benar itu.
- Foto (JPG/WebP): setel slider kualitas ke 75–85. Itu secara visual lossless untuk kebanyakan gambar sambil memangkas ukuran keras.
- PNG (tangkapan layar, grafik): Image Compressor menguranginya ke palet 256-warna, biasanya menghemat 60–80% tanpa perubahan yang terlihat dan menjaga transparansi.
Compressor juga membatasi output pada ukuran original — ia tak pernah mengembalikan sesuatu yang lebih besar — dan ia punya batas lebar opsional, jadi Anda sebenarnya bisa melakukan kedua langkah dalam sekali proses: setel batas ke lebar target Anda dan kompres sekaligus. Batch satu folder penuh dan unduh sebagai ZIP.
Pilih format yang tepat sekalian
Kalau gambar Anda akan disajikan ke browser modern, mengonversi foto ke WebP biasanya mengalahkan JPEG lagi 25–35% pada kualitas yang sama. Grafik datar tetap PNG (atau WebP). Jangan simpan foto sebagai PNG — itu kesalahan pembengkakan klasik, mudah jadi penalti 5–10×.
Alur kerja realistis
Untuk postingan blog dengan lima foto:
- Resize masing-masing ke lebar kolom Anda (katakanlah 1200 px).
- Kompres pada kualitas 80, atau konversi ke WebP.
- Pastikan masing-masing mendarat di bawah ~150 KB.
- Cek crop 100% dari satu gambar untuk memastikan kualitas bertahan.
Lima foto yang mulai dari total 20 MB akan mendarat sekitar 600 KB — halaman yang termuat dalam kejapan alih-alih macet.
Privat dan offline
Semua di atas berjalan sepenuhnya di browser Anda menggunakan Canvas dan WebAssembly. Tak ada gambar yang diunggah ke server, dan setelah kunjungan pertama alat di-cache dan bekerja offline. Anda bisa mengoptimalkan gambar sebanyak satu postingan tanpa koneksi dan tanpa apa pun meninggalkan mesin Anda.