โหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ไว้ล่วงหน้า

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

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

ภาพรวมของรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

การรองรับเบราว์เซอร์

  • Chrome: 73
  • ขอบ: 79
  • Firefox: 78
  • Safari: 17.2

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

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

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

ภาพรวมการโหลดล่วงหน้า

การรองรับเบราว์เซอร์

  • Chrome: 50
  • ขอบ: ≤79
  • Firefox: 85
  • Safari: 11.1

แหล่งที่มา

การโหลดล่วงหน้าช่วยให้คุณบอกเบราว์เซอร์เกี่ยวกับ ทรัพยากรสำคัญที่ต้องการโหลดโดยเร็วที่สุดก่อน ที่พบใน 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

กรณีการใช้งาน

ต่อไปนี้เป็นกรณีการใช้งานสำหรับการโหลดรูปภาพที่ตอบสนองตามอุปกรณ์ล่วงหน้า

โหลดรูปภาพที่ตอบสนองแบบแทรกแบบไดนามิกไว้ล่วงหน้า

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

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

  1. เปิดการสาธิตสไลด์โชว์นี้ ในแท็บใหม่
  2. กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  3. คลิกแท็บเครือข่าย
  4. ในรายการแบบเลื่อนลงการควบคุม ให้เลือก 3G ที่รวดเร็ว
  5. ปิดใช้ช่องทำเครื่องหมายปิดใช้แคช
  6. โหลดหน้าเว็บซ้ำ
แผง Chrome DevTools Network แสดง Waterfall ที่มีทรัพยากร JPEG ที่เริ่มดาวน์โหลดหลังจาก JavaScript บางรายการเท่านั้น
หากไม่โหลดล่วงหน้า รูปภาพจะเริ่มโหลดหลังจากที่เบราว์เซอร์เรียกใช้สคริปต์เสร็จสิ้น สำหรับรูปภาพแรก คุณไม่จำเป็นต้องใช้การหน่วงเวลา

การใช้ preload ในจุดนี้ช่วยให้รูปภาพเริ่มโหลดล่วงหน้าได้ พร้อมแสดงเมื่อเบราว์เซอร์จำเป็นต้องแสดงผล

วันที่ แผง Chrome DevTools Network แสดง Waterfall ที่มีการดาวน์โหลดทรัพยากร JPEG ควบคู่ไปกับ JavaScript บางรายการ
การโหลดรูปภาพแรกล่วงหน้าจะทำให้รูปภาพเริ่มโหลดพร้อมกันกับสคริปต์

หากต้องการดูความแตกต่างที่เกิดขึ้นระหว่างการโหลดล่วงหน้า ให้ตรวจสอบข้อความเดียวกันที่โหลดแบบไดนามิก แกลเลอรีรูปภาพแต่มีการโหลดรูปภาพแรกไว้ล่วงหน้า โดยทำตามขั้นตอนจากตัวอย่างแรก

โหลดภาพพื้นหลังล่วงหน้าโดยใช้ชุดรูปภาพ

หากมีภาพพื้นหลังที่แตกต่างกันตามความหนาแน่นของหน้าจอที่แตกต่างกัน คุณจะทำสิ่งต่อไปนี้ได้ ให้ระบุใน CSS ด้วยไวยากรณ์ image-set จากนั้นเบราว์เซอร์จะ ให้เลือกแอปที่จะแสดงตามหน้าจอ DPR

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

ปัญหาของภาพพื้นหลัง CSS คือ เบราว์เซอร์จะค้นพบภาพเหล่านั้น หลังจากที่ดาวน์โหลดและประมวลผล CSS ทั้งหมดใน <head> ของหน้าเท่านั้น

คุณตรวจสอบปัญหานี้ได้ในเว็บไซต์ตัวอย่างที่มี ภาพพื้นหลังที่ปรับเปลี่ยนตามอุปกรณ์

วันที่ แผง Chrome DevTools Network แสดง Waterfall ที่มีทรัพยากร JPEG ที่เริ่มดาวน์โหลดหลังจาก CSS บางรายการเท่านั้น
ในตัวอย่างนี้ การดาวน์โหลดรูปภาพจะไม่เริ่มต้นจนกว่า CSS จะดาวน์โหลดเสร็จสมบูรณ์ ซึ่งทําให้การแสดงผลรูปภาพล่าช้าโดยไม่จำเป็น

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

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

การไม่ระบุแอตทริบิวต์ href จะช่วยให้มั่นใจได้ว่าเบราว์เซอร์จะไม่ รองรับ imagesrcset ในองค์ประกอบ <link> แต่รองรับ image-set ใน CSS ดาวน์โหลดแหล่งที่มาที่ถูกต้อง อย่างไรก็ตาม พวกเขาจะไม่ได้รับประโยชน์จากการโหลดล่วงหน้าใน สำหรับกรณีนี้

คุณตรวจสอบลักษณะการทำงานของตัวอย่างก่อนหน้าได้โดยใช้ฟีเจอร์ที่ปรับเปลี่ยนตามอุปกรณ์ที่โหลดไว้ล่วงหน้า ภาพพื้นหลังในการสาธิตการโหลดพื้นหลังล่วงหน้าที่ปรับเปลี่ยนตามอุปกรณ์

วันที่ แผง Chrome DevTools Network แสดง Waterfall ที่มีการดาวน์โหลดทรัพยากร JPEG ในสตรีมไปยัง CSS บางส่วน
ตรงนี้รูปภาพและ CSS จะเริ่มดาวน์โหลดพร้อมกัน ซึ่งช่วยให้โหลดรูปภาพได้เร็วขึ้น

ผลกระทบในทางปฏิบัติของการโหลดรูปภาพที่ตอบสนองตามอุปกรณ์ล่วงหน้า

ในทางทฤษฎี การโหลดรูปภาพที่ตอบสนองตามอุปกรณ์ล่วงหน้าจะทำให้เร็วขึ้นได้อย่างไร ในทางปฏิบัติได้อย่างไร

เพื่อตอบคำถามว่า เราได้สร้างสำเนาของร้านค้า PWA สาธิตไว้ 2 ชุด ดังนี้ แบบที่ไม่โหลดรูปภาพล่วงหน้า และURL ที่โหลด บางส่วนไว้ล่วงหน้า เนื่องจากไซต์แบบ Lazy Loading จะโหลดรูปภาพโดยใช้ JavaScript จึงจะได้ประโยชน์จาก โหลดรายการที่ปรากฏในวิวพอร์ตเริ่มต้นไว้ล่วงหน้า

ที่ทำให้เกิดผลลัพธ์ต่อไปนี้สำหรับ ไม่ต้องโหลดล่วงหน้า และสำหรับการโหลดรูปภาพล่วงหน้า

  • เริ่มแสดงผล เหมือนเดิม
  • ดัชนีความเร็ว ปรับปรุงเล็กน้อย (273 มิลลิวินาที เนื่องจากรูปภาพที่แสดงเร็วขึ้นไม่ได้กินพื้นที่จำนวนมาก ของพื้นที่พิกเซล)
  • Last Painted Hero ดีขึ้นอย่างเห็นได้ชัด คือ 1.2 วินาที
การเปรียบเทียบแถบฟิล์ม WebPageTest ที่แสดงรูปภาพที่โหลดไว้ล่วงหน้าจะแสดงได้เร็วขึ้นประมาณ 1.5 วินาที
รูปภาพจะเล่นได้เร็วขึ้นมากเมื่อโหลดล่วงหน้า ซึ่งจะช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้น

การโหลดล่วงหน้าและ <picture>

คณะทำงานด้านประสิทธิภาพเว็บไซต์กำลังหารือเกี่ยวกับการเพิ่มการโหลดล่วงหน้าที่เทียบเท่าสำหรับ srcset และ sizes แต่ไม่ใช่ <picture> ซึ่งจะจัดการ"ทิศทางศิลปะ" Use Case

ยังมีปัญหาทางเทคนิคที่ต้องตรวจสอบอีกหลายประการสำหรับการโหลด <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> แทน อย่างไรก็ดีนี่เป็นแนวทางปฏิบัติที่ดีที่สุด โดยเฉพาะเมื่อใช้ Fetch Priority เพื่อช่วยในการจัดลำดับความสำคัญ รูปภาพที่เหมาะสม

ผลต่อ Largest Contentful Paint (LCP)

เนื่องจากรูปภาพอาจเป็นตัวเลือก Largest Contentful Paint (LCP) ได้ การโหลดการโหลดล่วงหน้าจะช่วยเพิ่ม LCP ของเว็บไซต์ของคุณได้

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