แท็ก HTML IMG จะควบคุมการแทรกรูปภาพและออบเจกต์กราฟิกแบบคงที่อื่น ๆ ภายในเว็บเพจ แท็กทั่วไปนี้สนับสนุนแอตทริบิวต์ที่จำเป็นและเป็นตัวเลือกหลายอย่างที่เพิ่มความมีชีวิตชีวาให้กับความสามารถในการออกแบบเว็บไซต์ที่มีส่วนร่วมและมุ่งเน้นภาพ
ตัวอย่างของแท็ก HTML IMG แบบเต็มรูปแบบมีลักษณะดังนี้:
แอตทริบิวต์แท็ก IMG ที่จำเป็น
SRCแอตทริบิวต์ SRC เท่านั้นแอตทริบิวต์ SRC ที่จำเป็นสำหรับแอตทริบิวต์ที่คุณต้องการเพื่อให้ได้ภาพที่แสดงบนหน้าเว็บ แอ็ตทริบิวต์นี้ระบุชื่อและตำแหน่งของไฟล์รูปภาพที่จะแสดง
ALTในการเขียน XHTML และ HTML4 ที่ถูกต้อง ALT แอตทริบิวต์ต้องมี แอ็ตทริบิวต์นี้ใช้ในการจัดเตรียมเบราว์เซอร์ nonvisual ที่มีข้อความอธิบายภาพ เบราว์เซอร์แสดงข้อความทางเลือกในรูปแบบต่างๆ บางส่วนแสดงว่าเป็นป๊อปอัปเมื่อคุณวางเมาส์เหนือภาพคนอื่น ๆ จะแสดงในคุณสมบัติเมื่อคลิกขวาที่รูปภาพและบางส่วนจะไม่แสดงเลย
ใช้ข้อความ alt เพื่อให้รายละเอียดเพิ่มเติมเกี่ยวกับภาพที่ไม่เกี่ยวข้องหรือสำคัญกับข้อความของเว็บเพจ แต่โปรดทราบว่าในโปรแกรมอ่านหน้าจอและเบราว์เซอร์แบบข้อความเท่านั้นข้อความจะอ่านแบบอินไลน์กับส่วนที่เหลือของข้อความในหน้าเว็บ เพื่อหลีกเลี่ยงความสับสนให้ใช้ข้อความอธิบายที่อธิบายว่า (ตัวอย่างเช่น) "เกี่ยวกับ Web Design และ HTML" แทน "โลโก้" เพียงอย่างเดียว
ใน HTML5, ALT ไม่จำเป็นต้องมีเพราะคุณสามารถใช้คำอธิบายภาพเพื่อเพิ่มคำอธิบายลงไปได้ นอกจากนี้คุณยังสามารถใช้แอตทริบิวต์ ชาร์ตเพลง-DESCRIBEDBY เพื่อระบุ ID ที่มีคำอธิบายแบบเต็ม
ข้อความ Alt ยังไม่จำเป็นต้องใช้หากภาพถูกตกแต่งอย่างหมดจดเช่นภาพกราฟิกที่ด้านบนของหน้าเว็บหรือไอคอน แต่ถ้าคุณไม่แน่ใจให้ใส่ข้อความ alt ในกรณีนี้
แอตทริบิวต์ IMG ที่แนะนำ
ความกว้าง และ ความสูง. คุณควรจะได้รับในนิสัยของการใช้เสมอ ความกว้าง และ ความสูง แอตทริบิวต์ และคุณควรใช้ขนาดจริงและไม่ปรับขนาดรูปภาพของคุณด้วยเบราว์เซอร์
แอตทริบิวต์เหล่านี้เร่งการแสดงผลของหน้าเนื่องจากเบราว์เซอร์สามารถจัดสรรเนื้อที่ในการออกแบบสำหรับรูปภาพจากนั้นดาวน์โหลดเนื้อหาส่วนที่เหลือต่อได้แทนที่จะรอให้ภาพทั้งหมดดาวน์โหลด
คุณสมบัติอื่น ๆ ของ IMG ที่เป็นประโยชน์
หัวข้อ. แอตทริบิวต์เป็นแอตทริบิวต์ global ที่สามารถใช้กับองค์ประกอบ HTML ใดก็ได้ นอกจากนี้ หัวข้อ ช่วยให้คุณสามารถเพิ่มข้อมูลเพิ่มเติมเกี่ยวกับภาพ
เบราว์เซอร์ส่วนใหญ่สนับสนุน หัวข้อ แอตทริบิวต์ แต่พวกเขาทำในรูปแบบต่างๆ บางคนแสดงข้อความเป็นป๊อปอัปในขณะที่บางคนแสดงข้อมูลในหน้าจอข้อมูลเมื่อผู้ใช้คลิกขวาที่รูปภาพ คุณสามารถใช้ หัวข้อ แอตทริบิวต์เขียนข้อมูลเพิ่มเติมเกี่ยวกับภาพ แต่ไม่นับข้อมูลนี้ถูกซ่อนไว้ หรือ มองเห็นได้ คุณไม่ควรใช้คำหลักนี้เพื่อซ่อนคำหลักสำหรับเครื่องมือค้นหา การปฏิบัตินี้ได้รับการลงโทษโดยเครื่องมือค้นหาส่วนใหญ่แล้ว
usemap และ ISMAP. แอตทริบิวต์ทั้งสองนี้กำหนดภาพแผนที่ฝั่งไคลเอ็นต์ () และฝั่งเซิร์ฟเวอร์ (ISMAP) ลงในภาพของคุณ
longdesc. แอตทริบิวต์สนับสนุน URLs เป็นคำอธิบายเพิ่มเติมของรูปภาพ คุณลักษณะนี้ช่วยให้คุณสามารถเข้าถึงรูปภาพได้มากขึ้น
แอตทริบิวต์ IMG ที่เลิกใช้และเลิกใช้แล้ว
คุณลักษณะบางอย่างล้าสมัยใน HTML5 หรือเลิกใช้งานใน HTML4 แล้ว สำหรับ HTML ที่ดีที่สุดคุณควรหาโซลูชันอื่นแทนการใช้แอตทริบิวต์เหล่านี้
ชายแดน. แอตทริบิวต์กำหนดความกว้างเป็นพิกเซลของเส้นขอบรอบรูปภาพ มีการเลิกใช้งาน CSS ใน HTML4 และล้าสมัยใน HTML5
ALIGN. แอ็ตทริบิวต์นี้ช่วยให้คุณสามารถวางภาพภายในข้อความและมีข้อความไหลอยู่รอบ ๆ ตัวอักษร คุณสามารถจัดแนวภาพไปทางขวาหรือซ้ายได้ ได้รับการสนับสนุนในเรื่องคุณสมบัติ CSS แบบ float ใน HTML4 และล้าสมัยใน HTML5
hspace และ vSpace. hspace และ vSpace เพิ่มพื้นที่สีขาวในแนวนอน (hspace) และแนวตั้ง (vSpace) พื้นที่สีขาวจะถูกเพิ่มลงในทั้งสองด้านของภาพ (ด้านบนและด้านล่างหรือด้านซ้ายและด้านขวา) ดังนั้นถ้าคุณต้องการพื้นที่เพียงด้านเดียวคุณควรใช้ CSS แอตทริบิวต์เหล่านี้ได้รับการเลิกใช้งานใน HTML4 เพื่อสนับสนุนพร็อพเพอร์ตี้ CSS ขอบแล้วก็ล้าสมัยใน HTML5
LOWSRC. LOWSRC ให้ภาพทางเลือกเมื่อแหล่งภาพมีขนาดใหญ่จนดาวน์โหลดช้ามาก ตัวอย่างเช่นคุณอาจมีภาพ 500KB ที่ต้องการแสดงบนหน้าเว็บ แต่ 500KB จะใช้เวลาในการดาวน์โหลดนาน ดังนั้นคุณจึงสร้างสำเนาที่เล็กกว่าของภาพอาจเป็นสีดำและสีขาวหรือเพียงแค่ปรับแต่งเป็นอย่างดีและวางไว้ใน LOWSRC คุณลักษณะ ภาพขนาดเล็กจะดาวน์โหลดและแสดงผลเป็นอันดับแรกจากนั้นเมื่อภาพขนาดใหญ่ปรากฏขึ้นจะเป็นการแทนที่ซีนที่มีแหล่งกำเนิดต่ำ
LOWSRC ถูกเพิ่มลงใน Netscape Navigator 2.0 ไปที่ IMG แท็ก เป็นส่วนหนึ่งของ DOM ระดับ 1 แต่ได้ถูกลบออกจาก DOM ระดับ 2 แล้วการสนับสนุนเบราว์เซอร์นี้ไม่ได้รับการแก้ไขสำหรับแอตทริบิวต์นี้แม้ว่าหลายเว็บไซต์จะอ้างว่าได้รับการสนับสนุนจากเบราว์เซอร์ที่ทันสมัยทั้งหมด จะไม่เลิกใช้ใน HTML4 หรือล้าสมัยใน HTML5 เนื่องจากไม่เคยเป็นส่วนหนึ่งของข้อกำหนดใด ๆ อย่างเป็นทางการ
หลีกเลี่ยงการใช้แอตทริบิวต์นี้และเพิ่มประสิทธิภาพภาพของคุณแทนเพื่อให้โหลดได้อย่างรวดเร็ว ความเร็วในการโหลดหน้าเว็บเป็นส่วนสำคัญของการออกแบบเว็บที่ดีและภาพขนาดใหญ่จะทำงานช้าลงอย่างมากแม้ว่าคุณจะใช้ LOWSRC คุณลักษณะ
