Mengecilkan PNG sambil menjaga transparansi dan ketajaman tepi

PNG tetap unggul untuk UI, logo, dan ikon. Panduan ini merangkum alur kerja andal: lakukan paletisasi bila cocok, hapus chunk berlebih, lalu kencangkan dengan kompresi lossless.

Putuskan lebih dulu

• Butuh transparansi? → PNG atau WebP lossless (untuk UI)
• Warna sedikit? → Paletisasi (≤8‑bit) memberi penghematan besar
• Tepi halus/teks? → Utamakan lossless; hindari pra‑proses agresif

Alur kerja praktis

1. Normalisasi ke sRGB (detail: Manajemen Warna & Strategi Profil ICC 2025 — Panduan Praktis untuk Konsistensi Warna Web)
2. Paletisasi untuk mengurangi warna
3. Hapus chunk redundan (EXIF, timestamp, teks)
4. Terapkan kompresi lossless

Untuk kasus satuan: Optimizer PNG Lossless. Untuk batch: Batch Optimizer Plus.

Hal yang perlu diwaspadai

• Tepi teks melembut: hindari blur awal; jaga sumber tetap tajam
• Putus warna: sesuaikan ukuran palet bertahap; tinjau dengan Penggeser perbandingan

Seberapa jauh mengurangi warna (ambang)

• Logo/ikon: sering memadai di 8–32 warna; perhatikan anti‑aliasing
• Tangkapan layar UI: 64–128 warna sering mencukupi untuk paritas visual
• Ilustrasi mirip foto: hindari PNG; pertimbangkan WebP (lossless/lossy) atau AVIF

Untuk tepi alfa di latar gelap, tambahkan garis luar 0,5–1px dengan warna sama agar tidak muncul fringe.

Resep CLI (lossless)

# oxipng: seimbang antara kecepatan dan kompresi
oxipng -o 4 --strip all input.png -o output.png

# zopflipng: lebih kuat namun lambat
zopflipng -m --iterations=50 --filters=0me input.png output.png

# pngquant: lossy (paletisasi) tapi berkualitas; atur target dengan --quality
pngquant --quality=70-95 --speed 1 --strip --force --output output.png input.png

Petunjuk:

• Mulai dengan pngquant untuk mengurangi warna, lalu oxipng/zopflipng agar lebih rapat.
• --strip all menghapus timestamps/teks yang tidak memengaruhi render.

Strategi filter dan parameter zlib

PNG memilih filter per‑baris (None/Sub/Up/Average/Paeth) lalu kompres dengan zlib. Kombinasi terbaik bisa mengubah ukuran hingga beberapa persen.

• Pencarian filter: coba pola seperti zopflipng -m --iterations=50 --filters=0me
• Level zlib: 9 paling kuat namun lambat; praktiknya mulai 5–7 dan iterasi
• Area bertona kontinu cenderung suka Paeth/Average; area UI datar kadang None/Sub

Dithering (kekasaran perseptual)

Dithering menyamarkan banding, tapi pada teks/tepi tajam bisa tampak berisik.

• Floyd–Steinberg: serba guna; bagus untuk gambar alami
• Ordered: pola reguler; bisa kentara di UI
• None: terbaik untuk teks/logo; bidang datar tetap bersih

Di pngquant, kendalikan dengan --floyd (0..1) dan --ordered. Untuk set ikon, biasanya tanpa dithering; untuk gradien halus, Floyd tipis.

Alfa dan tepi premultiplied

PNG transparan kadang menunjukkan halo gelap di latar gelap. Antisipasi latar dan pertimbangkan premultiplied‑alpha/komposisi atau garis luar 0,5–1px.

// Contoh konseptual dengan sharp
import sharp from 'sharp'

await sharp('input.png')
  .removeAlpha()
  .png({ compressionLevel: 9 })
  .toFile('flat.png')

await sharp('input.png')
  .ensureAlpha()
  .png({ compressionLevel: 9 })
  .toFile('alpha.png')

Integrasi CI/CD (contoh)

# .github/workflows/png-optimize.yml (kutipan)
name: Optimize PNG
on: [pull_request]
jobs:
  png-opt:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: sudo apt-get update && sudo apt-get install -y pngquant
      - run: |
          find assets -name "*.png" -print0 | xargs -0 -n1 -I{} pngquant --skip-if-larger --quality=70-95 --strip --force --output {} {}

Terkait

• Optimizer PNG Lossless
• Strategi Konversi Format 2025 — Panduan WebP/AVIF/JPEG/PNG
• Manajemen Warna & Strategi Profil ICC 2025 — Panduan Praktis untuk Konsistensi Warna Web