HTML Gambar Responsif: Cara Mengatur Gambar di Semua Device

yunandracom. HTML Gambar responsif sangat penting dalam desain web modern. Salah satu elemen utama adalah gambar responsif, agar tampilan website tetap rapi di desktop, tablet, maupun mobile.

Tanpa pengaturan yang baik, gambar bisa pecah, terlalu besar, atau tidak sesuai layar pengguna.

Langkah-Langkah Membuat Gambar Responsif dengan HTML

Mengatur gambar responsif di website sangat penting minimal karena 3 alasan, yaitu:

• User experience lebih baik di semua perangkat.
• Website tampil profesional dan mudah diakses.
• Membantu meningkatkan SEO karena Google mengutamakan mobile friendly

Langkah-Langkah Membuat Gambar Responsif dengan HTML

1. Gunakan CSS max-width dan height:auto

Langkah pertama adalah mengguna koding di CSS yaitu “max-width” dan “height:auto“. Adapun koding dasar agar gambar menyesuaikan layar seperti di bawah ini.

<img src="gambar.jpg" alt="Contoh gambar responsif" style="max-width:100%; height:auto;">

2. Tambahkan Class CSS Responsif

Selain menggunakan HTML di CSS menggunakan “max-width” dan “height:auto“, Dapat juga menggunakan koding di class. Tampilan gambar responsif menjadi lebih rapi.

<style>
.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
}
</style>

<img src="gambar.jpg" alt="Gambar Responsif" class="responsive-img">

3. Menggunakan HTML <picture> untuk Ukuran Berbeda

HTML gambar responsif dapat tampil secara optimal dengan ukuran berbeda sesuai perangkat.

Kode HTML yang sesuai perangkat bisa lihat di bawah ini

<picture>
  <source media="(max-width: 600px)" srcset="gambar-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="gambar-tablet.jpg">
  <img src="gambar-desktop.jpg" alt="Gambar Responsif">
</picture>

Untuk menampilakan gambar responsif secara optimal, dapat mengikuti tips di bawah ini.

• Kompres gambar agar loading cepat.
• Gunakan format modern seperti WebP.
• Tambahkan atribut alt untuk SEO.

Koding : Digital Skills

Lainya

Artikel Terbaru

• Pemikiran Pendidikan Menteri Agama di Acara Peresmian Gedung Perpustakaan MAN 23 Al Azhar
• Menteri Agama: Siswa MAN 23 (MAYASYA) Harus Kuasai Bahasa Asing
• Gedung Laboratorium dan Perpustakaan: Dampak Terhadap Mutu MAN 23 Al Azhar Asy Syarif
• Refleksi Efektivitas Anggaran dalam Peningkatan Mutu di MA Sultan Hasanuddin Jakarta Selatan
• Refleksi Pidato Menteri Hardiknas 2026: Mindset, Mental dan Misi Pendidikan Indonesia
• Strategic Luck Prof. Jiang: Implementasi di Pendidikan Islam