ลดขนาดรูปและแปลงเป็น WebP ให้เว็บ WordPress เร็วขึ้น

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

คู่มือนี้ทำสามอย่าง ลดขนาดรูปที่อัปโหลดไปแล้ว แปลงเป็นรูปแบบ WebP ที่เล็กกว่าราว 30% ที่คุณภาพเท่ากัน และตั้งให้รูปที่อัปโหลดใหม่ถูกจัดการอัตโนมัติ

สิ่งที่ต้องเตรียม

• สิทธิ์ผู้ดูแล WordPress
• สิทธิ์ SSH หากต้องการประมวลผลรูปจำนวนมาก ซึ่งเร็วกว่าการทำผ่านหน้าเว็บมาก
• สำรองโฟลเดอร์ uploads ก่อนเสมอ การบีบอัดเป็นการเขียนทับไฟล์เดิม

sudo tar czf /var/backups/uploads-$(date +%F).tar.gz \
  -C /var/www/example.com/wp-content uploads
du -sh /var/www/example.com/wp-content/uploads

ขั้นตอนที่ 1: หาว่ารูปไหนใหญ่เกินไป

cd /var/www/example.com/wp-content/uploads

# รูปที่ใหญ่กว่า 500 KB
find . -type f \( -iname '*.jpg' -o -iname '*.png' \) -size +500k -printf '%s %p\n' \
  | sort -rn | head -20 | awk '{printf "%.1f MB  %s\n", $1/1048576, $2}'

# นับจำนวนและขนาดรวมแยกตามชนิด
find . -iname '*.jpg' | wc -l
find . -iname '*.png' -printf '%s\n' | awk '{s+=$1} END {printf "PNG รวม %.1f MB\n", s/1048576}'

ขั้นตอนที่ 2: จำกัดขนาดรูปที่อัปโหลดใหม่

ต้นเหตุที่แท้จริงคือคนอัปโหลดรูปจากกล้องขนาด 4000 พิกเซลเข้ามาโดยตรง ทั้งที่หน้าเว็บแสดงแค่ 1200 พิกเซล

// ใส่ใน mu-plugins หรือ functions.php ของ child theme

// ลดคุณภาพ JPEG จากค่าเริ่มต้น 82 ลงเล็กน้อย แทบมองไม่เห็นความต่าง
add_filter('jpeg_quality', fn() => 78);
add_filter('wp_editor_set_quality', fn() => 78);

// จำกัดขนาดสูงสุดของรูปต้นฉบับ
add_filter('big_image_size_threshold', fn() => 1920);

ค่า big_image_size_threshold ทำให้ WordPress ย่อรูปที่ใหญ่กว่านี้ให้อัตโนมัติ และเก็บต้นฉบับไว้ในชื่อที่ลงท้ายด้วย -scaled

ขั้นตอนที่ 3: บีบอัดรูปที่มีอยู่แล้วด้วยคำสั่ง

sudo apt install -y jpegoptim optipng webp imagemagick

ทดสอบกับโฟลเดอร์เดียวก่อนเสมอ

cd /var/www/example.com/wp-content/uploads/2026/09

# ดูขนาดก่อน
du -sh .

# JPEG บีบอัดแบบไม่สูญเสียคุณภาพที่มองเห็น
find . -iname '*.jpg' -exec jpegoptim --max=80 --strip-all --preserve --totals {} +

# PNG
find . -iname '*.png' -exec optipng -o2 -preserve {} +

du -sh .

ตัวเลือก --preserve รักษาวันที่แก้ไขไฟล์ไว้ ซึ่งสำคัญสำหรับระบบสำรองข้อมูลแบบส่วนต่าง

เมื่อพอใจแล้วจึงทำทั้งหมด ทำทีละปีเพื่อให้ควบคุมได้

cd /var/www/example.com/wp-content/uploads
for y in 2023 2024 2025 2026; do
  echo "กำลังทำปี $y"
  find "$y" -iname '*.jpg' -exec jpegoptim --max=80 --strip-all --preserve {} + 2>/dev/null
  find "$y" -iname '*.png' -exec optipng -o2 -preserve {} + 2>/dev/null
done
sudo chown -R www-data:www-data .

อย่าลืมคืนสิทธิ์ไฟล์ให้ถูกต้องหลังรันด้วย root

ขั้นตอนที่ 4: สร้างไฟล์ WebP

cd /var/www/example.com/wp-content/uploads

# สร้าง .webp คู่กับไฟล์เดิม ไม่ลบของเดิม
find . -type f \( -iname '*.jpg' -o -iname '*.jpeg' -o -iname '*.png' \) \
  -exec bash -c 'for f; do [ -f "$f.webp" ] || cwebp -quiet -q 80 "$f" -o "$f.webp"; done' _ {} +

sudo chown -R www-data:www-data .
du -sh .

เก็บไฟล์เดิมไว้ด้วยเสมอ เพราะเบราว์เซอร์รุ่นเก่าและโปรแกรมบางตัวยังไม่รองรับ WebP

ขั้นตอนที่ 5: ให้ Nginx ส่ง WebP เมื่อเบราว์เซอร์รองรับ

sudo nano /etc/nginx/sites-available/example.com

# ตรวจว่าเบราว์เซอร์รองรับ webp หรือไม่
map $http_accept $webp_suffix {
    default        "";
    "~*webp"       ".webp";
}

server {
    # ...

    location ~* ^/wp-content/uploads/.+\.(png|jpe?g)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
        expires 365d;
        add_header Cache-Control "public, immutable";
    }
}

sudo nginx -t && sudo systemctl reload nginx

header Vary: Accept จำเป็น มันบอกแคชและ CDN ว่าคำตอบต่างกันตามความสามารถของเบราว์เซอร์ หากขาดไป ผู้ใช้เบราว์เซอร์เก่าอาจได้รับไฟล์ WebP ที่เปิดไม่ได้

ทดสอบ

curl -sI -H 'Accept: image/webp' https://example.com/wp-content/uploads/2026/09/pic.jpg | grep -i 'content-type\|vary'
curl -sI https://example.com/wp-content/uploads/2026/09/pic.jpg | grep -i content-type

คำสั่งแรกควรได้ image/webp และคำสั่งที่สองควรได้ image/jpeg

ขั้นตอนที่ 6: ลดจำนวนขนาดรูปที่สร้าง

ธีมและปลั๊กอินจำนวนมากประกาศขนาดรูปเพิ่ม ทำให้รูปหนึ่งใบสร้างไฟล์ย่อยสิบกว่าไฟล์ ซึ่งกินพื้นที่มากโดยที่หลายขนาดไม่เคยถูกใช้

wp eval 'print_r(wp_get_registered_image_subsizes());'

// ปิดขนาดที่ไม่ได้ใช้
add_filter('intermediate_image_sizes_advanced', function ($sizes) {
    unset($sizes['medium_large']);
    unset($sizes['1536x1536']);
    unset($sizes['2048x2048']);
    return $sizes;
});

ลบไฟล์ของขนาดที่ไม่ใช้แล้วออกจากดิสก์

wp media regenerate --only-missing --yes

ขั้นตอนที่ 7: ตรวจ Lazy Load และขนาดที่ระบุ

WordPress เพิ่ม loading="lazy" ให้เองอยู่แล้ว แต่ไม่ควรใส่กับรูปแรกที่เห็นบนหน้าจอ เพราะทำให้คะแนน LCP แย่ลง

// ยกเว้น lazy load สำหรับรูปแรก
add_filter('wp_img_tag_add_loading_attr', function ($value, $image, $context) {
    static $first = true;
    if ($first && $context === 'the_content') {
        $first = false;
        return false;
    }
    return $value;
}, 10, 3);

ตรวจว่าทุก <img> มี width และ height ซึ่งป้องกันหน้าเว็บกระโดดระหว่างโหลดและมีผลต่อคะแนน CLS

ขั้นตอนที่ 8: วัดผล

# ขนาดโฟลเดอร์ก่อนและหลัง
du -sh /var/www/example.com/wp-content/uploads

# ขนาดรวมของหน้าเว็บ
curl -sL https://example.com | wc -c

ทดสอบด้วย PageSpeed Insights และดูสามค่า LCP ควรต่ำกว่า 2.5 วินาที CLS ต่ำกว่า 0.1 และขนาดรวมของหน้าควรต่ำกว่า 2 MB

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

รูปหายหลังบีบอัด

สิทธิ์ไฟล์เปลี่ยนเพราะรันคำสั่งด้วย root คืนสิทธิ์ด้วย sudo chown -R www-data:www-data wp-content/uploads

WebP ไม่ถูกส่งให้เบราว์เซอร์

ตรวจว่าไฟล์ .webp อยู่ในตำแหน่งที่ถูกต้อง คือชื่อเดิมต่อท้ายด้วย .webp และตรวจ Log ของ Nginx ว่าเข้าเงื่อนไข location ที่ตั้งไว้จริง

คุณภาพรูปแย่ลงจนสังเกตได้

ค่าคุณภาพต่ำเกินไป เพิ่มเป็น 85 แล้วสร้างใหม่จากต้นฉบับที่สำรองไว้ รูปสินค้าและรูปคนควรใช้ค่าสูงกว่ารูปพื้นหลัง

ดิสก์เต็มเพราะขนาดรูปที่สร้างซ้ำ

ลดจำนวนขนาดที่ลงทะเบียนตามขั้นตอนที่ 6 และตรวจว่าปลั๊กอินใดสร้างขนาดเพิ่มโดยไม่จำเป็น

ต้องการโฮสติ้งที่รองรับเว็บรูปภาพจำนวนมากพร้อม CDN ติดต่อ THAI DATA CLOUD ได้ที่ https://thaidata.cloud/contact/