Optimize รูปภาพ WordPress ให้โหลดเร็ว (WebP Lazy Load)

Optimize รูปภาพ WordPress WebP Lazy Load บีบอัดขนาดไฟล์

ทำไมรูปภาพถึงสำคัญต่อความเร็วเว็บ

รูปภาพมักเป็นสาเหตุอันดับ 1 ที่ทำให้เว็บโหลดช้า โดยเฉลี่ยรูปภาพใช้พื้นที่ 50-70% ของน้ำหนักหน้าเว็บทั้งหมด ถ้าอัปโหลดรูปจาก iPhone หรือกล้อง DSLR โดยไม่ปรับขนาด อาจได้ไฟล์ขนาด 5-15 MB ต่อรูป ทำให้หน้าเว็บหนักมากจนโหลดนานหลายวินาที

Google ใช้ Core Web Vitals เพื่อจัดอันดับ SEO ซึ่งรวมถึง LCP (Largest Contentful Paint) ที่วัดว่ารูปภาพหลักโหลดเร็วแค่ไหน การ Optimize รูปภาพจึงส่งผลโดยตรงต่อทั้งประสบการณ์ผู้ใช้และอันดับใน Google

ขนาดรูปภาพที่เหมาะสมสำหรับ WordPress

ขนาดตามการใช้งาน

Hero Image / Banner: 1200×600 px ไม่เกิน 200KB
Blog Post Featured Image: 800×450 px ไม่เกิน 100KB
Thumbnail ในหน้า Blog: 400×300 px ไม่เกิน 40KB
Product Image ใน WooCommerce: 800×800 px ไม่เกิน 150KB
Logo: ไม่เกิน 200×80 px ไม่เกิน 20KB

Tip: ใช้ Format WebP แทน JPEG/PNG ได้ขนาดเล็กกว่า 25-35% โดยคุณภาพเท่ากัน Browser ทุกตัวที่ทันสมัยรองรับ WebP แล้วทั้งหมด

Plugin แนะนำสำหรับ Optimize รูปภาพ

ShortPixel Image Optimizer

Plugin ยอดนิยมที่บีบอัดรูปภาพผ่าน Cloud แปลง WebP ได้อัตโนมัติ มีแผนฟรี 100 รูปต่อเดือน และแผนเสียเงินสำหรับเว็บขนาดใหญ่ ข้อดีคือ Optimize รูปเก่าทั้งหมดด้วยปุ่มเดียว

Imagify

สร้างโดยทีม WP Rocket มี Algorithm บีบอัด 3 ระดับ (Normal, Aggressive, Ultra) แปลง WebP และ AVIF ได้ มีแผนฟรี 20MB ต่อเดือน เหมาะสำหรับเว็บที่ Upload รูปไม่มาก

Smush

Plugin ฟรีที่ใช้กันแพร่หลาย Optimize ได้โดยไม่ต้องสมัครสมาชิก ข้อจำกัดคือเวอร์ชันฟรีบีบอัดได้แค่ 1MB ต่อรูปและยังไม่แปลง WebP ต้องใช้ Smush Pro

วิธีแปลงรูปเป็น WebP ด้วย ShortPixel

# ติดตั้ง Plugin
WordPress Admin → Plugins → Add New → ค้นหา "ShortPixel Image Optimizer"
ติดตั้งและ Activate → ใส่ API Key จาก shortpixel.com (ฟรี)

# ตั้งค่า Compression
ShortPixel → Settings:
- Compression Type: Lossy (บีบอัดมากที่สุด แนะนำ)
- Resize Large Images: เปิด → ตั้ง Max Width 1280px
- WebP: เปิด "Create WebP versions of images"
- Deliver WebP: เปิด "Use <picture> tags"

# Bulk Optimize รูปเก่า
Media → Bulk ShortPixel → กด "Start Optimizing"
รอจนครบ 100% (อาจใช้เวลาหลายนาทีถ้ามีรูปมาก)

เปิด Lazy Load สำหรับรูปภาพ

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

WordPress เวอร์ชัน 5.5+ เปิด Native Lazy Load อัตโนมัติผ่าน Attribute loading="lazy" บน img tag แล้ว ไม่ต้องทำอะไรเพิ่ม แต่รูปที่เพิ่มผ่าน Custom HTML อาจไม่มี Attribute นี้ให้เพิ่มเอง

ปรับขนาดรูปใน PHP — เปลี่ยน Image Dimensions

<?php
// เพิ่มใน functions.php ของ Child Theme
// บังคับ WordPress แปลงรูปเป็นขนาดมาตรฐาน
add_image_size('blog-featured', 800, 450, true);  // Crop
add_image_size('product-thumb', 400, 400, true);  // Square

// ลบ Thumbnail ขนาดที่ WordPress สร้างอัตโนมัติที่ไม่ใช้
function remove_unused_image_sizes($sizes) {
  unset($sizes['medium_large']); // ลบขนาด 768px ที่ไม่ค่อยใช้
  return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'remove_unused_image_sizes');

Tip: หลังเพิ่ม Image Size ใหม่ต้อง Regenerate Thumbnail ของรูปเก่าทั้งหมด ใช้ Plugin "Regenerate Thumbnails" แล้วกด Regenerate All

ตรวจสอบว่าการ Optimize ได้ผล

# ทดสอบด้วย PageSpeed Insights
pagespeed.web.dev → ใส่ URL เว็บ
ดู "Opportunities" ถ้าเห็น:
- "Serve images in next-gen formats" → ต้องแปลง WebP
- "Defer offscreen images" → ต้องเปิด Lazy Load
- "Properly size images" → รูปใหญ่เกินความจำเป็น

# ดูขนาดรูปจริงใน Browser DevTools
F12 → Network → Filter "Img"
ดูคอลัมน์ Size ว่าแต่ละรูปหนักเท่าไหร่
รูปบทความทั่วไปควรน้อยกว่า 100KB

Tip: หลัง Optimize รูปแล้ว ลอง Run PageSpeed ก่อนและหลัง เพื่อเปรียบเทียบผล โดยทั่วไป LCP Score จะดีขึ้นทันที

แก้ปัญหาที่พบบ่อย

Error: รูป WebP แสดงไม่ได้บน Safari รุ่นเก่า

ให้ Plugin ส่ง WebP ผ่าน <picture> tag แทน .htaccess Rewrite ซึ่ง ShortPixel และ Imagify รองรับ Format นี้ Browser ที่รองรับ WebP จะแสดง WebP ส่วน Browser เก่าจะ Fallback เป็น JPEG/PNG อัตโนมัติ

รูปแตกพิกเซลหลัง Optimize

ปัญหานี้เกิดเมื่อ Resize รูปเกินขนาดจริงของต้นฉบับ เช่น อัปรูป 400×300 แต่แสดงในพื้นที่ 800×600 ให้อัปโหลดรูปที่มีความละเอียดสูงกว่าขนาดที่แสดงบนเว็บเสมอ อย่างน้อย 2 เท่า สำหรับ Retina Screen

Bulk Optimize หยุดกลางทาง — รูปที่เหลือไม่ได้ Optimize

อาจเกิดจาก PHP Timeout หรือ Memory Limit เกิน ไปที่ cPanel → PHP Settings → Increase max_execution_time เป็น 300 วินาทีและ memory_limit เป็น 256MB แล้วลอง Bulk Optimize ใหม่

รูปหายหลัง Optimize

Plugin Optimize บางตัวเขียนทับไฟล์ต้นฉบับ ตรวจสอบว่าตั้งค่า "Keep Original" หรือ "Backup" ไว้ ถ้ายังไม่ได้ Backup ให้รีบสร้าง Backup ก่อน Bulk Optimize ทุกครั้ง ดูบทความ Backup WordPress

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

Q: WebP กับ AVIF ต่างกันอย่างไร?

A: AVIF เป็น Format ใหม่กว่าที่บีบอัดได้ดีกว่า WebP ประมาณ 20-30% แต่ Browser รองรับน้อยกว่า (Chrome รองรับแต่ Firefox 93+ และ Safari 16+ เพิ่งรองรับ) ปัจจุบัน WebP ยังเป็น Format ที่แนะนำสำหรับความ Compatible สูงสุด

Q: รูปจาก Phone Camera ที่ HEIC Format ใช้ได้ไหม?

A: WordPress ไม่รองรับ HEIC โดยตรง ต้องแปลงเป็น JPEG หรือ PNG ก่อนอัปโหลด ใช้แอปบนมือถือ เช่น "HEIC to JPEG" หรือ Preview บน Mac กด Export เป็น JPEG แทน

Q: ต้อง Optimize รูปก่อนอัปโหลดหรือให้ Plugin ทำให้?

A: ทำทั้งสองอย่างดีที่สุด Resize รูปให้ได้ขนาดที่ต้องการก่อนอัปโหลด (ใช้ Photoshop, GIMP, หรือ Squoosh.app) แล้วปล่อยให้ Plugin บีบอัดและแปลง WebP ซ้ำอีกรอบ การ Resize ก่อนลด CPU Load ที่ Server ด้วย

Optimize รูปภาพ WordPress ให้โหลดเร็ว