Belajar Next.js - Images & Media Optimization

#Pendahuluan

Gambar dan media adalah penyumbang terbesar ukuran halaman web. Foto yang tidak dioptimasi bisa menambah ratusan kilobyte dan memperlambat waktu muat — berdampak langsung pada user experience dan ranking SEO.

Episode 9 membahas komponen next/image dan sistem optimasi bawaan Next.js, aset statis di folder public, penanganan video dan audio dengan lazy loading, serta best practices gambar responsif dan performa web.

#next/image dan Image Optimization

#Komponen Image

Komponen Image dari next/image mengoptimasi gambar secara otomatis: konversi ke format modern seperti WebP dan AVIF, resizing sesuai ukuran layar, dan lazy loading bawaan:

import Image from "next/image"
 
export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Ilustrasi produk"
      width={1200}
      height={630}
      priority
    />
  )
}

Prop priority pada gambar di atas memberi tahu Next.js bahwa gambar ini penting dan harus dimuat lebih awal — cocok untuk gambar terbesar yang terlihat pertama kali (LCP). Selalu sediakan alt yang deskriptif untuk aksesibilitas.

#Fill dan Sizes

Untuk gambar yang menyesuaikan kontainer, gunakan fill bersama sizes agar browser memilih ukuran yang tepat per viewport:

<Image
  src="/banner.png"
  alt="Banner promosi"
  fill
  sizes="(max-width: 768px) 100vw, 50vw"
  className="object-cover"
/>

Prop sizes="(max-width: 768px) 100vw, 50vw" memberitahu Next.js ukuran yang dibutuhkan gambar pada layar kecil dan besar, sehingga menghasilkan respons yang lebih ringan.

#Static Assets dan Public Folder

#Aset di folder public

Semua file di folder public disajikan langsung dari root URL. Struktur umum:

public/
  favicon.ico
  logo.png
  images/
    hero.jpg

File public/images/hero.jpg tersedia di /images/hero.jpg. Aset di sini tidak melewati optimasi Next.js — untuk gambar yang butuh optimasi, letakkan di dalam project dan import langsung, atau gunakan komponen Image.

#Asset Prefix dan CDN

Jika aset disajikan dari CDN terpisah, gunakan opsi konfigurasi assetPrefix di next.config.mjs. Fitur ini menambahkan awalan URL pada semua aset yang direferensikan, berguna saat kalian menyajikan JavaScript dan CSS dari domain CDN sendiri.

#Video dan Audio dengan Lazy Loading

#Elemen Media yang Hemat Bandwidth

Video dan audio memakai elemen HTML standar. Kunci utama adalah lazy loading: jangan unduh media sampai diperlukan. Berikan preload="metadata" pada video agar hanya metadata yang dimuat saat halaman pertama dibuka, dan kontrol dengan atribut loading:

<video
  controls
  preload="metadata"
  src="/demo.mp4"
  poster="/demo-poster.jpg"
>
  Browser kalian tidak mendukung video.
</video>

preload="metadata" pada video di atas menunda unduhan konten penuh. Aturan umum media: pertimbangkan penyedia streaming untuk file besar, kompresi audio ke format ringan seperti MP3 atau AAC, dan selalu sediakan poster untuk video.

#Best Practices Responsive Images dan Web Performance

#Ukuran yang Tepat untuk Setiap Perangkat

Gambar responsif berarti menyajikan gambar dengan ukuran sesuai layar — jangan mengirim gambar desktop 2000 piksel ke pengguna mobile. Komponen Image menangani ini lewat atribut sizes, sementara srcSet yang dihasilkan otomatis memberikan beberapa varian. Ini mengurangi data yang dikirim dan mempercepat waktu muat.

#Prioritaskan yang Terlihat Dulu

Terapkan strategi: gambar yang terlihat pertama kali diberi priority, gambar di bawah diberi lazy loading bawaan, dan setiap gambar punya alt dan dimensi eksplisit untuk menghindari pergeseran layout (CLS). Kombinasi langkah ini secara langsung memperbaiki Core Web Vitals — metrik yang akan kita ukur di episode 15 dan 22.

#Penutup

Inti yang harus dibawa pulang:

• Komponen Image mengoptimasi format, ukuran, dan lazy loading otomatis.
• Prop priority menandai gambar LCP yang harus dimuat cepat.
• Prop fill dan sizes menghasilkan gambar responsif yang efisien.
• Folder public menyajikan aset statis dari root URL.
• Video dan audio memakai preload dan lazy loading untuk hemat bandwidth.
• Dimensi eksplisit mencegah pergeseran layout saat gambar dimuat.

Di episode 10 selanjutnya kita akan membahas forms dan validation — penanganan form di komponen React, validasi client-side dengan React Hook Form, validasi server-side dan pengiriman ke API, serta aksesibilitas form dan feedback UX. Interaksi pengguna kalian akan dipoles hingga matang.