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