IMG แท็กแอตทริบิวต์

การใช้แท็ก HTML IMG สำหรับภาพและวัตถุ

แท็ก HTML IMG จะควบคุมการแทรกรูปภาพและออบเจกต์กราฟิกแบบคงที่อื่น ๆ ภายในเว็บเพจ แท็กทั่วไปนี้สนับสนุนแอตทริบิวต์ที่จำเป็นและเป็นตัวเลือกหลายอย่างที่เพิ่มความมีชีวิตชีวาให้กับความสามารถในการออกแบบเว็บไซต์ที่มีส่วนร่วมและมุ่งเน้นภาพ

ตัวอย่างของแท็ก HTML IMG แบบเต็มรูปแบบมีลักษณะดังนี้:

แอตทริบิวต์แท็ก IMG ที่จำเป็น

SRC แอตทริบิวต์ SRC เท่านั้นแอตทริบิวต์ SRC ที่จำเป็นสำหรับแอตทริบิวต์ที่คุณต้องการเพื่อให้ได้ภาพที่แสดงบนหน้าเว็บ แอ็ตทริบิวต์นี้ระบุชื่อและตำแหน่งของไฟล์รูปภาพที่จะแสดง

ALT ในการเขียน XHTML และ HTML4 ที่ถูกต้องจำเป็นต้องใช้แอตทริบิวต์ ALT แอ็ตทริบิวต์นี้ใช้ในการจัดเตรียมเบราว์เซอร์ nonvisual ที่มีข้อความอธิบายภาพ เบราว์เซอร์แสดงข้อความทางเลือกในรูปแบบต่างๆ บางส่วนแสดงว่าเป็นป๊อปอัปเมื่อคุณวางเมาส์เหนือภาพคนอื่น ๆ จะแสดงในคุณสมบัติเมื่อคลิกขวาที่รูปภาพและบางส่วนจะไม่แสดงเลย

ใช้ ข้อความ alt เพื่อให้รายละเอียดเพิ่มเติมเกี่ยวกับภาพที่ไม่เกี่ยวข้องหรือสำคัญกับข้อความของเว็บเพจ แต่โปรดทราบว่าในโปรแกรมอ่านหน้าจอและเบราว์เซอร์แบบข้อความเท่านั้นข้อความจะอ่านแบบอินไลน์กับส่วนที่เหลือของข้อความในหน้าเว็บ เพื่อหลีกเลี่ยงความสับสนให้ใช้ข้อความอธิบายที่อธิบายว่า (ตัวอย่างเช่น) "เกี่ยวกับ Web Design และ HTML" แทน "โลโก้" เพียงอย่างเดียว

ใน HTML5 แอตทริบิวต์ ALT ไม่จำเป็นต้องใช้เสมอเนื่องจากคุณสามารถใช้คำอธิบายภาพเพื่อเพิ่มคำอธิบายลงไปได้ คุณสามารถใช้แอตทริบิวต์ ARIA-DESCRIBEDBY เพื่อระบุ ID ที่มีคำอธิบายแบบเต็ม

ข้อความ Alt ยังไม่จำเป็นต้องใช้หากภาพถูกตกแต่งอย่างหมดจดเช่นภาพกราฟิกที่ด้านบนของหน้าเว็บหรือไอคอน แต่ถ้าคุณไม่แน่ใจให้ใส่ข้อความ alt ในกรณีนี้

แอตทริบิวต์ IMG ที่แนะนำ

ความกว้าง และ ความสูง คุณควรมีนิสัยในการใช้แอตทริบิวต์ WIDTH และ HEIGHT เสมอ และคุณควรใช้ขนาดจริงและไม่ปรับขนาดรูปภาพของคุณด้วยเบราว์เซอร์

แอตทริบิวต์เหล่านี้เร่งการแสดงผลของหน้าเนื่องจากเบราว์เซอร์สามารถจัดสรรเนื้อที่ในการออกแบบสำหรับรูปภาพจากนั้นดาวน์โหลดเนื้อหาส่วนที่เหลือต่อได้แทนที่จะรอให้ภาพทั้งหมดดาวน์โหลด

คุณสมบัติอื่น ๆ ของ IMG ที่เป็นประโยชน์

TITLE แอตทริบิวต์เป็นแอตทริบิวต์ global ที่สามารถใช้กับ องค์ประกอบ HTML ใดก็ได้ นอกจากนี้แอตทริบิวต์ TITLE ช่วยให้คุณสามารถเพิ่มข้อมูลเพิ่มเติมเกี่ยวกับภาพได้

เบราว์เซอร์ส่วนใหญ่สนับสนุนคุณลักษณะ TITLE แต่พวกเขาทำในรูปแบบต่างๆ บางคนแสดงข้อความเป็นป๊อปอัปในขณะที่บางคนแสดงข้อมูลในหน้าจอข้อมูลเมื่อผู้ใช้คลิกขวาที่รูปภาพ คุณสามารถใช้แอตทริบิวต์ TITLE เพื่อเขียนข้อมูลเพิ่มเติมเกี่ยวกับภาพ แต่อย่านับว่าข้อมูลนี้ถูกซ่อน หรือ มองเห็นได้ คุณไม่ควรใช้คำหลักนี้เพื่อซ่อนคำหลักสำหรับเครื่องมือค้นหา การปฏิบัตินี้ได้รับการลงโทษโดยเครื่องมือค้นหาส่วนใหญ่แล้ว

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 ก็ตาม