Cara Kompres Gambar untuk Website Tanpa Kehilangan Kualitas

Gambar besar adalah penyebab paling umum halaman web lambat. Foto 4 MB dari kamera ponsel yang ditampilkan dengan lebar 800 piksel di artikel blog menghasilkan tampilan yang sama dengan versi teroptimasi 60 KB, tapi butuh waktu 60 kali lebih lama untuk diunduh pada koneksi mobile.

Kompresi lossy vs lossless

Kompresi lossy membuang data piksel yang kemungkinan tidak diperhatikan mata manusia — variasi warna pada gradien, noise di area tidak fokus. JPEG dan WebP menggunakan kompresi lossy. Kamu mengontrol trade-offnya dengan parameter kualitas (0–100).

Kompresi lossless mereorganisasi data tanpa membuang apa pun. PNG menggunakan kompresi lossless. Kamu bisa menjalankan PNG melalui optimizer lossless seperti oxipng dan mendapat file lebih kecil tanpa kehilangan kualitas sama sekali.

Sebagian besar gambar web cocok dengan kompresi lossy. Pengecualiannya adalah logo, screenshot dengan teks, dan gambar di mana pikselasi akan terlihat jelas.

Memilih format yang tepat

Aturan default: Konversi foto dan screenshot UI ke WebP. Simpan gambar transparan sebagai PNG atau WebP dengan alpha. Gunakan SVG untuk seni vektor.

Pengaturan kualitas yang tepat

Untuk JPEG dan WebP, kualitas 75–85 adalah target web standar. Di bawah 70 kamu mulai melihat artefak yang terlihat pada foto; di atas 85 kamu menyimpan data yang tidak membuat perbedaan visual.

Di browser

Untuk gambar satu-kali, seret atau tempel ke image compressor, atur slider kualitas, dan unduh versi yang sudah dikompres. Alat ini berjalan sepenuhnya di sisi klien — gambar tidak pernah meninggalkan perangkatmu.

Command line: sharp (Node.js)

sharp adalah library pemrosesan gambar Node.js tercepat. Library ini membungkus libvips.

npm install sharp

const sharp = require('sharp');

// Konversi JPEG ke WebP di kualitas 80
sharp('input.jpg')
    .webp({ quality: 80 })
    .toFile('output.webp')
    .then(info => console.log(info));

// Resize dan kompres
sharp('hero.png')
    .resize(1200)          // resize ke lebar 1200px, pertahankan rasio aspek
    .webp({ quality: 82 })
    .toFile('hero.webp');

Proses batch seluruh direktori:

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = './images/original';
const outputDir = './images/compressed';

fs.readdirSync(inputDir)
    .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
    .forEach(file => {
        sharp(path.join(inputDir, file))
            .webp({ quality: 80 })
            .toFile(path.join(outputDir, file.replace(/\.(jpg|jpeg|png)$/i, '.webp')));
    });

Command line: ImageMagick

ImageMagick tersedia di sebagian besar sistem Linux/macOS dan menangani hampir setiap format.

# Install
brew install imagemagick    # macOS
sudo apt install imagemagick # Ubuntu

# Kompresi JPEG di kualitas 80
convert input.jpg -quality 80 output.jpg

# Konversi ke WebP
convert input.jpg -quality 80 output.webp

# Resize ke maksimal 1200px lebar, lalu kompres
convert input.jpg -resize 1200x -quality 80 output.webp

# Batch konversi semua JPEG di folder ke WebP
for f in *.jpg; do convert "$f" -quality 80 "${f%.jpg}.webp"; done

Python: Pillow

from PIL import Image

# Buka dan kompres sebagai JPEG
with Image.open('input.png') as img:
    img.convert('RGB').save('output.jpg', 'JPEG', quality=80, optimize=True)

# Buka dan kompres sebagai WebP
with Image.open('input.jpg') as img:
    img.save('output.webp', 'WebP', quality=80)

Batch compress dengan progress:

from PIL import Image
from pathlib import Path

input_dir = Path('images/original')
output_dir = Path('images/compressed')
output_dir.mkdir(exist_ok=True)

for img_path in input_dir.glob('*.{jpg,jpeg,png}'):
    with Image.open(img_path) as img:
        out_path = output_dir / img_path.stem
        img.save(f'{out_path}.webp', 'WebP', quality=80)
        print(f'{img_path.name}: {img_path.stat().st_size // 1024}KB → {(out_path.with_suffix(".webp")).stat().st_size // 1024}KB')

Gambar responsif — jangan hanya dikompres, resize juga

Mengompres gambar 3000 px ke kualitas 80 tetap menghasilkan file besar. Pendekatan yang tepat untuk web adalah menyajikan ukuran berbeda berdasarkan perangkat.

<img
  srcset="
    hero-400.webp   400w,
    hero-800.webp   800w,
    hero-1200.webp 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="hero-1200.webp"
  alt="Gambar hero"
  loading="lazy"
/>

Generate ukuran-ukurannya dengan sharp:

const sharp = require('sharp');

const widths = [400, 800, 1200];
for (const w of widths) {
    sharp('hero.jpg')
        .resize(w)
        .webp({ quality: 80 })
        .toFile(`hero-${w}.webp`);
}

Berapa besar kompresi yang bisa diharapkan?

Hasil tipikal saat mengonversi foto PNG/JPEG 24-bit ke WebP di kualitas 80:

Keuntungannya lebih kecil untuk JPEG yang sudah dikompres. Keuntungan terbesar adalah untuk foto PNG (yang dikodekan secara lossless) yang dikonversi ke WebP lossy.