เมื่อสร้างเว็บเพจโดยใช้ HTML แท็กรูปภาพจะถูกใช้เพื่อแทรกภาพถ่ายหรือกราฟิกในสถานที่เฉพาะบนหน้า มีหลายวิธีที่สามารถใช้รูปภาพบนหน้าเว็บตั้งแต่การเพิ่มความสนใจไปจนถึงการใช้เป็นเครื่องมือนำทางหรือเพื่อให้ข้อมูล นอกจากนี้ยังมีรูปภาพหลายรูปแบบที่สามารถใช้ได้ ไม่ว่ารูปภาพจะถูกเพิ่มเข้าไปในหน้าเว็บหรือไม่ก็ตามแท็กภาพนั้นจำเป็นต้องใช้เสมอ
ในการเพิ่มภาพแท็กภาพจะถูกรวมไว้ในตำแหน่งที่คุณต้องการให้รูปภาพปรากฏในหน้าของคุณ ตัวอย่างเช่นหากรูปภาพจะถูกแทรกหลังย่อหน้านี้แท็กรูปภาพหรือ <img> จะถูกเพิ่มลงในเอกสาร HTML หลังย่อหน้านี้ แท็ก <img> กำหนดรูปภาพทั้งหมดใน HTML มันถูกอ้างถึงว่าเป็นแท็กที่ว่างเปล่าเนื่องจากมันมีคุณสมบัติและไม่มีแท็กปิด คุณสมบัติเป็นตัวเลือกที่พร้อมใช้งานสำหรับแท็ก HTML ที่ระบุ
หากเพิ่มเฉพาะ <img> ลงในเอกสาร HTML จะไม่มีสิ่งใดแสดงเนื่องจากไม่มีการรวมแอตทริบิวต์ของแท็ก แอตทริบิวต์ที่สำคัญที่สุดสำหรับ <img> คือ "src" ซึ่งย่อมาจากแหล่งที่มา แอ็ตทริบิวต์ src ระบุตำแหน่งที่ไฟล์อิมเมจอยู่จริงหรือเป็นที่อยู่ของไฟล์อิมเมจ เมื่อรูปภาพถูกใช้บนหน้าเว็บตำแหน่งของรูปภาพจะถูกกำหนดเป็น URL ภายในเอกสาร HTML ภาพจะมีลักษณะดังนี้: <img src = "URL" />
โดยเฉพาะ URL จะชี้ไปยังตำแหน่งที่จัดเก็บรูปภาพ ตัวอย่างเช่นหากรูปภาพของคอมพิวเตอร์ที่มีชื่อไฟล์ computer.jpg ถูกเก็บไว้ในโฟลเดอร์รูปภาพบน www.wisegeek.com URL จะถูกแทนที่ด้วย: <img src = "www.wisegeek.com/images/computer jpg "/> เมื่อเบราว์เซอร์เปิดเว็บเพจมันจะแสดงรูปภาพที่มีแท็กรูปภาพอยู่
แท็กรูปภาพมีคุณสมบัติอื่น ๆ อีกจำนวนหนึ่ง พวกเขาอนุญาตให้ผู้ใช้ปรับลักษณะภาพในหน้า โดยทั่วไปจะใช้แอตทริบิวต์ต่อไปนี้สำหรับแท็กนี้: alt, เส้นขอบ, ขนาดและจัดแนว
แอตทริบิวต์ alt หมายถึงข้อความสำรองและจะปรากฏขึ้นหากเบราว์เซอร์ไม่สามารถแสดงรูปภาพได้ นอกจากนี้ยังมีการอ่านข้อความสำรองสำหรับผู้ใช้ที่ท้าทายสายตาและเลือกที่จะแสดงข้อความเหนือภาพ สำหรับตัวอย่างข้างต้นข้อความสำรองสามารถระบุเป็น alt = "รูปภาพของคอมพิวเตอร์"
คุณลักษณะ เส้นขอบ เพิ่มเส้นขอบให้กับรูปภาพที่มีความหนาขึ้นอยู่กับจำนวนพิกเซลที่ระบุ สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อภาพพื้นหลังและพื้นหลังของเว็บไซต์คล้ายกันและต้องการความแตกต่างที่ชัดเจน ตัวอย่างเช่น border = "10" จะวางเส้นขอบหนา 10 พิกเซลรอบ ๆ รูปภาพ
คุณลักษณะ ขนาด ยังมีความสำคัญเนื่องจากสามารถใช้ความกว้างและความสูงเพื่อระบุขนาดที่แน่นอนของรูปภาพ จำเป็นต้องใช้แอตทริบิวต์เหล่านี้อย่างระมัดระวังเนื่องจากการเปลี่ยนแปลงจะมีผลต่อสัดส่วนหรือคุณภาพของภาพที่แสดง คุณลักษณะขนาดจะไม่เปลี่ยนไฟล์จริงเพียงแค่แสดงเบราว์เซอร์
การ จัดตำแหน่ง แอตทริบิวต์ระบุวิธี จัดแนว รูปภาพเมื่อเปรียบเทียบกับข้อความในหน้า มีตัวเลือกที่แตกต่างกันหลายประการสำหรับแอททริบิวต์นี้รวมถึงด้านบน, ล่าง, กลาง, ซ้าย, ขวา, absmiddle, absbottom, baseline และ texttop แท็กเหล่านี้ยังช่วยกำหนดว่าข้อความบนหน้าจะจัดแนวกับภาพอย่างไร
