Tahukah kamu bahwa lebih dari 65% dari seluruh komunikasi manusia adalah visual?

Dalam dunia web, gambar memiliki peran penting untuk menarik perhatian, menyampaikan informasi, sekaligus meningkatkan estetika sebuah website.

Dari ikon sederhana sampai ilustrasi kompleks, penggunaan image di HTML dapat mengubah halaman web biasa menjadi pengalaman visual yang menarik.

Lantas, bagaimana cara membuat gambar responsif, menambahkan teks alternatif, atau bahkan menggunakan gambar sebagai link? Artikel ini akan menjelaskan segalanya tentang tag HTML image, menunjukkan step-by-step, dan memberi tips untuk memaksimalkan efek visual di website kamu. Yuk, simak!

Pengertian HTML Image

Sebagai bahasa yang digunakan untuk membuat halaman web, HTML memiliki banyak elemen. Salah satu elemen penting dalam HTML adalah menyisipkan gambar untuk membuat halaman web menjadi lebih menarik dan interaktif.

Di sinilah peran dari HTML image atau < img >.

HTML image < img > adalah tag yang berfungsi untuk menambahkan gambar pada halaman web. Tag ini tidak memerlukan penutup dan kamu bisa langsung menambahkannya ke dalam kode HTML.

Sintaks dasarnya adalah < img src ="URL_gambar" >, di mana "URL_gambar" adalah alamat tempat gambar tersebut disimpan.

Misalnya, kamu ingin menambahkan logo perusahaan kamu ke website. Dengan menggunakan  HTML < img >, kamu hanya perlu menuliskan:

Setelahnya, gambar akan muncul tepat di tempat kamu meletakkan kode tersebut.

Selain atribut src, ada juga beberapa atribut lain yang bisa kamu gunakan bersama tag HTML < img >, seperti alt, yang memberikan teks alternatif jika gambar tidak dapat dimuat, dan width serta height untuk mengatur ukuran gambar. 

Contohnya:

Kode di atas akan menampilkan gambar dengan ukuran 100x100 piksel dan teks "Logo Perusahaan" jika gambar tidak bisa ditampilkan.

Syntax untuk Menambahkan HTML Image

Tag HTML < img > digunakan untuk menyisipkan gambar dalam halaman web dan ada beberapa atribut penting yang dapat kamu gunakan bersama dengan tag ini:

• Atribut src (sumber): src adalah atribut wajib yang harus ada dalam tag < img >. Atribut src digunakan untuk menunjukkan alamat URL dari gambar yang ingin ditampilkan. Contoh: ‍

• Atribut alt (alternatif): atribut ini memberikan deskripsi teks untuk gambar yang akan ditampilkan jika gambar tidak dapat dimuat. Ini juga membantu dalam aksesibilitas untuk pengguna dengan keterbatasan penglihatan. Contoh:

• Atribut width dan height: kamu bisa mengatur lebar dan tinggi gambar dengan atribut ini. Nilainya bisa dalam piksel atau persentase. Contoh:

• Atribut title: atribut ini akan menampilkan teks tooltip saat audiens mengarahkan kursor ke gambar. Contoh:

Kombinasi dari tag < img > dan atribut-atribut di atas memungkinkan kamu mengontrol tampilan dan fungsionalitas gambar dalam halaman web.

Cara dan Contoh Menambahkan HTML Image

Ada beberapa langkah dan atribut yang perlu kamu pahami untuk membuat tampilan gambar sesuai keinginan. Mari kita jelajahi cara-cara ini:

#1 Menentukan sumber gambar menggunakan atribut src

Untuk memasukkan gambar ke halaman web, kamu harus menentukan di mana gambar tersebut berada. Ini dilakukan dengan atribut src:

• Pilih gambar yang ingin ditampilkan: pastikan kamu memiliki gambar yang ingin ditampilkan di website. Gambar ini bisa berada di direktori yang sama dengan file HTML atau di URL lain di internet.
• Siapkan tag HTML untuk gambar: Di dalam kode HTML kamu, mulailah dengan menulis tag <img> dimana kamu ingin gambar ditampilkan.
• Tambahkan atribut src: dalam tag < img >, tambahkan atribut src dan tetapkan nilai yang sesuai dengan lokasi gambar.

Contoh penggunaan:

Kamu memiliki file jenis gambar dengan nama gambar_bunga.png.

• Jika gambar berada dalam direktori yang sama dengan file HTML, cukup masukkan nama file dan ekstensi.
• Jika gambar berada dalam subfolder, tambahkan path folder tersebut.
• Jika kamu ingin menggunakan gambar dari URL lain, masukkan URL lengkap.

Berikut contoh kode dan output yang akan ditampilkan di browser:

Kode:

Output:

#2 Mengatur dimensi gambar dengan atribut width dan height

Kamu dapat menentukan ukuran gambar dengan mengatur lebar (width) dan tinggi (height). Berikut langkah-langkahnya:

• Pilih gambar yang ingin ditampilkan: temukan gambar yang ingin kamu tampilkan dalam halaman web.
• Buat tag HTML untuk gambar: mulailah dengan menulis tag < img > di tempat kamu ingin gambar ditampilkan dalam kode HTML.
• Tentukan sumber gambar dengan atribut src: gunakan atribut src untuk menunjukkan lokasi file gambar. Contoh: < img src= "gambar.png" >.
• Tambahkan atribut width dan height: Dalam tag < img >, tambahkan atribut width (untuk lebar gambar) dan height (untuk panjang gambar) dalam piksel.
• Pertimbangkan aspek rasio: pastikan untuk menjaga aspek rasio gambar agar tidak terdistorsi. Jika kamu menentukan salah satu dari width atau height, browser biasanya akan menghitung yang lain secara otomatis untuk menjaga aspek rasio.

Contoh penggunaan:

Syntax:

Output:

#3 Menambahkan teks alternatif dengan atribut alt

Tidak semua orang dapat melihat gambar di halaman web, terutama audiens dengan keterbatasan penglihatan atau jika gambar gagal dimuat. Oleh sebab itu, penting untuk menyediakan teks alternatif dengan menggunakan atribut alt.

Selain itu, teks alternatif juga penting untuk SEO. Mesin pencari menggunakan teks alternatif untuk mengerti konten gambar, yang bisa meningkatkan peringkat halaman web kamu.

Contohnya, kita memiliki kode berikut:

Output:

Dikarenakan kita mengosongkan src, gambar gagal ditampilkan. Namun, teks alternatif menjelaskan bahwa gambar kita adalah sebuah bunga berwarna ungu.

#4 Menentukan gaya CSS untuk gambar dengan atribut style

Kamu juga dapat menambahkan gaya CSS langsung ke tag gambar dengan menggunakan atribut style.

Berikut contoh penggunaan semua atribut yang telah dijelaskan dalam satu tag gambar.

Kode:

Kode ini akan memberikan border berwarna biru di sekitar gambar.

Output:

{{COMPONENT_IDENTIFIER}}

Cara Menambahkan Link dengan HTML Image

Salah satu fitur menarik dalam pengembangan web adalah kemampuan mengkombinasikan gambar dengan link. Artinya, kamu bisa membuat gambar yang ketika diklik akan mengarahkan audiens ke halaman web lain atau URL tertentu.

Cara ini bagus jika kamu ingin meningkatkan interaksi dan navigasi pada website kamu. Berikut cara melakukannya:

• Menambahkan gambar sebagai link: selain memerlukan tag < img >, kamu juga perlu tag < a > untuk menggunakan gambar sebagai link. Tag < a > adalah tag untuk membuat hyperlink. Di sini, kamu akan menyisipkan tag < img > di dalam tag < a >.
• Menentukan URL tujuan: URL atau alamat web tujuan didefinisikan dalam atribut href dari tag < a >. Ini adalah alamat yang akan dituju ketika audiens mengklik gambar.
• Menyisipkan gambar: di dalam tag < a >, kamu menambahkan tag < img > seperti biasa, dengan semua atribut yang diperlukan seperti src, alt, width, dan height.

Cara Membuat Responsive Image

Saat ini, orang-orang mengakses website dari berbagai perangkat, mulai dari desktop, tablet, maupun smartphone. Sebagai web developer, kita perlu membuat gambar yang ukuran dan tampilannya sesuai dengan ukuran layar perangkat yang digunakan audiens.

Berikut cara membuat responsive image:

#1 Menggunakan atribut width dan height

Kamu bisa mengatur lebar (width) dan tinggi (height) gambar dalam persentase, sehingga ukuran gambar akan mengikuti lebar kontainer yang mengandungnya. Contoh, kode < img src="gambar_bunga.png" width="100%" > akan selalu mengisi 100% lebar kontainer.

#2 Menggunakan CSS media queries

Agar mendapatkan kontrol yang lebih baik, kamu bisa menggunakan media queries dalam CSS untuk mengubah ukuran atau properti gambar berdasarkan ukuran layar. 

Contoh kode:

Kode di atas akan membuat semua gambar berukuran penuh pada layar yang lebarnya tidak lebih dari 600 piksel.

Untuk mempelajari media queries lebih detail, kamu bisa mengunjungi link berikut.

#3 Menggunakan atribut srcset

Atribut srcset dalam tag < img > memungkinkan kamu menentukan beberapa versi gambar untuk layar dengan resolusi berbeda. Browser akan memilih gambar yang paling cocok berdasarkan resolusi layar dan skala perangkat.

Contoh kode:

Di sini, browser akan memilih "gambar_kecil.jpg" untuk layar dengan lebar maksimum 500 piksel dan "gambar_besar.jpg" untuk layar dengan lebar maksimum 1000 piksel. Sementara "gambar_default.jpg" adalah gambar cadangan jika browser tidak mendukung srcset.

Tips Menambahkan Gambar di HTML

Menambahkan image ke dalam HTML merupakan salah satu cara terbaik untuk membuat website lebih menarik dan informatif. Namun, ada beberapa best practice yang harus diikuti untuk memastikan bahwa gambar ditampilkan dengan benar dan efisien.

Berikut beberapa tips yang dapat membantu:

• Gunakan format yang tepat: pilih format gambar yang sesuai dengan kebutuhan kamu. Namun, format terbaik untuk image di web adalah WEBP karena meskipun ukurannya kecil, kualitas gambar tidak akan menurun.
• Optimalkan ukuran gambar: ukuran file gambar yang besar bisa memperlambat waktu pemuatan halaman. Gunakan alat optimasi gambar untuk mengurangi ukuran file tanpa mengorbankan kualitas.
• Tentukan dimensi gambar: selalu tentukan atribut width dan height dalam tag < img >. Penentuan ini membantu browser dalam merender layout halaman lebih cepat karena tidak perlu menunggu gambar dimuat untuk mengetahui dimensinya.
• Gunakan teks alternatif: selalu tambahkan atribut alt dengan deskripsi yang relevan dan informatif. Alt membantu dalam aksesibilitas, SEO, serta memberikan konteks jika gambar gagal dimuat.
• Buat gambar responsif: gunakan teknik seperti persentase dalam width atau atribut srcset untuk memastikan gambar terlihat baik di semua ukuran layar.
• Jangan gunakan gambar untuk teks: gunakan teks HTML dan CSS untuk styling, bukan menyimpan teks dalam gambar. Teks dalam gambar sulit dibaca oleh mesin pencari dan alat bantu aksesibilitas.
• Hindari penggunaan gambar sebagai tombol link: meskipun kamu dapat menggunakan gambar sebagai link, pertimbangkan untuk menambahkan efek styling dengan CSS. hal ini memastikan tombol tetap fungsional jika gambar gagal dimuat.
• Tes di beberapa browser: pastikan untuk menguji tampilan gambar di berbagai browser dan perangkat untuk memastikan konsistensi tampilan.
• Gunakan atribut loading (jika diperlukan): untuk gambar yang besar atau banyak, pertimbangkan penggunaan atribut loading="lazy" agar melambatkan pemuatan gambar sampai pengguna scroll ke lokasi gambar tersebut.
• Pertahankan hak cipta: pastikan kamu memiliki hak untuk menggunakan gambar tersebut dan berikan kredit yang tepat jika diperlukan.

FAQ (Frequently Ask Question)

Apa format gambar yang paling sering digunakan dalam HTML?

Format gambar yang paling umum digunakan adalah JPEG, PNG, GIF, dan SVG. Pilihlah format yang sesuai dengan kebutuhan dan karakteristik gambar.

Bagaimana cara mengatur posisi gambar di halaman?

Untuk mengatur posisi gambar di halaman, kamu dapat menggunakan properti di CSS, termasuk posisi, margin, padding, dan properti lainnya untuk mengatur tampilan gambar dalam layout halaman.

Penutup

Kita telah membahas banyak hal tentang HTML image, mulai dari pengertian dasar tag HTML, sintaks, cara menambahkan dan mengatur gambar, sampai best practice pengelolaan visual di website.

Gambar bukan hanya sekedar dekorasi; ini adalah alat komunikasi yang dapat meningkatkan pengalaman pengguna, aksesibilitas, bahkan SEO. Dengan menerapkan pengetahuan yang telah kita pelajari, kamu bisa mengintegrasikan gambar dalam website secara tepat dan efektif.