วิธีทำให้รูปภาพบนเว็บไซต์โหลดเร็วขึ้น
ห้าการเปลี่ยนแปลงที่ลดน้ำหนักรูปภาพบนเว็บไซต์ใดก็ได้ เรียงตามผลกระทบ
บนเว็บไซต์ส่วนใหญ่ รูปภาพคือสิ่งที่ผู้เข้าชมต้องดาวน์โหลดมากที่สุด ภาพถ่ายจากมือถือที่ไม่ได้ปรับแต่งเพียงรูปเดียวอาจหนักกว่าส่วนอื่นของหน้าทั้งหมดรวมกัน การจัดการรูปภาพจึงมักเป็นการเพิ่มความเร็วที่ได้ผลมากที่สุดและถูกที่สุด และหน้าเว็บที่เร็วขึ้นก็ติดอันดับดีขึ้น รักษาผู้เข้าชมไว้ได้นานขึ้น และสร้างยอดขายได้มากขึ้น
1. อัปโหลดรูปภาพในขนาดที่แสดงผลจริง
ภาพถ่ายจากมือถือโดยตรงกว้าง 4000 พิกเซลหรือมากกว่า ขณะที่คอลัมน์เนื้อหาบนเว็บไซต์แทบไม่เคยกว้างเกิน 1200 พิกเซล และการ์ดหรือภาพย่อยิ่งเล็กกว่านั้นมาก ทุกพิกเซลที่เกินมาจะถูกดาวน์โหลดแล้วเบราว์เซอร์ก็ทิ้งไป ให้ปรับขนาดก่อนอัปโหลด: ประมาณ 2000 พิกเซลสำหรับแบนเนอร์เต็มความกว้าง (เพื่อให้คมชัดบนหน้าจอความละเอียดสูง) 1200 ถึง 1600 สำหรับรูปในเนื้อหา และ 600 ถึง 800 สำหรับการ์ด เครื่องมือปรับขนาดรูปภาพ ทำได้ทั้งโฟลเดอร์ในครั้งเดียว
2. บีบอัด
เมื่อขนาดพิกเซลถูกต้องแล้ว การบีบอัดจะจัดการส่วนที่เหลือ ภาพถ่ายที่บันทึกที่คุณภาพ 80 ดูเหมือนกันทุกอย่างกับที่คุณภาพ 100 บนหน้าเว็บ และมักมีขนาดเพียงหนึ่งในสาม เครื่องมือบีบอัดรูปภาพ ทำได้ทีละหลายไฟล์และแสดงขนาดที่ประหยัดได้ของแต่ละไฟล์
3. ใช้ WebP
WebP รองรับในเบราว์เซอร์รุ่นปัจจุบันทุกตัว และโดยทั่วไปเล็กกว่า JPG 25 ถึง 35 เปอร์เซ็นต์ที่คุณภาพที่มองเห็นเท่ากัน อีกทั้งรองรับความโปร่งใส จึงใช้แทน PNG ได้หลายกรณี แปลงได้ด้วย JPG เป็น WebP หรือ PNG เป็น WebP AVIF เล็กกว่านั้นอีก แต่เข้ารหัสช้ากว่าและระบบอัปโหลดรองรับไม่ทั่วถึงเท่า WebP จึงเป็นค่าเริ่มต้นที่ใช้งานได้จริง
4. เลือกฟอร์แมตให้เหมาะกับเนื้อหา
| เนื้อหา | ฟอร์แมตที่ดีที่สุด |
|---|---|
| ภาพถ่าย | WebP หรือ JPG ในที่ที่ไม่รับ WebP |
| โลโก้และไอคอน | SVG ถ้ามี ถ้าไม่มีใช้ PNG หรือ WebP |
| ภาพหน้าจอที่มีข้อความ | PNG หรือ WebP แบบ lossless |
| ภาพเคลื่อนไหวง่าย ๆ | วิดีโอสั้นแทน GIF |
5. ช่วยให้เบราว์เซอร์โหลดรูปอย่างเหมาะสม
- Lazy loading รูปภาพที่อยู่ใต้หน้าจอแรกควรโหลดเมื่อผู้เข้าชมเลื่อนลงมาใกล้เท่านั้น แพลตฟอร์มส่วนใหญ่ทำให้อัตโนมัติ ถ้าเป็น HTML ธรรมดา ให้เพิ่ม loading="lazy" ในแท็ก img ที่ไม่ได้แสดงตั้งแต่แรก
- ขนาด กำหนด width และ height ให้ทุกรูป เพื่อไม่ให้หน้าเว็บกระตุกขยับไปมาระหว่างที่รูปโหลด การขยับของเลย์เอาต์เป็นหนึ่งใน Core Web Vitals ของ Google
- รูปหลักมาก่อน รูปขนาดใหญ่ที่ด้านบนของหน้า ซึ่งมักเป็นรูปที่นับเป็น Largest Contentful Paint ไม่ควรใช้ lazy loading เด็ดขาด และควรโหลดให้เร็วที่สุดเท่าที่ทำได้
สร้างความแตกต่างได้แค่ไหน
หน้าเว็บทั่วไปที่มีภาพถ่ายสิบรูปจากมือถือโดยตรงอาจหนักถึง 30 MB เมื่อปรับขนาดให้กว้างพอเหมาะและบีบอัดแล้ว หน้าเดียวกันมักเหลือประมาณ 2 MB และเมื่อแปลงเป็น WebP จะเหลือราว 1.4 MB บนอินเทอร์เน็ตมือถือ นี่คือความต่างระหว่างหน้าที่ขึ้นมาในวินาทีเดียว กับหน้าที่ผู้เข้าชมจำนวนมากกดออกไปก่อน
ตรวจสอบผลลัพธ์
PageSpeed Insights ของ Google และแผง Lighthouse ในเครื่องมือสำหรับนักพัฒนาของ Chrome ต่างก็แสดงรายการรูปที่ใหญ่เกินไป รูปที่ควรเป็น WebP และองค์ประกอบ Largest Contentful Paint ให้ทดสอบก่อนและหลังปรับ และเริ่มจากหน้าที่มีผู้เข้าชมมากที่สุดก่อน