HTML Dasar: Berbagai Cara Menampilkan Gambar

Sebuah halaman web tidak mungkin bisa dipisahkan dengan gambar. Halaman web yang berisi hanya teks tanpa gambar akan membuat pengunjung bosan, kalau pengunjung bosan, ia tidak akan betah berlama-lama dan akan buru-buru menekan tombol close tab.

Oleh karena itu: menambahkan gambar ke dalam halaman website adalah suatu yang esensial.

Ada beberapa cara untuk menampilkan gambar di dalam sebuah dokumen HTML.

Tag <img>

Cara yang pertama dan yang paling umum adalah menggunakan tag <img>. Tag <img> membutuhkan setidaknya satu buah atribut yaitu atribut src.

Di mana dalam atribut tersebut, kita mendefinisikan url atau alamat dari gambar yang ingin kita tampilkan.

Misalkan kita ingin menampilkan sebuah gambar dengan url:

https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp

Kita bisa melakukannya seperti ini:

<h3>Tutorial Python Dasar</h3>

<img src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

Hasil keluaran:

Mengatur Ukuran Gambar

Kita bisa mengatur ukuran gambar pada tag <img> dengan dua cara:

1. Menambahkan atribut width atau height.
2. Atau melakukannya dengan CSS.

Perhatikan contoh berikut:

<h3>Mengatur ukuran gambar dengan atribut width/height</h3>

<img
  width="100"
  height="100"
  src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

<h3>Mengatur ukuran gambar dengan css width/height</h3>

<img
  style="width: 150px; height: 150px"
  src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

Hasil keluaran:

Kalau kita perhatikan hasil di atas, gambarnya terlihat penyet karena ukuran rasionya tidak sesuai.

Untuk menghindari hal tersebut, kita bisa mengatur salah satu atribut dengan ukuran auto.

Perhatikan contoh berikut:

<h3>Tinggi auto</h3>

<img
  width="150"
  height="auto"
  src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

<h3>Lebar auto</h3>

<img
  width="auto"
  height="200"
  src="https://jagongoding.com/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

Hasil keluaran:

Pada output di atas, kedua gambar yang kita tampilkan sudah tidak penyet lagi.

Atribut Alternatif alt

Selain atribut height dan width, kita juga bisa menggunakan atribut alt yang berarti alternatif.

Alternatif dari apa?

Alternatif jika gambar yang kita tampilkan ternyata tidak bisa tampil, baik karena koneksi internet bermasalah atau karena url gambar yang kita tulis ternyata tidak benar.

Nah, dalam kondisi ini, browser akan menampilkan isi dari atribut alt sebagai gantinya.

Perhatikan contoh di bawah:

<h3>Upacara Bendera</h3>

<img
  src="url-random.jpeg"
  alt="Ini gambar tiang bendera">

Pada contoh di atas, kita akan menampilkan gambar dengan alamat url-random.jpeg yang sebenarnya tidak ada wujudnya, sehingga browser akan menampilkan tag alt sebagai gantinya.

Perhatikan hasil keluaran berikut:

Bandingkan jika tag <img> ditulis tanpa atribut alt:

<h3>Upacara Bendera</h3>

<img
  src="url-random.jpeg">

Hasil keluaran:

Tidak ada tulisan apa pun, hanya ada gambar pigora pecah.

Tag <figure>

Selain tag <img> “telanjang”, kita juga bisa menambahkan tag <figure> sebagai pembungkus.

Dengan tag <figure>, kita bisa memberikan caption pada gambar yang kita tampilkan.

Perhatikan contoh berikut:

<h3>Gambar Tanpa Caption</h3>

<img
  width="150"
  height="auto"
  src="/storage/2020/09/python-dasar/tutorial-python-dasar.webp">

<h3>Gambar Dengan Caption</h3>

<figure>
  <img
    width="150"
    height="auto"
    src="/storage/2020/09/python-dasar/tutorial-python-dasar.webp">
  <figcaption>
    Gambar 1: tutorial belajar python untuk pemula
  </figcaption>
</figure>

Hasil keluaran:

Secara default tag <figure> akan menambah jarak sebelah kiri beberapa pixel, kita bisa mengaturnya lebih lanjut dengan CSS.

Tag <picture>

Yang terakhir tapi bukan yang paling akhir, kita bisa menampilkan lebih dari satu gambar sesuai dengan ukuran layar.

Maksudnya: untuk layar ukuran besar (desktop), kita bisa meminta browser untuk menampilkan gambar ukuran besar. Sedangkan untuk layar ukuran kecil (seperti di ponsel), kita bisa meminta browser untuk menampilkan gambar yang kecil.

Teknik ini bisa menghemat kuota internet agar pengguna ponsel tidak terlalu banyak mengunduh data.

Perhatikan contoh berikut:

<h3>Kita punya 2 gambar</h3>

<p>
  Gambar satu: <br>

  <img src="https://jagongoding.com/storage/2021/07/html-gambar/merah.webp">
</p>
<p>
  Gambar dua: <br>

  <img src="https://jagongoding.com/storage/2021/07/html-gambar/biru.webp">
</p>

Hasil keluaran:

Sekarang kita ingin gambar merah akan ditampilkan di desktop, sedangkan gambar biru akan ditampilkan di ponsel.

Kita bisa mengubah kode di atas menjadi seperti ini:

<picture>
  <!-- Ukuran minimum 580px -->
  <source
    media="(min-width: 580px)"
    srcset="https://jagongoding.com/storage/2021/07/html-gambar/merah.webp">

  <!-- Ukuran maksimum 579px -->
  <source
    media="(max-width: 579px)"
    srcset="https://jagongoding.com/storage/2021/07/html-gambar/biru.webp">

  <!-- Default -->
  <img src="https://jagongoding.com/storage/2021/07/html-gambar/merah.webp">
</picture>

Hasil keluaran:

Teman-teman silakan resize ukuran browser (jika pakai desktop) dan lihat bahwa gambar yang ditampilkan browser akan berubah: jika ukuran jendela/layar minimal 580px, gambar yang ditampilkan adalah merah, sedangkan sebaliknya jika ukuran maksimal layar/jendela adalah 579px, maka gambar biru yang akan ditampilkan.

Atau teman-teman juga bisa mencoba membuka artikel ini di HP dan juga di Desktop dan temukan perbedaannya.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas list pada dokumen HTML.

Stay tune!