ตั้งค่าปลั๊กอิน WebP Express สำหรับใช้ภาพ WebP บนเวิร์ดเพรส

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

ในปัจจุบันเบราเซอร์หลักๆ ต่างรองรับ WebP กันหมดแล้วทั้ง Chrome, Opera, Firefox, หรือแม้แต่ Microsoft Edge เหลือเพียงแค่ Safari ที่ใช้งานบนแมคและ iOS เท่านั้นที่ยังไม่รองรับ

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

ใช้ WebP ใน WordPress ด้วย WebP Express

แม้เบราเซอร์จำนวนมากจะรองรับ WebP แล้ว แต่ในความเป็นจริงมันก็ยังไม่ใช่มาตรฐานไฟล์ภาพ และ WordPress เองก็ยังไม่ได้รองรับไฟล์ WebP ในตัว (ถ้าอัปโหลดไฟล์ WebP เข้าไป Media Library ของ WordPress จะมองว่าเป็นแค่ไฟล์ธรรมดาไฟล์หนึ่งเท่านั้น ไม่ใช่ไฟล์ภาพ) นั่นหมายความว่าเรายังไม่สามารถใช้ไฟล์ WebP ใน WordPress ได้ด้วยตัวมันเอง

ทางออกของเราคือใช้ปลั๊กอินเพื่อเปิดใช้ไฟล์ WebP แทน โดยปลั๊กอินที่เราจะเอามาเสนอกันในวันนี้คือปลั๊กอิน WebP Express (ฟรี!)

หลักการทำงานของ WebP Express คือเมื่อเราอัปโหลดไฟล์ภาพเข้ามา ปลั๊กอินจะเชื่อมต่อไปยังเซอร์วิสสำหรับแปลงไฟล์ และแปลงไฟล์ภาพเป็น WebP ให้อัตโนมัติ โดย WebP จะรองรับการแปลงไฟล์ผ่านเซอร์วิสหลายๆ ตัว (ถ้าตัวไหนไม่รองรับ ก็ใช้ตัวอื่นแทนได้) เช่น

• ผ่าน GD Library, ImageMagick, หรือ GraphicMagick
• ผ่าน cwebp
• ผ่าน vips
• ผ่าน API ของ EWWW (เราจะใช้วิธีนี้กัน)
• ผ่าน WebService ที่เราติดตั้งเอง

เมื่อแปลงไฟล์เสร็จแล้วก็จะเอามาแสดงบนหน้าเว็บด้วยวิธีต่างๆ เช่นการ rewrite url หรือการแก้ไขโค้ด html อัตโนมัติ

ตั้งค่า WebP Express

หลังจากติดตั้งปลั๊กอินและเปิดใช้งานเรียบร้อยแล้ว ให้เข้าไปที่หน้าตั้งค่าของ WebP Express ที่ Settings > WebP Express ในขั้นแรกให้เราดูที่ Operation mode ที่จะมีตัวเลือกคือ

• Varied image responses
  เป็นโหมดธรรมดาที่สุด ปลั๊กอินจะเลือกไฟล์ภาพขึ้นมาตามที่เบราเซอร์รองรับโดยจะตรวจสอบเบราเซอร์ด้วยไฟล์ htaccess
• CDN friendly
  โหมดสำหรับใช้คู่กับ CDN โดยปกติเนื้อหาบน CDN จะถูกแคชไว้ ทำให้ปลั๊กอินไม่สามารถตรวจสอบเบราเซอร์ได้ โหมดนี้ต้องใช้คู่กับ Alter HTML เพื่อเปลี่ยนแท็ก <img> เป็น <picture> ที่รองรับ <source>
• No conversion
  ใช้ในกรณีที่เรามีปลั๊กอินอื่นสำหรับแปลงรูปอยู่แล้ว และใช้ WebP Express สำหรับแสดงรูปเท่านั้น
• Tweaked
  แสดงตัวเลือกทั้งหมด

โดยปกติแล้วจะแนะนำให้ตั้งค่าไว้ที่ CDN Friendly เพราะจะไม่มีปัญหากับระบบ CDN รวมถึงระบบแคชภายในเว็บด้วย แต่เราจำเป็นต้องไปตั้งค่าส่วนของ Alter HTML ต่อเพื่อให้ปลั๊กอินสามารถทำงานได้อย่างถูกต้อง

ใน Operation mode นี้จะมีตัวเลือก Image types to convert ให้เราเลือกว่าจะแปลงเฉพาะไฟล์ JPEG, เฉพาะ PNG, ทั้งสองอย่าง, หรือไม่แปลงเลย และตัวเลือก Destination folder ว่าต้องการให้เก็บไฟล์ที่แปลงแล้วลงโฟลเดอร์เดียวกันกับภาพ หรือจะเป็นโฟลเดอร์แยก

และอีกตัวเลือกหนึ่งคือ .htaccess rules for webp generation ที่จะช่วยให้เราสามารถสั่งแปลงไฟล์ WebP แบบ on-the-fly ได้ (เช่นในบทความเก่าที่ยังไม่เคยแปลงไฟล์ เมื่อมีการเรียกใช้ ปลั๊กอินจะแปลงให้อัตโนมัติ)

จากนั้นให้ไถลงไปดูส่วน Alter HTML ก่อน (เดี๋ยวเรากลับมาดู Conversion ทีหลัง) การที่เราจะใช้ Operation mode เป็น CDN Friendly เราจำเป็นจะต้องใช้คู่กับการ Alter HTML ด้วย

ใน WebP Express จะมีวิธีแสดงผลไฟล์ WebP อยู่สามแบบดังนี้คือ

1. ใช้ไฟล์ htaccess ตรวจสอบว่าผู้ใช้ใช้เบราเซอร์ที่รองรับหรือไม่ ถ้าใช่จะ rewrite url ไฟล์ภาพ ให้ไปหาไฟล์ WebP แทน
2. แก้ไข HTML โดยใช้ PHP ตรวจสอบว่าผู้ใช้ใช้เบราเซอร์ที่รองรับหรือไม่ ถ้าใช่จะ replace url ไฟล์ภาพด้วย url ของไฟล์ WebP
3. แทนที่แท็ก <img> ด้วยแท็ก <picture> แทน ซึ่งจะทำให้เราสามารถใส่ไฟล์ภาพได้หลายอันผ่านแท็ก <source> และใช้ <img> เป็น fallback ในกรณีเบราเซอร์ไม่รองรับได้

ซึ่งในกรณีนี้เราจะใช้รูปแบบที่ 3 เพราะสามารถทำงานกับระบบแคชและ CDN ได้อย่างสมบูรณ์ (ปกติแล้วเว็บเราจะเช็ค user agent ของผู้ใช้ได้เมื่อผู้ใช้โหลดเนื้อหาใหม่โดยตรงเท่านั้น เนื้อหาที่แคชไว้แล้ว หรือติดอยู่ที่ CDN จะไม่สามารถตรวจสอบเบราเซอร์ผู้ใช้ได้ด้วยวิธีง่ายๆ)

ในส่วนของ Alter HTML นี้ ให้ติ๊กเปิดใช้งาน Alter HTML เลือก What to replace เป็น Replace <img> tags with <picture> tags, adding the webp to srcset.

สำหรับตัวเลือก Where to replace นั้นจะเป็นการเลือกว่าจะ replace เนื้อหาส่วนไหนบ้าง ถ้าเราเลือก Use the filtering hooks จะเป็นการ replace เฉพาะในเนื้อหาโพสต์เท่านั้น หรือถ้าเลือก The complete page จะเป็นการ replace แท็ก <img> ทั้งหมดภายในหน้าเว็บ

ในกรณีที่ธีมเรามีการใช้แท็ก <img> เยอะๆ ผมแนะนำให้ลองเริ่มจาก The complete page ก่อน เพื่อให้ภาพทั้งหมดในเว็บโหลดไฟล์ WebP แทน ถ้าเจอปัญหาค่อยเปลี่ยนมาให้ replace เฉพาะเนื้อหาด้วย Use the filtering hooks

ตั้งค่าการแปลงไฟล์ WebP

ในส่วนของ Conversion นั้นจะเป็นการตั้งค่าเกี่ยวกับคุณภาพของไฟล์ภาพ โดยตรงที่เราจะมาดูกันจริงๆ จะอยู่ที่ Convertsion method ซึ่ง WebP Express ได้เตรียมเอาไว้ให้หลายตัวเลือกมากๆ และส่วนใหญ่น่าจะขึ้นเครื่องหมาย 🚫 อยู่ ซึ่งหมายความว่าไม่สามารถใช้วิธีนี้ได้ (เท่าที่ผมเจอมา ตัวเลือก GD Extension มักจะขึ้นเขียวว่าใช้ได้ แต่พอใช้จริงกลับไม่ได้ซะงั้น)

จริงๆ แนะนำว่ามีตัวเลือกไหนมีไฟเขียวขึ้นมา ให้ลองเลือกใช้ดูก่อนว่าใช้ได้หรือไม่ แต่ถ้าไม่เหลืออันไหนใช้ได้เลย ถึงจุดนี้เราต้องกำเงิน 30 บาทหน่อยๆ ไปซื้อ API ของ EWWW มาเพื่อใช้งาน EWWW Cloud Converter กันเป็นทางออกสุดท้าย

เมื่อมีเงิน 30 กว่าบาท พร้อมกับบัตรเครดิต/เดบิตสักใบแล้ว ให้ไปที่เว็บไซต์ของ EWWW แล้วเลือกซื้อแพ็คเกจ Compression API ในแบบ Pay-as-you-go subscription

ราคาค่าสมัครแพลน Pay-as-you-go นั้นคือ $0.99 หรือประมาณ 30 บาทหน่อยๆ เราจะได้เครดิตสำหรับแปลงไฟล์ฟรีมาจำนวนหนึ่ง และ EWWW จะเริ่มเก็บเงินเราเมื่อเราใช้เครดิตถึง 3000 เครดิต ที่ราคาภาพละ $0.003 (1 เครดิต = 1 ภาพ ก็ไม่แน่ใจว่า EWWW เค้าจะเรียกแยกกันทำไม)

แต่เดี๋ยวก่อน! เครดิตที่ว่านั้นจะคิดต่อเมื่อเราแปลงไฟล์ออกมาเป็น JPEG หรือ PNG เท่านั้น ถ้าเราแปลงไฟล์ออกมาเป็น WebP เราจะสามารถแปลงได้ฟรีโดยไม่เสียเครดิตใดๆ!

หลายคนน่าจะทราบว่า EWWW.io นั้นเป็นบริการบีบอัดภาพ (smush) ด้วย ซึ่งเครดิตตรงนี้จะนับเมื่อเราทำการแปลงภาพ (บีบอัดภาพ) ประเภท JPEG, PNG, GIF หรือภาพใดๆ ผ่านระบบของ EWWW แต่ถ้าเราใช้แปลง/บีบอัดไฟล์เป็น WebP จะสามารถใช้ได้ฟรีโดยเสียแค่ค่าสมัคร API ครั้งแรกเท่านั้น

ดังนั้นถ้าใครต้องการฟีเจอร์บีบอัดภาพด้วย แนะนำให้ใช้ปลั๊กอิน reSmush.it Image Optimizer คู่กันไป

เมื่อจ่ายเงินและได้ API Key มาแล้ว (ส่งมาให้ทางอีเมล หรือล็อกอินเข้าเว็บ EWWW ไปดูที่หลังบ้านก็ได้) ให้กลับมาที่หน้าตั้งค่า WebP Express ที่ตัวเลือก Conversion คลิก configure ตรง ewww cloud converter แล้วกรอก API Key ลงไปแล้วกดเซฟ จากนั้นให้ลากเอาตัวเลือก ewww cloud converter ขึ้นมาไว้ข้างบนสุด (WebP Express จะไล่ทำงานจากตัวบนก่อน ถ้าแปลงไม่สำเร็จจะไล่ไปตัวถัดไปเรื่อยๆ)

จากนั้นกด Save settings ที่มุมขวาบน และทำการเคลียร์แคชต่างๆ ให้เรียบร้อย ทั้งแคชบนเว็บไซต์เอง และแคชบน CDN เช่น Cloudflare เท่านี้ก็จะพร้อมใช้งานได้ทันที

จริงๆ JetPack ก็แปลงไฟล์ WebP ได้

ใน JetPack นั้นจะมีฟีเจอร์ Photon CDN ที่จะทำหน้าที่เป็น CDN, ช่วยแปลงไฟล์ภาพ, และปรับขนาดภาพบนเว็บให้เราอัตโนมัติ โดยภาพทั้งหมดจะทำงานบนเซิร์ฟเวอร์ของ Photon และไม่เสียพื้นที่บนโฮสต์ของเราเลย (ยกเว้นภาพต้นฉบับ) แต่การทำงานของ JetPack นั้นจะเป็นการแทนที่ url ไฟล์ภาพเป็น url ของ Photon แทน ซึ่งในบางกรณีอาจจะเจอปัญหาเน็ตช้า หรือ Photon โหลดรูปไม่ได้และไม่แสดงผล หรือในบางครั้ง JetPack ก็ไม่ได้แปลงรูปให้

ดังนั้นถ้าใครเจอปัญหาเหล่านี้ (หรือบางคนอาจจะไม่อยากติดตั้ง JetPack เลย) การติดตั้ง WebP Express ก็เป็นอีกหนึ่งตัวเลือกที่น่าสนใจ