Review ปลั๊กอิน Image Optimizer บีบอัดรูป เปลี่ยนเป็น WebP และ AVIF

CodingBunny Image Optimizer

ต้องบอกว่าปลั๊กอิน CodingBunny Image Optimizer ตัวนี้ทำได้น่าทึ่งจริงๆ  แก้ไขปัญหาทั้งหมดเกี่ยวกับรูปภาพที่อัพขึ้นเว็บไซต์ของ WordPress เรียกได้ว่าปฎิวัติวงการ mage Optimizer

• บีบอัดรูปให้เล็กที่สุด โดยไม่สูญเสียความคมชัดของรูปแม้แต่น้อย
• แปลงรูปให้เป็นไฟล์นามสกุล WebP และ AVIF เพื่อให้เว็บโหลดเร็ว ติด SEO ง่าย
• รูปเดิมที่เคยอัพขึ้นเว็บแล้วปลั๊กอินจะไม่ไปยุ่งอะไรเกี่ยวกับมัน ไม่แปลงรูปเป็น WebP และ AVIF ให้เรา ถ้าอยากได้ต้องอัพรูปนั้นใหม่อีกรอบ (หลังติดตั้งปลั๊กอินแล้ว)
• รูปเก่าๆที่เคยอัพไปก่อนหน้านี้นั้น ปลั๊กอินจะช่วยลดขนาดรูปลงผ่าน URLs แทน โดยไม่แปลงนามสกุล สังเกตุ URLs ของรูปจะมีตัวเลขต่อท้าย เช่น -768×768.jpg หรือ -768×549.jpg แล้วขนาดรูปในหน้านั้นใช้พื้นที่เท่าไหร่ (ไม่ย่อทุกรูปนะ)
• รูปใหม่ๆ ที่อัพโหลดหลังจากติดตั้งปลั๊กอิน CodingBunny Image Optimizer เมื่ออัพรูปจะ Convert เป็น WebP และ AVIF
• ปิดฟังก์ชั่น Intermediate Sizes ของ WordPress ที่สร้างรูปหลายๆขนาดไว้ ทำให้เว็บเราบวม โดยเราสามารถเลือกเปิด/ปิดได้ตามต้องการ
• กำหนดขนาดรูป maximum size สูงสุดที่ต้องการได้

The founder of CodingBunny

พาไปรู้จักกับผู้ก่อตั้ง คุณ Matteo De Maria เป็นนักออกแบบและนักพัฒนาเว็บไซต์ (เจ้าของเว็บ DMM Web Design ) มีความเชี่ยวชาญด้าน WordPress, WooCommerce และ Elementor ปัจจุบันได้เปิดเว็บขายปลั๊กอินชื่อ CodingBunny ซึ่งตอนนี้มีขายปลั๊กอินอยู่ 4 ตัวคือ

1. Bulk Edit for WooCommerce v.1.0.1
   ปลั๊กอินแก้ไขสินค้าใน Woo ที่ทำให้เรา Filter หาสิ่งที่ต้องการแก้ไขได้ทีละเยอะๆได้ง่ายๆ
2. Image Optimizer v.1.0.0
   เป็นปลั๊กอินบีบอักรูปและแปลงรูปที่อัพขึ้นเว็บเป็นไฟล์นามสกุล WEBP หรือ AVIF (เป็นที่มาของบทความนี้)
3. WhatsApp Chat v.1.0.1
   เป็นปลั๊กอินประเภท Floating Chat Widget ทำให้เราสามารถใช้ WhatsApp ให้ลูกค้าแชท Live Chat กับเราผ่านหน้าเว็บได้โดยไม่ต้องไปที่มือถือ

นอกจากนี้แล้ว Matteo ยังมีธุรกิจอื่นที่น่าสนใจ คือ การเปิดบริษัทรับงานถ่ายรูป ด้วยความชอบถ่ายรูปเขาจึงมีอีกธุรกิจ รับถ่ายรูปสินค้า พื้นขาว/ดำ/ตกแต่ง รีทัสรูป รูปสำหรับใช้งานบนเว็บไซต์ขายของ รูปที่นำไปใช้งานรายงานประจำปีของบริษัทอย่าง Annual Reports หรือแม้แต่รูปถ่ายคู่รัก งานแต่ง ครอบครัว รูปกำลังตั้งท้อง ซึ่งเขาก็ทำได้ดีจนชนะการประกวดภาพถ่าย ระดับชาติและระดับนานาชาติในอิตาลี และยังเปิดหลักสูตรการถ่ายภาพและการรีทัสภาพถ่าย

CodingBunny Image Optimizer ทำงานอย่างไร

หลักการทำงานของมันก็ง่ายๆเลยครับ ใช้ฟังก์ชั่นของ PHP ในการเปลี่ยนนามสกุลของรูปให้เป็น WEBP หรือ AVIF แล้วบีบอัดรูปให้มีขนาดเล็กลงโดยไม่สูญเสียความคมชัด ซึ่งก็ทำได้ดีมากจริงๆ ลดภาระในอนาคตได้เป็นอย่างมหาศาลเลย ช่วยในเรื่องของ Load Speed เกี่ยวไปถึง SEO ด้วย

ปลั๊กอินตัวนี้ต้องการใช้ Required: PHP extensions GD หรือ Imagick

PHP Graphic Library หรือ GD “GRAPHIC DRAW” คือ เป็น Extension ของ PHP ซึ่งไลบรารี กราฟิกนี้ ใช้สำหรับการจัดการ รูปภาพ แบบไดนามิก มันสามารถสร้าง GIF , JPEG , PNG และ WBMP ได้ ถ้านึกภาพไม่ออกให้นึกถึงรหัสยากๆใน Captcha นั่นแหละมันถูกสร้างโดยใช้ Library GD

Imagick คือ Extension สำหรับ PHP ที่จะใช้สำหรับทำงานเกี่ยวกับรูปภาพและวิดีโอ อาจรวมถึง vector ต่างๆและเอกสาร PDF อีกด้วย โดยมันจะทำงานอยู่บนซอฟต์แวร์ที่ชื่อ ImageMagick อีกทีหนึ่ง

ปลั๊กอิน CodingBunny Image Optimizer ต้องการให้เราเปิดใช้งานฟังก์ชั่นของ libraries GD หรือ Imagick ไม่ต้องห่วงไปครับ เวลาติดตั้งปลั๊กอินเสร็จมันจะมีสถานะเช็คให้เราว่า Host ของเราเปิดฟังก์ชั่นนี้อยู่ไหม ถ้าเปิดอยู่บนสุดของปลั๊กอินจะมีจุดสีเขียวๆบอกว่า เราได้เปิดใช้งานเรียบร้อยแล้วก่อนหน้านี้ จะขึ้นว่า * Your site is using the libraries GD e Imagick

แต่ถ้าหากยังไม่ได้เปิดใช้งานบาง Hosting เราสามารถเปิดเองได้ บาง Host ต้องให้ผู้ให้บริการเปิดให้เรา แค่ทักไปบอก Suppot เขาก็จะเปิดให้เราครับ

Features Required

• Plugin Version: 1.0.0
• Last updated: 18 oct 2024
• WordPress version: 6.0 or higher
• Tested up to: 6.6.2
• PHP version: 8.0 or higher
• Tested up to: 8.3.12
• Languages: English, Italian
• Required: PHP extensions GD or Imagick

Image Optimizer Free vs Pro

มาถึงฟิวเจอร์ของ CodingBunny Image Optimizer เวอร์ชั่น Free กับ Pro ต่างกันอย่างไร สามารถดูได้จากตารางด้านล่างนี้นะครับ

1. Free – ไม่มี Support + แปลงได้แต่ WebP ไม่ได้ AVIF + เลือกขนาดให้ WordPress ไม่ได้ ปกติเว็บเราเวลาอัพรูปมันจะสร้างหลายขนาดไว้ทำให้เว็บเราบวมรูปเรื่อยๆ
2. Business – รองรับทุกอย่าง แต่ Support แค่ 1 ปี
3. Agency – Lifetime จะได้แบบ อัพเดท+ support + ถามได้ตลอดชาตินี้
   ช่วงนี้มี Pro ลดให้อีก 20% ใช้โค้ด HALLOWEEN20 หากหมดโปรลองทักไปหาเขาได้ที่ Support Forms

วิธีการตั้งค่า CodingBunny Image Optimizer Pro

ปลั๊กอินมีแค่ 2 เมนูด้านซ้ายมือของ Admin Panel นะครับ ใช้งานค่อนข้างง่าย อ่านตามภาษาอังกฤษได้เลย หรือดูตามรูปด้านล่างก็ได้ครับ

วิธีการดาวน์โหลด + อัพเดท + ติดตั้ง

ขอเขียนเป็นข้อๆนะครับ อ่านง่าย เข้าใจง่ายดีกว่าเขียนเป็นย่อหน้า เพื่อความเข้าใจครับ

• เวอร์ชั่น Free กับ Pro คือไฟล์เดียวกัน สามารถโหลดได้ที่หน้าเว็บของปลั๊กอิน ตรงตารางเปรียบเทียบ Compare Plans & Features จะเห็นว่ามีปุ่ม Download กับ Buy Now
• เวลาซื้อปลั๊กอินเสร็จแล้วก็มาโหลดหน้านี้แหละ เขายังไม่มีระบบ Account Login ให้เราไปโหลดตัว Pro มาติดตั้ง ใช้วิธีการ Activate License Key เพื่อปลดล็อกฟังก์ชั่นในไฟล์ติดตั้งตัว Free ได้เลยทันที (ก็ง่ายสะดวกดี) ปลั๊กอินทั่วไปที่ขายจะต้องสร้าง 2 ตัว คือ Free กับ Pro ติดตั้ง 2 ตัวถึงจะใช้งานได้
• การอัพเดท มันจะแจ้งว่ามีเวอร์ชั่นใหม่มาในหน้าที่เราติดตั้งปลั๊กอินแล้ว วิธีก็คือให้เราไปโหลดมาทับอักรอบ ยังไม่สามารถอัพเดทผ่าน WordPress.org ได้ในตอนนี้นะครับ

เปรียบเทียบการบีบอัดรูปกับขนาดปกติ

สรุปการใช้งาน CodingBunny Image Optimizer

จากการติดตั้งและใช้งานดูนั้นขนาดรูปลดลงไปได้มากจริงๆ ช่วยลดภาระความจุของ Host ได้ ช่วยเพิ่ม Speed เว็บได้เป็นอย่างดี และช่วยลดเงินที่ต้องไปซื้อปลั๊กอิน Image Optimizer ที่ต้องจ่ายรายเดือน

• ปลั๊กอินติดตั้งง่ายไม่ซับซ้อน + ใช้งานง่าย + ไม่จำกัดเว็บ
• เหมาะสำหรับเว็บที่มีรูปเยอะ บทความภาพประกอบเยอะ
• เป็นปลั๊กอินสามัญประจำเว็บได้เลย เหมาะกับเว็บที่กำลังขึ้นใหม่ หรือเว็บที่กำลังจะคิดว่าต้องเริ่ม Image Optimizer
• รูปที่อัพโหลดขึ้นเว็บสจะถูกแปลงเป็นไฟล์ WebP หรือ AVIF ทันที ไม่มีรูปต้นฉบับให้หนักเว็บ ป้องกันคนเอารูป PNG, JPG ไปใช้งานได้อีกทาง
• ลดรูปให้ผมจาก JPG 1920×1920 px ไฟล์ 406 KB เป็น WebP 1000×1000 px ไฟล์ 93.7 KB
• ไม่ต้องเสียงินซื้อปลั๊กอิน Image Optimizer รายปีต่อไป
• ยังไม่มี CDN หากลูกค้าอยู่ต่างประเทศจะช่วยติดปีกให้อีกต่อ แต่แค่บีบให้เล็กลงได้แค่นี้ถือว่าเร็วขึ้นดีกว่าไม่ได้ติดตั้งเลย
• ปลั๊กอิน Image Optimizer เจ้าอื่นจะมาพร้อมกับ CDN + Image Optimizer ย้อนหลังให้ทุกรูปในเว็บ