Cara Resize Pixel Art Agar Tidak Buram Menggunakan Sharp.js

Pernah coba me-resize pixel art menjadi lebih besar? Hasilnya buram dan tidak jernih? Saya juga pernah mengalaminya. Sebenarnya untuk memperbaikinya sangat sederhana. Pada blog ini akan saja jelaskan secara singkat.

Menggunakan parameter yang benar

Ketika me-resize pixel art dengan menggunakan Sharp.js dan hasilnya buram, sebenarnya bukan berarti Sharp.js-nya tidak bagus untuk me-resize pixel art. Hanya saja, ada parameter yang tidak sesuai saja dengan kebutuhanmu.

Secara default, ketika me-resize gambar, Sharp.js menggunakan parameter filter: "lanczos3". Nah, filter ini kurang cocok kalau kamu ingin me-resize pixel art, karena hasilnya akan jadi buram dan tidak jernih. Sebaiknya kamu gunakan filter: "nearest". Jadi, kurang lebih kodenya jadi seperti ini:

await sharp(pixelInput)
.resize(
  { width: WIDTH, height: HEIGHT, filter: "nearest" })
.toFile("output.png")

Dengan begitu, hasil dari resize pixel art-mu tidak akan buram lagi dan jernih. Kalau kamu rasa blog ini cukup berguna, share ke teman-temanmu juga :).

Link referensi

• https://sharp.pixelplumbing.com/api-resize/