วิธีปรับแต่งรูปภาพสำหรับเว็บไซต์ให้โหลดเร็วและ SEO ดี

รูปภาพคิดเป็นประมาณ 40% ของน้ำหนักรวมหน้าเว็บ ปรับแต่งให้ถูกต้องแล้วคุณจะลดขนาดหน้าได้ครึ่งหนึ่ง ค่า Largest Contentful Paint ต่ำกว่า 2.5 วินาที และจัดอันดับสูงขึ้นในผลการค้นหา ต่อไปนี้คือกระบวนการทั้งหมดทีละขั้นตอน

ทำไมการ Optimize รูปจึงสำคัญกว่าที่เคย

ตามข้อมูลจาก HTTP Archive หน้าเว็บมัธยฐานบนมือถือมีน้ำหนักประมาณ 2.5 MB โดยรูปภาพคิดเป็นประมาณ 1 MB Core Web Vitals ของ Google โดยเฉพาะ Largest Contentful Paint (LCP) วัดโดยตรงว่าองค์ประกอบที่เห็นได้ใหญ่ที่สุดโหลดเร็วแค่ไหน ในหน้าส่วนใหญ่ องค์ประกอบนั้นคือรูปภาพ

มาตรฐาน: LCP 2.5 วินาทีหรือน้อยกว่าถือว่า "ดี" เกิน 4 วินาทีถือว่า "แย่" หน้าที่มี LCP Element เป็นรูปมีค่า 75th Percentile ช้ากว่าหน้าที่ LCP เป็นข้อความเกือบสองเท่า ความต่างระหว่างรูป Hero ที่ Optimize ดีกับรูปบวม มักเป็นความต่างระหว่างคะแนน Core Web Vitals สีเขียวกับสีแดง

ขั้นตอนที่ 1: เลือกฟอร์แมตที่ถูกต้อง

การเลือกฟอร์แมตมีผลมากที่สุดต่อขนาดไฟล์ เปรียบเทียบฟอร์แมตหลักสำหรับเว็บจากการทดสอบจริง:

สำหรับเว็บไซต์ส่วนใหญ่ WebP เป็นค่าตั้งต้นที่ปลอดภัยที่สุด จัดการทั้งรูปถ่ายและกราฟิกได้ดี บีบอัดแรง และใช้ได้ทุกที่ ถ้า Stack ของคุณรองรับ ส่ง AVIF เป็นหลักกับ WebP เป็น Fallback โดยใช้ <picture> Element คุณสามารถแปลง JPG เป็น WebP หรือ แปลงเป็น AVIF กับ Vizua ทุกอย่างทำงานในเบราว์เซอร์ไม่ต้องอัปโหลด

ต้องการเปรียบเทียบเชิงลึก? อ่าน JPEG กับ PNG และ Lossy กับ Lossless

ขั้นตอนที่ 2: ย่อขนาดให้ตรงกับขนาดที่แสดงจริง

รูปถ่าย 4000 x 3000 พิกเซลจากกล้องที่แสดงที่ 800 x 600 บนเว็บไซต์ เปลืองพิกเซลไปประมาณ 80% พิกเซลที่มองไม่เห็นยังคงเปลืองแบนด์วิดท์และเวลาในการ Parse

กฎ: ส่งรูปที่ขนาดเท่ากับหรือใกล้เคียงกับขนาดที่แสดงจริง บนจอมาตรฐาน ให้ขนาดพิกเซลตรง บนจอ Retina 2x ส่งรูปที่กว้างเป็นสองเท่าของขนาดที่แสดง แต่ไม่เกินนั้น

เป้าหมายเชิงปฏิบัติ:

• Hero เต็มหน้าจอ: 1600-1920px (สูงสุด 2x สำหรับ Retina)
• รูปเนื้อหาบล็อก: 800-1200px
• Thumbnail: 300-400px
• Avatar: 64-128px (สูงสุด 256px สำหรับ 2x)

ใช้เครื่องมือปรับขนาดรูปของ Vizua เพื่อย่อรูปให้ได้ความกว้างที่ต้องการก่อนบีบอัด เพียงขั้นตอนนี้อย่างเดียวสามารถลดขนาดไฟล์ได้ 70-90%

ขั้นตอนที่ 3: บีบอัดด้วยค่า Quality ที่เหมาะสม

หลังจากเลือกฟอร์แมตและย่อขนาดแล้ว การบีบอัดคือจุดที่บีบเอาส่วนประหยัดที่เหลือออกมา ปุ่ม Quality สำคัญกว่าที่คนส่วนใหญ่คิด ความสัมพันธ์ระหว่าง Quality กับขนาดไฟล์ไม่เป็นเส้นตรง ลด JPEG Quality จาก 100 เหลือ 80 ประหยัดมหาศาล ลดจาก 80 เหลือ 60 ได้ผลน้อยลงแต่เริ่มเห็น Artifact

ค่า Quality ที่แนะนำ:

• JPEG: 75-85 — จุดสมดุลสำหรับรูปถ่าย JPEG Quality 80 ปกติเล็กกว่าต้นฉบับ 60-80% โดยมองไม่เห็นความต่าง
• WebP: 75-80 — คุณภาพเท่า JPEG 85 แต่ไฟล์เล็กกว่า
• AVIF: 60-75 — ตัวเลขต่ำยังดูดีเพราะ Codec มีประสิทธิภาพ
• PNG: ใช้ Compression Level สูงสุด (Lossless) เพื่อประหยัดเพิ่ม ลดเป็น 8-bit (256 สี) เมื่อกราฟิกอนุญาต

เครื่องมือบีบอัด JPEG ของ Vizua จัดการทุกอย่างอัตโนมัติด้วยอัลกอริทึมที่รักษาขอบและ Gradient อ่านรายละเอียดแยกตามฟอร์แมตได้ที่คู่มือบีบอัดรูปไม่เสียคุณภาพ

ขั้นตอนที่ 4: ส่งรูปอย่างมีประสิทธิภาพ

การบีบอัดเป็นแค่ครึ่งเดียว วิธีที่คุณส่งรูปไปยังเบราว์เซอร์สำคัญเท่ากัน

ตั้งขนาดที่ชัดเจน

ใส่ Attribute width และ height ในแท็ก <img> ทุกตัว (หรือใช้ CSS aspect-ratio) เพื่อป้องกัน Layout Shift ที่เนื้อหากระโดดเมื่อรูปโหลด ซึ่งส่งผลโดยตรงต่อค่า Cumulative Layout Shift (CLS)

Lazy-load รูปที่อยู่ต่ำกว่า Fold

เพิ่ม loading="lazy" ให้กับรูปทุกรูปที่ไม่เห็นเมื่อหน้าโหลดครั้งแรก เบราว์เซอร์จะเลื่อนการดาวน์โหลดจนกว่าผู้ใช้จะเลื่อนใกล้ ประหยัดแบนด์วิดท์ในการโหลดหน้าแรก

ให้ความสำคัญกับรูป Hero

สำหรับรูปสำคัญที่อยู่เหนือ Fold ให้ทำตรงข้าม: เพิ่ม fetchpriority="high" และให้แน่ใจว่าไม่มี loading="lazy" การทดสอบของ Google เองแสดงว่ารูป LCP ที่ Preload ได้ค่าประสิทธิภาพเกือบสมบูรณ์แบบ (75th Percentile 364ms) ขณะที่รูป LCP ที่ Lazy-load ช้าเกือบสองเท่า (720ms)

ใช้ Responsive Images

Attribute srcset และ sizes ช่วยให้เบราว์เซอร์เลือกรูปที่เหมาะสมสำหรับขนาดหน้าจอและความละเอียดของผู้ใช้ ส่งรูปกว้าง 400px ให้มือถือ, 800px ให้แท็บเล็ต และ 1600px ให้เดสก์ท็อป ทั้งหมดจากแท็ก <img> เดียว

ขั้นตอนที่ 5: ตรวจสอบและวัดผล

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

• PageSpeed Insights: รัน PageSpeed Insights ของ Google บนหน้าสำคัญ ดูค่า LCP และคำแนะนำเรื่อง "Serve images in next-gen formats" หรือ "Properly size images"
• Network Tab: เปิด Network Tab ใน DevTools ของเบราว์เซอร์ เรียงตามขนาด ถ้ารูปไหนเกิน 200 KB ลองถามว่าสามารถย่อขนาด บีบอัดซ้ำ หรือแปลงฟอร์แมตได้ไหม
• ทำให้อัตโนมัติ: เพิ่มการ Optimize รูปใน Build Pipeline จับรูปที่ใหญ่เกินก่อนที่จะไปถึง Production

Checklist สรุป

• ใช้ WebP หรือ AVIF เป็นฟอร์แมตหลัก
• ย่อรูปให้ตรงกับขนาดที่แสดงจริง (ไม่กว้างเกินจำเป็น)
• บีบอัด: JPEG/WebP ที่ Quality 75-85, AVIF ที่ 60-75
• ตั้ง width กับ height ให้ทุก <img>
• fetchpriority="high" บนรูป Hero/LCP
• loading="lazy" ให้ทุกรูปที่อยู่ต่ำกว่า Fold
• ใช้ srcset/sizes สำหรับ Responsive Delivery
• รูป Hero ไม่เกิน 200 KB, Thumbnail ไม่เกิน 80 KB
• ลบ Metadata ที่ไม่จำเป็น (EXIF, ICC Profile) — อ่านคู่มือ EXIF กับความเป็นส่วนตัว
• ตรวจสอบเป็นระยะด้วย PageSpeed Insights

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