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

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

เผยแพร่เมื่อวันที่ 30 กันยายน 2019 อัปเดตล่าสุดวันที่ 10 กรกฎาคม 2026

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

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

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Source

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

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

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

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

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

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

<link rel="preload" as="image" href="important.png" fetchpriority="high">

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" fetchpriority="high">

ซึ่งจะเริ่มคำขอโดยใช้ตรรกะการเลือกทรัพยากรแบบเดียวกับที่ srcset และ sizes ใช้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การโหลดล่วงหน้าและ <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)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

การโหลดล่วงหน้าและ type

องค์ประกอบ <picture> ยังรองรับการจับคู่กับ type แรกด้วย เพื่อให้คุณระบุรูปแบบรูปภาพที่แตกต่างกันได้เพื่อให้เบราว์เซอร์เลือกรูปแบบรูปภาพแรกที่รองรับ

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

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

อย่างไรก็ตาม ฟีเจอร์นี้จะไม่หยุดที่ประเภทแรกที่รองรับเหมือนกับ <picture> ดังนั้น หากมีการโหลดล่วงหน้าหลายรายการสำหรับหลายประเภท ระบบจะโหลดรูปภาพทั้งหมดล่วงหน้า

อย่าทำเช่นนี้ นั่นคือโหลดหลายประเภทล่วงหน้า

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

แต่ให้ทำเช่นนี้ นั่นคือโหลดประเภทที่ต้องการมากที่สุดล่วงหน้า

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

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

สำหรับเว็บไซต์ที่ค้นพบรูปภาพใน HTML ได้อย่างรวดเร็ว เราขอแนะนำให้หลีกเลี่ยงการโหลดล่วงหน้า และให้ สแกนเนอร์การโหลดล่วงหน้า เลือกรูปภาพจากองค์ประกอบ <picture> และ <source> แทน วิธีนี้เป็นแนวทางปฏิบัติแนะนำอยู่แล้ว โดยเฉพาะอย่างยิ่งเมื่อใช้ Fetch Priority เพื่อช่วยจัดลำดับความสำคัญของรูปภาพที่เหมาะสม เนื่องจากวิธีนี้ช่วยให้โหลดรูปภาพที่ถูกต้องล่วงหน้าได้ตามการรองรับของเบราว์เซอร์ นอกจากนี้ยังช่วยลดความเสี่ยงที่การโหลดล่วงหน้าจะล้าสมัยจากมาร์กอัปหลักเมื่อมีการเปลี่ยนแปลงรูปภาพหรือหน้าเว็บ

ผลกระทบต่อ Largest Contentful Paint (LCP)

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

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