#48 Cara membuat gambar responsive pada html

Membuat Gambar responsif menggunakan atribut srcset pada html

pada tutorial ini kita akan belajar membuat gambar responsive menggunakan atribut srcset pada html, tidak semua pengunjung website memliki spesifikasi display yang sama, baik ukuran maupun resolusi dari display.

Deskripsi

tag srcset adalah tag yang digunakan untuk memuat ukuran file gambar sesuai dengan layar perangkat user.

pada versi html sebelumnya untuk menampilkan gambar hanya dengan menggunakan satu gambar yang besar untuk semua ukuran layar. cara ini memboroskan bandwidth, dan ada juga yang menggunakan media query css maupun javascript

jika menggunakan satu gambar kecil pada layar yang lebih besar, gambar akan terlihat pecah, sebaliknya jika di layar yang kecil dan gambarnya besar akan membutuhkan waktu loading yang lebih lama.

sekarang untuk menampilkan gambar yang sama dengan ukuran yang berbeda dapat menggunakan atribut srcset pada tag <img>

Baca juga : Cara menampilkan gambar pada html

browser akan memilih gambar mana yang tepat berdasarkan viewport dan pixel layar, jadi akan menghemat bandwidth dan mempercepat menampilkan gambar.

ada beberapa cara membuat gambar responsive pada html :

Gambar Responsive dengan atribut sizes:

<!DOCTYPE html>
<html>
<head>
    <title> Membuat Gambar responsive pada html </title>
</head>
<body>
    <img sizes="(min-width: 1200px) 580px,
    (min-width: 640px) 48vw,
    98vw"
    srcset="https://dummyimage.com/300x200.jpg 300w,
    https://dummyimage.com/600x500.jpg 600w,
    https://dummyimage.com/900x800.jpg 900w,
    https://dummyimage.com/1200x1100.jpg 1200w"
    src="https://dummyimage.com/900x800.jpg" alt="hello">
</body>
</html>Code language: HTML, XML (xml)

sizes disini seperti ukuran media query pada CSS yang menjelaskan berapa banyak ruang yang dibutuhkan gambar dari viewport.

Baca juga : Mengenal tag meta pada HTML

lebar file gambar menggunakan integer dengan satuan w untuk menunjukan lebar layar.

srcset hanya memberi tahu browser gambar apa yang dimiliki dan apa ukurannya.

src selalu di tulis karena sumber gambar wajib Jika menggunakan dengan srcset. src akan menyajikan gambar aslinya, jika browser tidak mendukung srcset.

Gambar Responsive tanpa atribut sizes:

gambar yang tepat sesuai dengan Device Pixel Ratio ( DPR ) atau Rasio Piksel perangkat. DPR adalah rasio antara piksel logis dan piksel fisik.

Perangkat dengan layar Retina, misalnya Nexus 6P, memiliki kepadatan piksel lebih tinggi dibandingkan perangkat biasa, yang bisa memengaruhi ketajaman dan ukuran konten visual.

  • Jika DPR 1 maka akan memuat gambar yang kecil misal ukuran 400×200
  • untuk layar ber – DPR 2 maka akan memuat gambar yang sedang misal ukuran 800×400
  • jika layar ber – DPR 3 maka akan memuat gambar yang besar misal ukuran 1200×600

contoh menentukan kepadatan gambar DPR

<img srcset="image-4x.jpg 4x, 
    image-3x.jpg 3x, 
    image-2x.jpg 2x, 
    image-1x.jpg 1x " 
    src="default_image.jpg" >Code language: HTML, XML (xml)

kode diatas berfungsi jika kita telah membuat gambar yang berbeda secara proporsional satu sama lain dengan kepadatan DPR

<!DOCTYPE html>
<html>
<head>
    <title> Membuat Gambar responsive tanpa atribut size pada html </title>
</head>
<body>
    <img src="https://dummyimage.com/300x300.jpg" alt="hello"
    srcset="https://dummyimage.com/300x300.jpg 1x,
    https://dummyimage.com/600x600.jpg 2x,
    https://dummyimage.com/1200x1200.jpg 3x">
</body>
</html>Code language: HTML, XML (xml)

srcset menyediakan daftar gambar yang tersedia, dengan rasio piksel perangkat

jika rasio piksel perangkat adalah 1, gunakan https://dummyimage.com/300×300.jpg

rasio piksel perangkat adalah 2, gunakan https://dummyimage.com/600×600.jpg

jika DPR perangkat adalah 3, gunakan https://dummyimage.com/1200×1200.jpg

Gambar responsive dengan tag picture

<!DOCTYPE html>
<html>
<head>
    <title> Gambar responsive dengan tag picture </title>
</head>
<body>
    <picture>
     <source media="(min-width: 600px)" srcset="large_image.jpg">
     <source media="(min-width: 450px)" srcset="small_image.jpg">
     <img src="default_image.jpg" style="width:auto;">
    </picture>
</body>
</html>Code language: HTML, XML (xml)

tag gambar seperti yang ditunjukkan pada contoh di atas.

hasil pada layar dengan lebar layar> 600px menunjukkan large_image.jpg

pada layar dengan lebar layar> 450px menunjukkan small_image.jpg

pada lebar layar lain menunjukkan default_image.jpg

Pencarian di thohirdev:

  • gambar responsive html
  • mengatur ukuran gambar html
  • tag srcset html
  • fungsi atribut srcset html 5
  • Share
  • 16,486
  • byMuhammad Thohir S.Kom
  • Posted
  • Categories Html

    • Tutorial Terbaru