รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์มักจะใช้งานด้วยแอตทริบิวต์ 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>
ทั้งหมด ค่าที่เหมาะสมสำหรับแอตทริบิวต์เหล่านี้ขึ้นอยู่กับวิธีที่แท็ก<source>
ใช้srcset
- ปรับรูปภาพโดยการจัดรูปแบบแท็ก
<img>
ที่เกี่ยวข้อง แท็ก<source>
เป็นองค์ประกอบ ที่ว่างเปล่า ดังนั้นรูปแบบจึงไม่ส่งผลใดๆ - ตั้งค่าแอตทริบิวต์
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>