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

รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์มักจะใช้งานด้วยแอตทริบิวต์ 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>