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

|
5 นาที ในการอ่าน

การทำรูปไฟล์ให้เล็กเพื่อใช้บนเว็บไซต์จะมีผลอย่างมากต่อคะแนนของ 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

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

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

TinyPNG
TinyPNG Package

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

webp converter
avif converter

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

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

photoscape

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

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

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

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

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

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

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

Designil PDPA Banner Thai Woo AIO Banner
แชร์:
line

author - aum watcharapon
อั้ม วัชรพล
👨🏻‍💻 ผู้เชี่ยวชาญทางด้าน WordPress

Subscribe to newsletter

doaction จะส่งเพื่อแจ้งเตือนเมื่อมีบทความใหม่ๆ ในเว็บไซต์และสามารถกดยกเลิกได้ตลอดเวลา

บทความอื่นๆ

WebPresso SEO สำหรับคนทำเว็บ 2024: สิ่งที่ต้องรู้เกี่ยวกับ SEO

เมื่อเร็วๆ นี้ ผมได้มีโอกาสเข้าร่วมงาน WebPresso ในหัวข้อ “SEO สำหรับคนทำเว็บ” ซึ่งจัดโดย สมาคมผู้ดูแลเว็บไซต์และสื่อออนไลน์ไทย จัดวันที่ 30 มิถุนายน 2567 ณ สยามพารากอน SCBX NEXT TECH งานนี้มีวิทยากรผู้เชี่ยวชาญอย่างคุณไตเติ้ล Head of Priceza Money ที่ปลุกปั้นตั้งแต่เริ่มต้นไปจนถึงมีผู้เข้าชมวันละหมื่นคน และคุณแทนจาก Livetube X ที่ดูแลเว็บสำนักข่าวชื่อดัง โดยเน้นไปทางด้านการพัฒนาและเทคนิค ซึ่งทำยังไงให้ส่งผลดีต่อ SEO ความหมายและแก่นของ SEO SEO (Search Engine Optimization) คือการปรับปรุงเว็บไซต์ให้ติดอันดับใน Search Engine เช่น Google และ Bing โดยมากกว่า 90% ของผู้ใช้ Search Engine จะมาจาก Google แก่นของ SEO คือการสร้างเนื้อหาที่ตอบโจทย์และความต้องการของผู้ค้นหา การทำ […]

อ่านต่อ

หากมีคำถาม หรือต้องการคำปรึกษาเกี่ยวกับ WordPress

สำนักงาน

  • บริษัท ดู แอคชั่น จำกัด
    66 ซอยเพชรเกษม 98/1, ถนนเพชรเกษม,
    แขวงบางแคเหนือ, เขตบางแค
    กรุงเทพมหานคร
    10160

เราใช้คุกกี้เพื่อสร้างประสบการณ์ที่ดี มีประสิทธิภาพยิ่งขึ้น

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • เปิดใช้งานตลอด

บันทึกการตั้งค่า