6 Cara Memasukkan Gambar di HTML, Ternyata Praktis!

Kenapa kamu wajib tahu cara memasukkan gambar di html? Dalam mengoptimasi konten website, memasukkan gambar ke dalamnya ternyata penting banget! Coba bayangkan, seandainya kamu harus membaca artikel yang hanya menyajikan tulisan panjang.

Pastinya, kamu akan merasa bosan dan nggak mendapatkan manfaatnya, kan? Tentunya, output berbeda akan kamu dapatkan dengan menggunakan gambar.

Gambar pada sebuah konten situs, baik dalam bentuk foto maupun ilustrasi nggak hanya berfungsi sebagai penghias saja. Tapi, pembaca juga bisa mendapatkan informasi tambahan yang dapat memperkuat kontenmu.

Nah, dengan mengetahui cara memasukkan gambar di html, kamu bisa mendapatkan lebih banyak keuntungan dalam hal meningkatkan kekuatan SEO situsmu. Yuk, simak penjelasan lebih lengkap berikut.

Kenapa Harus Tahu Cara Memasukkan Gambar di HTML?

Kamu bertanya-tanya tentang kenapa wajib banget tahu cara memasukkan gambar di html? Untuk memasukkan gambar ke dalam konten, kamu memang bisa menggunakan beberapa cara.

Bahkan, beberapa platform menyediakan cara input gambar yang gampang banget dengan cukup memencet tombol “Upload” saja. Lalu, kenapa mengetahui cara mengunggah gambar lewat kode HTML itu penting banget.

Jawabannya, HTML merupakan kode atau tag yang paling umum kamu gunakan untuk membangun sebuah struktur website. Bahkan, diperkirakan sekitar 90% website dari seluruh dunia menggunakan prinsip HTML.

Nah, makanya, dengan mengetahui cara memasukkan gambar di html, tentunya akan mempermudah kamu dalam me-manage berbagai website berbasis HTML manapun.

Format Gambar yang Didukung HTML

Saat kamu belajar cara memasukkan gambar di HTML, penting untuk memahami format gambar apa saja yang dapat digunakan agar tampil optimal di berbagai perangkat dan browser.

HTML sendiri tidak membatasi format gambar tertentu. Artinya, agen pengguna (seperti browser) bebas mendukung berbagai jenis format gambar sesuai kebutuhannya.

Karena itu, kamu perlu memilih format yang tepat agar gambar tampil dengan baik dan tidak memberatkan halaman web.

Beberapa format gambar yang umum digunakan di web antara lain:

• JPEG: cocok untuk foto atau gambar diam dengan banyak warna. Ini adalah format paling populer karena ukuran file yang kecil hasil dari kompresi lossy.
• PNG: pilihan ideal jika kamu butuh gambar berkualitas tinggi tanpa kehilangan detail. Format ini mendukung transparansi dan cocok untuk ikon atau logo.
• GIF: meski ketinggalan zaman, GIF masih dipakai untuk animasi sederhana. Tapi kalau kamu ingin animasi lossless yang lebih ringan, cobalah APNG.
• WebP dan AVIF: dua format modern ini sangat direkomendasikan. Mereka menawarkan kualitas tinggi dengan ukuran file kecil, baik untuk gambar diam maupun animasi.
• SVG: gunakan format ini untuk gambar vektor seperti logo atau ikon. SVG dapat diskalakan tanpa kehilangan kualitas, sangat cocok untuk desain responsif.

Saat kamu menerapkan cara memasukkan gambar di HTML, pastikan format yang digunakan kompatibel dengan browser yang ditargetkan. Misalnya, tidak semua browser lama mendukung AVIF atau WebP.

Karena itu, memahami kelebihan dan keterbatasan tiap format akan membantu kamu memilih opsi terbaik.

Agar hasilnya maksimal, pelajari juga cara memasukkan gambar di HTML dengan atribut srcset dan type, supaya browser bisa memilih format gambar terbaik secara otomatis. Ini adalah langkah penting dalam mengoptimalkan performa website kamu dengan cara memasukkan gambar di HTML yang efisien.

Cara Memasukkan Gambar di HTML

Nah, sekarang kamu sudah tahu kan pentingnya tahu cara memasukkan gambar di html? Agar bisa memasukkan gambar melalui HTML untuk kontenmu, ada beberapa langkah yang harus kamu lakukan terlebih dulu, nih. Yuk, simak step-by-step berikut ini.

Pastikan Format Gambar yang Kamu Pakai sudah Sesuai

Kamu pernah mencoba memasukkan gambar ke dalam format HTML, tapi ternyata gambar tersebut nggak muncul? Wah, bisa jadi itu gara-gara format gambarmu yang nggak sesuai.

Memperhatikan format ekstensi gambar memang penting banget. Karena, jika ternyata salah format bisa-bisa mengakibatkan gambar nggak muncul. Format gambar beserta ekstensinya yang wajib kamu tahu adalah:

Format	Extension
JPEG/JPG	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	.png
SVG	.svg
GIF	.gif
APNG	.apng
ICO	.ico / .cur

Masukkan Atribut dari Gambar ke Tag HTML Images

Cara memasukkan gambar di html selanjutnya adalah menggunakan tag yang tepat pada dokumen HTML gambarmu. Tag yang perlu kamu gunakan adalah: <img>. Kamu mungkin bertanya-tanya, kenapa kamu perlu memasukkan atribut tersebut ke dalam kode HTMLmu.

Alasannya sederhana! Pasalnya, sistem HTML memang membutuhkan atribut tertentu supaya halaman tersebut bisa menampilkan file gambar yang kamu peroleh dari sumbernya (website, drive komputer, dll).

Kode untuk atribut yang dipakai untuk mengambil gambar dari sumber penyimpanan adalah “src”.  Atribut HTML tersebut biasanya terdiri dari link URL dari sumber gambar tersebut, atau nama file gambar itu sendiri. Misalnya, kamu hendak menginput file gambar seekor anak kucing. Maka kode atribut HTML yang kamu pakai adalah:

<img src="kucing.jpg">

Sedangkan, untuk pengaplikasiannya melalui fitur text editor pada halaman HTML-mu, kamu bisa copy paste kode sintaks berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Contoh gambar yang ada di halaman HTMLmu </p>
  <img src="kucing.png">
</body>
</html>

Menambahkan Alt Text pada Tag HTML Gambar

Selain menambahkan gambar, kamu juga bisa memberikan atribut alt text pada gambar tersebut, lho. Alt text atau teks alternatif adalah judul lain dari nama file gambar tersebut. Penambahan alt text pada alternatif HTML gambarmu ternyata penting banget, lho.

Alt text ini biasanya akan muncul apabila gambar tersebut gagal ditampilkan. Dengan adanya teks ini, maka pengunjung situsmu akan tetap mendapatkan informasi tentang gambar tersebut.

Baca juga: 4 Cara Melihat Foto yang Dihapus di Google

Nggak hanya itu, penyematan alt text ini juga berguna banget buat memperkuat optimasi situsmu. Adanya tambahan deskripsi alternative text pada gambar bisa membantu search engine menemukan kontenmu. Sehingga, Google akan lebih mudah mengindeks situsmu dalam SERP.

Lalu, bagaimana cara menambahkan alternative text ini dalam bentuk kode HTML? Caranya, gampang banget dan nggak jauh berbeda dari cara memasukkan gambar di html. Kamu hanya perlu menambahkan atribut “alt” tepat di dalam tag <img>. Sebagai contoh:

<img_src=”kucing.jpg” alt=”gambar_kucing”>

Menambahkan Keterangan Gambar

Cara memasukkan gambar di html selanjutnya adalah kamu perlu memberikan keterangan pada gambar tersebut. Salah satu aspek menarik dari penambahan atribut gambar pada laman HTML adalah pengunjung bisa melihat deskripsi atau keterangan gambar tersebut saat mereka mengarahkan cursor ke bagian gambar itu.

Tapi, untuk mendapatkan fitur tooltips tersebut, kamu perlu menambahkan atribut judul tambahan. Letaknya ada di dalam atribut <img>.

Cara ini bisa kamu pakai alternatif apabila keterangan gambar tersebut panjang dan dikhawatirkan dapat mengakibatkan kolom gambar terasa penuh. Syntax yang perlu kamu gunakan untuk atribut ini adalah:

<img src="kucing.jpg" alt="gambar_kucing" title="gambar seekor kucing yang lucu">

Untuk penempatannya dalam keseluruhan kode HTML, kamu bisa simak contoh berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Contoh gambar yang ada di halaman HTMLmu </p>
  <img src="kucing.jpg" alt="gambar_kucing" title="gambar seekor kucing yang lucu">
</body>
</html>

Baca juga: 6 Cara Menghasilkan Uang dari HP Tanpa Modal

Cara Pengaturan Gambar dengan Kode HTML

Nah, melalui ulasan di atas, kamu sudah tahu cara memasukkan gambar di html. Tapi, perjalanan belum selesai!

Supaya kontenmu terlihat rapi dan sedap dipandang mata, kamu perlu memastikan bahwa peletakan gambarmu sudah tepat.

Selain bisa digunakan untuk mengunggah gambar, kode HTML juga bisa kamu pakai untuk mengatur atribut gambarmu. Apa saja nih pengaturan yang bisa kamu lakukan? Simak lebih lanjut di sini:

Mengubah Dimensi Gambar

Gambar yang kamu unggah terlalu besar? Tenang saja, kamu bisa mengubah dimensinya dengan menggunakan atribut HTML.

Jenis atribut yang dipakai adalah “style” yang mencakup panjang (length) dan lebar (width) dari sebuah gambar. Kode syntax untuk mengaplikasikan perubahan dimensi panjang dan lebar gambar adalah:

<img src="kucing.png" alt="gambar_kucing" style="width:500px;height:400px;">

Penempatannya di dalam text editor kontenmu adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Contoh gambar yang ada di halaman HTMLmu </p>
  <img src="kucing.png" alt="gambar_kucing" style="width:500px;height:400px;">
</html>

Menambahkan Bingkai Gambar

Untuk membuat tampilan gambarmu terlihat makin rapi, kamu juga bisa menambahkan bingkai yang mengelilingi gambar tersebut.

Bingkai tersebut berbentuk garis border dengan ketebalan yang bisa kamu atur sesuai keinginan. Untuk menambahkan bingkai pada gambarmu melalui HTML, berikut snyntax yang bisa kamu tambahkan:

<img src="kucing.jpg" border="5">

Untuk penambahannya di dalam text editor, kamu bisa copas kode berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Contoh gambar yang ada di halaman HTMLmu </p>
  <img src="kucing.jpg" border="5">
</html>

Cara Memasukkan Gambar di HTML dengan Visual Studio Code

Jika kamu baru memulai belajar HTML, salah satu hal pertama yang perlu kamu kuasai adalah cara memasukkan gambar di HTML.

Gambar sangat penting untuk membuat halaman web lebih menarik, informatif, dan visual. Dengan menggunakan Visual Studio Code (VS Code), editor kode yang populer dan ramah pengguna, kamu bisa dengan mudah membuat proyek HTML dan menyisipkan gambar ke dalamnya.

Berikut langkah-langkah praktis yang bisa kamu ikuti.

Instal Visual Studio Code

Sebelum mulai menulis kode, pastikan kamu sudah menginstal Visual Studio Code di komputermu. Caranya sangat mudah:

1. Kunjungi situs resmi Visual Studio Code.
2. Pilih versi yang sesuai dengan sistem operasi kamu (Windows, macOS, atau Linux).
3. Unduh dan jalankan penginstalnya.
4. Ikuti instruksi di layar hingga instalasi selesai.

Setelah instalasi selesai, buka VS Code dan lanjut ke tahap berikutnya.

Siapkan Proyek HTML Kamu

Agar lebih terorganisir, sebaiknya kamu membuat folder khusus untuk menyimpan semua file proyek web kamu.

• Buat folder baru di komputer, misalnya dengan nama project-html.
• Buka Visual Studio Code.
• Klik “File” > “Open Folder” dan pilih folder yang baru saja kamu buat.
• Di panel sebelah kiri (Explorer), klik kanan dan pilih “New File“, lalu beri nama index.html.
• Di dalam file ini, ketik tanda seru ! dan tekan Tab untuk menghasilkan template HTML5 secara otomatis.

Dengan template HTML ini, kamu sudah siap untuk menambahkan konten ke dalam halaman web.

Cara Memasukkan Gambar di HTML

Sebelum menulis tag gambar, pastikan kamu sudah memiliki file gambar yang ingin ditampilkan, misalnya kucing.jpg. Simpan gambar ini di folder proyek kamu, atau kalau ingin lebih rapi, buat folder baru di dalamnya bernama images.

Untuk menambahkan gambar ke file HTML kamu:

<img src="kucing.jpg" alt="Gambar kucing lucu">

Penjelasan singkat:

• src="kucing.jpg" menunjukkan lokasi file gambar. Jika gambar ada di subfolder images, maka tulis src="images/kucing.jpg".
• alt="..." adalah teks alternatif jika gambar gagal dimuat. Ini juga membantu dalam aspek SEO dan aksesibilitas bagi pengguna dengan keterbatasan visual.

Jika kamu mengikuti struktur folder yang terorganisir, maka kodenya bisa seperti ini:

<img src="images/kucing.jpg" alt="Gambar kucing lucu">

Dengan begini, kamu telah berhasil menerapkan salah satu aspek dasar dari cara memasukkan gambar di HTML.

Pratinjau Hasil di Browser

Setelah kamu menambahkan tag <img>, tentu kamu ingin melihat hasilnya di browser. Ada dua cara untuk melakukan ini:

1. Buka manual:
   • Buka folder proyek di komputer.
   • Klik dua kali pada file index.html.
   • Browser akan terbuka dan menampilkan halaman HTML kamu.
2. Menggunakan Live Server di VS Code:
   • Di VS Code, buka menu “Extensions” (tekan Ctrl+Shift+X).
   • Cari “Live Server” dan instal ekstensi tersebut.
   • Setelah terinstal, klik kanan file index.html dan pilih “Open with Live Server“.
   • Halaman akan terbuka di browser dan menampilkan gambar secara langsung. Setiap perubahan di file HTML akan langsung diperbarui di browser.

Tips tambahan:

• Gunakan nama file dan folder tanpa spasi agar lebih aman dan mudah diakses di semua browser.
• Selalu simpan gambar dalam format yang ringan seperti .jpg, .png, atau .webp.
• Jangan lupa menyertakan atribut alt sebagai bagian dari praktik HTML yang baik.

Itulah ulasan singkat mengenai cara memasukkan gambar di html. Semoga informasi di atas bermanfaat untuk kamu, ya.

Pembuatan website beserta kontennya memang lumayan menguras tenaga dan waktu, apalagi buat kamu yang belum terbiasa dengan pengaturan kode HTML.

Jika ingin memiliki website tanpa harus berkutat dengan kode, gunakan saja jasa pembuatan website dari Optimaise! Layanan dari Optimaise ini menawarkan website dengan waktu loading cepat dan dengan tampilan mobile friendly.

Nggak hanya itu, kamu juga bisa mendapatkan domain, hosting, dan SSL gratis, lho! Kamu juga akan mendapatkan konten SEO-friendly yang akan membantu mendongkrak situsmu ke halaman pertama Google. Tunggu apa lagi? Yuk, segera hubungi kami!