Panduan Pemula untuk Gambar Responsif dalam HTML

Gambar responsif adalah gambar yang beradaptasi dengan karakteristik perangkat yang berbeda. Jika dilakukan dengan benar, gambar responsif dapat meningkatkan kinerja dan pengalaman pengguna situs.

Artikel ini membahas bagaimana Anda dapat membuat gambar responsif dalam HTML menggunakan srcset dan elemen gambar.

Mengapa Anda Harus Menggunakan Gambar Responsif?

Ketika para insinyur perangkat lunak membuat web, mereka tidak mempertimbangkan bagaimana browser akan menangani gambar yang responsif. Lagi pula, pengguna hanya mengakses web dari desktop atau laptop. Tentu saja, itu tidak benar hari ini.

Berdasarkan statistik, lebih dari 90 persen populasi internet global online menggunakan ponsel mereka. Sebagian besar halaman web di internet berisi gambar dan gambar ini adalah salah satu metrik yang digunakan untuk mengukur kinerja web. Untuk meningkatkan kinerja, Anda perlu mengoptimalkan gambar Anda dengan membuatnya responsif.

Cara Membuat Gambar Responsif di HTML

Anda dapat mendekati gambar responsif dari dua sudut—baik dengan menyajikan gambar yang sama dengan ukuran berbeda atau menyajikan gambar yang berbeda sesuai dengan karakteristik tampilan. Anda bisa menggunakan atau. Kedua opsi ini menangani gambar responsif secara berbeda, tetapi semuanya menampilkan satu gambar dari alternatif yang diberikan tergantung pada aturan yang ditetapkan.

Terkait: Cara Membuat Website Anda Responsif dan Interaktif Dengan CSS dan JavaScript

Menggunakan srcset

Standar HTML hanya memungkinkan Anda untuk menentukan satu file gambar. Jika Anda ingin menampilkan gambar yang berbeda tergantung pada ukuran perangkat, maka Anda harus menggunakan srcset.

Sintaksis:

srcset memungkinkan Anda untuk menyediakan file sumber tambahan, dan browser akan memilih gambar yang tampak optimal untuk ukuran gambar tersebut.

 src="kucing-lucu.jpg"
 alt="Kucing lucu">

srcset terdiri dari tiga bagian: Nama file gambar yang menentukan jalur ke gambar sumber, spasi, dan lebar intrinsik atau sebenarnya dari gambar.

Menggunakan srcset Dengan ukuran

Masalah dengan menggunakan srcset adalah Anda tidak memiliki kendali atas gambar apa yang akan dipilih browser untuk ditampilkan. Menggabungkan srcset dengan ukuran memecahkan masalah ini. ukuran menentukan satu set kondisi media yang mengisyaratkan gambar dengan ukuran optimal.

Anda sekarang dapat menulis ulang tandai di atas sebagai berikut.

ukuran="(lebar maks: 600 piksel) 480 piksel,
 800 piksel"
 src="kucing-lucu.jpg"
 alt="Kucing lucu">

ukuran terdiri dari kondisi media, dalam contoh ini (max-width: 600px) yang mewakili viewport lebar, spasi, dan lebar slot (480px) yang menentukan ruang yang akan diisi gambar jika kondisi medianya benar.

Terkait: Cara Menggunakan Kueri Media dalam HTML dan CSS untuk Membuat Situs Web yang Responsif

Di sini, browser pertama-tama akan memeriksa lebar perangkat dan membandingkannya dengan kondisi media. Jika kondisinya benar, itu akan memeriksa lebar slot dan memuat gambar dari srcset dengan lebar yang sama atau yang lebih besar berikutnya.

Perhatikan bahwa Anda juga termasuk src yang menyediakan gambar untuk kembali ke browser yang tidak mendukung srcset dan ukuran.

srcset juga memungkinkan Anda untuk menyajikan gambar pada resolusi yang berbeda menggunakan x-deskriptor.

 src="lucu-kucing-rendah.jpg"
 alt="Kucing lucu">

Dalam contoh ini, jika perangkat memiliki resolusi dua piksel perangkat per CSS atau lebih, browser akan memuat gambar cute-cat-high1.jpg.

Piksel Perangkat Keras dan Perangkat Lunak

Masalah dengan solusi ini adalah gambar hanya responsif dalam hal kerapatan piksel perangkat. Ini adalah rasio piksel perangkat keras ke perangkat lunak atau piksel CSS. Piksel perangkat keras adalah titik cahaya sebenarnya di layar sedangkan piksel perangkat lunak atau piksel CSS adalah unit pengukuran. Kepadatan piksel menentukan resolusi perangkat.

Saat merender gambar responsif, jangan hanya mempertimbangkan resolusinya; ukuran layar juga penting. Jika tidak, Anda mungkin tidak perlu memuat gambar besar atau gambar yang terlalu mabuk.

 src="lucu-kucing-rendah.jpg"
 alt="Kucing lucu">

Menggunakan

adalah elemen HTML yang membungkus beberapa elemen yang berisi file sumber berbeda dan elemen. Ketika membuat gambar responsif dengan menyajikan berbagai ukuran gambar yang sama, memungkinkan Anda untuk benar-benar mengubah gambar yang ditampilkan.

Sintaksis:

Pertimbangkan situasi di mana Anda memiliki gambar lanskap yang besar. Gambar ditampilkan dan terlihat proporsional di desktop, tetapi menyusut secara signifikan di perangkat seluler sehingga elemen pada gambar menjadi kecil. Gambar non-responsif berkontribusi pada pengalaman pengguna yang buruk. Dengan Anda dapat memberi tahu browser Anda untuk beralih ke gambar potret jarak dekat saat menggunakan perangkat seluler.

Seperti pada pendekatan pertama, berisi atribut media yang dapat Anda gunakan untuk menyediakan kondisi media. Misalnya, browser akan menampilkan "cute-cat-480w.jpg" jika lebar viewport 639px atau kurang. Itu srcset memegang jalur file gambar yang ingin Anda tampilkan dan src menentukan gambar default.

Terkait: 7 Fitur CSS Baru untuk Membuat Website Responsif

Pengganti untuk Format Gambar WebP

Hal lain yang menangani dengan baik menyediakan fallback untuk format gambar modern seperti WebP. Gambar WebP memiliki kinerja tinggi, kecil, dan menawarkan pengalaman web yang cepat. Karena itu, Anda dapat memutuskan untuk menggunakannya di situs Anda. Tantangan yang mungkin Anda alami adalah tidak semua browser mendukung gambar WebP. Dengan, Anda tidak mengalami masalah ini karena browser Anda dapat memuat gambar alternatif jika tidak mendukung WebP.

Mengapa Membuat Gambar Responsif di HTML dan Bukan di CSS?

CSS menawarkan opsi yang kuat untuk menangani gambar responsif. Jadi mengapa tidak menggunakannya? Peramban memuat gambar sebelum mem-parsing CSS. Jadi sebelum JavaScript situs Anda mendeteksi lebar viewport untuk membuat perubahan yang sesuai pada gambar, gambar asli sudah dimuat sebelumnya. Karena itu, lebih baik menangani gambar responsif menggunakan HTML.

Bertujuan untuk Kualitas Gambar Terbaik

Anda telah melihat bagaimana Anda dapat membuat gambar responsif dalam HTML menggunakan > dan dalam artikel ini. Penyajian gambar responsif biasanya melibatkan pertimbangan ukuran gambar dan resolusi gambar yang berkaitan dengan ukuran tampilan. Jika dilakukan dengan salah, kualitas gambar dapat menurun. Pastikan untuk memilih gambar yang memberikan kegunaan optimal menggunakan sumber daya paling sedikit.

Prinsip Desain Web Responsif

Desainer web telah memperjuangkan desain responsif selama bertahun-tahun sekarang, tetapi apa itu dan bagaimana cara menghasilkan halaman web yang unggul?

Baca Selanjutnya

Tentang Penulis