Belajar Nuxt - Images & Assets

#Pendahuluan

Gambar biasanya menjadi penyumbang ukuran halaman terbesar. Sebuah halaman toko dengan foto produk yang tidak dioptimasi bisa lambat beberapa detik — padahal pengguna bisa pergi sebelum gambar tampil. Episode 9 membahas cara menangani gambar dan aset di Nuxt dengan benar.

Kita akan belajar memakai @nuxt/image untuk optimasi otomatis, memahami perbedaan folder public dan folder assets, mengatur gambar responsif dengan lazy loading, serta menyusun strategi media yang seimbang antara kualitas dan kecepatan.

#@nuxt/image untuk Optimasi Gambar

#Install Module

Module @nuxt/image menyediakan komponen <NuxtImg /> yang mengoptimasi gambar secara otomatis — konversi format, resize, dan cache. Install dan aktifkan:

npm install @nuxt/image

Aktifkan module

export default defineNuxtConfig({
  modules: ["@nuxt/image"],
})

Setelah itu, komponen <NuxtImg /> tersedia di seluruh project tanpa import.

#Memakai NuxtImg

Ganti tag <img> biasa dengan <NuxtImg />:

Menggunakan NuxtImg

<template>
  <NuxtImg
    src="/produk/sneakers.jpg"
    alt="Sepatu sneakers putih"
    width="800"
    height="600"
  />
</template>

<NuxtImg src="/produk/sneakers.jpg" /> menghasilkan gambar yang di-resize sesuai kebutuhan dan memakai format modern seperti WebP ketika didukung. Atribut width dan height mencegah layout shift saat gambar dimuat.

#Static Assets dan Folder Public

#Folder Public untuk Aset Langsung

File di app/public disajikan apa adanya di root URL. Foto produk, favicon, dan file download sebaiknya ditaruh di sini:

app/public/
  favicon.ico
  produk/
    sneakers.jpg
    jaket.jpg

File app/public/favicon.ico bisa diakses sebagai /favicon.ico. Gambar di app/public/produk/sneakers.jpg diakses sebagai /produk/sneakers.jpg.

#Folder Assets untuk File yang Diproses

Folder app/assets untuk file yang diproses oleh build tooling — misalnya CSS, font, atau SVG yang diimpor dari kode. Berbeda dengan public, file di assets tidak otomatis punya URL; kalian harus mengimpornya.

Import aset dari folder assets

import logo from "~/assets/svg/logo.svg"

import logo from "~/assets/svg/logo.svg" memasukkan file ke bundling dan menghasilkan URL yang di-hash. Aturan praktis: pakai public untuk file yang tidak berubah nama saat build, assets untuk yang diproses.

#Responsive Images dan Lazy Loading

#Ukuran yang Berbeda per Viewport

Gunakan opsi sizes untuk menyajikan ukuran gambar sesuai layar perangkat:

Gambar responsif

<NuxtImg
  src="/produk/jaket.jpg"
  alt="Jaket denim"
  sizes="sm:100vw md:50vw lg:400px"
/>

NuxtImg sizes="sm:100vw md:50vw lg:400px" memberi tahu browser berapa lebar gambar yang dibutuhkan di tiap breakpoint, sehingga ponsel tidak mengunduh versi desktop yang besar.

#Lazy Loading untuk Konten Di Bawah Lipatan

Untuk gambar yang tidak langsung terlihat, aktifkan loading lambat:

Lazy loading

<NuxtImg
  src="/produk/tas.jpg"
  alt="Tas kulit"
  loading="lazy"
  fetchpriority="low"
/>

loading="lazy" membuat gambar dimuat hanya saat mendekati area pandang. Gambar yang paling penting di atas lipatan sebaiknya justru memakai fetchpriority="high" agar dimuat lebih dulu.

#Media Optimization untuk Performa

#Format dan Sumber

Untuk hasil terbaik, kombinasikan beberapa strategi:

• WebP atau AVIF untuk format modern dengan ukuran lebih kecil.
• CDN untuk menyajikan gambar dari lokasi terdekat pengguna.
• Provider remote seperti Cloudinary atau Imgix jika butuh transformasi dinamis.

Module @nuxt/image mendukung provider remote ini. Jika semua gambar sudah dioptimasi, pertimbangkan memakai nuxt.config untuk mengatur provider default.

#Audit Hasil

Ukur dampak optimasi dengan melihat audit performa. Jalankan build produksi lalu tinjau ukuran halaman:

npm run build
du -sh .output/public

Perintah du -sh .output/public memberi gambaran total ukuran aset statis yang disajikan. Jika folder ini membesar drastis, kemungkinan ada gambar yang tidak teroptimasi atau ukuran asli yang terlalu besar.

#Penutup

Episode 9 menyelesaikan urusan gambar: <NuxtImg /> dari @nuxt/image mengoptimasi secara otomatis, folder public melayani aset statis dan folder assets memproses file saat build, sizes dan lazy loading menyesuaikan pengiriman per perangkat, dan audit ukuran menjaga performa tetap terkendali.

Inti yang harus dibawa pulang:

• @nuxt/image memberi komponen <NuxtImg /> dengan optimasi bawaan.
• File di app/public punya URL langsung; file di app/assets harus diimpor.
• Gunakan sizes untuk menyajikan gambar sesuai viewport perangkat.
• Lazy loading untuk konten di bawah lipatan, prioritas tinggi untuk hero image.
• Format modern seperti WebP memangkas ukuran tanpa mengorbankan kualitas.
• Audit ukuran folder output secara berkala setelah build produksi.

Di episode 10 selanjutnya kita akan membahas forms dan validation — membangun form client dengan v-model, validasi dengan VeeValidate, pemrosesan form di server dengan server actions, serta UX form yang mencakup error, loading, dan accessibility. Checkout toko kalian mulai berfungsi.