Bagaimana Gambar Responsif Dapat Meningkatkan Peringkat SEO?

Memastikan gambar Anda tampil baik di semua ukuran layar adalah tugas yang sulit. Anda harus mempertimbangkan ukuran file gambar, penempatannya di halaman, seberapa banyak bagian gambar yang ditampilkan, kecepatan koneksi pengguna, dan banyak lagi. Apa yang sering terjadi adalah kebanyakan developer hanya menggunakan satu gambar yang sama untuk semua ukuran layar dan membiarkan browser menyesuaikan ukurannya.

Ini adalah praktik yang buruk karena browser akan tetap mengunduh gambar dalam ukuran penuh (yang umumnya sangat besar) meskipun hanya menampilkannya dalam ukuran kecil. Hal ini membuang-buang kuota internet pengguna dan akan memperlambat waktu muat halaman Anda secara signifikan (terutama pada koneksi yang lambat).

Solusinya adalah menggunakan gambar responsif. Gambar responsif adalah gambar yang dioptimalkan untuk ukuran layar pengguna. Artinya, gambar akan diunduh dengan ukuran dan kualitas yang tepat untuk perangkat pengguna. Ini akan secara signifikan mengurangi jumlah data yang ditransfer dan mempercepat waktu muat halaman Anda. Ada banyak cara untuk menerapkan gambar responsif, dari yang sederhana hingga yang kompleks, dan dalam artikel ini saya akan menunjukkan semua cara yang bisa Anda gunakan.

---

Atribut img srcset

Cara termudah untuk menerapkan gambar responsif adalah dengan menggunakan atribut srcset pada tag <img>. Atribut ini memungkinkan Anda untuk mendefinisikan beberapa gambar dengan ukuran berbeda, dan browser akan secara otomatis memilih gambar yang paling sesuai dengan ukuran layar pengguna.

HTML

Kode ini mungkin terlihat membingungkan, jadi mari kita jelaskan. Kita tetap memiliki atribut src dan alt seperti biasa. src berfungsi sebagai cadangan jika browser yang digunakan pengguna sangat tua dan tidak mendukung srcset.

Atribut yang membingungkan adalah srcset. Atribut ini menerima daftar URL gambar dan lebarnya, dipisahkan oleh koma.

• tree-400.jpg 400w: Bagian pertama adalah URL gambar (tree-400.jpg). Bagian kedua, 400w, memberitahu browser bahwa lebar asli (intrinsik) dari file gambar ini adalah 400 piksel. Unit w di sini berarti width, bukan unit CSS.

Browser akan menggunakan informasi ini untuk secara otomatis menentukan gambar mana yang akan diunduh. Misalnya, jika layar pengguna lebarnya kurang dari 400px, ia akan menggunakan tree-400.jpg. Ketika lebar layar menjadi lebih dari 400px, browser akan beralih menggunakan tree-800.jpg, dan begitu seterusnya.

Ini bagus karena di layar kecil browser akan mengunduh gambar yang lebih kecil, sementara layar besar akan tetap mendapatkan gambar resolusi tinggi.

Poin Penting: Browser juga mempertimbangkan kepadatan piksel layar. Jika Anda menggunakan layar beresolusi tinggi (misalnya Retina Display), browser mungkin akan mengunduh gambar yang lebih besar dari yang Anda harapkan (misalnya, gambar 1600w untuk layar 700px) agar gambar tetap terlihat tajam.

---

Menangani Kepadatan Piksel yang Berbeda

Terkadang, Anda memiliki gambar yang ukurannya di layar selalu sama (misalnya, logo yang selalu 100px), tetapi Anda ingin gambar tersebut terlihat tajam di perangkat beresolusi tinggi. Untuk ini, Anda dapat menggunakan srcset dengan satuan x untuk menunjukkan kepadatan piksel.

HTML

Penjelasan Praktis:

• 1x adalah untuk layar standar.
• 1.5x adalah untuk layar dengan kepadatan piksel 1.5 kali lebih tinggi.
• 2x adalah untuk layar dengan kepadatan piksel 2 kali lebih tinggi.

Dengan kode di atas, browser akan mendeteksi kepadatan piksel perangkat dan mengunduh versi logo yang paling sesuai agar terlihat tajam.

---

Atribut img sizes

Apa yang telah kita bahas sejauh ini mengasumsikan bahwa ukuran gambar Anda sama dengan lebar layar. Namun, dalam banyak skenario, ukuran gambar Anda tidak seperti itu. Blog ini adalah contoh yang bagus. Di layar kecil, konten (termasuk gambar) memenuhi lebar layar, tetapi di layar yang lebih besar, kontennya terpusat dengan lebar maksimum yang terbatas. Jika kita hanya menggunakan srcset, gambar kita akan diskalakan berdasarkan ukuran penuh jendela browser, yang akan membuat gambar lebih besar dari yang dibutuhkan pada layar besar. Di sinilah atribut sizes berperan.

Atribut sizes memungkinkan Anda memberi tahu browser seberapa besar gambar akan ditampilkan relatif terhadap viewport.

HTML

Penjelasan Praktis:

Atribut sizes di atas dapat diartikan sebagai berikut:

1. (max-width: 800px) 100vw: Jika lebar layar 800px atau kurang, maka anggap lebar gambar ini adalah 100% dari lebar viewport (100vw).
2. 800px: Jika tidak (artinya layar lebih lebar dari 800px), maka anggap lebar gambar ini adalah 800px.

Ini memberi tahu browser untuk tidak mengunduh gambar yang lebih besar dari yang diperlukan. Pada layar 1200px, browser tahu bahwa gambar hanya akan memakan ruang 800px, jadi ia akan memilih gambar dari srcset yang paling mendekati 800px.

Potensi Masalah

• Urutan Penting: Saat menulis sizes dengan beberapa media query, browser akan memilih yang pertama kali cocok. Jadi, letakkan query yang paling spesifik (misalnya max-width: 500px) sebelum yang lebih umum (max-width: 800px).
• Tidak Bisa Pakai Persentase: Atribut sizes tidak mendukung nilai persentase seperti 50%, karena browser perlu mengetahui ukuran gambar sebelum layout CSS dimuat sepenuhnya.

---

Elemen <picture>

Sejauh ini kita membahas cara menyajikan gambar yang sama dalam ukuran berbeda. Tapi bagaimana jika Anda ingin menampilkan gambar yang sama sekali berbeda pada ukuran layar yang berbeda? Inilah gunanya elemen <picture>. Ini sangat ideal untuk apa yang disebut art direction.

Contoh Praktik yang Lebih Baik:

Bayangkan Anda memiliki gambar header pemandangan yang sangat lebar. Di desktop, ini terlihat menakjubkan. Tapi di ponsel, objek utamanya (misalnya, seorang pendaki) menjadi terlalu kecil dan tidak fokus.

• Desktop: Gambar pemandangan lebar.
• Mobile: Gambar yang dipotong (crop) dan difokuskan pada objek utama.

HTML

Penjelasan Praktis:

Elemen <picture> memungkinkan browser memilih sumber gambar yang berbeda berdasarkan media query.

1. <source media="(max-width: 500px)" srcset="hiking-narrow.jpg" />: Jika lebar layar 500px atau kurang, gunakan gambar hiking-narrow.jpg (versi yang di-crop).
2. <img src="hiking-wide.jpg" ... />: Jika tidak, gunakan gambar hiking-wide.jpg (versi lebar) sebagai gambar default atau cadangan.

Anda bisa menambahkan beberapa elemen <source> untuk breakpoint yang berbeda. Browser akan memeriksa setiap <source> dari atas ke bawah dan menggunakan yang pertama kali cocok.

---

Mengapa Menggunakan <picture> daripada Alternatif Lain?

• Dibandingkan sizes: Atribut sizes hanya membantu browser memilih ukuran yang lebih baik dari gambar yang sama. Ia tidak akan beralih ke gambar yang lebih kecil jika Anda mengecilkan jendela browser. <picture> akan selalu beralih ke sumber yang tepat sesuai ukuran layar, menjadikannya ideal untuk art direction.
• Dibandingkan CSS: Anda bisa mencoba meniru efek ini dengan background-image di CSS. Namun, itu tidak baik untuk SEO dan aksesibilitas. Selain itu, dengan HTML, Anda masih mengunduh gambar beresolusi penuh di perangkat seluler, yang bertentangan dengan tujuan optimasi kecepatan kita.

---

Kesimpulan

Gambar responsif mungkin tampak seperti topik yang rumit, tetapi tidak harus begitu.

• Untuk memulai, cukup tambahkan atribut srcset ke tag <img> Anda.
• Untuk yang lebih mahir, gunakan atribut sizes untuk membantu browser memilih gambar yang benar.
• Jika Anda ingin menampilkan gambar yang berbeda pada ukuran layar yang berbeda, gunakan elemen <picture>.