MENAMPILKAN GAMBAR HTML

Bosan dong kalau tulisan terus isi websitenya. Sekarang kita lihat cara memasukkan gambar di situs kamu dengan HTML.

<img src="https://sko.dev/sumber-gambar.png">

menghasilkan gambar

Tag img tanpa penutup

Tag <img> tidak punya tag penutup seperti ini </img> teman-teman. Kita cukup membuat tag pembuka dengan atribut src.

Atribut src pada tag Img

Atribut src pada tag Img berguna sebagai informasi dari mana sumber gambar yang kita punya. Selama gambarnya berada di internet, kita bisa memasukkan link dari gambar tersebut.

Mengatur lebar pada tag Img

Untuk menentukan ukuran lebar gambar di HTML, kita menambahkan atribut width, yang berisi nilai angka dalam pixel.

<img width="100" src="https://sko.dev/sumber-gambar.png">

menghasilkan gambar

Di contoh ini kita menampilkan gambar sebelumnya dengan lebar 100 pixel. Secara otomatis, tingginya pun ikut disesuaikan.

Mengatur tinggi gambar pada tag Img

Untuk menentukan ukuran tinggi gambar di HTML, kita menambahkan atribut height, yang berisi nilai angka dalam pixel.

menghasilkan gambar

<img height="200" src="https://sko.dev/sumber-gambar.png">

Di contoh ini kita menampilkan gambar sebelumnya dengan lebar 200 pixel. Secara otomatis, lebarnya pun ikut disesuaikan.

Mengatur lebar dan tinggi Img

Sangat disarankan untuk mengatur lebar dan tinggi gambar pada saat ingin menampilkannya. Ini membantu browser untuk menyediakan tempat yang dibutuhkan sesuai ukuran tersebut

<img width="300" height="150" src="https://sko.dev/sumber-gambar.png">

Mengambil gambar dari lokasi relatif

Selain dengan link langsung dari gambar tersebut, jika kita mempunya gambar di folder yang sama di mana HTML kita berada, kita bisa menampilkannya berdasarkan lokasi tersebut.

Contoh stuktur folder kamu seperti ini:

|_ index.html
|_ assets/
    |_ foto1.jpg

Di mana kamu punya gambar yang diletakkan di dalam folder assets yang berada di lokasi sama dengan file index.html . Maka cara mengambilnya

<img width="300" height="150" src="/assets/foto1.jpg">

Lazy loading image

Butuh waktu dan sumber daya untuk menampilkan sebuah gambar. Karena itu penting untuk hanya menampilkan gambar ketika muncul di layar saja. Baca detailnya di sini

Sudah ada cara praktis untuk melakukan ini, yaitu dengan atribut loading='lazy'

<img src="image.jpg" alt="judul gambar" loading="lazy" />

Kamu tidak akan melihat perubahan langsung dengan menambahkan atribut tersebut. Yang dilakukan oleh loading=lazy adalah ia hanya akan memuat gambar ketika dibutuhkan saja, yang akan mempercepat situs kamu dan hemat sumber daya.