Mengapa ICO Anda Terlihat Buram (Dan Cara Memperbaikinya dengan Ukuran dan Scaling)

Anda membuat file ICO, mengaturnya sebagai favicon atau ikon aplikasi Windows Anda, dan hasilnya terlihat buram, lembut, atau berpiksel. Ini adalah salah satu masalah paling membuat frustrasi dalam pembuatan ikon karena gambar sumber terlihat sangat tajam, jadi mengapa ICO terlihat salah?

Jawabannya hampir selalu salah satu dari tiga hal: file ICO tidak memiliki ukuran yang dibutuhkan konteks tampilan, gambar sumber terlalu kecil untuk menghasilkan hasil yang bersih pada ukuran yang diminta, atau mode scaling menyebabkan gambar dipotong atau diregangkan dengan cara yang kehilangan detail. Masing-masing memiliki perbaikan yang sederhana dan spesifik.

Panduan ini memandu Anda melalui penyebab paling umum file ICO yang buram, menjelaskan mengapa masing-masing terjadi, dan memberi Anda tindakan yang jelas untuk menyelesaikannya. Jika Anda ingin langsung ke solusi, buat ICO baru dengan Any2ICO menggunakan semua enam ukuran standar (16 hingga 256) dari gambar sumber beresolusi tinggi. Langkah tunggal itu memperbaiki sebagian besar masalah blur.

Penyebab #1: Ukuran yang Hilang

Alasan paling umum untuk file ICO yang buram adalah file hanya berisi satu atau dua ukuran, dan sistem operasi atau browser harus menskalakan gambar tersebut agar sesuai dengan konteks tampilan yang berbeda. Scaling, terutama upscaling, memperkenalkan blur karena renderer harus menciptakan piksel yang tidak ada dalam gambar asli.

Sebagai contoh, jika ICO Anda hanya berisi gambar 32x32 dan Windows perlu menampilkan ikon 256x256 di tampilan ekstra besar Explorer, itu meregangkan gambar 32x32 sebanyak 8x. Hasilnya adalah kekacauan yang buram dan berpiksel. Sebaliknya, jika ICO Anda hanya berisi gambar 256x256 dan browser memerlukan favicon 16x16, itu memampatkan 256 piksel detail menjadi 16. Detail halus, garis tipis, dan teks kecil menjadi noda yang tidak dapat dibedakan.

Perbaikannya sederhana: sertakan beberapa ukuran dalam file ICO Anda. Ketika ukuran yang benar sudah ada dalam file, sistem menggunakannya langsung tanpa scaling sama sekali. Hasilnya adalah pixel-perfect pada setiap ukuran tampilan. Set standar yang harus disertakan adalah 16, 32, 48, 64, 128, dan 256 piksel. Ini mencakup tab browser, ikon taskbar, shortcut desktop, tampilan Explorer, dan faktor scaling DPI tinggi. Untuk rincian lengkap ukuran mana yang dipetakan ke konteks Windows mana, lihat panduan ukuran favicon kami.

Kualitas Gambar Sumber dan Kompleksitas Desain

Bahkan dengan semua ukuran yang tepat disertakan, ICO Anda masih bisa terlihat buram jika gambar sumber terlalu kecil atau terlalu detail untuk dimensi output. Konverter tidak dapat menambahkan detail yang tidak ada dalam sumber. Jika Anda mulai dengan sumber 64x64 dan menghasilkan layer 256x256, layer tersebut hanyalah versi upscale dari asli 64x64, dan akan terlihat lembut.

Selalu mulai dengan resolusi tertinggi yang tersedia. Gambar sumber ideal adalah setidaknya 512x512 piksel, tetapi 1024x1024 atau lebih besar bahkan lebih baik. Ketika konverter menghasilkan setiap layer ICO, itu melakukan downscale dari sumber besar ini. Downscaling mempertahankan ketajaman karena membuang detail berlebih dengan bersih. Upscaling menciptakan blur karena harus menginterpolasi piksel yang hilang.

Kompleksitas desain juga penting, terutama pada ukuran kecil. Ilustrasi detail dengan garis tipis, gradien, dan teks kecil mungkin terlihat indah pada 256x256 tetapi menjadi noda yang tidak dapat dibaca pada 16x16. Ini bukan masalah konversi; ini adalah batasan fundamental dari grid piksel. Pada 16x16, Anda hanya memiliki 256 total piksel untuk mewakili seluruh ikon Anda. Desain kompleks tidak dapat bertahan pada tingkat reduksi tersebut. Banyak desainer ikon profesional membuat versi sederhana dari logo mereka khusus untuk ukuran kecil: bentuk tebal, lebih sedikit warna, tanpa teks, dan garis tebal yang tetap terbaca pada dimensi minimal.

Contain vs Cover: Memilih Mode Scaling yang Tepat

Ketika gambar sumber Anda tidak persegi sempurna, konverter perlu memutuskan bagaimana menyesuaikannya ke dalam dimensi ICO persegi. Ada dua pendekatan standar, dan memilih yang salah dapat membuat ikon Anda terlihat terpotong atau diregangkan dengan aneh.

Mode Contain menyesuaikan seluruh gambar sumber di dalam persegi tanpa pemotongan. Jika sumber lebih lebar dari tingginya, gambar diskalakan agar sesuai dengan lebar, dan ruang vertikal yang tersisa diisi dengan warna latar belakang (transparan atau putih). Seluruh gambar terlihat, tetapi mungkin ada ruang kosong di atas dan bawah (atau di sisi untuk gambar tinggi). Ini adalah pilihan terbaik ketika Anda perlu seluruh gambar terlihat dalam ikon.

Mode Cover menskalakan gambar sumber untuk sepenuhnya mengisi persegi, memotong overflow apa pun. Jika sumber lebih lebar dari tingginya, gambar diskalakan untuk mengisi tinggi, dan kelebihan lebar dipotong dari sisi. Persegi sepenuhnya diisi dengan konten gambar, tetapi beberapa tepi sumber mungkin terpotong. Ini adalah pilihan terbaik ketika mengisi seluruh area ikon lebih penting daripada menampilkan setiap piksel sumber.

Jika ikon Anda terlihat seperti kehilangan konten atau memiliki border kosong yang tidak diharapkan, Anda mungkin menggunakan mode scaling yang salah. Bereksperimenlah dengan kedua opsi di Any2ICO dan pratinjau hasilnya sebelum mengunduh.