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

เผยแพร่: 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 รูปภาพสำหรับขนาดต่างๆ ได้

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

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

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

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

AMP

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

Drupal

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

Joomla

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

Magento

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

WordPress

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

แหล่งข้อมูล