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

• Sosialisasi KMA 512 Tahun 2026 Pedoman KBC di Webinar APPAKSI
• Uji Kompetensi Kenaikan Jabatan Fungsional guru dan pengawas
• Optimalisasi Pembiasaan Pagi dan Program MBG di MA Sultan Hasanuddin
• Manajemen Berbasis Sekolah dan Madrasah: Teori dan Praktik
• Refleksi Paparan Program 100 Hari Kerja: Sistem Penjaminan Mutu Kinerja
• Paparan Program 100 Hari Kerja Kepala Madrasah Baru di DKI Jakarta