ภาพสำหรับตกแต่ง เช่น การไล่ระดับสีพื้นหลังบนปุ่มหรือภาพพื้นหลังบนส่วนต่างๆ ของเนื้อหาหรือทั้งหน้า มีไว้สำหรับการนำเสนอและควรใช้กับ 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" ด้วย
เป็นสิ่งจำเป็นเนื่องจาก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 ภาพของ Hal และ Eve และรูปโปรไฟล์ 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> ที่จำเป็น 1 รายการ
แอตทริบิวต์ <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 และในเบราว์เซอร์แบบ Blink ด้วย
fetchpriority ไม่ค่อยใช้ หากรูปภาพเป็นส่วนหนึ่งของแผนที่ฝั่งเซิร์ฟเวอร์ ให้ใส่แอตทริบิวต์บูลีน 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