Apa itu Srcset?
Srcset adalah atribut gambar HTML yang menentukan daftar gambar yang dapat dipilih oleh browser berdasarkan ukuran dan resolusi layar. Konsep ini dikenal sebagai gambar responsif, memastikan bahwa versi gambar yang paling tepat dimuat untuk kondisi tampilan yang berbeda.
Berikut adalah contoh cara kerja srcset:
<img srcset="example-image-480w.jpg 480w, example-image-800w.jpg 800w" sizes="(max-lebar: 600px) 480px, 800px" src="example-image-800w.jpg" alt="Contoh ilustrasi">Dalam contoh ini, srcset memberi tahu browser untuk memuat gambar selebar 480 piksel jika lebar viewport kurang dari 600 piksel. Jika lebar viewport lebih dari 600 piksel, browser akan memuat gambar yang lebih besar, selebar 800 piksel.
Atau, Anda bisa menetapkan densitas piksel sebagai kondisi, alih-alih ukuran:
<img srcset="contoh-gambar-1x.jpg 1x, contoh-gambar-2x.jpg 2x" src="contoh-gambar-1x.jpg" alt="Contoh ilustrasi lain">Mengapa Srcset Penting untuk SEO?
Srcset sangat penting untuk SEO karena memungkinkan browser memuat ukuran gambar yang paling sesuai berdasarkan karakteristik perangkat. Pengoptimalan ini memiliki beberapa manfaat:
- Peningkatan Kecepatan Muat: Gambar yang lebih besar memiliki ukuran file yang lebih besar, yang dapat memperlambat waktu muat halaman. Dengan memuat gambar berukuran tepat untuk perangkat yang berbeda, srcset membantu menghemat bandwidth dan mengurangi waktu muat halaman.
- Pengalaman Pengguna yang lebih baik: Waktu muat halaman yang lebih cepat meningkatkan pengalaman pengguna, sehingga menghasilkan rasio pentalan yang lebih rendah dan keterlibatan yang lebih tinggi.
- Manfaat SEO: Kecepatan memuat halaman adalah faktor peringkat langsung untuk penelusuran seluler dan desktop. Mengoptimalkan gambar menggunakan srcset dapat berdampak positif pada peringkat mesin pencari Anda.
Praktik Terbaik untuk Gambar Responsif
1. Periksa Wawasan Kecepatan Halaman untuk Rekomendasi
PageSpeed Insights adalah alat gratis dari Google yang memberikan saran untuk mengoptimalkan kecepatan situs web Anda. Dengan memasukkan URL halaman web Anda, Anda dapat menerima rekomendasi spesifik untuk pengoptimalan gambar, seperti:
- Memperbarui format gambar untuk kompresi yang lebih baik.
- Mempertimbangkan pemuatan malas untuk gambar di luar layar atau gambar tersembunyi.
- Mengatur ukuran gambar dengan benar untuk meningkatkan waktu muat.
2. Gunakan Elemen Gambar untuk Arahan Seni
Elemen <picture> memungkinkan browser menampilkan gambar yang berbeda berdasarkan karakteristik perangkat. Hal ini berguna ketika Anda ingin menampilkan gambar yang sama sekali berbeda, bukan hanya ukuran yang berbeda dari gambar yang sama.
Berikut ini contoh penggunaan elemen <gambar>:
<picture> <source media="(min-width: 600px)" srcset="contoh-gambar.jpg, contoh-gambar-2x.jpg 2x"> <img src="contoh-gambar.jpg" alt="Contoh ilustrasi"> <picture>Dalam contoh ini, contoh-gambar.jpg atau contoh-gambar-2x.jpg akan ditampilkan pada lebar peramban 600px atau lebih, tergantung pada kerapatan piksel perangkat. Untuk lebar layar kurang dari 600px, atau jika elemen <gambar> tidak didukung, elemen <img> akan dirender sebagai gantinya. Selalu sertakan elemen <img> untuk memastikan kompatibilitas.
3. Memastikan Pengalihan yang Tepat
Selalu sediakan gambar cadangan dengan atribut src jika browser tidak mendukung srcset atau elemen <picture>. Hal ini memastikan bahwa gambar selalu ditampilkan, terlepas dari kemampuan browser.
4. Gunakan Teks Alt Deskriptif
Selalu sertakan teks alt deskriptif untuk gambar Anda. Hal ini akan meningkatkan aksesibilitas dan memberikan konteks untuk mesin pencari, sehingga meningkatkan SEO Anda.
Kesimpulan
Menggunakan srcset adalah praktik penting untuk mengoptimalkan gambar untuk berbagai perangkat, memastikan waktu muat yang lebih cepat dan pengalaman pengguna yang lebih baik. Dengan mengikuti praktik terbaik, Anda dapat meningkatkan performa dan SEO situs web Anda, membuatnya lebih efisien dan mudah diakses oleh pengguna.
