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

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

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

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

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

เช่นเดียวกับแอตทริบิวต์ srcset องค์ประกอบ picture จะอัปเดตค่าของแอตทริบิวต์ src ในองค์ประกอบ img นั้น ความแตกต่างคือในขณะที่แอตทริบิวต์ 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">
</picture>

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

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

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

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

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

ขนาดรูปภาพ

นอกจากจะสลับระหว่างรูปแบบรูปภาพได้แล้ว คุณยังสลับระหว่างขนาดรูปภาพได้ด้วย ใช้แอตทริบิวต์ media เพื่อบอกเบราว์เซอร์ว่าจะแสดงรูปภาพกว้างเท่าใด ใส่ Media Query ไว้ในแอตทริบิวต์ 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">
</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"
    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" fetchpriority="high">
</picture>

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

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

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

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

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