เจาะลึกวิธีแปลงรูปภาพทั้งเว็บเป็น WebP / AVIF อัตโนมัติ: ลดแบนด์วิดท์ 70% โหลดไวไม่เปลืองพื้นที่

หากคุณทดสอบความเร็วเว็บด้วย Google PageSpeed Insights หรือ Lighthouse แล้วได้คะแนนสีส้มหรือสีแดง กว่า 80% ของปัญหาที่พบมักไม่ใช่โค้ดภาษาที่ทำงานช้า แต่เกิดจาก "ก้อนรูปภาพขนาดยักษ์" ที่ผู้ดูแลเว็บหรือลูกค้าอัปโหลดขึ้นไปตรงๆ โดยไม่เคยผ่านการบีบอัด ขนาด 3–5 MB ต่อภาพ!

กฎทองของ Web Performance: รูปภาพที่โหลดเร็วที่สุด คือรูปภาพที่มีขนาดไฟล์เล็กที่สุดเท่าที่ตามนุษย์จะแยกความต่างไม่ออก การแปลงไฟล์รูปภาพแบบอัตโนมัติบนเซิร์ฟเวอร์ (Automated Image Pipeline) จึงเป็นไฟต์บังคับของคนทำเว็บยุคใหม่

1. เทียบฟอร์มชัดๆ: JPEG vs WebP vs AVIF

ในอดีตเราพึ่งพา .jpg สำหรับภาพถ่าย และ .png สำหรับภาพกราฟิกที่มีพื้นหลังโปร่งใส (Alpha Transparency) แต่ปัจจุบันรูปแบบไฟล์ยุคใหม่ได้เข้ามาปฏิวัติวงการ:

• WebP (คิดค้นโดย Google): ประหยัดพื้นที่กว่า JPEG ทั่วไปถึง 30% – 70% โดยรองรับทั้งภาพถ่ายและพื้นหลังโปร่งใสในตัวเดียว ปัจจุบันเบราว์เซอร์ทั่วโลก (รวมถึง Safari, Chrome, Edge, Firefox) รองรับเกิน 97% แล้ว
• AVIF (Next-Gen Format): บีบอัดได้โหดกว่า WebP อีกราว 20% แต่ข้อเสียคือต้องใช้พลังประมวลผลของ CPU ฝั่งเซิร์ฟเวอร์ในการบีบอัดสูงกว่า และเบราว์เซอร์เก่าๆ บางรุ่นยังไม่รองรับ

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

2. วิธีเขียนสคริปต์ PHP แปลงไฟล์เป็น WebP อัตโนมัติ

แทนที่จะต้องให้ผู้ใช้เปิด Photoshop ย่อรูปทีละใบ เราสามารถเขียนโค้ดสั้นๆ ดักจับในจังหวะที่ผู้ใช้อัปโหลดไฟล์ แล้วแปลงเป็น .webp ทันทีด้วย PHP GD Library:

<?php
function convertToWebp(string $sourcePath, string $destinationPath, int $quality = 82): bool
{
    $info = @getimagesize($sourcePath);
    if (!$info) return false;

    $mime = $info['mime'];
    $image = match ($mime) {
        'image/jpeg' => imagecreatefromjpeg($sourcePath),
        'image/png'  => imagecreatefrompng($sourcePath),
        'image/webp' => imagecreatefromwebp($sourcePath),
        default      => null,
    };

    if (!$image) return false;

    // รักษาสีโปร่งใสสำหรับไฟล์ PNG / WebP
    imagepalettetotruecolor($image);
    imagealphablending($image, true);
    imagesavealpha($image, true);

    // บันทึกเป็น WebP ด้วยระดับคุณภาพที่แนะนำ (80 - 85)
    $saved = imagewebp($image, $destinationPath, $quality);
    imagedestroy($image);

    return $saved;
}
?>

เทคนิคแนะนำ: ค่า Quality ที่ 80 - 85 คือจุดที่สมดุลที่สุด ขนาดไฟล์จะลดลงเฉลี่ย 75% แต่เมื่อมองด้วยตาเปล่าบนจอสมาร์ตโฟนหรือ Retina Display จะไม่เห็นความแตกต่างเลย

3. สร้างภาพขนาดย่อ (Thumbnail Pipeline) ไปพร้อมกัน

อีกหนึ่งข้อผิดพลาดคลาสสิกคือ การนำรูปภาพขนาดเต็ม (Full HD หรือ 4K) ไปแสดงในการ์ดรายการบทความขนาด 300x200 พิกเซล ผลคือเบราว์เซอร์ต้องดาวน์โหลดภาพเต็มใบมาบีบย่อเองบนหน้าจอ ทำให้กระตุกและเปลืองแรม

สูตรสำเร็จของระบบ 2BFox คือการสร้าง 2 ขนาดเสมอเมื่ออัปโหลดภาพหน้าปก:

1. Master Cover (1280px WebP): สำหรับแสดงเป็นแบนเนอร์ส่วนหัวของบทความ (Hero Banner)
2. Card Thumbnail (600px WebP): สำหรับแสดงบนการ์ดหน้ารวมบทความหรือวิดเจ็ตแนะนำ ขนาดไฟล์จะเหลือเพียง 20–40 KB เท่านั้น!

4. เทคนิคแสดงผลหน้าบ้าน: เสิร์ฟอย่างไรให้ปลอดภัย 100%

หากต้องการรองรับเบราว์เซอร์เก่าแก่ที่ไม่รู้จัก WebP แนะนำให้ใช้แท็ก <picture> ของ HTML5 ซึ่งเบราว์เซอร์จะเลือกไฟล์ที่ทันสมัยที่สุดก่อนเสมอ:

<picture>
  <source srcset="/uploads/covers/article-banner.webp" type="image/webp">
  <img src="/uploads/covers/article-banner.jpg" 
       alt="ชื่อบทความ" 
       width="1200" 
       height="630" 
       loading="lazy">
</picture>

ข้อควรจำสำหรับคะแนน Core Web Vitals (CLS): อย่าลืมใส่แอตทริบิวต์ width และ height ลงในแท็ก <img> เสมอ เพื่อให้เบราว์เซอร์จองพื้นที่ว่างไว้ล่วงหน้าก่อนที่ภาพจะโหลดเสร็จ ช่วยป้องกันอาการหน้าเว็บกระตุกขยับได้อย่างหมดจด!

บทสรุป: ความเบาคือหัวใจของความเร็ว

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