Cara Menambah Foto di HTML dan Tipsnya, Mudah & Efektif!

Situs web memiliki beberapa komponen, salah satunya gambar. Gambar menjadi salah satu aspek penting di situs web karena dapat menyampaikan informasi terkait konten dan menarik perhatian audiens yang menyukai komponen visual. 

Itulah mengapa, banyak orang mulai mencari tahu cara memasukkan gambar di HTML guna menambah estetika situs web. 

Lantas, bagaimana cara menambah foto atau gambar di HTML? Pedoman ini akan menuntun Anda untuk mempelajari tips memasukkan gambar di situs web agar menjadi lebih menarik. Simak artikelnya hingga tuntas!

Cara Menambah Foto di HTML

Agar situs web Anda menjadi lebih menarik, maka Anda perlu mengetahui cara menambah foto di HTML. Berikut adalah cara menambahkan gambar di HTML yang perlu Anda catat.

1. Menyiapkan Gambar Sesuai Format

Langkah pertama dalam cara menambah foto di HTML adalah menyiapkan gambar sesuai dengan format terlebih dahulu.

Pasalnya, gambar dengan format yang tidak sesuai tidak akan bisa ditampilkan di situs web. Terkait format gambar, berikut adalah format yang disarankan untuk dokumen HTML. 

• SVG (.svg).
• APNG (.apng).
• PNG (.png).
• GIF (.gif).
• JPEG (.jpeg, .jpg, .pjpeg, .pjp, .jfif).
• WebP (.webp).
• ICO (.ico, .cur.

2. Memasukkan Atribut Sumber Gambar pada Tag HTML Images

Cara menambah foto di HTML yang selanjutnya adalah dengan memasukkan atribut sumber gambar pada tag HTML images. 

Pada langkah ini, tag yang digunakan adalah <img>. Tahapan ini penting untuk dilakukan karena HTML tidak bisa secara otomatis menampilkan gambar. 

HTML harus mendapatkan gambar dari sebuah penyimpanan, sehingga atribut sangat penting agar gambar bisa muncul di situs web Anda. 

Atribut yang dimaksud adalah Src, berisi tautan nama file gambar. Anda bisa memasukkan tag di bawah dini untuk menggunakan Src:

Kemudian, Anda bisa memasukkan syntax di bawah ini:

3. Memasukkan Alt Text pada Tag HTML Images

Memasukkan alt text pada tag HTML images adalah cara menambah foto di HTML selanjutnya. Alt Text memberikan informasi alternatif pada gambar, sehingga apabila gambar tidak bisa ditampilkan, ada teks yang muncul berkaitan dengan gambarnya. 

Tidak hanya itu, alt text juga dapat berkontribusi pada peringkat situs web karena mesin pencari bisa memahami konteks gambar yang diberikan dan mengindeks halaman situs web. 

Atribut alt text yang bisa Anda masukkan adalah sebagai berikut:

4. Memasukkan Keterangan Gambar

Setelah memasukkan alt text, Anda bisa menambahkan keterangan gambar yang bisa dilihat saat kursor yang diarahkan ke gambar. 

Anda bisa memasukkan keterangan gambar lewat syntax berikut ini.

</html>

5. Mengatur Dimensi Gambar

Selain keterangan gambar, untuk mempelajari cara menambah foto di HTML, Anda juga perlu mengatur dimensi gambar.

Untuk mengatur dimensi gambar, Anda bisa memasukkan atribut width untuk mengatur lebar gambar dan height untuk tinggi gambar pada tag <img>.

Dalam mengatur dimensi gambar, pastikan untuk memeriksa rasio gambar agar sesuai dengan format.

Contoh penggunaan atribut width dan height adalah sebagai berikut:

Cara Mengombinasikan Gambar dengan Tautan

Selain mengetahui cara menambah foto di HTML, memahami cara menambahkan tautan pada gambar akan bermanfaat bagi situs web Anda. 

Hal ini menjadi fitur unik di mana Anda bisa menyertakan tautan pada gambar, sehingga ketika pengunjung klik gambar tersebut, mereka akan diarahkan ke halaman situs lain atau tautan tertentu. 

Adapun cara menambahkan tautan pada gambar adalah sebagai berikut:

1. Menambahkan Tag <a>

Hal pertama yang perlu dilakukan adalah menambahkan tag <a> agar bisa menggunakan gambar sebagai tautan. 

Tag <a> adalah hyperlink tag, di mana Anda perlu menyisipkan tag <img> di dalam tag <a>.

2. Memasang URL Tujuan

Setelah itu, Anda bisa menentukan URL tujuan, seperti halaman lain yang ada di situs web. URL tujuan biasa dikenal sebagai href dari tag <a>. 

3. Memasukkan Tag <img>

Langkah selanjutnya adalah menambahkan tag <img> beserta atribut lainnya, seperti Src, Alt, Height, dan Width.

Tips Menambah Gambar di HTML

Setelah mengetahui cara menambah foto di HTML, mari simak strategi apa yang bisa Anda lakukan agar gambar bisa muncul dengan tepat dan efektif. 

Adapun tips memasukkan gambar di HTML adalah sebagai berikut.

• Pastikan foto sesuai dengan format image untuk web. 
• Pastikan ukuran foto sesuai dengan ketentuan karena ukuran gambar berdampak pada seberapa lama situs web bisa memuat foto. 
• Masukkan alt text pada gambar. 
• Gunakan dimensi foto yang sesuai. 
• Gunakan teks CSS dan HTML agar mudah dibaca oleh mesin pencari.
• Buat gambar secara responsif agar tampil baik di segala ukuran layar perangkat. 
• Gunakan gambar dengan hak cipta.
• Uji tampilan gambar di berbagai peramban untuk melihat tampilannya.

Kesimpulan

Demikian pembahasan tentang cara menambah foto di HTML yang bisa Anda terapkan pada situs web. Seperti yang telah dijelaskan sebelumnya, menambahkan foto bisa membuat situs web Anda menarik. 

Selain itu, menambahkan komponen gambar yang tepat dapat meningkatkan peringkat situs web Anda di mesin pencari. 

Terkait meningkatkan peringkat di mesin pencari, Anda tidak hanya bisa mencapainya dari memasang foto di situs web. 

Anda bisa menggunakan strategi Search Engine Optimization (SEO) dengan membuat konten ramah SEO yang disisipi keyword yang relevan. 

Untuk melakukannya, Anda bisa mengandalkan Jasa SEO cmlabs. cmlabs memiliki tim yang andal dengan berbagai keahlian yang bisa meningkatkan peringkat situs web dengan strategi yang komprehensif. 

Diskusikan kebutuhan bisnis Anda sekarang dengan tim pemasaran cmlabs dan bersiap untuk bersaing di mesin pencari!