Cara menggunakan “srcset”untuk blogmu

Menggunakan srcset memungkinkan browser memilih versi gambar yang paling sesuai berdasarkan ukuran layar dan resolusi perangkat. Ini sangat berguna untuk meningkatkan performa halaman dan memperbaiki Largest Contentful Paint (LCP).

1. Cara Dasar Menggunakan srcset

Gunakan srcset di dalam tag <img> dengan beberapa ukuran gambar:

<img src="gambar-default.jpg"
     srcset="gambar-kecil.jpg 480w,
             gambar-sedang.jpg 768w,
             gambar-besar.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 50vw,
            33vw"
     alt="Deskripsi gambar">

Penjelasan:

• srcset → Menyediakan berbagai ukuran gambar dengan lebar spesifik (480w, 768w, 1200w).
• sizes → Memberi tahu browser bagaimana gambar digunakan di berbagai ukuran layar.
  • 100vw → Saat layar ≤ 480px, gambar menggunakan 100% lebar viewport.
  • 50vw → Saat layar ≤ 768px, gambar menggunakan 50% lebar viewport.
  • 33vw → Untuk layar lebih besar, gambar hanya menggunakan 33% lebar viewport.

2. Contoh dengan Gambar Responsif di WordPress

WordPress biasanya sudah menghasilkan berbagai ukuran gambar otomatis (thumbnail, medium, large). Anda bisa menggunakan fungsi wp_get_attachment_image_srcset() untuk otomatis mengatur srcset:

<img src="<?php echo esc_url($image_url); ?>"
     srcset="<?php echo esc_attr(wp_get_attachment_image_srcset($attachment_id)); ?>"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
     alt="<?php echo esc_attr($image_alt); ?>">

Keuntungan cara ini:

• WordPress akan otomatis menyediakan variasi ukuran gambar.
• Tidak perlu manual menambahkan URL untuk setiap ukuran gambar.

3. Menggunakan picture untuk Format Gambar Modern (WebP)

Jika ingin menggunakan format WebP tetapi tetap menyediakan fallback ke JPEG/PNG, gunakan <picture>:

<picture>
  <source srcset="gambar.webp" type="image/webp">
  <source srcset="gambar.jpg" type="image/jpeg">
  <img src="gambar.jpg" alt="Deskripsi gambar">
</picture>

Penjelasan:

• Browser akan mencoba memuat WebP jika didukung, jika tidak, akan fallback ke JPEG.

Kesimpulan

• Gunakan srcset untuk memberi pilihan gambar dengan berbagai ukuran.
• Tambahkan sizes untuk memberi tahu browser cara memilih gambar terbaik.
• Gunakan picture jika ingin memberikan format gambar modern seperti WebP.
• Jika menggunakan WordPress, manfaatkan fungsi wp_get_attachment_image_srcset() agar otomatis.

Solusi ini bisa membantu mengoptimalkan Largest Contentful Paint (LCP) dan mempercepat loading halaman Anda!