รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์และแนวทางงานศิลปะ

รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์มักจะใช้งานโดยใช้แอตทริบิวต์ srcset แอตทริบิวต์ srcset คือรายการที่คั่นด้วยคอมมาของชื่อไฟล์รูปภาพ และตัวอธิบายความกว้างหรือความหนาแน่น ตั้งค่าแอตทริบิวต์ width และ height ในแท็ก <img> และ <source> ที่ใช้ srcset เพื่อป้องกันไม่ให้เลย์เอาต์เปลี่ยนแปลง

สำหรับรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งใช้ตัวบอกความหนาแน่น

• รูปภาพทั้งหมดที่แสดงใน src และ srcset ควรมีสัดส่วนภาพเท่ากัน
• ตั้งค่าแอตทริบิวต์ width และ height ให้ตรงกับขนาดของรูปภาพ 1x
• แอตทริบิวต์ src ควรอ้างอิงถึงรูปภาพ 1x

สำหรับรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งใช้ตัวบอกความกว้าง ให้ทำดังนี้

• รูปภาพทั้งหมดที่แสดงใน src และ srcset ควรมีสัดส่วนภาพเท่ากัน
• ตั้งค่าแอตทริบิวต์ width และ height ให้ตรงกับขนาดของรูปภาพสำรอง
• ปรับการจัดรูปแบบรูปภาพตามความจำเป็น: หากไม่มีการจัดรูปแบบ CSS การตั้งค่า width และ height ในรูปภาพที่ตอบสนองตามอุปกรณ์ซึ่งใช้ข้อบ่งชี้ความกว้างจะทำให้รูปภาพแสดงผลที่ขนาดเดียวกันเสมอ แม้ว่ารูปภาพที่แสดงใน srcset จะมีขนาดต่างกันก็ตาม ลักษณะการทำงานนี้อาจไม่ใช่สิ่งที่คุณต้องการ การเพิ่ม width: 100%; height: auto; หรือ width: 100vw; height: auto; ในการจัดรูปแบบรูปภาพอาจให้ลักษณะที่ปรากฏตามที่ต้องการ

สำหรับแท็ก <picture>:

• ตั้งค่าแอตทริบิวต์ width และ height สำหรับแท็ก <source> ทั้งหมด: ค่าที่เหมาะสมสำหรับ width และ height จะขึ้นอยู่กับวิธีที่แท็ก <source> ใช้ srcset (ดูข้อมูลเกี่ยวกับการทำงานร่วมกับ srcset ด้านบน)
• ปรับการจัดรูปแบบรูปภาพ: หากจำเป็นต้องปรับการจัดรูปแบบรูปภาพ โปรดทราบว่าการเพิ่มการจัดรูปแบบในแท็ก <source> จะไม่ส่งผลใดๆ เนื่องจากแท็ก <source> เป็นองค์ประกอบเปล่า แต่ต้องจัดรูปแบบแท็ก <img> ที่เกี่ยวข้องแทน
• ตั้งค่าแอตทริบิวต์ width และ height ในแท็ก <img>: ค่าเหล่านี้ควรตรงกับขนาดภายในของรูปภาพสำรอง

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>