Masih banyak yang tidak tahu bagaimana cara menggunakan HTML gambar. Dengan memakainya, kamu bisa menambahkan gambar di website via HTML.
Penggunaan html image ini sangat berguna kalau terjadi masalah saat mengupload gambar secara manual. Awal-awal memang sedikit sulit karena harus menggunakan bahasa pemrograman, tapi jika sudah terbiasa maka kamu juga bisa.
Selain itu, kamu juga bisa mengatur posisi gambar agar pas. Pada artikel ini, kita akan belajar bagaimana cara menambahkan gambar di HTML.
Cara Menambahkan HTML Gambar
Pemberian gambar melalui HTML ini disebut juga sebagai HTML embed image Untuk menambahkan gambar atau foto via HTML, ada beberapa cara yang dapat kamu lakukan yaitu:
1. Menggunakan Tag <img>
Kamu dapat memakai tag <img> untuk dapat menambahkan gambar. Supaya bisa tampil, kamu juga harus menambahkan atribut wajib yaitu src.
Apabila tidak ada atribut tersebut maka gambar tidak akan bisa ditampilkan. Seperti ini penerapannya.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Gambar Kucing Lucu</title>
</head>
<body>
<h1>Kucing Lucu</h1>
<p>Berikut ini adalah kucing lucu dan menggemaskan.</p>
<p> <img src=”#” /> </p>
</body>
</html>
Tanda # bisa kamu ganti dengan link sumber gambar yang nantinya akan kamu pasang. Gambar ini ketika dibuka akan muncul di browser.
2. Mengatur Dimensi Gambar
Perlu kamu ketahui, jika hanya melakukan cara pertama maka tampilan gambar masih belum rapi. Maka dari itu, kamu harus mengatur dimensi gambar terlebih dahulu.
Kamu dapat menetapkan ukuran gambar dengan memanfaatkan lebar (width) dan tinggi (height). Berikut ini cara mengatur ukuran gambar di HTML
- Temukan gambar yang akan kamu tampilkan.
- Membuat tag HTML gambar, yaitu img.
- Gunakan atribut src untuk menunjukkan lokasi gambar.
- Berikan atribut width dan hight.
- Pastikan memperhatikan aspek rasio supaya tidak terdistorsi.
Berikut ini penerapan sintaksnya:
<img src=”#” width=”300″ height=”150″/>
Tanda # bisa kamu ganti dengan link sumber tempat kamu menyimpan gambar. Dan gambar tersebut memiliki ukuran 300 x 150 px. Kamu bisa menyesuaikan ukurannya sesuai kebutuhan dengan cara mengubahnya pada bagian HTML image size.
3. Menambahkan Teks Alternatif
Penambahan teks alternatif memang bukan keharusan, namun dengan menambahkannya dapat menjelaskan konten gambar terutama bagi orang-orang yang memiliki keterbatasan penglihatan atau ketika gambar tidak bisa muncul.
Selain itu, pemberian teks alternatif ini juga bermanfaat untuk meningkatkan peringkat halaman website di mesin pencari. Untuk menambahkan teks alternatif, kita membutuhkan atribut alt.
Berikut ini penerapan html image tag yang memiliki tambahan teks alternatif.
<img src=””alt=”sebuah mawar berwarna merah”/>
Kode HTML gambar tersebut memiliki arti bahwasanya gambar yang ditampilkan adalah satu mawar yang berwarna merah. Dan alangkah lebih baiknya jika penulisan atribut teks alternatif benar-benar harus menyesuaikan dengan gambar sesungguhnya.
Seperti pada contoh, jika gambarnya adalah gambar bunga mawar, maka penulisan teks alternatifnya harus kata-kata yang mengandung mawar atau bunga mawar. Jika ada tambahan, tambahkan saja.
4. Penambahan CSS
Selain HTML gambar, supaya tampilan gambar semakin cantik kamu bisa menambahkan CSS. Dalam penerapannya, kamu dapat menggunakan atribut style.
Berikut ini cara memasukan gambar di HTML dan CSS.
<img src=”#” width=”300″ height=”150″
alt=”Sebuah bunga mawar berwarna merah muda” style=”border: 7px solid blue;”
Pada kode HTML dan CSS tersebut, tanda # bisa kamu ganti dengan gambar. Angka 300 dan 150 bisa kamu ubah sesuai dengan ukuran gambar yang kamu miliki.
Cara mengecilkan gambar di HTML, kamu tinggal mengubah saja angka 300 atau 150 dengan angka yang lebih kecil. Misalnya, 200 dan 100 supaya tampilannya lebih kecil.
Sedangkan pada tulisan “sebuah mawar merah muda” bisa kamu sesuaikan dengan gambar yang ada.
Sementara itu, arti kode style=”border: 7px solid blue adalah adanya border berwarna biru di sekitar gambar dengan ketebalan 7 px.
5. Menambahkan Link dengan HTML Gambar
Pada sebuah gambar, kamu dapat memasang link yang nantinya mengarah ke laman atau website tertentu. Selain itu, tautan tersebut bisa diarahkan ke laman lainnya pada website.
Berikut ini cara mengaplikasikan html image link atau clickable image html sehingga gambar kamu bisa memiliki tautan.
Tambahkan gambar sebagai link, yang mana dalam hal ini kamu membutuhkan tag <img> dan tag <a>. Tag < a > inilah yang berfungsi untuk membuat hyperlink.
Menentukan URL tujuan yang didefinisikan dalam atribut href dari tag < a >. URL inilah yang akan dituju ketika pengunjung mengklik gambar.
Menyisipkan gambar dengan tag <img> serta beberapa atribut yang diperlukan seperti src, alt, width, dan height. Seperti inilah contoh penerapannya.
<a href=”https://www.contoh.com”> <a>
<img src=”#” alt=”Deskripsi Gambar”> </a> width=”400″ height=”150″ style=”border: 7px solid blue;”
Link https://www.contoh.com bisa kamu sesuaikan dengan link yang akan kamu arahkan. Sementara itu pada bagian lainnya juga dapat kamu sesuaikan dengan kebutuhan dan gambar yang terpasang.
6. Membuat Responsive Image
Responsive image adalah suatu kondisi yang mana gambar bisa memiliki ukuran menyesuaikan dengan berbagai perangkat mulai dari desktop, tablet, maupun smartphone.
Jadi saat gambar kamu buka di smartphone, maka ukurannya menyesuaikan seperti ukuran layar smartphone. Begitu halnya ketika kamu membuka gambar di tablet dan desktop.
Seperti inilah cara membuat responsive image yang dapat kamu lakukan:
- Atur lebar dan tinggi gambar presentase sehingga ukuran gambarnya akan menyesuaikan. Kamu dapat menggunakan kode < img src=”gambar.png” width=”100%” >
- Gunakan media queries dalam CSS untuk mengubah ukuran atau properti gambar sesuai ukuran layar. Berikut ini contoh kodenya.
data@media only screen and (max-width: 500px) {
img {
width: 100%;
}
}
Kode tersebut membuat gambar berukuran penuh pada layar yang lebarnya tidak melebihi 500 piksel.
- Gunakan atribut srcset yang berfungsi menetapkan beberapa versi gambar untuk layar beresolusi berbeda. Nantinya browser akan memilih gambar yang paling cocok dengan skala perangkat dan resolusi layar.
<img srcset=”foto_kecil.png 500w, foto_besar.png 1000w”
src=”gambar.png” alt=”Contoh gambar responsif”>
Berdasarkan kode tersebut, browser akan memilih “foto_kecil.png” untuk layar dengan lebar maksimum 500 piksel dan “foto_besar.jpg” untuk layar dengan lebar maksimum 1000 piksel.
Sementara itu, “gambar.png” adalah gambar cadangan apabila browser yang kamu gunakan tidak mendukung srcset.
7. Mengatur Posisi Gambar
Melalui tag html, kamu dapat mengatur posisi gambar. Sebagai contoh, jika kamu ingin memposisikan gambar di tengah maka bisa menggunakan HTML center image.
Untuk posisi sebelah kiri kamu bisa memakai atribut align left dan sebelah kanan menggunakan atribut align right. Berikut ini cara mengatur posisi gambar di HTML.
<title> Gambar Burger Sebelah Kanan </title>
<h2>Ini adalah contoh posisi gambar burger di kanan</h2>
<img src=”#” align=”right”>
Kode tersebut akan menampilkan gambar di sebelah kanan. Apabila kamu ingin menampilkannya di kiri, maka ganti right dengan left dan jika ingin di tengah bisa diganti dengan center.
8. Memberikan Teks di Dalam Gambar
Pada gambar, kamu dapat menambahkan teks atau tulisan apabila kamu membutuhkannya. Cara membuat tulisan di dalam gambar HTML, kamu juga membutuhkan CSS supaya semakin rapi.
Berikut ini contoh kode yang bisa kamu gunakan untuk memberikan teks di dalam gambar.
<html>
<head>
<style>
.geekforgeek {
position: relative;
width: 100%;
text-align: center;
}
.text-container {
position: absolute;
color: rgb(255, 255, 255);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgba(41, 41, 41, 0.8);
padding: 0.5rem;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div class=”geekforgeek”>
<img src=”geekforgeek.png”
style=”width: 50%; height: 60px;”>
<div class=”text-container”>
<h3>Sample</h3>
<p>Gambar Gunung dan Sungai</p>
</div>
</div>
</body>
</html>
Kode tersebut akan menampilkan teks atau tulisan dengan posisi berada di tengah. Kalau kamu ingin memposisikan di kanan, tinggal ganti center dengan right. Untuk tampilan lainnya bisa kamu sesuaikan sendiri.
9. Menambahkan Background
Selain cara memanggil gambar di HTML, kamu juga harus tahu bagaimana caranya menambahkan background atau latar belakang.
Dalam penerapannya kamu membutuhkan style atribut dan CSS background-image. Berikut ini contoh kode HTML background image.
<p style=”background-image: url(‘gambar.jpg’);”>
Atau kamu dapat menuliskannya seperti ini.
<style>
p {
background-image: url(‘gambar.jpg’);
}
</style>
Sementara itu, untuk membuat latar belakang atau background transparan, kamu bisa menggunakan opacity image HTML. Berikut ini beberapa contoh penerapannya.
img {opacity: 0.5;}
img {opacity: 0.5;} img:hover {opacity: 1.0;}
10. Menambahkan Tombol
Melalui HTML, kamu bisa membuat gambar tombol khusus. Tombol ini nantinya bisa kamu aplikasikan pada bagian-bagian tertentu di website.
Untuk memasangnya, kamu memerlukan image button HTML. Berikut ini contoh kodenya.
<html lang=”en”>
<head>
<style>
*{
margin: 0;
padding: 0;
}
div{
display: flex;
justify-content: center;
align-items: center;
margin:40px;
}
button{
border: none;
cursor: pointer;
appearance: none;
background-color: inherit;
transition: transform .7s ease-in-out;
margin-left:10px;
}
button:hover{
transform: rotate(360deg);
}
img{
width: 70px;
height: 70px;
}
input[type=”email”]{
padding:10px;
border:2px solid #314de4;
outline :none;
border-radius:5px;
font-size:24px;
color:#314de4;
}
.text{
font-size:60px;
color:#314de4;
font-family:Arial;
}
</style>
</head>
<body>
<div class=”text”>Subscribe To Newsletter</div>
<div>
<input type=”email” placeholder=”Enter Email”/>
<button type=”submit”>
<img src=”button.png” alt=”buttonpng” border=”0″ />
</button>
</div>
</body>
</html>
Kode di atas berfungsi untuk menampilkan tombol newsletter pada website. Kamu juga dapat menyesuaikannya sendiri sesuai kebutuhan.
11. Pembuatan Floating Image
Pemasangan floating HTML gambar membuat gambarnya terlihat semakin rapi. Atribut floating membuat tulisan berada pada posisi yang pas tanpa menabrak gambar. Kamu bisa menggunakan kode berikut ini.
<p>Floating gambar sebelah kanan<img src=”langit.png” style=”float:right;width:45px;height:45px;”></p> <p>Floating gambar sebelah kiri<img src=”langit.png” style=”float:left;width:45px;height:45px;”></p>
Float:right akan memunculkan gambar floating di sebelah kanan, sedangkan float:left akan muncul di sebelah kiri.
Tidak sulit bukan, sob? Demikian penjelasan mengenai HTML gambar dan cara penerapannya.
FAQ
Apa saja format gambar yang bisa saya pasang di website?
Ada banyak format gambar yang bisa kamu pasang. Tetapi, beberapa yang sering digunakan yaitu JPG, JPEG, PNG, WEBP, dan GIF. JPG, JPEG, WEBP dan PNG untuk gambar statis dan GIF untuk gambar bergerak.
Apa format gambar terbaik untuk website?
WEBP adalah format gambar paling bagus untuk web. Hal ini dikarenakan meskipun ukurannya kecil tidak akan mengurangi kualitasnya. Sayangnya, WEBP tidak support di semua browser.
Berapa ukuran gambar yang pas untuk website?
Tidak aturan baku, tetapi kamu tetap harus menyesuaikannya sesuai kebutuhan.
