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

• Standar Kompetensi Kepala Satuan Pendidikan (sekolah) pada Permendikdasmen 23 Tahun 2026
• Standar Kompetensi Guru pada Permendikdasmen 23 Tahun 2026
• Standar Kompetensi Pengawas Sekolah Menurut Permendikdasmen 23 Tahun 2026
• 4 Pilar Tindak Lanjut PISA 2025
• Delta Skor dan Absolut Skor dalam Sistem Penjaminan Mutu
• 3 Pintu Masuk Membangun Kredibilitas atau Kepercayaan