ขนาดไฟล์รูปเล็กส่งผลต่อ SEO อย่างไร ? และเครื่องมือปรับขนาดยอดนิยม

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

Largest Contentful Paint (LCP) คือ การวัดเวลาที่ใช้ในการโหลดเนื้อหาหลักของหน้าเว็บ ซึ่งรวมถึงรูปภาพ วิดีโอ หรือบล็อกของข้อความขนาดใหญ่ หากรูปภาพที่ใช้ในเว็บไซต์มีขนาดไฟล์ใหญ่เกินไป จะทำให้เวลาในการโหลดเพิ่มขึ้น ส่งผลให้คะแนน LCP ลดลง

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

นามสกุลไฟล์รูปภาพยอดนิยม ที่ใช้กันบนเว็บไซต์

นามสกุลไฟล์รูปภาพยอดนิยมในยุคเก่าได้แก่ JPG, JPEG, PNG, GIF ซึ่งจะมีขนาดใหญ่กว่า แต่หลังจากนั้นได้พัฒนา SVG, WEBP, AVIF ขึ้นมา โดยจะกล่าวถึงแค่ AVIF และ WEBP ซึ่งเป็นนามสกุลไฟล์รูปภาพที่ทันสมัยและมีข้อดีหลายอย่างที่เหมาะสมกับการใช้งานบนเว็บไซต์

AVIF มีการบีบอัดที่มีประสิทธิภาพสูง ทำให้ขนาดไฟล์เล็กลงอย่างมากโดยไม่สูญเสียคุณภาพ รองรับความลึกของสีสูงถึง 10-bit และ 12-bit ทำให้ภาพมีความละเอียดและช่วงสีที่กว้างขึ้น รวมทั้งรองรับฟีเจอร์การบีบอัดภาพที่ทันสมัย เช่น HDR (High Dynamic Range)

แม้ว่าเบราว์เซอร์หลักๆ จะเริ่มรองรับ AVIF แต่ยังไม่แพร่หลายเท่ากับ JPEG และ PNG ด้าน WEBP นั้นมีการบีบอัดที่มีประสิทธิภาพและสามารถบีบอัดได้ทั้งแบบมีและไม่มีการสูญเสียข้อมูล ขนาดไฟล์เล็กกว่า JPEG และ PNG อีกทั้งยังรองรับภาพที่มีพื้นหลังโปร่งใสเช่นเดียวกับ PNG แต่ขนาดไฟล์เล็กกว่า

WEBP มีข้อดีหลายประการที่ทำให้เป็นทางเลือกที่ดีสำหรับการใช้งานรูปภาพบนเว็บไซต์ ข้อดีหลักๆ ได้แก่ ขนาดไฟล์ที่เล็กซึ่งสามารถบีบอัดได้ทั้งแบบมีการสูญเสียข้อมูล (lossy) และไม่มีการสูญเสียข้อมูล (lossless)

ทำให้ขนาดไฟล์เล็กลงมากเมื่อเทียบกับ JPEG และ PNG โดยที่ยังคงคุณภาพของภาพได้ดี นอกจากนี้ WEBP ยังรองรับภาพที่มีพื้นหลังโปร่งใส ทำให้สามารถใช้งานในกราฟิก โลโก้ และไอคอนที่ต้องการความโปร่งใสได้ อีกทั้งยังรองรับภาพเคลื่อนไหวได้เช่นเดียวกับ GIF แต่มีขนาดไฟล์ที่เล็กกว่าและคุณภาพที่ดีกว่า การรองรับในเบราว์เซอร์หลักๆ เช่น Google Chrome, Mozilla Firefox, Microsoft Edge และ Opera ทำให้ WEBP สามารถใช้งานได้โดยไม่ต้องกังวลเรื่องความเข้ากันได้

ลดขนาดรูปภาพด้วย TinyPNG

เว็บที่ใช้สำหรับย่อไฟล์รูปมีหลายเว็บไซต์ แต่เว็บยอดนิยมที่ผมใช้คือ tinypng.com โดยจะใช้วิธีการอัปโหลดรูปภาพที่ต้องการขึ้นไปยังเว็บไซต์ จากนั้นเว็บไซต์จะทำการบีบอัดขนาดรูปภาพให้เล็กที่สุดเท่าที่จะทำได้ ตัวอย่างในรูปภาพจะสังเกตว่าขนาดลดลงถึง 70-80% จากขนาดเดิม แม้ว่ารูปภาพที่ได้รับการย่ออาจจะสูญเสียคุณภาพเล็กน้อย แต่แลกกับขนาดที่เล็กลงก็ถือว่าคุ้มค่า

ข้อดีของการอัปโหลดไฟล์รูปภาพโดยใช้ TinyPNG คือการที่เราได้ทำการประมวลผลเบื้องต้น (Pre-Process) ก่อนที่จะอัปโหลดขึ้นเซิร์ฟเวอร์จริง ทำให้ไม่สูญเสียทรัพยากรในการประมวลผลของเซิร์ฟเวอร์ และยังช่วยประหยัดพื้นที่ในการจัดเก็บรูปภาพบนเว็บไซต์ด้วย เนื่องจาก WordPress จะทำการจัดเก็บรูปต้นฉบับแล้วจึงค่อยแปลงขนาดไปอีกหลายๆ ไซส์

อันที่จริง TinyPNG มีปลั๊กอินสำหรับ WordPress ด้วย โดยสามารถโยนรูปภาพขึ้นไปแล้วใช้ API เพื่อยิงไปทำการย่อไฟล์ให้แต่จะเสียเงินเป็นรายครั้งเป็นข้ันบันไดไป และยังมีปลั๊กอินอีกหลายตัวที่ช่วยที่มีความสามารถคคล้ายๆ กัน เช่น Imagify, Shortpixel ที่มีแพคเกจถูกกว่าตัว TinyPNG ด้วยถ้าเกิดใช้ในปริมาณมากๆ

แปลงไฟล์รูปภาพให้เป็น WebP และ AVIF ในเครื่องตัวเอง

ที่ผมใช้เป็นประจำใน Mac มีสองโปรแกรมคือ WebP Converter และ AVIF Converter ทั้งสองตัวนี้ฟรี สามารถลากไฟล์ JPEG, PNG, GIF ลงไปในโปรแกรมแล้วจะทำการแปลงเป็น WebP และ AVIF อัตโนมัติ คุณภาพรูปภาพแทบจะไม่สูญเสียเลย และขนาดภาพลดลงมากๆ นอกจากนี้ ยังสามารถโยนรูปได้เป็น Batch และเลือกโฟลเดอร์ Output ที่ต้องการได้ด้วย

ใช้ PhotoScape แก้ไซส์รูปภาพ และแปลงไฟล์ให้ในรอบเดียว

ข้อดีของ PhotoScape คือสามารถทำงานได้แบบเป็นชุด Converter ตัวบนจะสามารถแปลงนามสกุลไฟล์ได้อย่างเดียว แต่ถ้าคุณทำงานเดิมแบบซ้ำๆ สามารถตั้งค่า เพื่อทำงานแบบเดิมและทำแบบเป็นชุดได้ ยกตัวอย่าง

• แปลงไฟล์ความกว้างสูงสุด 1680px
• แปลงเป็นไฟล์ WebP และเลือกคุณภาพรูป 80% จากรูปปัจจุบัน
• ตั้งค่าคำหน้าชื่อรูปภาพ
• เลือกดโฟลเดอร์ที่ต้องการเซฟ

ทั้งหมดนี้เราสามารถ ตั้งค่าภายในครั้งเดียว และในครั้งถัดไปเราเพียงแค่โยนไฟล์เข้าไปในแอพ แล้วกด Save ก็จะได้ไฟล์ตามมาตรฐานที่เราตั้งค่าไว้

โดยวิธีการทำตามรูปภาพด้านบน

1. ลากรูปภาพที่ต้องการจัดการลงในตำแหน่งด้านบน
2. เลือกขนาดรูปภาพสูงสุดที่ต้องการ ได้ทั้งกว้าง สูง หรือแบบสัดส่วน
3. จากนั้นกดปุ่ม Save ที่ด้านล่าง หลังจากนั้นจะมี Popup ขึ้นมา
4. กำหนด folder ที่ต้องการเซฟไว้
5. พร้อมแปลงไฟล์เป็นนามสกล WebP ที่นี่ได้เลย สามารถเลือกคุณภาพที่ต้องการได้ด้วย
6. และกำหนดชื่อไฟล์ที่ต้องการได้ด้วย เพิ่มได้ทั้งหน้าและหลัง

หากใครสนใจ App นี้สำหรับผู้ใช้ Mac ไปดาวน์โหลดฟรีได้ ที่นี่