Buka file HTML untuk halaman Web yang ingin Anda tambahkan gambar ke dalam editor teks seperti Notepad atau perangkat lunak pengembangan Web.
Tambahkan tag ke file. Tempatkan tag setelah elemen yang Anda inginkan agar gambar muncul di bawah saat file HTML dibuka di browser. Tag tidak memiliki tag penutup yang terpisah. Di dalam tag, Anda harus menentukan sumber gambar yang ingin ditampilkan dengan mengetikkan lokasi gambar di internet dengan src atribut. Jika gambar disimpan dalam folder yang sama dengan file HTML, ketik nama dan ekstensi gambar. Jika gambar disimpan di tempat lain, ketik URL lengkap gambar tersebut.
Tambahkan alt atribut ke tag Anda. Dalam HTML5, atribut alt diperlukan. Gunakan atribut ini untuk mendeskripsikan gambar jika tidak dapat dimuat. Jika gambar tidak dapat dimuat, browser menampilkan teks yang Anda masukkan setelah atribut alt. Selain itu, atribut alt penting untuk perangkat lunak pembaca layar yang digunakan oleh penyandang disabilitas visual. Perangkat lunak membaca teks dalam atribut alt sehingga penyandang disabilitas visual yang melihat situs web Anda dapat mendengar apa yang ada dalam gambar meskipun mereka tidak dapat melihatnya.
Tentukan dimensi gambar dalam piksel dengan tinggi dan lebar atribut. Jika Anda tidak menentukan dimensi, browser tidak tahu berapa banyak ruang yang tersisa untuk gambar saat halaman dimuat. Ini menghasilkan pemuatan halaman yang terputus-putus, saat teks dimuat terlebih dahulu, menyisakan ruang kecil untuk gambar, kemudian melompat terpisah saat gambar dimuat dan menyebabkan ruang meluas. Dengan dimensi yang ditentukan, browser menyisakan jumlah ruang yang tepat di antara elemen lain pada halaman untuk diisi gambar setelah selesai dimuat.
Uji kode Anda untuk memastikan gambar ditampilkan di lokasi yang tepat dengan membuka file HTML Anda di browser.
Gunakan CSS untuk memindahkan gambar ke sisi kiri atau kanan layar atau bungkus teks di sekitarnya. Misalnya, Anda dapat menggunakan style="float: left;" atau style="float: kanan;" di dalam tag.
Jika Anda tidak mengetahui tinggi dan lebar gambar, Anda dapat menggunakan atribut tinggi atau lebar saja. Anda juga dapat menggunakan CSS untuk menentukan tinggi dan lebar; misalnya, dengan gambar 100 kali 100 piksel, gunakan atribut style: style="height: 100px; lebar: 100 piksel."
Jadikan gambar menjadi tautan yang dapat diklik dengan menempatkan tag di dalam pasangan tag "a href". Misalnya, jika Anda ingin gambar ditautkan ke Facebook, ketikkan yang berikut ini.
Jangan gunakan atribut alt untuk mencoba meningkatkan SEO halaman Anda. Mesin pencari telah lama menyadari bahwa beberapa desainer Web mencoba memasukkan atribut alt dengan kata kunci tambahan, dan karena itu mereka mengabaikan teks dalam atribut alt.
