Lazy Loading dan Gambar Responsif: Panduan Praktis untuk Pemula

Masalah: Ukuran Gambar yang Besar

Gambar biasanya merupakan file terbesar di halaman web. Saat pengguna mengunjungi situs Anda, browser mereka akan mencoba mengunduh semua gambar, termasuk yang berada di luar area tampilan awal. Hal ini membuang bandwidth dan memperlambat pemuatan halaman secara signifikan, mengakibatkan pengalaman pengguna yang buruk dan skor Core Web Vitals yang rendah.

Solusinya memiliki dua aspek:

1. Lazy Loading: Menunda pemuatan gambar di luar layar hingga pengguna menggulir halaman dan mendekatinya.
2. Gambar Responsif: Menyediakan versi gambar dengan ukuran berbeda untuk perangkat berbeda, sehingga pengguna seluler tidak perlu mengunduh gambar besar yang dirancang untuk desktop.

Untungnya, HTML modern menyediakan fitur yang kuat dan mudah digunakan untuk keduanya.

Bagian 1: Implementasi Lazy Loading yang Mudah

Dahulu, lazy loading membutuhkan pustaka JavaScript yang rumit. Kini, cukup dengan satu atribut sederhana.

Atribut loading="lazy" memberi tahu browser untuk tidak memuat gambar hingga gambar tersebut akan masuk ke area tampilan.

Cara Mengimplementasikan:

Cukup tambahkan loading="lazy" ke tag <img> Anda.

<img src="my-image.jpg" alt="Teks alternatif yang deskriptif" loading="lazy" width="800" height="600">

Catatan Penting:

• Selalu sertakan atribut width dan height. Ini memungkinkan browser mengalokasikan ruang yang tepat sebelum gambar dimuat, sehingga mencegah pergeseran tata letak (CLS - Cumulative Layout Shift).
• Jangan gunakan lazy loading untuk semua gambar. Gambar di “atas lipatan” (terlihat saat halaman pertama kali dimuat) harus dimuat secara normal. Menggunakan lazy loading pada gambar-gambar ini justru dapat memperlambat persepsi kecepatan pemuatan. Gunakan atribut ini hanya untuk gambar di bawah lipatan awal.

Dukungan browser untuk loading="lazy" kini telah tersedia di semua browser utama, menjadikannya metode yang aman dan efektif untuk meningkatkan kinerja.

Bagian 2: Menyediakan Ukuran yang Tepat dengan srcset

Mengapa pengguna seluler harus mengunduh gambar berukuran 2000px yang dirancang untuk desktop? Atribut srcset memungkinkan Anda memberikan daftar beberapa versi gambar dengan ukuran berbeda. Browser akan secara cerdas memilih yang paling sesuai berdasarkan ukuran layar dan resolusi pengguna.

Cara Mengimplementasikan:

1. Buat beberapa ukuran gambar: Siapkan beberapa versi gambar. Kumpulan ukuran umum:

   • image-small.jpg (misal: lebar 480px)
   • image-medium.jpg (misal: lebar 800px)
   • image-large.jpg (misal: lebar 1200px) Anda dapat menggunakan alat pengubah ukuran gambar kami untuk membuat ukuran ini.

2. Gunakan atribut srcset: Cantumkan setiap gambar beserta deskriptor lebarnya (w).

<img 
  srcset="image-small.jpg 480w, 
          image-medium.jpg 800w, 
          image-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 
         800px"
  src="image-medium.jpg" 
  alt="Teks alternatif yang deskriptif"
  loading="lazy"
  width="800" height="600">

Mari kita bahas:

• srcset: Menyediakan daftar gambar yang tersedia dan lebar aktualnya
• sizes: Memberi tahu browser seberapa lebar gambar akan ditampilkan pada berbagai ukuran viewport. Dalam contoh ini: “Jika lebar layar ≤600px, gambar akan berukuran 480px. Jika tidak, berukuran 800px”. Browser menggunakan informasi ini untuk memilih gambar terbaik dari srcset.
• src: Gambar cadangan untuk browser lama yang tidak mendukung srcset.

Bagian 3: Seni Pengarahan dengan Elemen <picture>

Terkadang, Anda tidak hanya ingin menyediakan versi gambar yang lebih kecil, tetapi gambar yang sama sekali berbeda. Contoh: Foto lanskap horizontal di desktop menjadi potret yang lebih ketat di seluler. Ini disebut “seni pengarahan” (art direction).

Elemen <picture> sangat cocok untuk tujuan ini. Memungkinkan Anda menyediakan beberapa elemen <source>, dan browser akan memilih yang pertama sesuai.

Cara Mengimplementasikan:

<picture>
  <!-- Tampilkan gambar ini jika lebar layar ≤600px -->
  <source media="(max-width: 600px)" srcset="image-portrait.jpg">
  
  <!-- Jika tidak, tampilkan gambar ini -->
  <source media="(min-width: 601px)" srcset="image-landscape.jpg">
  
  <!-- Gambar cadangan untuk browser lama -->
  <img src="image-landscape.jpg" alt="Teks alternatif yang deskriptif" loading="lazy" width="1200" height="600">
</picture>

Anda juga dapat menggunakan <picture> untuk menyediakan format gambar modern seperti AVIF atau WebP dengan fallback ke JPEG:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Teks alternatif yang deskriptif">
</picture>

Buat format ini menggunakan alat konversi gambar kami.

Kesimpulan

Dengan menggabungkan ketiga fitur HTML modern ini, Anda dapat membangun situs web yang dimuat dengan kecepatan luar biasa di semua perangkat.

• Gunakan loading="lazy" untuk semua gambar di bawah lipatan awal
• Gunakan srcset untuk menyediakan berbagai ukuran gambar yang sama
• Gunakan <picture> saat Anda perlu menyediakan gambar berbeda untuk ukuran layar atau format berbeda

Mengimplementasikan teknik ini adalah salah satu perubahan paling berdampak yang dapat Anda lakukan untuk meningkatkan kinerja web dan Core Web Vitals.