ওয়েবপেইজে ছবি যোগ করতে img এলিমেন্ট ব্যবহার করা হয়। এটি একটি এম্পটি এলিমেন্ট, অর্থাৎ এর কোনো ক্লোজিং বা শেষ ট্যাগ নেই।
<!DOCTYPE html> <html> <head> <title>Image in html</title> </head> <body> <img src="image.jpg"> </body> </html>
কোডটি যে ফোল্ডারে আছে, সেই ফোল্ডারে পছন্দমতো একটি ছবি এনে image.jpg নাম দিয়ে দিতে হবে। এবার ব্রাউজারে ফাইলটি ওপেন করলে ছবিটি ওয়েবপেইজে দেখা যাবে।
এখানে src (source-এর সংক্ষিপ্ত রূপ) নামের একটি অ্যাট্রিবিউট ব্যবহার করে ছবিটি ঠিকানা বলে দেওয়া হয়েছে। এই ঠিকানা কোনো ওয়েবসাইটের কোনো ছবির ঠিকানাও হতে পারে। অন্য কোনো ফোল্ডারের ছবি যদি দেখাতে হলে তাহলে এর মান হিসেবে ছবির পুরো পাথ (path) বসাতে হবে। যেমন- D: ড্রাইভের My Pictures ফোল্ডারে image.jpg নামের একটি ছবি দেখাতে হবে এভাবে-
<img src="D:/My Pictures/image.jpg">
ছবিটি যদি আকারে বেশ বড় হয় তাহলে হয়তো দেখা যাবে ব্রাউজারে পুরো ছবিটির অংশবিশেষ দেখা যাচ্ছে মাত্র। ছবিটি ঠিকমতো দেখার জন্য তখন ছবির আকার নিয়ন্ত্রণ করতে হবে। ছবির আকার নিয়ন্ত্রণ করার জন্য width ও height নামে দুটি অ্যাট্রিবিউট রয়েছে। ছবিটিকে 300×200 পিক্সেল আকারে দেখাতে চাইলে, নিচের মতো কোড লিখতে হবে।
<img src="image.jpg" width="300px" height="200px">
কখনো কখনো বিভিন্ন ওয়েবসাইটে কোনো ছবিতে ক্লিক করলে নতুন পেইজ ওপেন হয়। অর্থাৎ, ছবিটি হাইপারলিংক করা থাকে।
<a href="https://www.google.com" target="_blank"> <img src="image.jpg"> </a>
অর্থাৎ <a> … </a> ট্যাগের মধ্যে কিছু না লিখে একটি ছবি ব্যবহার করা হলো।
<!DOCTYPE html> <html> <head> <title>Image in html</title> </head> <body> <img src="https://en.banglapedia.org/images/3/34/NationalFlag.jpg"> </body> </html>