คุณโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ไว้ล่วงหน้าได้ ซึ่งจะช่วยให้รูปภาพโหลดเร็วขึ้นอย่างมากด้วยการช่วยให้เบราว์เซอร์ระบุรูปภาพที่ถูกต้องจาก srcset ก่อนที่จะแสดงผลแท็ก img
ภาพรวมของรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
การสนับสนุนเบราว์เซอร์
- 73
- 79
- 78
- 17.2
สมมติว่าคุณกำลังท่องเว็บบนหน้าจอที่มีความกว้าง 300 พิกเซล และหน้าเว็บขอรูปภาพที่มีความกว้าง 1, 500 พิกเซล หน้านั้นสิ้นเปลืองอินเทอร์เน็ตมือถือไปมากเพราะหน้าจอนี้ไม่สามารถดำเนินการใดๆ กับความละเอียดพิเศษนี้ได้เลย โดยหลักการแล้ว เบราว์เซอร์จะดึงรูปภาพเวอร์ชันที่กว้างกว่าขนาดหน้าจอเล็กน้อย เช่น 325 พิกเซล ซึ่งจะช่วยให้ได้รูปภาพที่มีความละเอียดสูงโดยไม่สิ้นเปลืองอินเทอร์เน็ต และช่วยให้โหลดรูปภาพได้เร็วขึ้น
รูปภาพที่ตอบสนองตามอุปกรณ์ช่วยให้เบราว์เซอร์เรียกทรัพยากรรูปภาพต่างๆ สำหรับอุปกรณ์ต่างๆ ได้ หากไม่ได้ใช้ CDN รูปภาพ ให้บันทึกมิติข้อมูลหลายรายการสำหรับแต่ละรูปภาพและระบุไว้ในแอตทริบิวต์ srcset ค่า w จะบอกความกว้างของเบราว์เซอร์แต่ละเวอร์ชัน เพื่อให้เบราว์เซอร์เลือกเวอร์ชันที่เหมาะสมสำหรับอุปกรณ์ใดก็ได้ ดังนี้
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
ภาพรวมการโหลดล่วงหน้า
การโหลดล่วงหน้าช่วยให้คุณบอกเบราว์เซอร์เกี่ยวกับทรัพยากรที่สำคัญที่คุณต้องการโหลดโดยเร็วที่สุดก่อนที่จะค้นพบทรัพยากรเหล่านั้นใน HTML ซึ่งมีประโยชน์อย่างยิ่งสำหรับทรัพยากรที่ค้นหาไม่ได้โดยทันที เช่น แบบอักษรที่รวมอยู่ในสไตล์ชีต ภาพพื้นหลัง หรือทรัพยากรที่โหลดจากสคริปต์
<link rel="preload" as="image" href="important.png">
imagesrcsetและimagesizes
องค์ประกอบ <link> ใช้แอตทริบิวต์ imagesrcset และ imagesizes เพื่อโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้า ใช้คู่กับ <link rel="preload"> โดยใช้ไวยากรณ์ srcset และ sizes ในองค์ประกอบ <img>
เช่น หากต้องการโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้าที่ระบุไว้ด้วยสิ่งต่อไปนี้
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
ซึ่งทำได้โดยการเพิ่มโค้ดต่อไปนี้ลงใน <head> ของ HTML:
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
การดำเนินการนี้จะเริ่มต้นคำขอโดยใช้ตรรกะการเลือกทรัพยากรเดียวกันกับที่ srcset และ sizes ใช้
Use Case
กรณีการใช้งานต่อไปนี้คือการโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้า
โหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งแทรกแบบไดนามิกไว้ล่วงหน้า
สมมติว่าคุณโหลดรูปภาพหลักแบบไดนามิกโดยเป็นส่วนหนึ่งของภาพสไลด์ และคุณรู้ว่ารูปภาพใดจะแสดงก่อน ในกรณีนั้น คุณอาจต้องการแสดงรูปภาพนั้นโดยเร็วที่สุด และไม่ต้องรอให้สคริปต์ภาพสไลด์โหลดขึ้นมา
คุณตรวจสอบปัญหานี้ได้ในเว็บไซต์ที่มีแกลเลอรีรูปภาพที่โหลดแบบไดนามิก
- เปิดการสาธิตภาพสไลด์นี้ในแท็บใหม่
- กด
Control+Shift+J(หรือCommand+Option+Jใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ - คลิกแท็บเครือข่าย
- ในรายการแบบเลื่อนลง Throttling ให้เลือก Fast 3G
- ปิดใช้ช่องทำเครื่องหมายปิดใช้แคช
- โหลดหน้าเว็บซ้ำ
การใช้ preload ที่นี่จะช่วยให้รูปภาพเริ่มโหลดได้ล่วงหน้า เพื่อให้พร้อมแสดงเมื่อเบราว์เซอร์จำเป็นต้องแสดง
หากต้องการดูความแตกต่างจากการโหลดล่วงหน้า ให้ตรวจสอบแกลเลอรีรูปภาพที่โหลดแบบไดนามิกเดียวกัน แต่โหลดรูปภาพแรกไว้ล่วงหน้าโดยทำตามขั้นตอนจากตัวอย่างแรก
โหลดภาพพื้นหลังล่วงหน้าโดยใช้ชุดรูปภาพ
หากคุณมีภาพพื้นหลังที่แตกต่างกันสำหรับความหนาแน่นของหน้าจอที่แตกต่างกัน ให้ระบุภาพพื้นหลังเหล่านั้นใน CSS ด้วยไวยากรณ์ image-set จากนั้นเบราว์เซอร์จะเลือกได้ว่าต้องการแสดงอันใดตาม DPR ของหน้าจอ
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
ปัญหาที่เกิดขึ้นกับภาพพื้นหลังของ CSS คือ เบราว์เซอร์จะค้นพบภาพเหล่านั้นได้หลังจากดาวน์โหลดและประมวลผล CSS ทั้งหมดใน <head> ของหน้าแล้วเท่านั้น
คุณตรวจสอบปัญหานี้ได้ในเว็บไซต์ตัวอย่างที่มีภาพพื้นหลังที่ปรับเปลี่ยนตามอุปกรณ์
การโหลดรูปภาพล่วงหน้าที่ปรับเปลี่ยนตามอุปกรณ์ช่วยให้คุณโหลดรูปภาพเหล่านั้นได้เร็วขึ้น
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
การไม่ระบุแอตทริบิวต์ href จะช่วยให้มั่นใจได้ว่าเบราว์เซอร์ที่ไม่รองรับ imagesrcset ในองค์ประกอบ <link> แต่รองรับ image-set ใน CSS จะดาวน์โหลดแหล่งที่มาที่ถูกต้อง อย่างไรก็ตาม การโหลดล่วงหน้าจะไม่ได้รับประโยชน์จากการโหลดล่วงหน้าในกรณีนี้
คุณตรวจสอบลักษณะการทำงานของตัวอย่างก่อนหน้านี้ได้ด้วยภาพพื้นหลังที่ปรับเปลี่ยนตามอุปกรณ์ที่โหลดไว้ล่วงหน้าในการสาธิตการโหลดล่วงหน้าสำหรับพื้นหลังที่ปรับเปลี่ยนตามอุปกรณ์
ผลกระทบในทางปฏิบัติของการโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้า
การโหลดรูปภาพที่ตอบสนองไว้ล่วงหน้าช่วยเพิ่มความเร็วได้ในทางทฤษฎี แต่ในทางปฏิบัติแล้ว ภาพนี้ทำอะไรได้บ้าง
ขอตอบคำถามว่าได้สร้างสำเนาของร้านค้า PWA สำหรับสาธิตไว้ 2 ชุด ได้แก่ ร้านที่ไม่โหลดรูปภาพล่วงหน้าและอีกรายการที่โหลดรูปภาพบางรูปไว้ล่วงหน้า เนื่องจากเว็บไซต์แบบ Lazy Loading รูปภาพโดยใช้ JavaScript จึงมีแนวโน้มที่จะได้รับประโยชน์จากการโหลดรูปภาพที่ปรากฏในวิวพอร์ตเริ่มต้นไว้ล่วงหน้า
ซึ่งให้ผลลัพธ์ต่อไปนี้สำหรับไม่มีการโหลดล่วงหน้าและการโหลดรูปภาพล่วงหน้า
- เริ่มแสดงผล ยังคงเหมือนเดิม
- ดัชนีความเร็ว เพิ่มขึ้นเล็กน้อย (273 มิลลิวินาทีเมื่อรูปภาพมาถึงเร็วขึ้นจึงไม่กินพื้นที่พิกเซลขนาดใหญ่)
- Last Painted Hero เพิ่มขึ้นอย่างมาก 1.2 วินาที
การโหลดล่วงหน้าและ <picture>
คณะทำงานด้านการเพิ่มประสิทธิภาพเว็บกำลังพูดถึงการเพิ่มการโหลดล่วงหน้าที่เทียบเท่าสำหรับ srcset และ sizes แต่ไม่ได้พูดถึงองค์ประกอบ <picture> ซึ่งจัดการกรณีการใช้งาน "การกำกับศิลป์"
ยังมีปัญหาทางเทคนิคที่ต้องแก้ไขอยู่หลายรายการสำหรับการโหลด <picture> ล่วงหน้า
แต่ในระหว่างนี้ก็มีวิธีแก้ปัญหาดังนี้
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
ตรรกะการเลือกแหล่งที่มาของรูปภาพขององค์ประกอบ <picture> จะข้ามแอตทริบิวต์ media ขององค์ประกอบ <source> ตามลําดับ ค้นหารายการแรกที่ตรงกัน และใช้แหล่งข้อมูลที่แนบมา
เนื่องจากการโหลดล่วงหน้าที่ปรับเปลี่ยนตามอุปกรณ์ไม่มีข้อความว่า "เรียงลำดับ" หรือ "การจับคู่แรก" คุณจะต้องแปลเบรกพอยท์ให้มีลักษณะดังนี้
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
การโหลดล่วงหน้าและ type
องค์ประกอบ <picture> ยังรองรับการจับคู่ใน type แรกด้วย เพื่อให้คุณระบุรูปแบบรูปภาพที่แตกต่างกันเพื่อให้เบราว์เซอร์เลือกรูปแบบรูปภาพแรกที่รองรับได้ กรณีการใช้งานนี้ไม่รองรับการโหลดล่วงหน้า
สำหรับเว็บไซต์ที่ใช้ประเภทการจับคู่ เราขอแนะนำให้หลีกเลี่ยงการโหลดล่วงหน้า และโหลดเครื่องสแกนล่วงหน้าซึ่งจะรับรูปภาพจากองค์ประกอบ <picture> และ <source> แทน นี่เป็นแนวทางปฏิบัติแนะนำเลย โดยเฉพาะอย่างยิ่งเมื่อใช้คำแนะนำตามลำดับความสำคัญเพื่อช่วยในการจัดลำดับความสำคัญของรูปภาพที่เหมาะสม
ผลกระทบต่อการแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP)
เนื่องจากรูปภาพอาจเป็นตัวเลือก Largest Contentful Paint (LCP) การโหลดรูปภาพล่วงหน้าจึงช่วยปรับปรุง LCP ของเว็บไซต์ได้
ไม่ว่ารูปภาพที่คุณโหลดล่วงหน้าจะปรับเปลี่ยนตามอุปกรณ์หรือไม่ การโหลดล่วงหน้าจะทำงานได้ดีที่สุดเมื่อไม่พบทรัพยากรรูปภาพในเพย์โหลดมาร์กอัปเริ่มต้น นอกจากนี้ คุณจะได้รับการปรับปรุง LCP มากขึ้นในเว็บไซต์ที่แสดงมาร์กอัปในฝั่งไคลเอ็นต์เมื่อเทียบกับเว็บไซต์ที่ส่งมาร์กอัปที่สมบูรณ์จากเซิร์ฟเวอร์