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

• Analisis PermenPANRB Nomor 7 Tahun 2026 dan Dampak terhadap karier guru dan Pengawas
• Refleksi Pengawas Mutu Pendidikan Madrasah: Pengawasan Yang Memberdayakan
• FGD PKB Digital: Strategi Peningkatan Mutu GTK Madrasah
• JUMAT BERSEPEDA di Madrasah: 9 Nilai Integritas Antikorupsi
• Tips Merancang Implementasi dan Melaksanakan Pendidikan Antikorupsi di Sekolah secara kreatif
• Panduan Pendidikan Antikorupsi di Sekolah: Sebuah Kurikulum Insersi