องค์ประกอบรูปภาพ

โมดูลก่อนหน้าได้แสดงให้เห็นว่าแอตทริบิวต์ srcset อนุญาตให้คุณระบุเวอร์ชันขนาดต่างๆ ของรูปภาพเดียวกันได้อย่างไร จากนั้นเบราว์เซอร์จะตัดสินใจได้ว่าจะใช้เวอร์ชันใด หากต้องการเปลี่ยนรูปภาพทั้งหมด คุณจะต้องใช้องค์ประกอบ picture

ในลักษณะเดียวกับที่ srcset สร้างขึ้นบนแอตทริบิวต์ src องค์ประกอบ picture จะสร้างขึ้นจากองค์ประกอบ img องค์ประกอบ picture ล้อมรอบองค์ประกอบ img

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

หากไม่มีองค์ประกอบ img ที่ฝังอยู่ภายในองค์ประกอบ picture องค์ประกอบ picture จะไม่ทำงาน

องค์ประกอบ picture จะอัปเดตค่าของแอตทริบิวต์ src ในองค์ประกอบ img ดังกล่าว เช่นเดียวกับแอตทริบิวต์ srcset สิ่งที่แตกต่างคือตำแหน่งที่แอตทริบิวต์ srcset แสดงคำแนะนำแก่เบราว์เซอร์ องค์ประกอบ picture จะแสดงคำสั่ง วิธีนี้ช่วยให้คุณควบคุม

source

คุณระบุองค์ประกอบ source หลายรายการภายในองค์ประกอบ picture โดยแต่ละรายการมีแอตทริบิวต์ srcset ของตัวเองได้ จากนั้นเบราว์เซอร์จะสั่งการเบราว์เซอร์แรกที่ทําได้

รูปแบบรูปภาพ

ในตัวอย่างนี้ มีรูปภาพ 3 รูปแบบที่แตกต่างกันใน 3 รูปแบบ ดังนี้

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

องค์ประกอบ source แรกชี้ไปที่รูปภาพในรูปแบบ AVIF ใหม่ หากเบราว์เซอร์สามารถแสดงภาพ AVIF เบราว์เซอร์ก็จะเป็นไฟล์ภาพที่เลือก มิเช่นนั้น จะย้ายไปที่องค์ประกอบ source ถัดไป

องค์ประกอบ source รายการที่ 2 ชี้ไปยังรูปภาพในรูปแบบ WebP หากเบราว์เซอร์แสดงผลรูปภาพ WebP ได้ ก็จะใช้ไฟล์ภาพนั้น

ไม่เช่นนั้นเบราว์เซอร์จะกลับไปใช้ไฟล์ภาพในแอตทริบิวต์ src ขององค์ประกอบ img รูปภาพนั้นเป็นไฟล์ JPEG

ซึ่งหมายความว่าคุณเริ่มใช้รูปแบบรูปภาพใหม่ได้โดยไม่ต้องแลกกับความเข้ากันได้แบบย้อนหลัง

ในตัวอย่างนี้ แอตทริบิวต์ type จะบอกเบราว์เซอร์ว่ามีการระบุรูปแบบรูปภาพประเภทใด

ขนาดรูปภาพ

นอกจากการสลับระหว่างรูปแบบรูปภาพแล้ว คุณยังสลับระหว่างขนาดรูปภาพได้ด้วย ใช้แอตทริบิวต์ media เพื่อบอกเบราว์เซอร์ว่ารูปภาพจะแสดงกว้างเท่าใด ใส่คิวรี่สื่อภายในแอตทริบิวต์ media

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

คุณกำลังบอกเบราว์เซอร์ว่าหากความกว้างของวิวพอร์ตกว้างกว่า 75em เบราว์เซอร์ต้องใช้รูปภาพขนาดใหญ่ เบราว์เซอร์ต้องใช้รูปภาพขนาดกลางตั้งแต่ 40em ถึง 75em ที่อยู่ต่ำกว่า 40em เบราว์เซอร์ต้องใช้รูปภาพขนาดเล็ก

วิธีนี้แตกต่างจากการใช้แอตทริบิวต์ srcset และ sizes ในองค์ประกอบ img ในกรณีนี้ คุณกำลังให้คำแนะนำแก่เบราว์เซอร์ องค์ประกอบ source คล้ายกับคำสั่งมากกว่าคำแนะนำ

คุณยังใช้ข้อบ่งชี้ความหนาแน่นของพิกเซลในแอตทริบิวต์ srcset ขององค์ประกอบ source ได้ด้วย

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

ในตัวอย่างดังกล่าว คุณยังคงบอกเบราว์เซอร์ว่าต้องทำอะไรบ้างที่เบรกพอยท์ต่างๆ แต่ตอนนี้เบราว์เซอร์มีตัวเลือกในการเลือกรูปภาพที่เหมาะสมที่สุดสำหรับความหนาแน่นพิกเซลของอุปกรณ์แล้ว

การครอบตัด

หากต้องการแสดงรูปภาพเดียวกันในเวอร์ชันที่มีขนาดต่างกันเท่านั้น srcset คือตัวเลือกที่ดีที่สุด แต่หากรูปภาพขนาดเล็กลงก็ดูไม่ดีนัก คุณสามารถลองสร้างรูปภาพเวอร์ชันครอบตัดแทนได้

รูปภาพที่ต่างกันอาจมีอัตราส่วนความกว้างและความสูงที่ต่างกันเพื่อให้เข้ากับบริบทได้ดีขึ้น เช่น บนเบราว์เซอร์ในอุปกรณ์เคลื่อนที่ คุณอาจต้องการแสดงการครอบตัดที่แคบและสูง แต่บนเบราว์เซอร์ในเดสก์ท็อป คุณอาจต้องการแสดงการครอบตัดที่กว้างและสั้น

นี่คือตัวอย่างรูปภาพหลักที่เปลี่ยนเนื้อหาและรูปร่างตามความกว้างของวิวพอร์ต เพิ่มแอตทริบิวต์ width และ height ลงในองค์ประกอบ source แต่ละรายการ

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

โปรดทราบว่าคุณไม่สามารถเปลี่ยนแอตทริบิวต์ alt โดยขึ้นอยู่กับแหล่งที่มาของรูปภาพ คุณจะต้องเขียนแอตทริบิวต์ alt ที่อธิบายทั้งรูปภาพขนาดเต็มและรูปภาพที่ครอบตัด

คุณอาจไม่จำเป็นต้องใช้องค์ประกอบ picture สำหรับรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ส่วนใหญ่ เพราะแอตทริบิวต์ srcset และ sizes ในองค์ประกอบ img ครอบคลุมกรณีการใช้งานมากมาย แต่ในกรณีที่คุณต้องการการควบคุมที่ละเอียดยิ่งขึ้น องค์ประกอบ picture เป็นเครื่องมือที่มีประสิทธิภาพ

มีรูปภาพประเภทหนึ่งที่คุณอาจไม่ต้องการวิธีแก้ไขคือไอคอน ขั้นตอนต่อไปคือ

ทดสอบความเข้าใจ

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