Frontend Academy · Pelajaran

Optimasi Gambar: lazy loading, format WebP

Pelajaran 3 dari 413 langkah

Optimasi Gambar: lazy loading, format WebP adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Gambar Mendominasi Bobot Halaman

Halaman web median berukuran sekitar 2 MB—dan gambar menyumbang kira-kira setengahnya. Mengoptimalkan gambar adalah tugas performa dengan dampak terbesar.

Format Modern: WebP dan AVIF

WebP berukuran 25–35% lebih kecil daripada JPEG dengan kualitas serupa dan didukung oleh semua peramban modern. AVIF bahkan lebih kecil (pengurangan 50%), tetapi lebih lambat untuk dikodekan. Gunakan keduanya dengan mekanisme cadangan.

Elemen picture

Gunakan <picture> untuk menyajikan AVIF jika didukung, kemudian WebP, lalu JPEG sebagai mekanisme cadangan terakhir.

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>

Pemuatan Lambat Bawaan

Tambahkan loading="lazy" pada gambar di bawah lipatan. Peramban menunda pemuatan hingga gambar mendekati area pandang—tidak memerlukan JavaScript sama sekali.

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

Gambar Responsif dengan srcset dan sizes

Sajikan gambar yang lebih kecil untuk layar yang lebih kecil. srcset mencantumkan gambar kandidat beserta lebarnya; sizes memberi tahu peramban seberapa lebar gambar ditampilkan pada setiap titik henti.

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="" width="800" height="600">

Mengapa Menetapkan width dan height Secara Eksplisit

Peramban menyisakan ruang berdasarkan atribut lebar/tinggi—sehingga pergeseran tata letak saat gambar tiba dapat dicegah. Peramban modern secara otomatis menghitung aspect-ratio dari atribut ini.

decoding="async"

Tambahkan decoding="async" agar peramban dapat mendekode gambar di luar thread utama, sehingga thread tersebut bebas merender konten lain.

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

CDN Gambar

CDN gambar (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) mengubah gambar secara langsung: mengubah ukuran, mengonversi format menjadi WebP/AVIF, mengompres, dan menyajikannya dari tembolok edge.

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

Komponen Gambar Next.js

Komponen <Image> milik Next.js menangani srcset responsif, konversi WebP, pemuatan lambat, dan placeholder buram secara bawaan.

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

Mengompres JPEG dan PNG

Jika Anda tidak dapat beralih ke WebP, setidaknya lakukan kompresi: gunakan Squoosh (squoosh.app) untuk gambar individual, ImageOptim untuk pemrosesan batch, atau sharp dalam skrip kompilasi.

SVG untuk Ikon dan Logo

Gunakan SVG untuk ikon, logo, dan karya seni vektor apa pun. SVG berskala sempurna, berukuran sangat kecil, dan dapat diberi gaya dengan CSS. Sematkan SVG kecil langsung untuk menghindari permintaan HTTP tambahan.

Pemeriksaan Singkat

Atribut HTML apa yang memberi tahu peramban untuk menunda pemuatan gambar hingga gambar tersebut mendekati area pandang?

Jawab di pelajaran interaktif

Ringkasan: Optimasi Gambar

Gunakan format modern (AVIF, WebP) melalui elemen picture. Tambahkan loading="lazy" di bawah lipatan, dan fetchpriority="high" pada gambar utama. Tetapkan width/height secara eksplisit untuk mencegah CLS. Gunakan srcset/sizes untuk gambar responsif. CDN gambar mengotomatiskan transformasi. Komponen Gambar Next.js menangani semuanya. Gunakan SVG untuk ikon.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Optimasi Gambar: lazy loading, format WebP” gratis?

Ya — teks lengkap “Optimasi Gambar: lazy loading, format WebP” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Optimasi Gambar: lazy loading, format WebP”?

Tambahkan loading=lazy pada gambar, sajikan format modern WebP dan AVIF, gunakan gambar responsif dengan srcset dan sizes, serta tetapkan width dan height eksplisit untuk mencegah pergeseran tata let… Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Optimasi Gambar: lazy loading, format WebP” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Core Web Vitals: LCP, FID, CLS
Audit dan Penilaian Lighthouse
Optimasi Gambar: lazy loading, format WebP
Pemisahan Kode dan Rute Lazy

← Kembali ke Frontend Academy