Cara Memperbesar Seni Piksel Tanpa Mengaburkannya

Masukkan sprite 32×32 ke hampir semua editor gambar, alat pengubah ukuran, atau alur gambar mini CMS, dan hasilnya menjadi lembut — kisi piksel tajam digantikan sapuan warna perantara. Ini bukan bug perangkat lunak. Ini adalah perhitungan pengubahan ukuran bawaan yang melakukan tugas sesuai rancangannya, pada gambar yang membutuhkan perhitungan berbeda.

Seni pikselOleh Dev.SWL13 Agustus 2026Waktu baca 9 menit

Mengapa pengubahan ukuran biasa membuat pixel art kabur

Setiap pengubah ukuran gambar serbaguna — bawaan peramban, penampil gambar mini OS, bawaan Photoshop, optimasi gambar otomatis sebagian besar kerangka web — menggunakan suatu bentuk interpolasi. Yang paling umum adalah bilinear, dan varian yang lebih mahal secara komputasi (bicubic, Lanczos) merupakan penyempurnaan gagasan yang sama: untuk menghitung piksel baru, periksa piksel-piksel tetangga pada gambar sumber dan campurkan berdasarkan jaraknya.

Itulah pendekatan tepat untuk foto. Foto sebenarnya tidak memiliki tepian tegas di tingkat piksel — gradasi pipi atau latar kabur seharusnya halus, dan mencampur sampel tetangga merekonstruksi sesuatu dekat hasil pengambilan resolusi lebih tinggi. Perhitungannya mengasumsikan gambar adalah sampel adegan berkesinambungan.

Seni piksel bukan foto yang diambil sampelnya. Setiap piksel merupakan keputusan diskret yang disengaja seniman — warna tepat ini, pada sel tepat ini, dengan batas tegas ke sel berikutnya. Ketika pengubah ukuran bilinear memperbesar, alat menciptakan piksel gradasi antara warna yang tidak dimaksudkan bercampur karena tidak mengetahui batasnya disengaja. Hasilnya tampilan lembut berkabut yang umum: garis tepi hitam tajam menjadi halo abu-abu, dan area warna datar mendapat gradasi halus yang tidak ada pada sumber.

Slime seni piksel sama diperbesar dua cara: kiri, bilinear menyisakan tepi gradasi lembut dan halo abu-abu; kanan, nearest-neighbor mempertahankan setiap piksel sebagai blok persegi tegas — Sprite sama, faktor skala sama, dua pengambil sampel berbeda. Bilinear harus menciptakan piksel di antara asli, dan pada karya bertepi tegas tidak ada sesuatu masuk akal untuk diciptakan.

Nearest-neighbor: perbaikan dasar

Nearest-neighbor penskalaan mengajukan pertanyaan berbeda. Untuk setiap piksel keluaran, tidak ada pencampuran — hanya menyalin warna satu piksel sumber terdekat. Menskalakan sprite 16×16 menjadi 64×64 dengan nearest-neighbor membuat setiap piksel sumber menjadi blok 4×4 padat dengan warna identik. Tidak ada warna baru atau tepi melunak. Ini syarat minimum agar pixel art tetap terlihat seperti pixel art setelah diskalakan.

Kebanyakan alat menyediakannya sebagai opsi eksplisit, bukan bawaan, karena nearest-neighbor buruk untuk konten foto — menghasilkan gambar kotak-kotak dan bergerigi. Anda harus memilihnya secara aktif:

Photoshop / GIMP: atur metode resampling ke "Nearest Neighbor" (Photoshop) atau "None" (GIMP) sebelum menskalakan.
ImageMagick: -filter point sebelum -resize.
Canvas API (peramban/JS): ctx.imageSmoothingEnabled = false sebelum menggambar gambar yang diskalakan.
Python / Pillow: Image.resize(size, Image.NEAREST).

Mengapa faktor skala harus bilangan bulat

Nearest-neighbor saja tidak cukup. Persyaratan kedua adalah faktor skala berupa bilangan bulat — 2x, 3x, 4x — bukan 1.5x, bukan lebar target sembarang yang kebetulan berada di antara kelipatan tepat.

Pada skala bilangan bulat, setiap piksel sumber dipetakan ke blok piksel keluaran berukuran sama: 3x berarti setiap piksel menjadi persegi 3×3 yang bersih. Kisi tetap seragam dan setiap piksel asli diwakili secara setara serta konsisten.

Pada skala bukan bilangan bulat seperti 1.5x, sebagian piksel sumber diwakili blok piksel keluaran 2×2, sedangkan lainnya oleh 1×1 atau 2×1 yang tidak seimbang, karena kisi sampel tidak terbagi rata. Gambar secara teknis tetap "nearest-neighbor", jadi tidak ada pencampuran warna, tetapi ukuran piksel di seluruh gambar tampak tidak konsisten — sebagian blok terlihat lebih tebal, dan garis diagonal lurus pada karya asli menjadi tidak rata padahal sebelumnya tidak demikian. Hasilnya terasa janggal secara halus dan sulit dijelaskan, bukan pembesaran yang bersih.

Secara praktis, pilih ukuran target dengan menghitung mundur dari kelipatan bilangan bulat dimensi sumber, bukan maju dari target piksel tetap. Jika sumber 48×48 dan perlu ditampilkan sekitar 150px, gunakan 3x (144px) atau 4x (192px) dan biarkan CSS atau tata letak menyesuaikan selisih, bukan meminta pengubah ukuran tepat 150px.

Menjaganya tajam dalam CSS

Menskalakan berkas sendiri baru separuh masalah di web. Bahkan PNG yang diskalakan nearest-neighbor akan kabur lagi jika peramban mengubah ukuran saat render dengan penghalusan bawaan. Solusinya properti CSS yang diterapkan pada elemen yang ditampilkan <img> atau elemen canvas:

image-rendering: pixelated;

Ini memerintahkan peramban memakai nearest-neighbor setiap kali mengubah ukuran tampilan — termasuk hal tidak dikendalikan langsung, seperti zoom pengguna atau wadah responsif mengikuti viewport. Didukung semua peramban utama kini. Alternatif lebih lama dan kurang konsisten adalah image-rendering: crisp-edges;, yang diperlakukan sama oleh sebagian peramban dan sebagai algoritma penajaman yang sedikit berbeda oleh peramban lainnya; khusus untuk seni piksel, pixelated adalah pilihan yang lebih dapat diperkirakan.

Sebaiknya atur image-rendering: pixelated bahkan jika Anda sudah mengekspor sprite pada ukuran tampilan akhirnya. Tata letak, zoom, atau penskalaan high-DPI setelahnya tetap dapat memicu pengubahan ukuran yang tidak diminta.

Filter point dalam engine game

Engine game memiliki masalah sama satu tingkat lebih dalam, karena sprite diskalakan oleh zoom kamera, resolusi layar, dan pengaturan pixel-per-unit saat runtime, bukan hanya sekali saat ekspor. Setiap engine menyediakan pengaturan filter tekstur, dan pilihan aman untuk seni piksel selalu disebut suatu varian "point" atau "nearest":

Unity: Filter Mode diatur menjadi Point (no filter) pada pengaturan impor tekstur, dibahas terperinci dalam Panduan impor sprite Unity.
Godot: properti filter tekstur diatur ke Nearest, per tekstur atau sebagai default seluruh proyek untuk proyek pixel art 2D.
Unreal: Texture Group atau Filter diatur Nearest Neighbor pada tekstur sprite.

Membiarkan filter bilinear/linear bawaan aktif merupakan penyebab paling umum game seni piksel tampak kabur dalam engine meskipun berkas karya sumber tajam.

Algoritma khusus penskalaan seni piksel

Nearest-neighbor jujur tetapi kotak-kotak — pada pembesaran tinggi, garis diagonal dan kurva dalam karya asli membentuk tangga terlihat karena algoritma tidak memahami garis, hanya piksel individual. Keluarga algoritma yang dirancang khusus untuk seni piksel mencoba menghaluskan tangga tanpa menimbulkan kabur, dengan mempertimbangkan pola piksel lokal, bukan setiap piksel secara terpisah.

Scale2x / Scale3x (juga disebut AdvMAME2x/3x): yang paling sederhana dalam keluarga ini. Algoritma melihat empat tetangga langsung setiap piksel dan, ketika pola tepi diagonal ditemukan, membagi piksel yang diperbesar agar tepi tampak miring, bukan bertangga. Cepat dan merupakan default wajar untuk sprite sederhana dengan garis luar bersih.
EPX / hqx (hq2x, hq3x, hq4x): memperluas gagasan yang sama dengan pencarian pola piksel tetangga lebih besar dan lebih banyak bentuk keluaran per pola, sehingga hasil lebih bulat dan menyerupai lengkungan. Metode ini cocok untuk garis luar sprite yang digambar tangan, tetapi kurang cocok untuk pixel art dengan dithering atau noise, ketika pencocokan pola menangkap tepi palsu.
xBRZ: turunan lebih baru dan umumnya berkualitas lebih tinggi dari keluarga yang sama, disetel untuk menghasilkan diagonal dan lengkungan lebih halus dengan lebih sedikit artefak pada sprite detail. Inilah algoritma di balik filter pembesaran pada banyak antarmuka emulator.

Ketiganya memiliki batasan yang sama: menyimpulkan tepian dari pola piksel lokal, sehingga paling cocok untuk gambar dengan garis tepi bersih dan disengaja, serta kesulitan pada dithering bergaya, noise, atau gradasi dari piksel berselang-seling — teknik umum pada seni piksel lama yang dapat disalahartikan sebagai tepian untuk dihaluskan. Untuk sebagian besar sprite, penskalaan nearest-neighbor dengan faktor bilangan bulat biasa lebih aman dan dapat diprediksi; gunakan hqx atau xBRZ hanya ketika bentuk tangga pada kurva benar-benar mengganggu dan Anda sudah memeriksa hasilnya pada area dithering.

Mengapa pembesar berbasis AI biasanya bukan alat yang tepat

Pembesar AI serbaguna (yang dilatih menambahkan detail foto pada foto kabur) dibuat untuk memecahkan masalah berlawanan dengan kebutuhan seni piksel. Alat ini dilatih untuk menciptakan detail halus yang masuk akal — tekstur kulit, anyaman kain, dedaunan — dari masukan resolusi rendah, dengan asumsi masukan kehilangan detail saat pengecilan atau kompresi dan tugas model menebaknya kembali.

Seni piksel tidak kehilangan detail apa pun. Setiap piksel sudah tepat sesuai maksud seniman, pada resolusi yang dimaksud. Menjalankannya melalui model yang disetel untuk menciptakan tekstur hilang menghasilkan hal yang dapat diperkirakan: tepian halus, gradasi ciptaan, dan detail gaya kecil (satu piksel sorotan, batas warna tegas yang disengaja) dihapus atau diganti sesuatu yang agak tampak seperti lukisan dan tidak menyerupai asli. Beberapa pembesar kini memiliki mode "seni piksel" atau "anime" khusus yang lebih mendekati nearest-neighbor terbatas ditambah pembersihan, dan dapat diuji per kasus, tetapi mode umum bawaan untuk foto hampir pasti mengaburkan seni piksel, bukan mempertahankannya.

Jika sprite awalnya berasal dari generator gambar AI — bukan digambar sebagai seni piksel sejati — kemungkinan tidak berada pada kisi piksel bersih sama sekali, dan tidak ada metode penskalaan yang memperbaikinya; lihat panduan prompt sprite AI untuk mendapatkan sumber lebih bersih sejak awal.

Daftar periksa praktis

Pastikan sumber memang seni piksel pada kisi konsisten, bukan ekspor raster bertepi lembut.
Pilih faktor skala bilangan bulat (2x, 3x, 4x) berdasarkan ukuran target, bukan sebaliknya.
Skalakan dengan sampel nearest-neighbor / point, bukan mode bilinear atau bicubic bawaan alat.
Terapkan image-rendering: pixelated ke elemen web mana pun yang mungkin mengubah ukuran gambar lagi.
Atur filter tekstur Point/Nearest dalam engine game secara terpisah dari skala ekspor.
Gunakan hqx/xBRZ hanya jika tangga nearest-neighbor biasa jelas mengganggu, dan periksa dahulu hasil pada area dithering.

Jika Anda tidak ingin mengatur semuanya secara manual, alat kami Pembesar Seni Piksel melakukan tiga langkah pertama untuk Anda: pilih faktor bilangan bulat antara 2x dan 32x, lalu alat mereplikasi setiap piksel sumber dengan sampling nearest-neighbor, sehingga tidak ada yang tercampur, kemudian mengekspor PNG.

Pertanyaan yang sering diajukan

Bisakah saya memperbaiki sprite kabur setelah diskalakan dengan bilinear?

Tidak secara bersih. Setelah warna tetangga dicampur menjadi piksel perantara, tepian tegas asli hilang dan penajaman sebanyak apa pun tidak memulihkannya sepenuhnya — filter penajaman meningkatkan kontras tepian tetapi tidak memulihkan kisi warna diskret. Skalakan ulang dari sumber asli yang tidak kabur pada faktor bilangan bulat dengan nearest-neighbor.

Apakah ada bedanya memperbesar atau memangkas terlebih dahulu?

Pangkas terlebih dahulu pada resolusi asli, lalu skalakan. Memangkas setelah pembesaran bilangan bulat masih dapat dilakukan selama batas pangkasan berada pada kelipatan faktor skala; memangkas pada batas piksel sembarang dalam gambar yang diperbesar dapat membelah blok yang sebelumnya merupakan satu piksel sumber.

Mengapa pixel art saya terlihat baik dalam editor tetapi kabur setelah diekspor ke PNG dan dilihat di browser?

Editor kemungkinan menampilkan sprite pada ukuran piksel asli dengan zoom pratinjau nearest-neighbor sendiri. Peramban, tanpa image-rendering: pixelated ditetapkan, secara default menghaluskan ketika ukuran render elemen gambar berbeda dari dimensi piksel asli file — hampir selalu terjadi ketika CSS atau tata letak responsif terlibat.

Apakah ada perbedaan kualitas antara nearest-neighbor dan tidak menskalakan sama sekali?

Tidak menskalakan sama sekali adalah opsi valid ketika tata letak dapat menampilkan sprite pada ukuran asli. Nearest-neighbor hanya penting ketika sprite perlu lebih besar atau kecil daripada dimensi piksel sumber, dan bahkan saat itu tidak mengubah data warna sebenarnya — hanya mengubah jumlah piksel layar yang mewakili setiap piksel sumber.

Skalakan sprite tanpa mengaburkannya

Pembesar Seni Piksel memperbesar seni piksel dengan mereplikasi setiap piksel sumber menggunakan nearest-neighbor pada faktor bilangan bulat dari 2x hingga 32x, sehingga tepian tetap tegas, bukan bercampur. Menandai gambar yang tampaknya sudah diperbesar, mengekspor PNG, dan menangani hingga 20 berkas sekaligus dengan unduhan ZIP — semua di peramban, tanpa unggahan. Jika seni piksel berupa lembar beberapa bingkai, bukan satu gambar, potong menjadi PNG individual dengan Pemotong Lembar Sprite terlebih dahulu, lalu skalakan bingkai.

Buka Pembesar Seni Piksel