โดย AsiaGB  ·  16 สิงหาคม 2569

ใช้รูป WebP บน WordPress ลดขนาดรูป ทำเว็บโหลดเร็วขึ้น

รูปภาพเป็นหนึ่งในองค์ประกอบที่กินแบนด์วิดท์มากที่สุดในเว็บ WordPress ทั่วไป หลายเว็บยังคงใช้ JPEG และ PNG ที่มีขนาดหนัก ทั้งที่มีรูปแบบไฟล์ที่ดีกว่ามานานแล้ว นั่นคือ WebP บทความนี้จะพาคุณรู้จัก WebP ตั้งแต่ต้น เปรียบเทียบกับฟอร์แมตอื่น และแนะนำวิธีเปิดใช้งานบน WordPress แบบครบวงจร

WebP คืออะไร

WebP คือรูปแบบไฟล์รูปภาพที่พัฒนาโดย Google เปิดตัวในปี 2010 โดยมีเป้าหมายเพื่อทดแทน JPEG, PNG และ GIF ด้วยไฟล์ที่มีขนาดเล็กกว่าแต่คุณภาพเท่าเดิมหรือดีกว่า WebP ใช้เทคนิคการบีบอัดแบบ Lossy (สำหรับภาพถ่าย คล้าย JPEG) และ Lossless (สำหรับภาพกราฟิก คล้าย PNG) ขึ้นอยู่กับการตั้งค่า

จุดเด่นของ WebP ที่ทำให้มันโดดเด่นเหนือ JPEG และ PNG ได้แก่:

• ขนาดเล็กกว่า — WebP แบบ Lossy เล็กกว่า JPEG ที่คุณภาพเทียบเท่าประมาณ 25–34% และ WebP แบบ Lossless เล็กกว่า PNG ถึง 26%
• รองรับ Transparency — รองรับช่อง Alpha (PNG-style transparency) โดยไม่ต้องเพิ่มขนาดไฟล์มากนัก
• รองรับ Animation — สามารถเก็บภาพเคลื่อนไหวได้เหมือน GIF แต่ขนาดเล็กกว่ามาก
• Browser รองรับกว้างขวาง — ครอบคลุมกว่า 95% ของ Browser ที่ใช้งานอยู่ในปัจจุบัน

ชื่อ "WebP" มาจาก "Web Picture" — รูปแบบที่ออกแบบมาเพื่อเว็บโดยเฉพาะ นามสกุลไฟล์คือ .webp

ทำไมต้องใช้ WebP บน WordPress

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

1. ลดขนาดไฟล์ได้จริง

งานวิจัยของ Google แสดงให้เห็นว่า WebP ลดขนาดไฟล์รูปภาพได้เฉลี่ย 25–34% เมื่อเทียบกับ JPEG ที่คุณภาพภาพเท่ากัน สำหรับเว็บที่มีรูปภาพหลักร้อยหรือหลักพันรูป ผลลัพธ์สุทธิคือลดการถ่ายโอนข้อมูลได้มหาศาล

2. ปรับปรุง Core Web Vitals

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

3. ประหยัดแบนด์วิดท์และลดค่าใช้จ่าย

สำหรับเว็บที่ใช้บริการ Shared Hosting หรือ VPS รูปภาพที่มีขนาดเล็กลงหมายถึงแบนด์วิดท์ที่ใช้น้อยลง ซึ่งช่วยประหยัดต้นทุนได้โดยตรงโดยเฉพาะเว็บที่มีผู้เข้าชมสูง

4. ไม่กระทบคุณภาพที่มองเห็น

เมื่อตั้งค่าคุณภาพ WebP ไว้ที่ 80–85% ผู้ใช้แทบจะไม่สังเกตเห็นความแตกต่างด้านคุณภาพเมื่อเทียบกับ JPEG ที่ Quality 100% แต่ขนาดไฟล์เล็กกว่ามาก

เปรียบเทียบ WebP vs JPEG vs PNG

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

จากตาราง จะเห็นว่า WebP มีข้อได้เปรียบในแทบทุกด้าน ยกเว้นการรองรับของ Browser ที่ยังไม่ครอบคลุม 100% ซึ่งแก้ได้ง่ายด้วยการใช้ <picture> element หรือ .htaccess fallback

Plugin แนะนำสำหรับ WebP บน WordPress

มี Plugin หลายตัวที่ช่วยให้การใช้งาน WebP บน WordPress ง่ายขึ้น ด้านล่างคือตัวเลือกที่ได้รับความนิยมและน่าเชื่อถือ:

เปรียบเทียบ Plugin WebP สั้น ๆ

วิธีใช้ Plugin Converter for Media แบบ Step-by-Step

Converter for Media เป็นตัวเลือกที่ดีที่สุดสำหรับผู้ที่ต้องการเริ่มต้นฟรีและไม่อยากพึ่ง API ภายนอก ทำตามขั้นตอนด้านล่าง:

1. ไปที่ WordPress Admin → Plugins → Add New ค้นหา "Converter for Media" แล้วคลิก Install Now และ Activate
2. ไปที่ Settings → Converter for Media เพื่อเข้าถึงหน้าการตั้งค่า
3. ในแท็บ General ตรวจสอบว่า "Convert images on upload" เปิดอยู่ เพื่อให้รูปที่อัปโหลดใหม่ถูกแปลงเป็น WebP โดยอัตโนมัติ
4. ตั้งค่า Quality ที่ต้องการ (แนะนำ 80–85%) เพื่อสมดุลระหว่างคุณภาพและขนาดไฟล์
5. ไปที่แท็บ Bulk Convert แล้วคลิก "Convert all" เพื่อแปลงรูปภาพทั้งหมดที่อัปโหลดไว้ก่อนหน้าให้เป็น WebP
6. รอให้กระบวนการ Bulk Convert เสร็จสิ้น (อาจใช้เวลาหลายนาทีขึ้นอยู่กับจำนวนรูป) แถบความคืบหน้าจะแสดงสถานะ
7. เมื่อเสร็จแล้ว Plugin จะเสิร์ฟ WebP แทน JPEG/PNG โดยอัตโนมัติให้กับ Browser ที่รองรับ โดยยังเก็บไฟล์ต้นฉบับไว้เป็น Fallback

แปลง WebP ด้วย cwebp CLI (สำหรับผู้ใช้ขั้นสูง)

หากคุณมีสิทธิ์เข้าถึง SSH บนเซิร์ฟเวอร์ การใช้เครื่องมือ cwebp จาก Google ช่วยให้คุณแปลงรูปภาพได้อย่างยืดหยุ่นและรวดเร็วโดยไม่ต้องพึ่ง Plugin

ติดตั้ง cwebp บนเซิร์ฟเวอร์ Linux (Ubuntu/Debian)

sudo apt update
sudo apt install webp -y

แปลงรูปเดี่ยว

# แปลง JPEG เป็น WebP ที่ Quality 82
cwebp -q 82 image.jpg -o image.webp

# แปลง PNG เป็น WebP แบบ Lossless
cwebp -lossless image.png -o image.webp

แปลงรูปทั้งโฟลเดอร์ (Batch)

# แปลง .jpg ทั้งหมดในโฟลเดอร์ปัจจุบัน
for f in *.jpg; do
  cwebp -q 82 "$f" -o "${f%.jpg}.webp"
done

# แปลง .png ทั้งหมด
for f in *.png; do
  cwebp -q 85 "$f" -o "${f%.png}.webp"
done

ตรวจสอบขนาดก่อน-หลัง

ls -lh image.jpg image.webp

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

ตั้งค่า .htaccess ให้เสิร์ฟ WebP อัตโนมัติ

วิธีนี้เหมาะสำหรับผู้ที่แปลงรูปเป็น WebP ไว้แล้วและต้องการให้เซิร์ฟเวอร์เสิร์ฟ WebP โดยอัตโนมัติเมื่อ Browser รองรับ โดยไม่ต้องแก้ไข HTML ใด ๆ

เพิ่มโค้ดต่อไปนี้ใน .htaccess

<IfModule mod_rewrite.c>
  RewriteEngine On

  # เสิร์ฟ WebP ถ้า Browser รองรับและมีไฟล์ .webp อยู่
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %1.webp -f
  RewriteRule ^ %1.webp [L,T=image/webp,E=webp:1]
</IfModule>

<IfModule mod_headers.c>
  # Cache control สำหรับ WebP
  <FilesMatch "\.webp$">
    Header set Vary "Accept"
  </FilesMatch>
</IfModule>

โค้ดข้างต้นทำงานดังนี้:

1. ตรวจสอบว่า Browser ส่ง Accept: image/webp ในคำขอหรือไม่
2. ตรวจสอบว่ามีไฟล์ .webp ที่ตรงกับไฟล์ JPEG/PNG ที่ร้องขออยู่หรือไม่
3. ถ้าเป็นจริงทั้งสองข้อ ให้เสิร์ฟไฟล์ WebP แทน พร้อม Content-Type ที่ถูกต้อง
4. ถ้า Browser ไม่รองรับ WebP ก็เสิร์ฟ JPEG/PNG ตามปกติ

ทดสอบว่า WebP ทำงานแล้วหรือยัง

หลังจากติดตั้งและตั้งค่าแล้ว ควรทดสอบให้แน่ใจว่า WebP ถูกเสิร์ฟจริง ๆ ทำได้หลายวิธี:

วิธีที่ 1: Chrome DevTools Network Tab

1. เปิดหน้าเว็บใน Google Chrome
2. กด F12 หรือ Ctrl+Shift+I เพื่อเปิด DevTools
3. คลิกแท็บ Network แล้ว Reload หน้าเว็บ
4. กรอง Type เป็น Img แล้วคลิกที่รูปภาพที่ต้องการตรวจสอบ
5. ดูที่ส่วน Response Headers — ควรเห็น Content-Type: image/webp

วิธีที่ 2: Google PageSpeed Insights

ไปที่ pagespeed.web.dev วิเคราะห์ URL ของคุณ หากยังไม่ได้ใช้ WebP จะเห็นคำแนะนำ "Serve images in next-gen formats" ใน Opportunities ถ้าไม่เห็นคำแนะนำนี้แสดงว่า WebP ทำงานแล้ว

วิธีที่ 3: cURL Command

# ทดสอบว่าเซิร์ฟเวอร์เสิร์ฟ WebP หรือไม่
curl -I -H "Accept: image/webp" https://yourdomain.com/wp-content/uploads/2026/08/photo.jpg

ดูที่ Content-Type ใน Response headers — ถ้าเห็น image/webp แสดงว่าตั้งค่าถูกต้อง

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