ปรับปรุงการนำส่งรูปภาพ

เผยแพร่: 8 ต.ค. 2025

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

สาเหตุที่ข้อมูลเชิงลึกไม่สำเร็จ

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

ข้อมูลเชิงลึกเกี่ยวกับการปรับปรุงการนำส่งรูปภาพในเครื่องมือสำหรับนักพัฒนาเว็บ
เครื่องมือสำหรับนักพัฒนาเว็บช่วยปรับปรุงข้อมูลเชิงลึกเกี่ยวกับการแสดงรูปภาพ

วิธีปรับปรุงเวลาในการดาวน์โหลดรูปภาพ

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

เพิ่มค่าการบีบอัดรูปภาพ

รูปแบบรูปภาพส่วนใหญ่รองรับระดับการบีบอัดที่ปรับแต่งได้เพื่อปรับปรุงขนาดไฟล์รูปภาพโดยแลกกับคุณภาพของรูปภาพ คุณสามารถใช้เครื่องมือรูปภาพ เช่น ImageOptim, Squoosh และ Imagemin เพื่อเพิ่มประสิทธิภาพค่าการบีบอัดรูปภาพ

ใช้รูปแบบรูปภาพที่ทันสมัย

AVIF และ WebP เป็นรูปแบบรูปภาพที่มีลักษณะการบีบอัดและคุณภาพที่เหนือกว่าเมื่อเทียบกับ JPEG และ PNG รุ่นเก่า การเข้ารหัสรูปภาพในรูปแบบใหม่ๆ เหล่านี้เป็นกลยุทธ์ที่ดีในการลดขนาดการดาวน์โหลดรูปภาพ

เบราว์เซอร์หลักทั้งหมดเวอร์ชันล่าสุดรองรับ AVIF และมีขนาดไฟล์ที่เล็กกว่าเมื่อเทียบกับรูปแบบอื่นๆ ที่มีการตั้งค่าคุณภาพเดียวกัน ดูข้อมูลเพิ่มเติมเกี่ยวกับ AVIF ได้ที่ Codelab การแสดงรูปภาพ AVIF

เบราว์เซอร์หลักๆ ทั้งหมดรองรับ WebP และช่วยบีบอัดรูปภาพแบบสูญเสียบางส่วนและแบบไม่สูญเสียรายละเอียดบนเว็บได้ดีกว่า ดูข้อมูลเพิ่มเติมเกี่ยวกับ WebP ได้ที่ใช้รูปภาพ WebP

ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว

GIF ขนาดใหญ่ไม่มีประสิทธิภาพในการแสดงเนื้อหาภาพเคลื่อนไหวเมื่อเทียบกับวิดีโอ พิจารณาใช้วิดีโอ MPEG4/WebM สำหรับภาพเคลื่อนไหวและใช้ PNG/WebP สำหรับภาพนิ่งแทน GIF เพื่อประหยัดไบต์ของเครือข่าย

ดูวิธีแทนที่รูปภาพ GIF ด้วยวิดีโอได้ที่แทนที่ GIF แบบเคลื่อนไหวด้วยวิดีโอเพื่อให้หน้าเว็บโหลดเร็วขึ้น

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

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

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

หากใช้รูปภาพแบบเวกเตอร์ไม่ได้ คุณควรแสดงรูปภาพที่ "ปรับตามพื้นที่โฆษณา" รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ช่วยให้คุณสร้างรูปภาพแต่ละรูปได้หลายเวอร์ชัน จากนั้นระบุเวอร์ชันที่จะใช้ใน HTML หรือ CSS โดยใช้คิวรี่สื่อ ขนาดวิวพอร์ต และอื่นๆ

เช่น องค์ประกอบ <img> มีแอตทริบิวต์ srcset และ sizes ซึ่งระบุ URL รูปภาพสำหรับขนาดต่างๆ ได้

หากต้องการเปลี่ยนรูปภาพทั้งหมด คุณสามารถใช้องค์ประกอบ &lt;picture> ได้

ดูข้อมูลเพิ่มเติมได้ที่รูปภาพที่ตอบสนองตามอุปกรณ์และองค์ประกอบ <picture>

คำแนะนำเฉพาะสำหรับกองซ้อน

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

AMP

  • ลองแสดงคอมโพเนนต์ amp-img ทั้งหมดในรูปแบบ WebP โดยกำหนดการสำรองที่เหมาะสมให้กับเบราว์เซอร์อื่นด้วย
  • สำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว ให้ใช้ amp-anim เพื่อลดการใช้ CPU ขณะที่เนื้อหาไม่ได้อยู่ในหน้าจอ

Drupal

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

Joomla

ลองใช้ปลั๊กอินหรือบริการที่จะแปลงรูปภาพที่อัปโหลดเป็นรูปแบบที่เหมาะสมที่สุดโดยอัตโนมัติ

Magento

ลองใช้ส่วนขยาย Magento ของบุคคลที่สามที่เพิ่มประสิทธิภาพรูปภาพ

WordPress

ลองใช้ปลั๊กอิน WordPress การเพิ่มประสิทธิภาพรูปภาพที่บีบอัดรูปภาพแต่ยังคงคุณภาพไว้ได้

แหล่งข้อมูล