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

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

องค์ประกอบ picture จะสร้างจากองค์ประกอบ img ในลักษณะเดียวกับที่ srcset สร้างจากแอตทริบิวต์ src องค์ประกอบ 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 เป็นเครื่องมือที่มีประสิทธิภาพ

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

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

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