โมดูลก่อนหน้าได้แสดงให้เห็นว่าแอตทริบิวต์ 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
เป็นเครื่องมือที่มีประสิทธิภาพ
มีรูปภาพประเภทหนึ่งที่คุณอาจไม่ต้องการวิธีแก้ไขคือไอคอน ขั้นตอนต่อไปคือ
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับองค์ประกอบรูปภาพ
เมื่อแอตทริบิวต์ srcset
ระบุ ________ ให้กับเบราว์เซอร์ องค์ประกอบ <picture>
จะระบุ ________
ความสามารถบางประการขององค์ประกอบ <picture>
ได้แก่
avif
หรือ webp
ได้ง่ายขึ้นหากเป็นไปได้