รูปภาพตกแต่ง เช่น การไล่ระดับสีพื้นหลังบนปุ่มหรือรูปภาพพื้นหลังในส่วนเนื้อหาหรือทั้งหน้า เป็นองค์ประกอบที่ใช้ในการนำเสนอและควรใช้กับ CSS เมื่อรูปภาพเพิ่มบริบทให้กับเอกสาร รูปภาพนั้นถือเป็นเนื้อหาและควร ฝังด้วย HTML
วิธีหลักในการรวมรูปภาพคือแท็ก
<img> ที่มีแอตทริบิวต์
src ซึ่งอ้างอิงทรัพยากรรูปภาพและแอตทริบิวต์ alt
ที่อธิบายรูปภาพ
<img src="images/eve.png" alt="Eve">
ทั้งแอตทริบิวต์ srcset ใน <img> และองค์ประกอบ <picture> ช่วยให้คุณรวมแหล่งที่มาของรูปภาพหลายรายการพร้อมด้วย
Media Query ที่เกี่ยวข้อง โดยแต่ละรายการจะมีแหล่งที่มาของรูปภาพสำรอง ซึ่งช่วยให้แสดงไฟล์รูปภาพที่เหมาะสมที่สุดตามความละเอียดของอุปกรณ์
ความสามารถของเบราว์เซอร์ และขนาด Viewport แอตทริบิวต์ srcset ช่วยให้คุณระบุรูปภาพได้หลายเวอร์ชัน
ตามความละเอียด และขนาด Viewport ของเบราว์เซอร์พร้อมกับแอตทริบิวต์ sizes
<img src="images/eve.png" alt="Eve"
srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
sizes="(max-width: 800px) 400px, 800px" />
คุณยังทำได้ด้วยองค์ประกอบ <picture> พร้อมกับองค์ประกอบย่อย <source> ซึ่งใช้ <img> เป็นแหล่งที่มาเริ่มต้น
<picture>
<source src="images/eve.png" media="(max-width: 800px)" />
<source src="images/eve-xl.jpg" />
<img src="images/eve.png" alt="Eve" />
</picture>
นอกจากวิธีการรูปภาพที่ตอบสนองตามอุปกรณ์ใน HTML ที่มีอยู่แล้วเหล่านี้ HTML ยังช่วยให้ปรับปรุงประสิทธิภาพการแสดงรูปภาพผ่านแอตทริบิวต์ต่างๆ ได้ด้วย
แท็ก
<img> และปุ่มส่งแบบกราฟิก
<input type="image">
สามารถมีแอตทริบิวต์ height และ width เพื่อตั้งค่าสัดส่วนภาพของรูปภาพให้
ลดการเปลี่ยนแปลงเลย์เอาต์เนื้อหาได้ แอตทริบิวต์ lazy จะเปิดใช้การโหลดแบบ Lazy Loading
HTML ยังรองรับการรวมรูปภาพ SVG โดยใช้ <svg> โดยตรงด้วย แม้ว่ารูปภาพ SVG ที่มีนามสกุล .svg (หรือเป็น data-uri) จะฝังได้โดยใช้องค์ประกอบ <img>
รูปภาพเบื้องหน้าแต่ละรูปควรมีแอตทริบิวต์ src และ alt อย่างน้อย
src คือเส้นทางและชื่อไฟล์ของรูปภาพที่ฝัง ระบบใช้แอตทริบิวต์ src
เพื่อระบุ URL ของรูปภาพ จากนั้นเบราว์เซอร์จะดึงข้อมูล
ชิ้นงานและแสดงผลในหน้าเว็บ <img> กำหนดให้ต้องระบุแอตทริบิวต์นี้
หากไม่มีข้อมูลนี้ ก็จะไม่มีอะไรให้แสดงผล
แอตทริบิวต์ alt จะระบุข้อความแสดงแทนสำหรับรูปภาพ ซึ่งจะอธิบายรูปภาพสำหรับผู้ที่มองไม่เห็นหน้าจอ (เช่น เครื่องมือค้นหาและเทคโนโลยีความช่วยเหลือ รวมถึง Alexa, Siri และ Google Assistant) และอาจแสดงโดยเบราว์เซอร์หากรูปภาพโหลดไม่สำเร็จ นอกจากผู้ใช้ที่มีเครือข่ายช้าหรือแบนด์วิดท์ที่จำกัดแล้ว altข้อความยังมีประโยชน์อย่างยิ่งในอีเมล HTML เนื่องจากผู้ใช้จำนวนมากบล็อกรูปภาพในแอปพลิเคชันอีเมล
<img src="path/filename" alt="descriptive text" />
หากรูปภาพเป็นประเภทไฟล์ SVG ให้ใส่
role="img"
ด้วย เนื่องจากVoiceOver
มีข้อบกพร่อง
<img src="switch.svg" alt="light switch" role="img" />
เขียนaltคำอธิบายรูปภาพที่มีประสิทธิภาพ
แอตทริบิวต์ข้อความแสดงแทนมีจุดมุ่งหมายเพื่อให้สั้นและกระชับ โดยให้ข้อมูลที่เกี่ยวข้องทั้งหมด ซึ่งรูปภาพสื่อถึงในขณะที่ละเว้นข้อมูลที่ซ้ำซ้อน กับเนื้อหาอื่นๆ ในเอกสารหรือไม่มีประโยชน์ ในการเขียนข้อความ น้ำเสียงควรสอดคล้องกับน้ำเสียงของเว็บไซต์
หากต้องการเขียนข้อความแสดงแทนที่มีประสิทธิภาพ ให้ลองจินตนาการว่าคุณกำลังอ่านทั้งหน้า
ให้ผู้ที่มองไม่เห็นฟัง การใช้แท็ก <img> semantic จะช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอและบ็อตทราบว่าองค์ประกอบดังกล่าวเป็นรูปภาพ การระบุว่า "นี่คือรูปภาพ/ภาพหน้าจอ/รูปของ" ใน alt เป็นการระบุที่ซ้ำซ้อน ผู้ใช้ไม่จำเป็นต้องรู้ว่ามีรูปภาพ แต่ต้องรู้ว่ารูปภาพนั้นสื่อถึงข้อมูลใด
โดยปกติแล้ว คุณคงไม่พูดว่า "นี่คือรูปภาพสุนัขสวมหมวกสีแดงที่ดูเป็นเม็ดๆ" แต่คุณควรบอกว่ารูปภาพนั้นสื่อถึงอะไรที่เกี่ยวข้องกับบริบท ของส่วนที่เหลือในเอกสาร สิ่งที่คุณสื่อจะเปลี่ยนแปลงไปตามบริบท และเนื้อหาของข้อความโดยรอบ
เช่น รูปภาพสุนัขจะอธิบายได้หลายวิธีตามบริบท
หาก Fluffy เป็นอวตารข้างรีวิวอาหารสุนัข Yuckymeat
alt="Fluffy" ก็เพียงพอ
หากรูปภาพเป็นส่วนหนึ่งของหน้าการรับเลี้ยง Fluffy ในเว็บไซต์ของศูนย์พักพิงสัตว์ กลุ่มเป้าหมายคือผู้ที่คาดว่าจะเป็นผู้ปกครองของสุนัข ข้อความควรอธิบายข้อมูลที่สื่อในรูปภาพซึ่งเกี่ยวข้องกับผู้รับบุตรบุญธรรมและไม่ได้ซ้ำกับข้อความโดยรอบ คำอธิบายที่ยาวขึ้น เช่น
alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth"
จะเหมาะสมกว่า โดยทั่วไปข้อความในหน้าการรับเลี้ยงจะมีข้อมูลเกี่ยวกับสายพันธุ์
พันธุ์ อายุ และเพศของสัตว์เลี้ยงที่พร้อมรับเลี้ยง จึงไม่จำเป็นต้องระบุข้อมูลนี้ซ้ำในข้อความแทน แต่ประวัติที่เขียนของสุนัขอาจไม่ได้
ระบุความยาว สี หรือของเล่นที่ชอบ
ที่สำคัญคือเราไม่ได้อธิบายรูปภาพทั้งหมด ผู้ที่ต้องการเป็นเจ้าของสุนัข ไม่จำเป็นต้องรู้ว่าสุนัขอยู่ภายในหรือภายนอกอาคาร หรือสวมปลอกคอสีแดง และสายจูงสีน้ำเงิน
เมื่อใช้รูปภาพสำหรับไอคอน เนื่องจากแอตทริบิวต์ alt ระบุชื่อที่เข้าถึงได้ ให้สื่อความหมายของไอคอน ไม่ใช่คำอธิบายของรูปภาพ
เช่น แอตทริบิวต์ข้อความแสดงแทนของไอคอนแว่นขยายคือ search ไอคอน
ที่มีลักษณะคล้ายบ้านมี home เป็นข้อความแสดงแทน คำอธิบายของไอคอนฟล็อปปีดิสก์ขนาด 5 นิ้วคือ save หากใช้ไอคอน Fluffy 2 ตัว
เพื่อระบุแนวทางปฏิบัติแนะนำและรูปแบบที่ไม่ควรทำ สุนัขยิ้มที่สวมหมวกเบเรต์สีเขียว
อาจมีalt="good" ส่วนสุนัขคำรามที่สวมหมวกเบเรต์สีแดงอาจมีalt="bad" อย่างไรก็ตาม ให้ใช้เฉพาะไอคอนมาตรฐาน และหากใช้ไอคอนที่ไม่เป็นไปตามมาตรฐาน เช่น Fluffy ที่ดีและไม่ดี ให้ใส่คำอธิบายเพื่อให้แน่ใจว่าไอคอนไม่ใช่เพียงวิธีเดียวในการถอดรหัสความหมายขององค์ประกอบ UI
หากรูปภาพเป็นภาพหน้าจอหรือกราฟ ให้เขียนสิ่งที่ได้เรียนรู้จากรูปภาพ แทนการอธิบายลักษณะที่ปรากฏ แม้ว่ารูปภาพจะสื่อความหมายได้ดีกว่าคำพูดนับพัน แต่คำอธิบายก็ควรสื่อถึงทุกสิ่งที่ได้เรียนรู้ไว้อย่างกระชับ
ละเว้นข้อมูลที่ผู้ใช้ทราบอยู่แล้วจากบริบทและได้รับแจ้งในเนื้อหา ตัวอย่างเช่น หากคุณอยู่ในหน้าบทแนะนำเกี่ยวกับการเปลี่ยนการตั้งค่าเบราว์เซอร์ และหน้าเว็บนั้นเกี่ยวกับการคลิกไอคอนในเบราว์เซอร์ Chrome URL ของหน้าเว็บในภาพหน้าจอจะไม่สำคัญ จำกัด
alt ให้พูดถึงหัวข้อที่กำลังพิจารณาอยู่ นั่นคือวิธีเปลี่ยนการตั้งค่า
alt อาจเป็น "ไอคอนการตั้งค่าอยู่ในแถบนำทางใต้ช่องค้นหา" อย่าใส่ "ภาพหน้าจอ" หรือ "เวิร์กช็อปแมชชีนเลิร์นนิง"
เนื่องจากผู้ใช้ไม่จำเป็นต้องรู้ว่าเป็นภาพหน้าจอและไม่จำเป็นต้องรู้
ว่านักเขียนเทคนิคกำลังท่องเว็บที่ไหนขณะเขียนวิธีการ
คำอธิบายของรูปภาพจะอิงตามบริบทของเหตุผลที่รวมรูปภาพไว้ตั้งแต่แรก
หากภาพหน้าจอแสดงวิธีค้นหาหมายเลขเวอร์ชันของเบราว์เซอร์โดยไปที่
chrome://version/ ให้ใส่ URL ในเนื้อหาของหน้าเว็บเป็นวิธีการ
และระบุสตริงว่างเป็นแอตทริบิวต์ Alt เนื่องจากรูปภาพไม่ได้ให้ข้อมูลใดๆ ที่ไม่ได้อยู่ในข้อความโดยรอบ
หากรูปภาพไม่ได้ให้ข้อมูลเพิ่มเติมหรือเป็นเพียงภาพตกแต่ง แอตทริบิวต์ควรยังคงอยู่เช่นเดิมในรูปแบบสตริงว่าง
<img src="svg/magazine.svg" alt="" role="none" />
MachineLearningWorkshop.com มีรูปภาพเบื้องหน้า 7 รูป จึงมีรูปภาพ 7 รูป พร้อมแอตทริบิวต์ข้อความแทน ได้แก่ สวิตช์ไฟไข่อีสเตอร์ ไอคอนคู่มือ รูปภาพ ชีวประวัติของฮาลและอีฟ และอวาตาร์ 3 ตัวของเครื่องปั่น เครื่องดูดฝุ่น และ เครื่องปิ้งขนมปัง รูปภาพด้านหน้าที่ดูเหมือนนิตยสารเป็นรูปภาพเดียวที่ ใช้เพื่อการตกแต่งเท่านั้น หน้านี้ยังมีภาพพื้นหลัง 2 ภาพด้วย รูปภาพเหล่านี้ เป็นภาพตกแต่งและเพิ่มด้วย CSS จึงเข้าถึงไม่ได้
นิตยสารเป็นเพียงของตกแต่ง จึงมีแอตทริบิวต์ alt ที่ว่างเปล่าและมีrole เป็น none
เนื่องจากรูปภาพเป็น SVG ที่ใช้ในการนำเสนอเท่านั้น หากมีความหมาย รูปภาพ SVG ควรมี
role="img"
<img src="svg/magazine.svg" alt="" role="none" />
ที่ด้านล่างของหน้ามีรีวิว 3 รายการ โดยแต่ละรายการมีรูปภาพของ
โปสเตอร์ โดยปกติแล้วข้อความ alt จะเป็นชื่อของบุคคลในรูปภาพ
<img src="images/blender.svg" alt="Blendan Smooth" role="img" />
แต่เนื่องจากหน้านี้เป็นหน้าตลก คุณจึงควรสื่อถึงสิ่งที่ผู้ใช้ที่มีสายตาเลือนรางอาจไม่เห็น
เพื่อไม่ให้พลาดมุกตลก เราใช้ฟังก์ชันเครื่อง
ต้นฉบับเป็น alt แทนการใช้ชื่อตัวละคร
<img src="images/blender.svg" alt="blender" role="img" />
รูปภาพของครูผู้สอนไม่ใช่แค่อวตาร แต่เป็นรูปภาพชีวประวัติ จึงมีคำอธิบายที่ละเอียดกว่า
หากนี่เป็นเว็บไซต์จริง คุณจะต้องระบุคำอธิบายขั้นต่ำเกี่ยวกับลักษณะของครู เพื่อให้นักเรียน/นักศึกษาที่สนใจอาจจดจำครูได้เมื่อเข้าชั้นเรียน
<img src="svg/hal.svg" role="img"
alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />
เนื่องจากเป็นเว็บไซต์มุกตลก โปรดระบุข้อมูลที่เกี่ยวข้องในบริบทของมุกตลกแทน
<img src="svg/hal.svg" role="img"
alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />
หากคุณอ่านหน้าเว็บให้เพื่อนฟังทางโทรศัพท์ เพื่อนคงไม่สนใจว่าจุดสีแดงมีลักษณะอย่างไร ในกรณีนี้ ประวัติการอ้างอิงภาพยนตร์มีความสำคัญ
เมื่อเขียนข้อความอธิบาย ให้พิจารณาว่ารูปภาพสื่อถึงข้อมูลใดที่สำคัญและเกี่ยวข้องกับผู้ใช้ แล้วระบุข้อมูลนั้น โปรดทราบว่าเนื้อหาของแอตทริบิวต์ alt สำหรับรูปภาพจะแตกต่างกันไปตามบริบท ข้อมูลทั้งหมดที่สื่อในรูปภาพ
ซึ่งผู้ใช้ที่มองเห็นเข้าถึงได้และเกี่ยวข้องกับบริบทคือสิ่งที่ต้องสื่อ ไม่จำเป็นต้องมีข้อมูลอื่น ทำให้สั้น กระชับ
และมีประโยชน์
แอตทริบิวต์ src และ alt เป็นข้อกำหนดขั้นต่ำสำหรับรูปภาพที่ฝัง เราต้องพูดถึงแอตทริบิวต์อื่นๆ อีก 2-3 รายการ
รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
มีขนาดวิวพอร์ตและความละเอียดหน้าจอมากมาย คุณไม่ต้องการ สิ้นเปลืองแบนด์วิดท์ของผู้ใช้บนอุปกรณ์เคลื่อนที่ด้วยการแสดงรูปภาพที่มีความกว้างเพียงพอสำหรับ จอภาพขนาดใหญ่ แต่คุณอาจต้องการแสดงรูปภาพที่มีความละเอียดสูงกว่าสำหรับ อุปกรณ์ขนาดเล็กที่มีความละเอียดหน้าจอสูงกว่าปกติถึง 4 เท่า คุณแสดงรูปภาพที่แตกต่างกันตามขนาดวิวพอร์ตและความละเอียดหน้าจอได้ หลายวิธี
แอตทริบิวต์ <img> srcset รายการ
แอตทริบิวต์ srcset ช่วยให้แนะนำไฟล์รูปภาพหลายไฟล์ได้
โดยเบราว์เซอร์จะเลือกรูปภาพที่จะขอตามคิวรี่สื่อหลายรายการ ซึ่งรวมถึงขนาดวิวพอร์ตและความละเอียดของหน้าจอ
srcset แอตทริบิวต์ 1 รายการต่อองค์ประกอบ <img> 1 รายการ แต่ srcset นั้นสามารถลิงก์ไปยังรูปภาพหลายรูปได้ แอตทริบิวต์ srcset
ยอมรับรายการค่าที่คั่นด้วยคอมมา โดยแต่ละค่าจะมี URL ของชิ้นงาน ตามด้วยช่องว่าง ตามด้วย
ตัวอธิบายสำหรับตัวเลือกรูปภาพนั้น หากใช้ตัวอธิบายความกว้าง คุณต้องใส่แอตทริบิวต์ sizes พร้อมกับคําค้นหาสื่อหรือขนาดแหล่งที่มาสําหรับตัวเลือก srcset แต่ละรายการยกเว้นรายการสุดท้าย ควรอ่านส่วน "เรียนรู้" ที่ครอบคลุมรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ด้วย srcset และไวยากรณ์เชิงอธิบาย
รูปภาพ srcset จะมีความสำคัญเหนือกว่ารูปภาพ src หากตรงกัน
<picture> และ <source>
อีกวิธีหนึ่งในการระบุแหล่งข้อมูลหลายรายการและอนุญาตให้เบราว์เซอร์แสดงผลชิ้นงานที่เหมาะสมที่สุดคือการใช้องค์ประกอบ
<picture> องค์ประกอบ <picture> คือองค์ประกอบคอนเทนเนอร์
สำหรับตัวเลือกรูปภาพหลายรายการที่แสดงในองค์ประกอบ <source>
จำนวนไม่จำกัด และองค์ประกอบ <img> รายการเดียวที่จำเป็น
แอตทริบิวต์ <source> ประกอบด้วย srcset, sizes, media, width และ height
แอตทริบิวต์ srcset เป็นแอตทริบิวต์ที่ใช้ร่วมกันใน img, source และ link แต่โดยทั่วไปจะมีการติดตั้งใช้งานที่แหล่งที่มาแตกต่างกันเล็กน้อย
เนื่องจากสามารถระบุ Media Query ในแอตทริบิวต์สื่อของ <srcset> แทนได้ <source> ยังรองรับรูปแบบรูปภาพที่กําหนดไว้ในแอตทริบิวต์ type ด้วย
เบราว์เซอร์จะพิจารณาองค์ประกอบย่อย <source> แต่ละรายการและเลือกรายการที่ตรงกันมากที่สุด หากไม่พบรายการที่ตรงกัน ระบบจะเลือก URL
ของแอตทริบิวต์ src ขององค์ประกอบ <img> ชื่อที่เข้าถึงได้มาจากแอตทริบิวต์ alt ของ <img> ที่ซ้อนกัน
นอกจากนี้ คุณยังควรอ่านส่วน "เรียนรู้" ที่ครอบคลุมองค์ประกอบ <picture> และไวยากรณ์เชิงกำหนดด้วย
ฟีเจอร์ประสิทธิภาพเพิ่มเติม
ฟีเจอร์รูปภาพเพิ่มเติมอีกหลายอย่างช่วยปรับปรุง ประสิทธิภาพของเว็บไซต์ได้
การโหลดแบบ Lazy Loading
loadingแอตทริบิวต์
จะบอกเบราว์เซอร์ที่เปิดใช้ JS วิธีโหลดรูปภาพ ค่า eager เริ่มต้น
หมายความว่าระบบจะโหลดรูปภาพทันทีที่แยกวิเคราะห์ HTML แม้ว่ารูปภาพ
จะอยู่นอกวิวพอร์ตที่มองเห็นได้ก็ตาม โดยการตั้งค่า
loading="lazy" ระบบจะเลื่อนการโหลดรูปภาพออกไปจนกว่า
รูปภาพจะอยู่ในวิวพอร์ต เบราว์เซอร์จะเป็นผู้กำหนดคำว่า "มีแนวโน้ม" โดยอิงตาม
ระยะห่างของรูปภาพจากวิวพอร์ต ค่านี้จะอัปเดตเมื่อผู้ใช้
เลื่อน การโหลดแบบ Lazy Loading ช่วยประหยัดแบนด์วิดท์และ CPU ซึ่งจะปรับปรุงประสิทธิภาพ
สำหรับผู้ใช้ส่วนใหญ่ หากปิดใช้ JavaScript ด้วยเหตุผลด้านความปลอดภัย รูปภาพทั้งหมดจะeagerโดยค่าเริ่มต้น
<img src="switch.svg" alt="light switch" loading="lazy" />
สัดส่วนภาพ
เบราว์เซอร์จะเริ่มแสดงผล HTML เมื่อได้รับ และส่งคำขอเนื้อหาเมื่อพบ ซึ่งหมายความว่าเบราว์เซอร์แสดงผล HTML อยู่แล้วเมื่อพบแท็ก <img> และส่งคำขอ และรูปภาพอาจใช้เวลา
ในการโหลด โดยค่าเริ่มต้น เบราว์เซอร์จะไม่สงวนพื้นที่สำหรับรูปภาพอื่นๆ นอกเหนือจาก
ขนาดที่จำเป็นในการแสดงข้อความ alt
องค์ประกอบ <img> รองรับแอตทริบิวต์ height และ width
ที่ไม่มีหน่วยมาโดยตลอด พร็อพเพอร์ตี้เหล่านี้เลิกใช้ไปแล้วและหันมาใช้ CSS แทน CSS อาจกำหนด
ขนาดรูปภาพ โดยมักจะกำหนดขนาดเดียว เช่น max-width: 100%;
เพื่อให้คงอัตราส่วนภาพไว้
เนื่องจากโดยปกติแล้ว CSS จะรวมอยู่ใน <head> จึงมีการแยกวิเคราะห์ก่อนที่จะพบ <img>
แต่หากไม่ได้ระบุheightหรือ
สัดส่วนภาพอย่างชัดเจน พื้นที่ที่สงวนไว้จะเป็นความสูง (หรือความกว้าง) ของข้อความ alt
เมื่อนักพัฒนาซอฟต์แวร์ประกาศความกว้างเพียงอย่างเดียว การรับและการแสดงผลรูปภาพจะทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์สะสม ซึ่งส่งผลเสียต่อWeb Vitals เบราว์เซอร์
รองรับสัดส่วนภาพของรูปภาพเพื่อแก้ไขปัญหานี้ การรวมแอตทริบิวต์ height และ width ไว้ใน
<img> จะทำหน้าที่เป็นคำแนะนำในการปรับขนาด
เพื่อแจ้งให้เบราว์เซอร์ทราบถึงสัดส่วนภาพ ซึ่งจะช่วยให้สามารถจองพื้นที่ที่เหมาะสม
สำหรับการแสดงผลรูปภาพในท้ายที่สุด
เมื่อเบราว์เซอร์พบมิติเดียว เช่น ตัวอย่าง 50% ของเรา เบราว์เซอร์จะ
จัดสรรพื้นที่สำหรับรูปภาพตามมิติ CSS และอีกมิติหนึ่ง
จะรักษาอัตราส่วนความกว้างต่อความสูง
<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />
รูปภาพจะปรับเปลี่ยนตามพื้นที่โฆษณาได้หากตั้งค่า CSS อย่างถูกต้องเพื่อให้รูปภาพ
ปรับเปลี่ยนตามพื้นที่โฆษณาได้ ได้ ค่า height และ width ที่ไม่มีหน่วยจะถูก
ลบล้างด้วย CSS วัตถุประสงค์ของการรวมแอตทริบิวต์เหล่านี้คือเพื่อจองพื้นที่ในสัดส่วนภาพที่ถูกต้อง ซึ่งจะช่วยปรับปรุงประสิทธิภาพด้วยการลดการเปลี่ยนเลย์เอาต์ หน้าเว็บจะยังคงใช้เวลาในการโหลดเท่าเดิมโดยประมาณ
แต่ UI จะไม่เปลี่ยนเมื่อวาดรูปภาพลงบนหน้าจอ
ฟีเจอร์อื่นๆ ของรูปภาพ
นอกจากนี้ องค์ประกอบ <img> ยังรองรับแอตทริบิวต์ crossorigin, decoding, referrerpolicy และ fetchpriority ในเบราว์เซอร์ที่ใช้ Blink
ใช้ในกรณีที่พบได้ยาก หากรูปภาพเป็นส่วนหนึ่งของแผนที่ฝั่งเซิร์ฟเวอร์ ให้ใส่ismapแอตทริบิวต์บูลีนและซ้อน<img>ในลิงก์สำหรับผู้ใช้ที่ไม่มีอุปกรณ์ชี้
ismap ไม่จำเป็นหรือแม้แต่ไม่รองรับใน
<input type="image" name="imageSubmitName"> เนื่องจากระบบจะส่งพิกัด x และ y
ของตำแหน่งการคลิกระหว่างการส่งแบบฟอร์ม โดยจะต่อท้ายค่ากับชื่ออินพุต (หากมี) เช่น มีการส่งข้อความอย่าง
&imageSubmitName.x=169&imageSubmitName.y=66 พร้อมกับแบบฟอร์มเมื่อ
ผู้ใช้คลิกรูปภาพและส่ง หากรูปภาพไม่มีแอตทริบิวต์
name ระบบจะส่ง x และ y ดังนี้ &x=169&y=66
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับรูปภาพ
รูปภาพเบื้องหน้าควรมีแอตทริบิวต์ 2 อย่างใดเสมอ
sizealtsrc