วิธีเพิ่มประสิทธิภาพขนาดรูปภาพสำหรับเว็บไซต์?

ขนาดรูปภาพที่แนะนำสำหรับเว็บไซต์

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

รูปภาพขนาดเล็กสำหรับบล็อกหรือแกลเลอรีควรมีความกว้างระหว่าง 300 ถึง 600 พิกเซล เพื่อการโหลดที่รวดเร็วและการแสดงผลที่ชัดเจน

รูปภาพสินค้าสำหรับเว็บไซต์อีคอมเมิร์ซต้องการความละเอียดอย่างน้อย 800x800 พิกเซล เพื่อให้ฟังก์ชันซูมใช้งานได้อย่างมีประโยชน์

ไอคอนและรูปภาพอินเทอร์เฟซผู้ใช้สามารถบันทึกในรูปแบบ SVG ที่ปรับขนาดได้โดยไม่สูญเสียคุณภาพในทุกขนาดการแสดงผล

รูปแบบไฟล์รูปภาพสำหรับเว็บ

WebP เป็นรูปแบบรูปภาพสมัยใหม่ที่ให้การบีบอัดที่ดีกว่า JPEG และ PNG ในขณะที่รักษาคุณภาพภาพสูงสำหรับการใช้งานเว็บส่วนใหญ่

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

AVIF เป็นรูปแบบล่าสุดที่ให้การบีบอัดที่ดีกว่า WebP แต่การรองรับเบราว์เซอร์ยังคงจำกัดและต้องการการตรวจสอบความเข้ากันได้

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

เทคนิคการเพิ่มประสิทธิภาพรูปภาพเว็บ

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

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

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

กำหนดขนาดความกว้างและความสูงที่แน่นอนบนองค์ประกอบ HTML img เพื่อป้องกันการเลื่อนเค้าโครงระหว่างการโหลดหน้า

การวัดและติดตามประสิทธิภาพรูปภาพ

ใช้ Google PageSpeed Insights เพื่อวิเคราะห์ประสิทธิภาพรูปภาพบนเว็บไซต์ของคุณและรับคำแนะนำเฉพาะสำหรับการปรับปรุง

ติดตาม Core Web Vitals โดยเฉพาะ Largest Contentful Paint ซึ่งได้รับผลกระทบอย่างมากจากเวลาโหลดของรูปภาพหลักของหน้า

ดำเนินการตรวจสอบรูปภาพเป็นประจำโดยใช้เครื่องมือเช่น Lighthouse เพื่อระบุรูปภาพที่ยังไม่ได้รับการเพิ่มประสิทธิภาพ

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

วิธีทำใน 3 ขั้นตอน

คำถามที่พบบ่อย