Next.js Image Art Direction Budget

TL;DR: Next.js Image Art Direction Budget adalah batas variasi rasio aspek gambar yang berbeda per breakpoint, ditetapkan supaya LCP tetap rendah dan CLS tidak bergeser. Tanpa budget ini, pemakaian sumber gambar berbeda untuk mobile, tablet, dan desktop justru membuat Largest Contentful Paint membengkak dan tata letak goyang.

Apa itu Next.js Image Art Direction Budget?

Next.js Image Art Direction Budget adalah aturan internal tim soal seberapa banyak variasi rasio aspek gambar boleh dipakai dalam satu komponen next/image. Praktik art direction memungkinkan satu blok hero menampilkan gambar berbeda di mobile (potret) dan desktop (lanskap), tapi tanpa budget yang jelas, LCP Budget dan CLS Budget sering melonjak.

Analoginya seperti budget kostum pertunjukan. Variasi banyak membuat tampilan kaya, tapi tanpa batas, biaya gudang dan logistik membengkak. Pada gambar web, "biaya"-nya adalah skor Core Web Vitals.

Komponen Utama

Implementasi praktis: pakai komponen next/image dengan sizes yang jelas, kunci tinggi container per breakpoint, dan batasi maksimal dua varian rasio (misal 4:5 untuk mobile, 16:9 untuk desktop).

Kenapa Penting?

Untuk website bisnis Indonesia yang banyak mengakses dari mobile, art direction berlebihan sering memperburuk LCP karena browser harus memuat aset berbeda saat resize. Pada salah satu landing proyek Vito, pemangkasan dari empat varian rasio ke dua varian menurunkan LCP dari 3,6 detik ke 1,9 detik tanpa mengurangi kualitas visual. Acuan teknis ada di Next.js Image documentation.

Pertanyaan Umum

Apakah art direction merugikan SEO?

Tidak, jika dibatasi dan tinggi container dikunci. Yang merugikan adalah variasi rasio berlebihan tanpa budget.

Berapa varian aman?

Umumnya dua varian rasio: mobile dan desktop.