Cara mengompres gambar untuk website

Pada halaman biasa, bobot gambar melebihi gabungan HTML, CSS, dan skrip. Satu foto yang disalin langsung dari ponsel bisa berukuran 3 hingga 6 MB, sementara sisa halaman hanya beberapa ratus kilobyte. Membenahi gambar adalah cara termurah untuk mempercepat situs, dan hasilnya langsung terlihat pada Largest Contentful Paint, metrik Core Web Vitals yang mengukur seberapa cepat konten utama muncul.

Panduan ini membahas alur kerja lengkapnya: menentukan ukuran tampilan setiap gambar, memilih format yang tepat, mengompres, memeriksa hasil, dan menyajikannya dengan benar. Cara ini berlaku untuk situs yang ditulis manual, toko online, maupun blog di CMS apa pun.

Tentukan anggaran sebelum mulai

Ada baiknya Anda memegang angka acuan. Ini target praktis, bukan aturan baku:

• Hero atau banner selebar layar: sekitar 150 hingga 300 KB.
• Gambar konten di dalam artikel: 50 hingga 150 KB.
• Kartu produk atau thumbnail dalam grid: 20 hingga 60 KB.
• Logo atau ikon: beberapa kilobyte, idealnya SVG.

Halaman dengan satu hero dan sepuluh gambar konten yang memenuhi angka ini memiliki total gambar sekitar 1 hingga 2 MB. Halaman yang sama dengan foto ponsel apa adanya dengan mudah melewati 30 MB.

Langkah 1. Ubah ukuran sesuai ukuran tampilan sebenarnya

Jumlah piksel memengaruhi ukuran file lebih besar daripada pengaturan kualitas apa pun. Foto 4000×3000 berisi 12 juta piksel; pada 1600×1200 jumlahnya kurang dari 2 juta. Itu pengurangan 85% bahkan sebelum kompresi dimulai.

Cari lebar terbesar saat gambar ditampilkan, lalu beri ruang untuk layar berkerapatan tinggi:

• Hero selebar layar: lebar 1600 hingga 2000 px sudah mencakup sebagian besar laptop dan layar retina.
• Kolom artikel 700 hingga 800 px: ekspor di 1200 hingga 1600 px agar tetap tajam di layar 2×.
• Kartu dalam grid tiga kolom: 600 hingga 800 px.

Di Ubah ukuran gambar, isi kolom Lebar dan kosongkan Tinggi untuk menjaga proporsi, atau isi angka yang sama di kedua kolom dengan Pertahankan rasio aktif untuk membatasi sisi terpanjang pada campuran foto potret dan lanskap. Perhatikan bahwa gambar yang sudah lebih kecil dari kotak akan diperbesar agar pas, jadi jangan masukkan ikon kecil ke batch dengan kotak besar.

Pengubahan ukuran mempertahankan format asli. JPG dan WebP di-encode ulang dengan kualitas tinggi (0,92), PNG tetap lossless. Metadata lokasi dan kamera ikut terhapus dalam prosesnya, dan memang itu yang Anda inginkan untuk foto yang dipublikasikan.

Langkah 2. Pilih format yang tepat

Pilih berdasarkan isi gambar, bukan kebiasaan:

• Foto dan apa pun yang bergradasi → WebP. Pada kualitas visual yang sama, biasanya 25 hingga 35% lebih kecil daripada JPG, dan semua browser saat ini bisa menampilkannya.
• Foto yang tidak bisa memakai WebP → JPG dengan kualitas 75 hingga 85. Sebagian template email, CMS lama, dan feed marketplace masih mengharuskan JPG.
• Screenshot, logo, diagram, grafis datar → PNG, lalu kurangi palet warnanya. Gambar seperti ini punya sedikit warna dan tepi tajam, dan JPG menghasilkan noda yang terlihat di sana.
• Grafis transparan yang besar atau fotografis → WebP. Format ini mempertahankan kanal alfa dan jauh lebih kecil daripada PNG untuk foto produk tanpa latar.
• Ikon dan ilustrasi sederhana → SVG selama Anda punya file vektor aslinya. Tidak ada format raster yang mengalahkannya dalam hal ukuran dan ketajaman.

Kesalahan paling umum adalah foto yang disimpan sebagai PNG. Foto PNG sering lima hingga sepuluh kali lebih besar daripada JPG yang bagus, tanpa manfaat yang terlihat.

Langkah 3. Kompres

Foto ke WebP

Konversi JPG ke WebP online dimulai dengan kualitas 85, yang cocok untuk sebagian besar gambar konten. Turunkan ke 70 hingga 75 untuk thumbnail dan gambar latar di bawah teks, dan naikkan ke 90 untuk hero dengan detail halus atau teks di dalam gambar. Alat ini juga menerima PNG dan mempertahankan transparansi.

Untuk screenshot dan grafis transparan, Konversi PNG ke WebP online dimulai dengan kualitas 90, yang menjaga garis tipis dan teks kecil tetap tajam.

Encoding WebP memakai encoder bawaan browser Anda. Safari tidak bisa meng-encode WebP, jadi untuk langkah ini gunakan Chrome, Edge, atau Firefox; halaman akan menampilkan pesan error alih-alih menyimpan file dengan label yang salah.

Grafis datar sebagai PNG

Kompres PNG online mengurangi gambar menjadi palet 256, 128, atau 64 warna dan mempertahankan transparansi. Screenshot dan logo biasanya kehilangan 50 hingga 70% bobotnya pada 256 warna tanpa perubahan yang terlihat. Mulailah dari 256, coba 128 untuk screenshot antarmuka, dan simpan 64 untuk grafik dan ikon sederhana. Alat ini tidak memakai dithering, jadi gradasi halus bisa tampak berpita; jika itu terjadi, naikkan lagi levelnya atau ubah gambar tersebut ke WebP.

Tetap memakai JPG

Kompres JPG online dimulai dari 80. Untuk konten website, 75 hingga 80 biasanya titik idealnya. Jika file sudah teroptimasi dengan baik dan encoding ulang justru membuatnya lebih besar, alat ini mengembalikan file asli tanpa diubah.

Langkah 4. Periksa sebelum publikasi

Pengaturan kompresi selalu merupakan kompromi, jadi periksa hasilnya di bagian yang paling dulu rusak pada JPEG dan WebP: gradasi halus langit atau dinding, tepi tajam berkontras tinggi, dan area merah yang pekat. Bandingkan dua gambar menempatkan file asli dan versi terkompresi di bawah satu slider sehingga perbedaannya mudah terlihat.

Lalu periksa angkanya. Setiap baris file menampilkan ukuran sebelum dan sesudah; file yang masih jauh di atas anggaran biasanya berarti dimensinya terlalu besar, bukan kualitasnya terlalu tinggi.

Langkah 5. Sajikan dengan benar

Kompresi baru separuh pekerjaan. Markup menentukan bagaimana browser memuat hasil kerja Anda:

• Selalu tetapkan width dan height pada <img>. Browser menyisihkan ruang sebelum file tiba, sehingga mencegah pergeseran tata letak, metrik Core Web Vitals lainnya.
• Lazy-load gambar di bawah lipatan dengan loading="lazy". Jangan pernah lazy-load hero: biasanya itulah elemen Largest Contentful Paint, dan menundanya memperburuk skor. Beri hero fetchpriority="high" sebagai gantinya.
• Gunakan srcset dan sizes jika satu gambar tampil dengan lebar yang sangat berbeda di ponsel dan desktop. Ekspor dua atau tiga lebar, misalnya 800, 1200, dan 1600 px, dan biarkan browser memilih.
• Gunakan <picture> dengan fallback JPG hanya jika Anda harus mendukung browser yang sangat lama. Untuk sebagian besar situs, WebP biasa sudah cukup.
• Cache dalam waktu lama. Beri file gambar masa cache yang panjang dan ganti nama file saat gambarnya berubah.

Banyak CMS membuat salinan berukuran lebih kecil saat upload. Itu membantu, tetapi salinan dibuat dari apa pun yang Anda upload, jadi file asli 6 MB tetap berarti upload lambat dan penyimpanan membengkak. Upload gambar yang sudah mendekati ukuran terbesar yang Anda butuhkan.

Opsi bawaan di komputer dan ponsel

Untuk beberapa gambar saja, Anda mungkin tidak butuh alat lain:

• Preview di macOS: Alat → Sesuaikan Ukuran untuk mengubah dimensi, lalu File → Ekspor dengan slider kualitas untuk JPG. Cepat untuk satu atau dua file.
• Foto di Windows: opsi "Resize image" menawarkan ukuran siap pakai dan pengaturan kualitas. Paint juga bisa mengubah ukuran, tetapi menyimpan JPG tanpa memberi pilihan kualitas.
• iPhone dan Android: editor bawaan bisa memotong, tetapi tidak bisa mengatur dimensi piksel atau kompresi, jadi foto ponsel untuk website sebaiknya diproses sebelum masuk ke situs.

Alat browser di atas paling berguna saat Anda punya banyak file: lepas satu folder sekaligus, unduh hasilnya sebagai satu ZIP, dan tidak ada yang diunggah.

Pemecahan masalah

• File WebP lebih besar daripada JPG. JPG sumbernya sudah sangat terkompresi, atau kualitas diatur di 95 hingga 100. Turunkan kualitas ke 80 atau tetap pakai JPG.
• PNG hampir tidak mengecil. File sudah terindeks atau teroptimasi. Alat ini akan memberi tahu bahwa file asli dipertahankan.
• Area transparan berubah putih. Gambar diproses lewat Kompres JPG online, dan JPG tidak mendukung transparansi. Gunakan Konversi PNG ke WebP online atau Kompres PNG online untuk gambar tanpa latar.
• Teks di screenshot tampak buram. Gunakan PNG atau WebP dengan kualitas 90 ke atas, jangan pernah JPG.
• Gambar tampak buram di layar retina. Anda mengubah ukuran sesuai lebar CSS; ekspor kira-kira dua kali lipatnya.

Daftar periksa

1. Ukur lebar tampilan terbesar setiap gambar.
2. Ubah ukuran maksimal sekitar dua kali lebar itu.
3. Foto ke WebP di kualitas 80 hingga 85, grafis datar ke PNG berpalet.
4. Bandingkan hasilnya pada gradasi dan tepi.
5. Cocokkan setiap file dengan anggaran ukuran.
6. Tambahkan width, height, lazy loading di bawah lipatan, dan prioritas tinggi untuk hero.