Cara Mengadaptasi Seni Piksel Beresolusi Tinggi untuk Layar Kecil Tanpa Buram

Sumber beresolusi tinggi memuat lebih banyak piksel daripada yang dapat ditampilkan oleh tujuan. Proses pengubahan ukuran harus menggabungkan atau membuang informasi sumber. Filter halus seperti interpolasi bilinear menghitung warna keluaran dari piksel-piksel di sekitarnya; hal ini dapat memperlembut batas warna yang tegas. Pengambilan sampel nearest-neighbor memilih satu piksel sumber dan mengabaikan yang lain, sehingga menghindari warna yang tercampur tetapi dapat menghilangkan fitur halus atau membuat garis menjadi tidak rata. Referensi gambar Godot mendeskripsikan kedua efek tersebut, dan MDN mencatat bahwa perilaku penskalaan browser bergantung pada mode rendering yang dipilih. Godot: Image MDN: image-rendering

Oleh karena itu, hasil yang tajam bukan sekadar masalah memilih opsi "tanpa buram". Hal ini bergantung pada dimensi tujuan, bentuk dan jarak piksel dalam karya seni, serta bagaimana gambar akhir ditampilkan. Perlakukan versi kecil sebagai adaptasi desain, bukan sekadar pengecilan mekanis dari gambar master.

Ukur area tampilan tempat karya seni akan muncul, dalam piksel, dan pertahankan rasio aspek sumber. Jika gambar asli berukuran 1200 × 800 piksel dan targetnya 300 × 200, skalanya adalah 1:4 di setiap arah. Setiap area sumber selebar empat piksel dipetakan secara pas ke satu piksel tujuan; rasionya mudah disesuaikan, meskipun fitur-fitur halus tetap akan hilang pada ukuran ini.

Untuk target seperti 320 × 180, paskan gambar terlebih dahulu ke dalam batas-batas tersebut tanpa meregangkannya. Jika rasio aspeknya berbeda, pilih apakah akan memotong (crop), menambahkan bilah hitam (letterbox), atau menyusun ulang tata letaknya. Jangan memampatkan gambar agar pas dengan kotak: hal tersebut mengubah bentuk piksel dan dapat mendistorsi wajah, siluet, serta pola. Rasio aspek yang berbeda memerlukan pilihan pembingkaian yang jelas; Godot dan Unity sama-sama mendokumentasikan pemotongan atau penggunaan bilah sebagai cara untuk menangani ketidakcocokan tampilan. Godot: Multiple resolutions Unity: Pixel Perfect Camera reference

Buat salinan dari sumber dan kurangi detailnya sebelum mengubah ukuran. Hapus sorotan satu piksel yang terisolasi, garis luar yang tipis, teks yang sangat kecil, dan gugusan tekstur yang akan menyatu menjadi derau (noise) pada ukuran target. Pertegas siluet dan pertahankan perbedaan area warna yang penting. Jika suatu fitur memiliki makna penting—seperti mata, simbol, atau batas objek—gambar ulang fitur tersebut pada ukuran target alih-alih mengandalkan proses pengecilan untuk mempertahankan bentuknya.

Langkah pemeriksaan yang berguna adalah melihat pratinjau ukuran target pada skala 100% dan menilai apakah setiap fitur penting masih terlihat jelas. Memperbesar tampilan (zoom in) membantu memeriksa tepi piksel, tetapi tidak dapat memberi tahu apakah karya seni tersebut dapat terbaca dengan baik pada ukuran fisik yang diinginkan. Simpan master resolusi penuh agar penyederhanaan untuk satu layar kecil tidak menimpa kebutuhan penggunaan lainnya.

Gunakan nearest-neighbor jika karya seni harus mempertahankan palet yang ketat dan blok piksel dengan tepi tegas, lalu periksa dengan cermat apakah ada fitur yang hilang dan ketebalan garis yang tidak rata. Karena metode ini memilih piksel sumber terdekat alih-alih memadukan warna-warna di sekitarnya, ia terhindar dari transisi lembut yang biasa terjadi pada pemfilteran bilinear. Konsekuensinya, metode ini dapat membuang banyak detail dari sumber. Pillow: Filters

Untuk gambar berukuran lebih kecil yang bertujuan merepresentasikan keseluruhan sumber secara lebih halus, bandingkan filter downsampling berkualitas tinggi seperti Lanczos dengan pengurangan gaya area atau box yang lebih sederhana. Metode-metode ini menggabungkan informasi dari beberapa piksel sumber, yang dapat mempertahankan bentuk umum tetapi memunculkan warna-warna perantara di sekitar tepi yang tajam. Godot mendeskripsikan Lanczos sebagai opsi berkualitas tinggi terutama untuk pengecilan skala; Pillow mendokumentasikan pendekatan pengambilan sampel dari berbagai filter tersebut. Uji kandidat metode pada potongan gambar yang memuat garis diagonal, garis tipis, dan tepi berkontras tinggi, lalu tentukan pilihan dengan melihat hasil pada ukuran sebenarnya. Godot: Image Pillow: Filters

Rasio bilangan bulat paling berguna saat menskalakan gambar kecil yang sudah jadi untuk ditampilkan, atau saat dimensi sumber habis dibagi ke ukuran target. Dengan demikian, setiap piksel sumber menempati jumlah bilangan bulat piksel output yang sama. Penskalaan pecahan dapat mendistribusikan piksel secara tidak merata; contoh dari Godot membandingkan gambar dasar 640 × 360 yang diskalakan 2× menjadi 1280 × 720 dengan skala pecahan yang menghasilkan ukuran piksel tidak rata. Godot: Multiple resolutions

Untuk layar kecil yang tidak cocok dengan rasio bilangan bulat yang pas, pertahankan rasio aspek dan tentukan komprominya secara sadar: sisakan margin yang tidak terpakai, potong sedikit, atau buat versi khusus untuk tata letak tersebut. Penskalaan bilangan bulat mungkin meninggalkan bilah tepi atau menggunakan area tampilan yang lebih sedikit. Ini bukanlah solusi universal untuk memperkecil master berukuran besar, terutama jika dimensi sumber dan tujuan tidak habis dibagi secara merata.

Ekspor ke dimensi piksel target, lalu lihat file yang diekspor pada ukuran yang dimaksud di aplikasi, browser, atau perangkat yang sebenarnya. Gambar hasil ekspor yang tajam bisa menjadi lembut jika tahap kedua menskalakannya secara halus. Untuk gambar canvas browser, penghalusan diaktifkan secara default; MDN mendokumentasikan penonaktifan imageSmoothingEnabled saat gambar yang diskalakan harus mempertahankan tepi yang tegas. Properti CSS image-rendering: pixelated juga dapat memengaruhi gambar yang ditampilkan, tetapi MDN mengingatkan bahwa rasio piksel perangkat yang bernilai pecahan tetap dapat membuat piksel tampak tidak rata. MDN: imageSmoothingEnabled MDN: Crisp pixel art look

Periksa tiga hal pada ukuran sebenarnya: apakah detail-detail utama tetap dapat dikenali, apakah garis diagonal dan garis luar terlihat konsisten, dan apakah gambar diregangkan atau disampel ulang kembali setelah diekspor. Periksa juga pengaturan zoom atau penskalaan pada layar target; zoom browser dan penskalaan perangkat non-bilangan bulat dapat memengaruhi keseragaman piksel. Jika tepian terlihat lembut, telusuri seluruh jalur dari sumber hingga ke layar tampilan dan identifikasi di mana proses penghalusan terjadi sebelum mengubah karya seni itu lagi.

1. Tentukan lebar dan tinggi target, serta putuskan cara menangani perbedaan rasio aspek.
2. Buat salinan kerja dan sederhanakan detail yang tidak muat pada ukuran tersebut.
3. Ekspor versi nearest-neighbor dan versi filter halus untuk dibandingkan; sertakan potongan gambar dengan detail halus dan garis diagonal.
4. Tinjau keduanya pada ukuran tampilan sebenarnya, lalu gambar ulang fitur penting yang hilang atau menjadi buram/kotor.
5. Pastikan aplikasi atau browser tidak menerapkan pengubahan ukuran tahap kedua yang tidak diinginkan, lalu simpan versi akhir pada dimensi yang dituju.

Pilih nearest-neighbor untuk tepi tegas yang konsisten dan rasio yang sejajar dengan tepat; pilih filter downsampling halus jika mempertahankan bentuk umum lebih penting daripada hanya mempertahankan warna palet asli. Jika kedua versi tidak terbaca dengan jelas, ubah karya seni atau pembingkaiannya pada ukuran target. Pengambilan sampel ulang (resampling) dapat mendistribusikan ulang detail, tetapi tidak dapat mempertahankan setiap fitur dari gambar yang lebih besar ke dalam jumlah piksel yang lebih sedikit.

• Godot Engine: Multiple resolutions
• Godot Engine: Image
• MDN: image-rendering
• Pillow: Concepts — Filters
• Unity: Pixel Perfect Camera reference
• MDN: CanvasRenderingContext2D.imageSmoothingEnabled
• MDN: Crisp pixel art look with image-rendering