HTML Menampilkan Gambar Responsif untuk Blog dan WordPress

06/09/2025 Yunandra 175 Views

Daftar Isi

HTML Menampilkan Gambar Responsif

yunandracom. HTML menampilkan gambar responsif adalah keterampilan dasar yang penting untuk setiap blogger dan pemilik website.

Dengan menampilkan gambar responsif, tampilan blog akan lebih rapi di berbagai perangkat, mulai dari laptop hingga smartphone.

Artikel ini membahas tahapan menampilkan gambar responsif dengan HTML, mulai dari cara paling sederhana hingga teknik modern yang bisa diterapkan di WordPress.

Buku Madrasah Minimalis Strategi Pengembangan Sekolah Unggul Berbasis Islam — **Buku Terbaru**

5 Cara Menampilkan Gambar Responsif menggunakan HTML

Dalam rangka menampilkan gambar yang responsif dengan menggunakan bahasa pemrograman html memiliki beberapa pilihan.

Berikut pilihan menampilkan gambar responsif dengan HTML.

1. Cara Paling Sederhana dengan HTML

Pilihan pertama adalah cara paling mudah. Cukup gunakan tag <img> dengan atribut style untuk membuat gambar responsif.

<img src="https://via.placeholder.com/1200x600.jpg" 
     alt="Gambar contoh" 
     style="max-width:100%; height:auto;">

Keterangan:

src : alamat gambar yang ingin ditampilkan.
alt : deskripsi gambar, penting untuk SEO dan aksesibilitas.
max-width:100% : gambar akan menyesuaikan lebar layar.
height:auto : menjaga proporsi gambar tetap seimbang.

2. Menambahkan Link pada Gambar

Supaya gambar bisa diklik menuju halaman tertentu, tambahkan tag <a> sebagai pembungkus.

<a href="https://contoh.com/halaman-target" target="_blank" rel="noopener">
  <img src="https://via.placeholder.com/1200x600.jpg" 
       alt="Gambar responsif dengan link" 
       style="max-width:100%; height:auto;">
</a>

Keterangan:

<a href=”…”> : link tujuan ketika gambar diklik.
target=”_blank” : membuka link di tab baru.
rel=”noopener” : keamanan tambahan agar tidak ada celah dari tab yang dibuka.
<img …> : gambar tetap responsif dengan CSS inline.

3. Menggunakan CSS Class Global

Jika blog memiliki banyak gambar, lebih efisien memakai class CSS. Tambahkan CSS berikut ke

Cari menu Appearance
Klik Customize
Klik Additional CSS
Tempelkan HTML di bawah ini

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

Lalu gunakan kode ini di posting artikel

<img src="https://via.placeholder.com/1000x500.jpg" 
     alt="Gambar dengan CSS class" 
     class="img-responsive">

Keterangan:

.img-responsive : class CSS yang bisa dipakai berulang.
display:block : menghilangkan jarak kosong di bawah gambar.
Lebih praktis dibanding menulis style di setiap gambar.

4. Alternatif Modern dengan <picture>

Untuk performa maksimal, gunakan format modern WebP dengan fallback JPG.

<picture>
  <source srcset="https://cdn.site.com/foto.webp" type="image/webp">
  <source srcset="https://cdn.site.com/foto.jpg" type="image/jpeg">
  <img src="https://cdn.site.com/foto.jpg" 
       alt="Gambar modern responsif" 
       style="max-width:100%; height:auto;">
</picture>

Keterangan:

<picture> : wadah untuk menampilkan berbagai format gambar.
<source> : mendefinisikan format gambar alternatif.
type=”image/webp” : browser modern akan memilih WebP.
fallback JPG : dipakai jika browser tidak mendukung WebP.
<img> : sebagai default agar tetap tampil di semua browser.

5. Memasang di WordPress dengan Gutenberg

Memasang HTML Gambar Responsif di wordpress dengan Gutenberg melalui langkah berikut.

Buka editor Gutenberg.
Tambahkan block Custom HTML.
Tempel salah satu kode HTML di atas.
Update artikel dan lihat hasilnya di blog.

Ada beberapa catatan tentang menampilkan gambar responsif dengan HTML menggunakan Gutenberg.

Gutenberg mendukung block Custom HTML untuk kode manual.
Bisa dipakai untuk semua cara di atas, baik sederhana maupun modern.
Lebih fleksibel dibanding block bawaan “Image“.

HTML menampilkan gambar responsif bisa dilakukan dengan berbagai cara.

Dari yang paling sederhana menggunakan atribut style, menambahkan link, memakai CSS class global, hingga cara modern dengan <picture>.

Semua tahapan tersebut bisa langsung diterapkan di blog maupun WordPress.

Dengan menampilkan gambar responsif, website akan lebih menarik, mudah dibaca, dan ramah untuk SEO.

Koding : Digital Skills

Lainya

Artikel Terbaru

Ingin Meningkatkan Kompetensi
Secara Mandiri,
Silahkan belajar
di madrasahyunandra.com

Buka