Cara Menambahkan Gambar di HTML, No Ribet!

Palingit.com – Cara Menambahkan Gambar di HTML – Website akan lebih cantik dan menarik jika ditambahkan gambar yang mendukung. Sebab, jika tak ada visual gambar sekali, website akan terasa hambar dan membosankan. Sehingga visitor atau pengunjung tak betah berlama-lama di dalam website tersebut. Nah, untuk membuat website yang menarik, pastikan menambahkan gambar yang sesuai dengan tema website kamu.

Untuk kamu yang masih pemula dan mencari tahu cara menambahkan gambar di HTML, jangan lewatkan step by step-nya di sini!

Hingga saat ini, HTML memang merupakan bahasa pemrograman untuk membentuk website yang paling efektif. Menurut beberapa sumber, sekitar 90,4% website di seluruh dunia menggunakan HTML. Oleh karena itu, kamu harus tahu tutorial menambahkan gambar di HTML dan cara mengaturnya di sini!

Table of Contents

Cara Memasukkan Gambar di HTML

Agar tidak terjadi error saat memasukkan gambar saat kamu menggunakan HTML, pastikan menyimak baik-baik tutorial berikut ini.

1. Pilihlah Format Gambar yang Sesuai

Cara pertama yang harus kamu perhatikan adalah dengan memperhatikan format gambarnya, apakah sudah sesuai dengan website kamu. Sebab jika kamu salah memasukkan format gambarnya pada dokumen HTML, yang terjadi adalah kegagalan upload gambar.

Akibatnya, gambar tidak akan muncul di halaman website kamu. Berikut format gambar yang harus kamu perhatikan:

APNG = .apng

GIF = .gif

ICO = .ico , .cur

JPEG = .jpg , .jpeg , .jfif , .pjpeg , .pjp

PNG = .png

SVG = .svg

WebP = .jpg

Perhatikan dan hafalkan kode masing-masing format gambarnya. Di antara semua format gambar tersebut, yang paling terkini adalah format Webp. Format gambar ini baru dikeluarkan oleh Google, sehingga browser yang lama tak bisa menampilkan format gambar tersebut.

2. Masukkan Atribut untuk Tag <img>

Salah satu komponen penting dalam HTML adalah atribut. Dalam proses menambahkan gambar dalam HTML, kamu membutuhkan atribut tertentu untuk tag <img>.

Secara umum ada 4 atribut yang kerap digunakan pada tag image. Atribut-atribut tersebut adalah atribut alt, width, height, dan style. Mari kita praktikkan masing-masing atributnya.

Atribut Alt

Fungsi dari atribut alt adalah menambahkan teks alternatif pada gambar ketika terjadi kegagalan penampilan gambar. Kita lihat contoh berikut:

Maka nanti akan menampilkan seperti ini:

Sebagai disclaimer, sengaja tidak kami kosongkan nilai atribut src-nya, supaya gagal menampilkan gambar dan muncul teks alternatifnya. Sebab, tujuannya adalah untuk atribut alt dan memberikan teks alternatif ketika gambar gagal ditampilkan.

Perlu diketahui bahwa atribut alt ini tidak wajib kamu gunakan. Akan tetapi lebih baik tetap menggunakan, karena teks alternatif dapat berfungsi untuk meletakkan keyword SEO.

Atribut Width dan Height

Sesuai dengan namanya, dua atribut ini berguna untuk mengatur ukuran lebar dan tinggi gambar. Kita lihat demo berikut ini:

Ini langkah-langkah yang bisa kamu lakukan:

Untuk memanggil gambar dari tempat penyimpanan atau link yang mengarah ke gambar tersebut, gunakan atribut src, seperti contoh di atas.
Lalu masukkan nama file gambar yang ada dalam folder atau link gambarnya.
Kemudian angka setelah atribut width dan height adalah nilai pixel gambarnya. Kamu bebas mengisi berapa pixel, yang penting sesuai dengan kebutuhan gambar di dalam laman web. Dari contoh syntax di atas, akan menghasilkan gambar seperti ini:

Atribut Style

Atribut ini sesuai dengan namanya, berfungsi memberikan bentuk atau style gambar. Lihat contoh berikut:

Hasilnya akan seperti ini:

Untuk atribut style ini banyak sekali modelnya, bisa kamu cari kodenya di Google sesuai kebutuhanmu.

Cara Membuat Gambar Background

Bahasan ini sebenarnya masuk pada topik CSS, namun tidak kita bahas di sini karena masih menggunakan HTML. Kamu pasti pernah menemukan beberapa website dengan background webnya yang menggunakan gambar tertentu.

Jika gambarnya sesuai dengan apa yang menjadi tema utama websitenya, maka akan sangat menarik. Jika kamu ingin menambahkan gambar background pada website kamu, kamu bisa mengikuti cara berikut ini:

Masukkan atribut background-image
Kemudian isi dengan url gambar atau nama file gambar.
Pastikan format gambarnya tidak salah ya. Lihat contoh berikut:

Hasilnya seperti ini:

Gambar di atas hanya sekadar contoh saja. Tentunya kamu bisa memilih gambar yang pas dan lebih menarik untuk background web.

Cara Membuat Link pada Gambar

Ketika kamu mengeklik gambar dalam suatu web, kemudian laman web kamu akan diarahkan secara otomatis ke halaman web lainnya. Maka, sebenarnya terdapat link pada gambar tersebut.

Kamu juga bisa membuat link pada gambar di website melalui HTML, dengan cara:

Tambahkan tag <a> yang digabungkan dengan tag <img>.
Prosedurnya tag <a> harus mengurung atau mengapit tag <img>.

Misalnya sebagai berikut:

Di atas kami tambahkan link salah satu website tentang travel di Indonesia. Maka nanti ketika kamu mengeklik gambarnya, akan otomatis diarahkan ke halaman web yang ditunjukkan link tersebut. Seperti ini hasilnya:

Ketika di klik gambarnya maka akan di direct ke halaman web sesuai linknya, berikut penampakannya:

Lihatlah link halaman tersebut sama dengan link yang kami masukkan di tag <a> di atas.

Beberapa Tag Tambahan untuk Gambar di HTML5

HTML5 merupakan HTML versi yang terbaru, namun yang masih umum dan secara masif digunakan adalah HMTL biasa. Nah, tidak ada salahnya kamu tahu beberapa tag untuk gambar di HTML 5.

Ada dua tag tambahan untuk gambar di HTML 5, yaitu tag <figure> dan tag <picture>. Mari kita terapkan masing-masing tag tersebut.

1. Tag Figure

Fungsinya adalah untuk memberikan bingkai terhadap gambar atau tag <img>, yang mana bingkai tersebut berupa teks caption. Sebagaimana yang umum diketahui, bahwa teks caption adalah teks yang berisi deskripsi atau penjelas gambar.

Untuk teks caption, kamu bisa menggunakan tag <figcaption>. Misalnya sebagai berikut:

Maka tampilan gambarnya akan ada teks caption di bawahnya. Berikut ini hasilnya:

2. Tag Picture

Beberapa website ada yang sangat baik tampilannya jika diakses melalui PC atau laptop. Namun ketika diakses melalui smartphone, kadang kala ada yang berantakan tampilannya.

Hal ini karena tampilan webnya belum diatur, sehingga bisa responsif sesuai dengan perangkat yang mengaksesnya. Nah, problem tersebut dijawab oleh tag <picture> ini. Fungsinya adalah mengatur gambar mana saja yang akan tampil dalam ukuran tertentu sesuai layarnya.

Agar kamu lebih paham, perhatikan contoh berikut: