รูปภาพตกแต่ง เช่น การไล่ระดับสีของพื้นหลังบนปุ่มหรือภาพพื้นหลังในส่วนของเนื้อหาหรือทั้งหน้า เป็นการนำเสนอและควรใช้กับ CSS เมื่อรูปภาพเพิ่มบริบทให้กับเอกสาร รูปจะเป็นเนื้อหาและควรฝังด้วย HTML
วิธีหลักในการรวมรูปภาพคือแท็ก <img> ที่มีแอตทริบิวต์ src ที่อ้างอิงทรัพยากรรูปภาพและแอตทริบิวต์ alt ที่อธิบายรูปภาพ
<img src="images/eve.png" alt="Eve">
ทั้งแอตทริบิวต์ srcset ใน <img> และองค์ประกอบ <picture> มีวิธีรวมแหล่งที่มาของรูปภาพหลายแหล่งในการค้นหาสื่อที่เชื่อมโยงไว้ โดยแต่ละแหล่งจะมีแหล่งที่มาของรูปภาพสำรอง ซึ่งช่วยให้แสดงไฟล์ภาพที่เหมาะสมที่สุดตามความละเอียดของอุปกรณ์ ความสามารถของเบราว์เซอร์ และขนาดวิวพอร์ตได้ แอตทริบิวต์ srcset ช่วยให้ระบุเวอร์ชันรูปภาพได้หลายเวอร์ชันตามความละเอียด รวมถึงขนาดวิวพอร์ตของเบราว์เซอร์ควบคู่ไปกับแอตทริบิวต์ 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" ด้วย ซึ่งเป็นสิ่งจำเป็นเนื่องจากbugsของ VoiceOver
<img src="switch.svg" alt="light switch" role="img" />
การเขียนคำอธิบายรูปภาพที่มีประสิทธิภาพ alt รายการ
แอตทริบิวต์ Alt ควรเป็นรูปแบบที่สั้นและกระชับ โดยให้ข้อมูลที่เกี่ยวข้องทั้งหมดที่รูปภาพสื่อไป โดยละเว้นข้อมูลที่ซ้ำซ้อนกับเนื้อหาอื่นๆ ในเอกสารหรือไม่มีประโยชน์ ในการเขียนข้อความ โทนเสียงควรสะท้อนถึงโทน ของเว็บไซต์
ในการเขียนข้อความสำรองที่มีประสิทธิภาพ ลองจินตนาการว่าคุณกำลังอ่านหน้าเว็บทั้งหน้าให้บุคคลที่มองไม่เห็น การใช้องค์ประกอบเชิงความหมาย <img> จะช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอและบ็อตทราบว่าองค์ประกอบดังกล่าวเป็นรูปภาพ การระบุ "นี่คือรูปภาพ/ภาพหน้าจอ/รูปภาพของ" ใน alt ถือว่าซ้ำซ้อน ผู้ใช้ไม่จำเป็นต้องรู้ว่ามีรูปภาพ แต่จำเป็นต้องทราบข้อมูลที่รูปภาพนั้นสื่อ
โดยปกติคุณจะไม่พูดว่า "นี่คือภาพสุนัขสวมหมวกสีแดงแบบหยาบๆ" แต่คุณจะต้องถ่ายทอดสิ่งที่รูปภาพสื่ออารมณ์โดยเทียบกับบริบทที่เหลือของเอกสาร และสิ่งที่สื่อจะเปลี่ยนไปตามบริบทและเนื้อหาของข้อความรอบข้าง
เช่น เราจะอธิบายรูปภาพสุนัขในรูปแบบที่แตกต่างกันไป ขึ้นอยู่กับบริบท ถ้า Fluffy เป็นรูปโปรไฟล์ถัดจากรีวิวอาหารสุนัข Yuckymeat alt="Fluffy"ถือว่าเพียงพอแล้ว
หากรูปภาพนั้นเป็นส่วนหนึ่งของหน้าการรับอุปการะของ Fluffy บนเว็บไซต์สถานสงเคราะห์สัตว์ กลุ่มเป้าหมายจะเป็นพ่อแม่สุนัข ข้อความควรอธิบายข้อมูลที่แสดงในรูปภาพซึ่งเกี่ยวข้องกับผู้ใช้งาน และไม่ซ้ำซ้อนกับข้อความโดยรอบ คำอธิบายที่ยาวขึ้น เช่น alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her
mouth" ถือว่าเหมาะสม โดยทั่วไปข้อความของหน้าการรับเลี้ยงบุตรบุญธรรมจะระบุสายพันธุ์ สายพันธุ์ อายุ และเพศของสัตว์เลี้ยงที่เลี้ยงได้ จึงไม่จำเป็นต้องแสดงซ้ำในข้อความแสดงแทน แต่ประวัติการเขียนของสุนัขนั้นอาจไม่ได้พูดถึงความยาวของขน สี
หรือความชอบเกี่ยวกับของเล่น โปรดทราบว่าเราไม่ได้อธิบายรูปภาพ เจ้าของสุนัขที่มีโอกาสเป็นเจ้าของไม่จำเป็นต้องรู้ว่าสุนัขอยู่ในร่มหรือกลางแจ้ง หรือมีปลอกคอสีแดงและสายจูงสีน้ำเงิน
เมื่อใช้รูปภาพสำหรับระบบการตีความสัญลักษณ์ เนื่องจากแอตทริบิวต์ alt ระบุชื่อที่เข้าถึงได้ ให้สื่อถึงความหมายของไอคอน ไม่ใช่คำอธิบายรูปภาพ ตัวอย่างเช่น แอตทริบิวต์ Alt ของไอคอนแว่นขยายคือ search ไอคอนที่มีลักษณะคล้ายบ้าน
จะมี home เป็นข้อความแสดงแทน คำอธิบายของไอคอนฟลอปปี้ดิสก์ 5 นิ้วคือ save หากมีไอคอน Fluffy ที่ใช้ระบุแนวทางปฏิบัติแนะนำและรูปแบบต่อต้าน 2 ไอคอน สุนัขที่กำลังยิ้มในหมวกเบเร่ต์สีเขียวอาจมีชุด alt="good" ส่วนสุนัขเห่าใส่หมวกเบเรต์สีแดงอาจเขียนว่า alt="bad" แต่ให้ใช้เฉพาะการตีความสัญลักษณ์มาตรฐานเท่านั้น และหากคุณใช้ไอคอนที่ไม่เป็นมาตรฐาน เช่น Fluffy ดีและไม่ดี ให้ใส่คำอธิบายและตรวจสอบว่าไอคอนไม่ใช่วิธีเดียวในการถอดรหัสความหมายขององค์ประกอบ UI
หากรูปภาพเป็นภาพหน้าจอหรือกราฟ ให้เขียนสิ่งที่เรียนรู้จากรูปภาพแทนที่จะอธิบายลักษณะที่ปรากฏ แม้ว่ารูปภาพจะแทนคำได้นับพัน แต่คำอธิบายควรถ่ายทอดทุกสิ่งที่ได้เรียนรู้อย่างกระชับ
ละเว้นข้อมูลที่ผู้ใช้ทราบอยู่แล้วจากบริบทนั้นๆ และข้อมูลที่ควรระบุในเนื้อหา เช่น หากคุณอยู่ในหน้าบทแนะนำเกี่ยวกับการเปลี่ยนการตั้งค่าเบราว์เซอร์และหน้าดังกล่าวเกี่ยวข้องกับการคลิกไอคอนในเบราว์เซอร์ Chrome แต่ URL ของหน้าเว็บในการจับภาพหน้าจอก็จะไม่สำคัญ จำกัด alt ไว้เฉพาะหัวข้อที่ต้องการ: วิธีเปลี่ยนการตั้งค่า alt อาจเป็น
"ไอคอนการตั้งค่าอยู่ในแถบนำทางใต้ช่องค้นหา" อย่าใส่ "ภาพหน้าจอ" หรือ "machinelearningworkshop"
เนื่องจากผู้ใช้ไม่จำเป็นต้องทราบว่าเป็นภาพหน้าจอและไม่จำเป็นต้องทราบว่าช่างเทคนิคไปที่ไหนตอนที่เขียนวิธีการ คำอธิบายรูปภาพจะอิงตามบริบทว่าเหตุใดรูปภาพจึงถูกรวมไว้ตั้งแต่แรก
หากภาพหน้าจอแสดงวิธีค้นหาหมายเลขเวอร์ชันของเบราว์เซอร์โดยไปที่ chrome://version/ ให้ระบุ URL ในเนื้อหาของหน้าเว็บตามวิธีการ และระบุสตริงว่างเป็นแอตทริบิวต์ Alt เนื่องจากรูปภาพไม่มีข้อมูลที่ไม่ได้อยู่ในข้อความโดยรอบ
หากรูปภาพไม่มีข้อมูลเพิ่มเติมหรือเป็นเพียงการตกแต่งเท่านั้น ควรมีแอตทริบิวต์เหมือนสตริงว่าง
<img src="svg/magazine.svg" alt="" role="none" />
MachineLearningWorkshop.com มีรูปภาพเบื้องหน้า 7 รูป จึงมี 7 รูปที่มีแอตทริบิวต์ Alt ได้แก่ สวิตช์ไฟรูปไข่อีสเตอร์ ไอคอนแบบกำหนดเอง รูปชีวประวัติของฮัลและอีฟ 2 รูป และรูปโปรไฟล์ 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 เท่า การแสดงรูปภาพที่แตกต่างกันมี 2-3 วิธีโดยอิงตามขนาดวิวพอร์ตและความละเอียดของหน้าจอ
แอตทริบิวต์ <img> srcset รายการ
แอตทริบิวต์ srcset ช่วยให้แนะนำไฟล์ภาพหลายไฟล์ได้ โดยเบราว์เซอร์จะเลือกรูปภาพที่จะขอโดยอิงตามคำค้นหาสื่อหลายรายการ ซึ่งรวมถึงขนาดวิวพอร์ตและความละเอียดของหน้าจอ
มีแอตทริบิวต์ srcset เพียงรายการเดียวต่อองค์ประกอบ <img> ได้ แต่ srcset ดังกล่าวลิงก์กับรูปภาพหลายรูปได้ แอตทริบิวต์ srcset ยอมรับรายการค่าที่คั่นด้วยคอมมา โดยแต่ละค่าจะมี URL ของเนื้อหา ตามด้วยการเว้นวรรคตามด้วยคำอธิบายสำหรับตัวเลือกรูปภาพนั้น หากใช้ข้อบ่งชี้ความกว้าง คุณต้องใส่แอตทริบิวต์ sizes ในคำค้นหาสื่อหรือขนาดแหล่งที่มาสำหรับตัวเลือก srcset แต่ละรายการนอกเหนือจากตัวเลือกสุดท้ายด้วย ส่วน "เรียนรู้" ที่ครอบคลุมรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ที่มี srcset และไวยากรณ์ที่สื่อความหมายนั้นน่าอ่าน
รูปภาพ srcset จะมีลำดับความสำคัญเหนือรูปภาพ src หากมีการจับคู่ที่ตรงกัน
<picture>และ<source>
อีกวิธีในการระบุทรัพยากรจำนวนมากและทำให้เบราว์เซอร์แสดงผลเนื้อหาที่เหมาะสมที่สุดคือการใช้องค์ประกอบ <picture> องค์ประกอบ <picture> เป็นองค์ประกอบคอนเทนเนอร์สำหรับตัวเลือกรูปภาพหลายรายการที่แสดงในองค์ประกอบ <source> แบบไม่จำกัดจำนวนและองค์ประกอบ <img> เดียวที่จำเป็น
แอตทริบิวต์ <source> ประกอบด้วย srcset, sizes, media, width และ height
แอตทริบิวต์ srcset เป็นเรื่องปกติสำหรับ img, source และ link แต่มีการใช้งานในแหล่งที่มาต่างออกไปเล็กน้อยเนื่องจากคำค้นหาสื่ออาจแสดงในแอตทริบิวต์สื่อของ <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 เนื่องจากนักพัฒนาซอฟต์แวร์ส่วนใหญ่เพียงแค่ประกาศความกว้างเท่านั้น การรับและการแสดงผลรูปภาพจะทําให้เกิด Cumulative Layout Shift ซึ่งจะส่งผลเสียต่อ 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