BERITA WEB PROGRAMMING Trik Membuat Gambar yang Responsif di Websitemu

Trik Membuat Gambar yang Responsif di Websitemu


#programming #design
Trik Membuat Gambar yang Responsif di Websitemu

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.

Ciptakan lingkungan belajar yang lebih MENYENANGKAN dengan GAME-BASED LEARNING!

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.

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/ 


Andi Taru

Andi Taru

Minggu, 6 September 2020