วิธีปรับแต่งรูปภาพสำหรับเว็บไซต์

ทำไมต้องปรับแต่งรูปภาพสำหรับเว็บ

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

เว็บไซต์ที่โหลดเร็วกว่าได้รับอัตราการกลับออก (bounce rate) ที่ต่ำกว่าและอัตราการแปลง (conversion rate) ที่สูงกว่า การศึกษาพบว่าหน้าเว็บที่โหลดช้าลง 1 วินาทีอาจทำให้สูญเสียการแปลงได้ถึง 7% นอกจากนี้ยังลดค่าใช้จ่าย bandwidth สำหรับทั้งเจ้าของเว็บและผู้เข้าชมด้วย

เทคนิคการปรับแต่งรูปภาพ

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

ลบ metadata ที่ไม่จำเป็น เช่น ข้อมูล GPS, วันที่ถ่าย และข้อมูลกล้อง ซึ่งเพิ่มขนาดไฟล์โดยไม่มีประโยชน์สำหรับผู้ชม รวมกับการเลือกระดับคุณภาพที่เหมาะสม — ส่วนใหญ่ 75-85% ให้ผลลัพธ์ที่ดีที่สุด

ขนาดไฟล์เป้าหมายที่แนะนำ

รูปภาพหลัก (hero image): ไม่เกิน 100–300 KB เพราะโหลดก่อนส่วนอื่น รูปภาพขนาดเล็ก (thumbnail): 10–50 KB ภาพสินค้า: 50–150 KB และรูปภาพรวมทั้งหน้าไม่ควรเกิน 1–2 MB เพื่อให้โหลดได้รวดเร็วแม้บนเครือข่าย 3G

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

ฟอร์แมตสมัยใหม่: WebP และ AVIF

WebP มีขนาดเล็กกว่า JPG ถึง 25–35% ที่คุณภาพเท่ากัน ส่วน AVIF มีขนาดเล็กกว่า JPG ได้ถึง 50% ทั้งสองฟอร์แมตรองรับทั้งภาพถ่ายและภาพกราฟิก รวมถึงรองรับช่องอัลฟา (ความโปร่งใส) เหมือน PNG

เบราว์เซอร์สมัยใหม่เกือบทั้งหมดรองรับ WebP แล้ว และ AVIF ก็มีการรองรับเพิ่มขึ้นเรื่อยๆ ควรใช้ร่วมกับ fallback เป็น JPG หรือ PNG สำหรับเบราว์เซอร์รุ่นเก่า เพื่อให้ทุกคนได้รับประสบการณ์ที่ดี

Lazy Loading คืออะไร และทำไมจึงสำคัญ

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

ปัจจุบันเบราว์เซอร์สมัยใหม่รองรับ lazy loading แบบ native ด้วยการเพิ่ม `loading="lazy"` ใน HTML เพียงเท่านี้ ไม่ต้องใช้ JavaScript เพิ่มเติม เทคนิคนี้สำคัญเป็นพิเศษสำหรับหน้าเว็บที่มีรูปภาพจำนวนมาก เช่น แกลเลอรี่หรือหน้าแสดงสินค้า

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

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