Advanced · Level 14: PerformanceAdvanced60 menitBahasa Indonesia

Image Optimization

Memilih ukuran, dimensi, responsive loading, dan preload image berdasarkan perannya pada halaman.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan biaya image bagi loading dan layout stability
Membedakan image utama dari image yang tidak kritis
Menggunakan next/image dengan dimensi dan sizes yang sesuai
Memilih preload hanya ketika image benar-benar perlu diprioritaskan

Next.jsImage OptimizationLCPResponsive Images

Isi lesson

6 blok

1.
Image yang tepat perlu cepat, stabil, dan sesuai area tampilBelum selesaiWajib
2.
Hero course yang diprioritaskan dengan alasan jelasBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan optimalkan image hanya dengan mengganti componentBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Image yang tepat perlu cepat, stabil, dan sesuai area tampil

Wajib

Image sering menjadi resource terbesar pada halaman. Biayanya bukan hanya ukuran file: browser juga perlu mengetahui ruangnya agar layout tidak meloncat, memilih source yang cocok untuk viewport, dan menentukan apakah image tersebut benar-benar harus dimuat lebih awal. next/image memberi pattern yang lebih aman untuk image aplikasi Next.js, tetapi bukan alasan untuk menandai semua image sebagai penting. Mulai dari peran visualnya. Hero yang menjadi kandidat LCP dapat membutuhkan preload; thumbnail di bawah fold biasanya tidak. Sertakan alt yang bermakna, dimensi yang merepresentasikan rasio asset, dan sizes yang menjelaskan lebar tampilan image pada breakpoint yang kamu dukung.

Bagian ini memengaruhi progres lesson.

Hero course yang diprioritaskan dengan alasan jelas

Wajib

tsx

import Image from "next/image";

export default function CourseHero() {
  return (
    <section>
      <Image
        src="/courses/frontend-hero.webp"
        alt="Preview track Frontend Engineering"
        width={1200}
        height={675}
        sizes="(max-width: 768px) 100vw, 960px"
        preload
      />
      <h1>Frontend Engineering</h1>
    </section>
  );
}

Image ini berada di awal route dan menjadi kandidat konten utama, sehingga preload dapat dibenarkan setelah diukur. width serta height memberi rasio untuk layout, sedangkan sizes memberi browser konteks ukuran tampil yang diharapkan. Untuk thumbnail daftar atau image dekoratif, jangan menyalin preload secara otomatis.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Optimize course hero image

Lengkapi component hero agar memakai next/image dengan dimensi, sizes, dan preload yang sesuai untuk kandidat LCP route.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

8 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan preload paling layak dipertimbangkan pada next/image?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Jangan optimalkan image hanya dengan mengganti component

next/image tidak membuat asset source yang terlalu besar menjadi tepat secara otomatis. Tetap periksa crop, dimensi, format, kualitas, dan apakah image memang diperlukan pada route tersebut. Optimasi image yang baik menjaga makna visual sambil mengurangi biaya resource yang benar-benar dikirim ke user.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Image perlu dipilih berdasarkan peran pada journey user dan posisi viewport.
Dimensi membantu menjaga layout stabil, sedangkan sizes membantu responsive loading.
Preload hanya layak untuk image penting seperti kandidat LCP yang telah dipahami.
Ukuran dan kualitas source asset tetap perlu ditinjau meskipun memakai next/image.
Berikutnya, font perlu diperlakukan sebagai resource UI yang memengaruhi keterbacaan dan layout.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Image yang tepat perlu cepat, stabil, dan sesuai area tampil.

Memuat progres Review module