Ilustrasi Flat Jadi Becek: Saya Matikan Optimasi Gambar Next.js

Sekitar jam 01:07 sampai 01:14 pagi, saya push empat commit beruntun di sebuah website korporat: ganti maskot hero ke artwork baru, putuskan file original disalin apa adanya tanpa diedit, lalu satu commit terakhir menambahkan satu properti kecil: unoptimized. Semua karena satu masalah: ilustrasi flat-color jadi becek setelah lewat pipeline optimasi gambar.

Gejalanya khas. Di file asli, outline maskot tegas dan bidang warnanya rata. Setelah di-serve dari komponen gambar Next.js, tepi jadi gemuk dan sedikit bergerigi, area yang seharusnya satu warna muncul gradasi halus. Kesan pertama saya salah: pasti file dari desainer yang keliru ekspor. Saya buka file originalnya, bersih-bersih saja. Yang kotor justru hasil setelah dioptimasi.

Apa yang Sebenarnya Terjadi

Komponen <Image> Next.js memang dirancang untuk optimasi otomatis, dan format default pipeline-nya adalah WebP dengan kualitas 75 [6]. Konversi itu lossy. WebP sendiri punya dua mode: lossless yang menyimpan piksel persis, dan lossy yang memakai encoding intra-frame VP8 [9]. Kualitas 75 untuk foto hampir nggak terlihat. Untuk artwork flat, beda cerita.

Artwork flat hidup dari transisi warna yang tegas antara bidang solid, dan presisi reproduksi memang alasan utama PNG dipilih untuk kasus seperti ini [10]. Ketika encoder lossy membuang data demi ukuran file, yang paling terasa hilang justru ketajaman transisi itu. Hasilnya: outline gemuk, tepi bergerigi, gradasi halus di area yang seharusnya datar. Foto punya noise dan gradasi alami buat menyembunyikan artefak; artwork flat nggak punya tempat buat sembunyi.

Detail kecil di commit tengah juga nyimpan pelajaran. Sebelum sampai di keputusan unoptimized, ada dua commit yang justru membuang editing: versi pertama artwork di-crop manual dan latarnya di-flood-fill, beberapa menit kemudian diputuskan dibalikin, file original disalin mentah apa adanya dari sumber. Pesannya sederhana: penanganan paling aman untuk aset yang sudah bagus adalah tidak menyentuhnya sama sekali, baik oleh editor gambar maupun pipeline build. Dimensi di konten ikut disesuaikan ke ukuran file asli supaya rasio yang dirender sama dengan file yang dikirim.

Kenapa nggak sekalian pindah format? Karena target masalahnya bukan format, tapi kompresi yang salah karakter. WebP lossless tetap bisa mengecilkan artwork flat tanpa merusak satu piksel pun, dan WebP memang mendukung dua mode itu sejak spec-nya. Tapi jalur lossless bukan yang dipakai pipeline default Next.js, dan mengubah config global buat satu slot gambar justru menukar masalah kecil jadi risiko besar. Satu properti di satu slot adalah patch sekecil mungkin yang tepat sasaran.

Keputusan: unoptimized, Sadar Konsekuensi

Solusinya satu properti: unoptimized pada <Image> hero, dan Next.js menyajikan file asli tanpa disentuh [6]. File maskotnya cuma sekitar 170 KB, jauh dari kategori foto hero berukuran megabyte, jadi trade-off performanya kecil dan sadar. Slot lain, foto dan thumbnail, tetap saya serahkan ke pipeline default, karena di sana optimasi memang ngasih nilai.

Cara ngecek kasus serupa di project kamu: bandingkan file yang disajikan dengan aslinya di network tab, perbesar area warna rata sampai dua sampai tiga ratus persen. Kalau muncul bintik halus atau tepi yang nggak lagi tajam, algoritma kompresi sedang melawan karakter gambar kamu. Naikkan kualitas ke 90 atau 100 bisa mengurangi gejala, tapi sering tetap meninggalkan jejak dan ukuran akhirnya mendekati atau melebihi PNG asli yang sudah dikompres rapi.

Pelajaran yang saya bawa: optimizer itu alat, bukan doktrin. Kenali jenis aset di setiap slot. Foto = serahkan ke pipeline. Artwork flat, line-art, dan aset brand = pertimbangkan menyajikan apa adanya, atau format lossless. Kadang langkah optimasi terbaik justru tahu kapan mundur dan membiarkan file yang udah bagus tetap apa adanya.

Satu catatan biar nggak jangan-jangan: kalau artwork kamu berbentuk vektor, SVG hampir selalu lebih tepat daripada debat PNG versus WebP. Vektor tajam di resolusi berapa pun dan ukurannya kecil untuk grafis berbasis bentuk. Pertarungan di artikel ini cuma relevan kalau asetnya memang raster, misal hasil ekspor ilustrator yang cuma dikirim sebagai PNG.

Sources

[6] Next.js: Image Component

[9] RFC 9649: WebP Image Format

[10] MDN: Image file type and format guide