รูปภาพ

ภาพสำหรับตกแต่ง เช่น การไล่ระดับสีพื้นหลังบนปุ่มหรือภาพพื้นหลังบนส่วนต่างๆ ของเนื้อหาหรือทั้งหน้า มีไว้สำหรับการนำเสนอและควรใช้กับ 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

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับรูปภาพ