Menampilkan elemen visual di halaman website adalah langkah krusial karena lebih dari 65% dari seluruh komunikasi manusia berbentuk visual. Bagi Anda yang sedang belajar html pemula, memahami cara memasukkan gambar di html adalah fondasi penting yang wajib dikuasai sejak awal.
Saya sering melihat pemula merasa bingung saat gambar yang mereka panggil justru tidak muncul atau ukurannya rusak berantakan. Berdasarkan survei dari W3Techs, sebanyak 94,5% website di seluruh dunia menggunakan HTML, yang berarti hampir semua platform yang Anda lihat setiap hari mengandalkan struktur ini untuk menampilkan konten visual.
Dalam ulasan kali ini, saya akan membedah secara kritis bagaimana tag html untuk gambar bekerja, variasi format yang didukung, hingga solusi nyata saat menghadapi eror eksekusi.
Langkah pertama untuk menampilkan berkas visual adalah memahami struktur kode itu sendiri. Tidak seperti elemen teks yang membutuhkan tag pembuka dan penutup, elemen gambar menggunakan struktur yang disebut empty tag atau tag tunggal.
Anda hanya perlu menggunakan elemen utama bernama src (source) yang berfungsi sebagai penunjuk jalan atau lokasi tempat berkas digital Anda disimpan.
Selain lokasi, atribut alt (alternative text) juga memegang peranan yang tidak kalah penting. Atribut ini bertugas menampilkan deskripsi teks jika berkas gagal dimuat oleh peramban, sekaligus membantu mesin pencari memahami konteks visual tersebut.
Mengenal Format Gambar yang Kompatibel dalam HTML
Sebagai pengembang web, saya sangat menyarankan Anda untuk tidak asal memilih jenis berkas. Setiap format memiliki karakteristik, tingkat kompresi, dan fungsi yang berbeda-beda di dalam lingkungan peramban modern.
HTML mendukung berbagai eksternsi berkas visual, mulai dari format tradisional hingga format modern yang lebih efisien. Pemilihan format yang keliru bisa membuat performa website Anda menjadi lambat dan membebani server hosting.
Berikut adalah daftar format berkas visual yang secara resmi didukung oleh standardisasi HTML saat ini:
| Nama Format | Ekstensi Resmi |
|---|---|
| APNG (Animated Portable Network Graphics) | .apng |
| GIF (Graphics Interchange Format) | .gif |
| ICO (Microsoft Icon) | .ico, .cur |
| JPEG (Joint Photographic Expert Group image) | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG (Portable Network Graphics) | .png |
| SVG (Scalable Vector Graphics) | .svg |
| WebP (Web Picture) | .webp |
Dari daftar di atas, masing-masing memiliki area optimalnya sendiri. Format JPEG sangat cocok untuk foto dengan gradasi warna kompleks, sedangkan PNG ideal untuk grafis yang membutuhkan latar belakang transparan.
Dari spesifikasinya, menurut saya format WebP dan SVG adalah masa depan untuk optimasi performa web karena ukuran berkasnya yang jauh lebih ringkas tanpa mengorbankan ketajaman visual.
Panduan Langkah Demi Langkah Memasukkan Gambar
Untuk mempraktikkan materi ini, Anda perlu memastikan posisi berkas gambar dan berkas HTML berada di tempat yang benar. Kesalahan penyusunan folder adalah musuh utama bagi para pemula.
Menggunakan Metode Relative Path
Metode relative path digunakan jika berkas gambar berada di dalam komputer atau server yang sama dengan berkas HTML Anda. Ini adalah metode yang paling direkomendasikan karena membuat struktur web mudah dipindahkan.
- Pastikan berkas HTML dan berkas foto berada dalam satu folder yang sama.
- Tuliskan kode dengan format langsung memanggil nama berkas:
- Jika gambar berada di dalam sub-folder bernama 'images', ubah jalurnya menjadi:
Menggunakan Metode Absolute Path
Metode absolute path digunakan ketika Anda ingin mengambil gambar yang sudah terunggah di internet atau dari website lain. Anda harus memasukkan URL lengkap yang diawali dengan protokol HTTP atau HTTPS.
Contoh penulisan kodenya adalah )
Solusi Mengatasi Masalah Gambar Tidak Muncul
Pertanyaan yang paling sering muncul dari komunitas adalah mengenai "kenapa gambar tidak muncul di html" saat kode dijalankan. Masalah ini umumnya dipicu oleh beberapa kecerobohan kecil yang sering tidak disadari.
Hal pertama yang harus diperiksa adalah ketepatan penulisan nama berkas dan ekstensinya. Peramban web bersifat case-sensitive, artinya berkas bernama 'Foto.JPG' tidak akan terbaca jika Anda menulisnya 'foto.jpg' di dalam kode.
Penyebab kedua adalah jalur direktori yang salah. Jika Anda salah menaruh tanda garis miring (/) atau salah menuliskan nama folder pembungkus, peramban tidak akan pernah bisa menemukan berkas yang dimaksud.
Cara Mengatur Ukuran Gambar di HTML
Secara default, peramban akan menampilkan objek visual sesuai dengan dimensi asli berkas tersebut. Jika dimensi aslinya terlalu besar, tampilan halaman web Anda pasti akan langsung berantakan.
Anda bisa menerapkan cara mengatur ukuran gambar di html dengan memanfaatkan atribut width (lebar) dan height (tinggi) langsung di dalam tag
Contoh penerapannya adalah 
Sebagai langkah modifikasi yang lebih modern, pengaturan dimensi sebaiknya diserahkan kepada CSS menggunakan properti max-width: 100%; dan height: auto; agar tampilan visual bisa otomatis menyesuaikan diri dengan ukuran layar ponsel cerdas maupun komputer desktop.
Kekurangan Penggunaan Tag Gambar HTML Secara Konvensional
Meskipun cara pasang gambar di wordpress lewat html atau script mentah sangat mudah, metode konvensional ini memiliki beberapa kelemahan nyata yang harus Anda pahami secara kritis.
Tag standar
Selain itu, penumpukan tag gambar tanpa optimasi pemuatan malas (lazy loading) akan langsung membebani kinerja rendering peramban, membuat skor performa website Anda merosot tajam di mata mesin pencari.
Integrasi elemen visual di dalam ekosistem web modern menuntut ketelitian tinggi mulai dari pemilihan struktur kode, pemilihan format berkas yang efisien, hingga pengaturan responsivitas yang tepat. Penguasaan anatomi dasar HTML ini menjadi modal utama sebelum Anda melangkah lebih jauh ke ranah manipulasi CSS dan framework JavaScript.
