Biasanya kita menggunakan CSS Layout seperti flexbox dan grid untuk membuat elemen website menjadi responsif. Tetapi, saat ini ada fitur baru di HTML yang lebih mudah.
Apa Itu Tampilan Web Responsif?
Tampilan web responsif adalah tampilan yang otomatis akan menyesuaikan ukuran maupun bentuknya berdasarkan perangkatnya. Sebagai contoh, sebuah halaman akan tetap nyaman dilihat baik di laptop, smartphone maupun tablet. Mengimplementasikan tampilan web secara responsif sudah menjadi kewajiban. Mengingat sekarang banyak sekali jenis perangkat dan ukuran layarnya.
Trik Lama Membuat Gambar Responsif
Biasanya kita akan menggunakan property width: x% untuk membuat gambar menjadi responsif. Perhatikan contoh kode program di bawah ini:
<img src="nama-gambar.png" width="80%" />atau kita bisa juga melakukan pengaturan di dalam css seperti berikut ini:
img {
width: 80%;
}Apa Kelebihan dan Kelemahannya?
Menggunakan cara di atas kelebihannya adalah gambar sudah bisa responsif menyesuaikan dengan ukuran layar perangkat dan akan selalu ditampilkan sebesar 80%. Tidak peduli berapa ukuran layarnya, akan ditampilkan sebesar 80%.
Sedangkan, kelemahannya adalah besar gambar yang di load akan selalu sama. Misalnya saja ukuran gambar adalah 800Kb, maka di berbagai perangkat akan diload gambar yang sama yaitu sebesar 800Kb. Hal ini akan menjadi kurang optimal.
Solusi: Gunakan Tag Picture
Solusinya ternyata cukup mudah. HTML telah mengeluarkan elemen baru bernama <picture>. Elemen ini berbeda dengan elemen <img> karena benar-benar akan melakukan load gambar sesuai dengan media query. Perhatikan contoh berikut ini:
<picture>
<source media="(max-width:1000px)" srcset="gambar-large.png">
<source media="(max-width:600px)" srcset="gambar-medium.png">
<source media="(max-width:400px)" srcset="gambar-small.png">
<img src="gambar.png" alt="picture"">
</picture>Pada kode program di atas, gambar.png adalah gambar dengan ukuran normal. Sedangkan gambar-large.png adalah gambar dengan resolusi yang lebih besar, gambar-medium.png adalah gambar yang ukurannya lebih kecil dan terakhir gambar-small.png adalah gambar dengan ukuran terkecil.
Baca Juga : Implementasi Design Thinking dalam Konten Marketing yang Efektif!
Bagaimana Cara Picture Memperlakukan Gambar?
Bagi kamu yang masih bingung, akan saya bahas lebih detail. Di atas pada tag <picture> sebenarnya terjadi yang namanya media query. Perhatikan poin-poin berikut ini:
- viewport yang ukurannya 1.000 px atau lebih akan meload gambar.png
- viewport yang ukurannya 601 px sampai 999 px akan meload gambar-large.png
- viewport yang ukurannya 401 px sampai 600 px akan meload gambar-medium.png
- viewport yang ukurannya 400 px ke bawah akan meload gambar-small.png
Sebagai ilustasi, perhatikan gambar berikut ini:
Menarik bukan? Semoga bermanfaat ya! Sampai bertemu di artikel berikutnya. Kalau bermanfaat, bantu share juga ya. Terima kasih!
Sumber:
https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/
