Cara Mengompresi Gambar Hingga Di Bawah 50KB (Thumbnail dan Avatar)

Terakhir diperbarui: 27 Juni 2026

50KB adalah target yang ketat, tetapi untuk thumbnail, avatar, dan ikon kecil, itu lebih dari cukup untuk terlihat tajam — jika Anda mengubah ukurannya terlebih dahulu. Kesalahan yang menghalangi kebanyakan orang adalah mengompresi foto berukuran besar tanpa mengubah ukurannya; pada 50KB Anda tidak dapat melewati langkah pengubahan ukuran. Panduan ini menunjukkan jalur yang dapat diandalkan dengan ukuran file sebenarnya yang saya ukur pada satu foto sumber 126 KB.

Jawaban cepat: bagaimana cara mengompresi gambar hingga di bawah 50KB?

Ubah ukuran gambar ke ukuran tampilan kecil yang sebenarnya akan ditampilkan (biasanya 200–600 piksel untuk thumbnail atau avatar), lalu enkodekan sebagai WebP. Pada foto pengujian, mengubah ukuran menjadi 600 piksel dan mengkodekan WebP q70 menghasilkan file 15 KB — jauh di bawah 50 KB, tanpa penurunan kualitas yang terlihat pada ukuran tampilan tersebut.

Untuk alasan format di balik angka-angka ini, lihat perbandingan AVIF vs WebP vs JPEG.

Mengapa pengubahan ukuran wajib dilakukan pada 50KB

Pada target 50KB, kompresi kualitas saja gagal. Foto berukuran 1600 piksel yang dimasukkan ke dalam format JPEG 50 KB terlihat kotak-kotak karena pembuat enkode harus membuang terlalu banyak per piksel. Namun foto yang sama yang ditampilkan pada ukuran 600 piksel memiliki piksel sekitar 7× lebih sedikit — sehingga setiap piksel memiliki anggaran kualitas yang jauh lebih besar.

Penurunan ukuran hampir seluruhnya disebabkan oleh pengubahan ukuran, bukan karena peralihan format:

Pilih lebar pengubahan ukuran sesuai dengan tempat gambar ditampilkan. Avatar yang ditampilkan pada ukuran 96×96 tidak memerlukan sumber 600 piksel; thumbnail daftar produk yang ditampilkan dengan lebar 300 piksel dapat melakukannya. Cocokkan piksel dengan tampilan, seperti yang direkomendasikan oleh panduan pengubahan ukuran batch.

Berapa lebar pengubahan ukuran yang cocok untuk setiap kasus penggunaan?

Lebar yang tepat tergantung di mana gambar ditampilkan. Ini adalah dimensi yang pas di bawah 50KB setelah pengkodean WebP pada foto biasa:

Ekspor sekitar 1,5–2× lebar layar agar tetap tajam pada layar DPI tinggi, namun tidak terlalu besar sehingga Anda membuang-buang byte. Aturan 2× untuk avatar 96 piksel adalah 192 piksel — bukan 1200 piksel.

Bagaimana ukuran 50KB dapat dimasukkan ke dalam Core Web Vitals?

Thumbnail kecil jarang menjadi elemen LCP, jadi mencapai ukuran 50 KB lebih berarti total bobot halaman dan kehalusan gulir daripada tentang LCP secara langsung. Yang penting adalah bobot halaman di seluler: daftar produk dengan 40 gambar mini berukuran 150 KB masing-masing berukuran 6 MB gambar untuk diunduh melalui koneksi seluler sebelum halaman selesai dimuat. Daftar yang sama dengan ukuran masing-masing 15KB adalah 600 KB — pengurangan 10× yang mempercepat setiap halaman di situs. Mengompresi gambar mini memiliki pengaruh yang tinggi karena jumlahnya banyak. panduan gambar dan Data Web Inti Google mencakup sisi LCP; sisi thumbnail adalah penganggaran byte murni.

Metode 1: Kompresor browser

Untuk satu gambar, gunakan Imagic AI Image Compressor: unggah, ubah ukuran ke lebar tampilan (200–600 piksel), pilih WebP, atur kualitas sekitar 70, dan unduh setelah ukuran yang dilaporkan di bawah 50KB. Untuk kontrol visual yang tepat, Squoosh menampilkan ukuran output secara langsung saat Anda menggerakkan penggeser.

Metode 2: WebP pada baris perintah

WebP mencapai target 50KB dengan kualitas lebih tinggi daripada JPEG, sehingga merupakan default yang tepat untuk gambar mini web.

## Resize to 600px wide, encode WebP at quality 70
cwebp -q 70 -resize 600 0 input.jpg -o thumb.webp

Untuk folder thumbnail:

mkdir -p out
for f in *.jpg; do cwebp -q 70 -resize 600 0 "$f" -o "out/${f%.jpg}.webp"; done

Metode 3: Python dengan jaminan ukuran

Ketika batas 50KB diterapkan oleh sistem pengunggahan, turunkan kualitas hingga file pas, lalu ubah ukurannya terlebih dahulu:

from PIL import Image
from pathlib import Path

def to_under_50kb(src: Path, dest: Path, width: int = 600):
    with Image.open(src) as img:
        if img.width > width:
            ratio = width / img.width
            img = img.resize((width, int(img.height * ratio)), Image.LANCZOS)
        quality = 80
        while quality >= 20:
            img.save(dest, "WebP", quality=quality)
            if dest.stat().st_size <= 50 * 1024:
                return dest.stat().st_size / 1024
            quality -= 5
    return dest.stat().st_size / 1024

print(to_under_50kb(Path("photo.jpg"), Path("thumb.webp")))

Metode mana yang harus Anda pilih?

Kesalahan umum

• Mengompresi tanpa mengubah ukuran. Pada 50KB, hal ini menjamin keluaran yang jelek. Ubah ukurannya terlebih dahulu.
• Menggunakan lebar pengubahan ukuran yang terlalu besar. Gambar mini 1200 piksel yang ditampilkan pada 200 piksel akan membuang-buang byte. Cocokkan dengan ukuran tampilan.
• Menyimpan metadata EXIF. Menghapusnya untuk thumbnail web; metadata adalah sebagian kecil dari file berukuran 50 KB.
• Mengkodekan ulang JPEG yang sudah berukuran kecil. Setiap pass menambahkan artefak. Bekerja dari seorang master.

Daftar periksa pra-ekspor akhir

• Mulailah dengan dimensi piksel terkecil yang dapat diterima.
• Gunakan WebP sebelum mencoba pengaturan kualitas JPEG ekstrim.
• Hindari 50KB untuk foto pahlawan berukuran penuh.
• Hapus metadata dan thumbnail dari ekspor.
• Periksa teks, wajah, dan tepi produk 100%.

Pertanyaan yang sering diajukan

Bisakah foto terlihat bagus dengan ukuran di bawah 50KB?

Ya — pada ukuran layar kecil, thumbnail dan avatar benar-benar digunakan (di bawah ~600px). Ini tidak akan terlihat bagus pada ukuran layar penuh, karena datanya tidak cukup. Cocokkan piksel dengan tampilan.

JPEG atau WebP untuk target 50KB?

WebP. Ini mencapai target dengan kualitas yang lebih tinggi. Simpan JPEG dalam cadangan <picture> untuk klien yang sangat lama.

Berapa ukuran yang harus saya ubah ukurannya?

Ukuran tampilan. Avatar dengan ukuran 96 piksel memerlukan sumber ~96–200 piksel; thumbnail daftar pada ukuran 300 piksel memerlukan ~300–600 piksel. Lihat penyelaman mendalam kompresi gambar untuk alasan pengubahan ukuran sebelum kompres.

Bagaimana cara mengompres gambar hingga di bawah 50KB?

Ubah ukurannya menjadi lebar kecil terlebih dahulu (wajib pada 50KB), lalu konversikan ke WebP dan kompres pada kualitas 75–80. Pada 50KB Anda berada di wilayah thumbnail dan avatar — foto konten tidak akan pas. Cocokkan lebar pengubahan ukuran dengan kasus penggunaan kecil: kira-kira 300–600 piksel untuk gambar mini atau avatar.

Di mana gambar berukuran 50KB digunakan?

Avatar, thumbnail, ikon, dan grafik web kecil — semuanya ditampilkan berukuran kecil. Gambar berukuran 50KB tidak cocok untuk foto pahlawan atau konten; itu membutuhkan lebih banyak piksel dan byte. Sesuaikan anggaran dengan ukuran tampilan: tampilan kecil, file kecil; layar besar, file lebih besar.

Haruskah saya menggunakan WebP atau JPEG dengan ukuran 50KB?

WebP. Ukurannya 25 hingga 35 persen lebih kecil dari JPEG dengan kualitas yang sama, sehingga file WebP mencapai ukuran 50KB dengan kualitas lebih tinggi dan detail lebih tajam. Sajikan dengan fallback JPEG melalui elemen <picture> sehingga browser lama tetap mendapatkan gambar yang berfungsi.

Berapa ukuran lebar yang cocok dengan 50KB?

Kira-kira 300–600 piksel untuk thumbnail atau avatar dengan kualitas WebP 75. Gambar yang lebih besar tidak akan muat dalam ukuran 50 KB tanpa artefak yang berat. Pilih lebar tempat gambar ditampilkan, dan target 50KB dapat dijangkau dengan mudah.

Apakah 50KB cukup kecil untuk Core Web Vitals?

Ya — gambar berukuran 50KB dimuat hampir seketika dan menjaga LCP tetap sehat, itulah sebabnya gambar mini dan avatar cocok untuk muncul di paro atas. Pengorbanannya adalah dimensi: pada 50KB Anda berada di wilayah gambar kecil, bukan fotografi konten. Sesuaikan anggaran dengan ukuran tampilan dan format (WebP) agar berhasil.

Bisakah foto muat di bawah 50KB?

Hanya pada dimensi kecil. Foto konten (1200 piksel+) tidak akan muat di bawah 50 KB tanpa artefak berat dan garis melintang dalam gradien. 50KB cocok untuk avatar, gambar mini, dan grafik web kecil. Untuk foto konten, targetkan 200KB atau terima file yang lebih besar. Cocokkan anggaran byte dengan ukuran tampilan — tampilan kecil, file kecil.

Apakah mengubah ukuran atau mengompresi akan menghemat lebih banyak byte?

Mengubah ukuran, dengan margin yang lebar. Menghapus piksel akan memotong data yang disimpan oleh pembuat enkode; menurunkan kualitas hanya akan menekan setiap piksel yang tersisa lebih keras. Khususnya pada target 50KB, Anda harus mengubah ukurannya ke lebar yang kecil terlebih dahulu, karena tidak ada pengaturan kualitas yang dapat memuat gambar besar ke dalam 50KB tanpa artefak yang berat.

Kredit gambar

• Perbandingan jalur kompresi, sebelum/sesudah, dan bagan ukuran — dibuat oleh penulis dari foto bergaya e-niaga (Pexels #16675632, foto oleh Mikael Blomkvist) untuk menampilkan ukuran file terukur sebenarnya untuk target 50KB.