จุดเริ่มต้นของการ Optimize คอนเทนต์ในเว็บไซต์เริ่มมาจากการที่เราเห็นถึงปัญหาที่จะเกิดขึ้นในอนาคต เช่น ถ้าหากเรามีคอนเทนต์เป็นร้อยๆ ที่อยู่ในเว็บไซต์ นั่นหมายถึงการที่ผู้ใช้จะต้องโหลดข้อมูลนับร้อยๆ แล้วขนาดก็ไม่ใช่เล่นๆ แม้จะทำ Caches แล้วก็ตาม แต่ก็ไม่ได้ช่วยในเรื่องของขนาดข้อมูลได้เลย เพราะงั้น หนทางที่ดีที่สุด แถมช่วยในเรื่อง SEO ด้วยก็คือการเปลี่ยน format รูปภาพต่างๆ จาก png หรือ jpeg เป็น webp นั่นเอง
WebP คืออะไร
WebP เป็น image format หรือรูปแบบรูปภาพชนิดหนึ่งที่พัฒนาโดย Google คล้ายกับ PNG หรือ JPEG แต่จะเหมาะสำหรับการใช้งานในเว็บไซต์แทน Web Browser ปัจจุบันแทบทุกตัวรองรับ และจะเป็นมาตรฐานใหม่ของไฟล์ media ที่จะนำมาใช้บนเว็บไซต์ ปัจจุบันมีหลายๆ เว็บไซต์ยอมรับและใช้งาน WebP กันอย่างแพร่หลาย
ที่บอกว่าเหมาะกับการใช้งานบนเว็บไซต์ก็เพราะว่าเนื้อหา Media ประเภทรูปภาพหรือวิดีโอเป็นเนื้อหาที่มีขนาดใหญ่ หากมีบนเว็บไซต์จำนวนมากๆ ก็จะมีการ load ของเนื้อหาที่มาก ซึ่งนั่นก็หมายความว่าผู้ใช้จะต้องเก็บทรัพยากรของเว็บไซต์เยอะขึ้น และเซิร์ฟเวอร์ก็จะต้องส่งเนื้อหาเยอะขึ้น ซึ่งอาจจะเสียค่าใช้จ่ายมากขึ้นด้วย
แต่ถ้าเราหันมาใช้ WebP ละก็มันไม่ได้มีดีแค่ทำให้เว็บไซต์ของเราโหลดรูปภาพเร็วขึ้น และขนาดของรูปภาพน้อยลงเท่านั้น แต่ยังช่วยให้ SEO ดีขึ้นอีกด้วย (เพราะมันชอบเว็บไซต์ที่โหลดเนื้อหาเร็วนั่นเอง)
วิธีแปลงจากไฟล์รูปภาพต่างๆ เป็น WebP
เราจะใช้ Cwebp ในการแปลงกัน ซึ่งการแปลงนั้นเราจะเรียกมันว่าการบีบอัดไฟล์ หรือก็คือการทำให้ไฟล์มีขนาดเล็กลงด้วยการบีบอัด ซึ่งตัวนี้รองรับไฟล์ได้ทั้ง PNG, JPEG, TIFF หรือจะเป็น WebP เองก็ได้ (ในกรณีที่ต้องการปรับ Quality ของภาพเพิ่มเติม)
ติดตั้ง Cwebp
ก่อนอื่นใครที่ใช้ Windows ก็ต้องโหลด cwebp มันมาก่อน ซึ่งสามารถโหลดได้ที่นี่ ➜ Index of downloads.webmproject.org/releases/webp
เมื่อโหลดมาแล้ว เราจะเห็นไฟล์และโฟลเดอร์ต่างๆ ไม่ต้องสนใจอะไรมาก แค่เห็นโฟลเดอร์ที่ชื่อว่า bin ก็ถือว่าเรียบร้อย เราสามารถย้ายไปวางไว้ตรงไหนก็ได้ ของผมจะเอาไปไว้ที่ไดรฟ์ C:\ เลยง่ายดี
และจากนั้นก็ทำการคัดลอก Path หรือที่อยู่ของโฟลเดอร์ bin ไว้ เช่น C:\cwebp\bin แล้วกดปุ่ม Windows + S (หรือกดปุ่มค้นหาของ Windows) แล้วพิมพ์ว่า env จะเห็น Edit the system environment variables คลิกเข้าไป แล้วก็คลิกไปที่ Environment Variables ด้านล่างสุด เราจะเห็น System variables ให้เลื่อนหา Path เมื่อเจอแล้วคลิกสองทีจะเด้งขึ้นมาอีกหน้า กด New ด้านขวา จากนั้นวางที่เราได้ Copy ไว้ เสร็จแล้วก็กด OK จนหน้าต่างทั้งหมดหายไป แค่นี้ก็เป็นอันเสร็จสิ้น
ส่วนสำหรับ Linux ให้เปิด Terminal เราจะใช้คำสั่งนี้
sudo apt-get update
sudo apt-get install webp
สำหรับ MacOS เปิด Terminal ใช้คำสั่งนี้
brew install webp
ใช้งาน Cwebp
เวลาจะใช้งานก็เปิด Terminal หรือ CMD แล้วก็พิมพ์คำสั่ง cd ไปที่ path ที่มีรูปภาพ เช่น C:\images\ (ใน Windows) หรือ /home/{username}/images/ (ใน Linux หรือ MacOS) ในนั้นมี image.png อยู่ เราก็จะใช้คำสั่งตามนี้ได้เลย
cwebp image.png -o image.webp
อันนี้จะแปลงไปเลยให้เป็นไฟล์ WebP แต่ถ้าเราอยากปรับคุณภาพของภาพเองก็สามารถกำหนดได้ดังนี้
cwebp -q 50 image.png -o image.webp
อย่างนี้คือการปรับ quality ของภาพให้เป็น 50 ซึ่งค่าที่ปรับได้จะมีตั้งแต่ 0 ถึง 100 หากเป็น 0 คือต่ำสุด ภาพแตกเห็นไม่ชัดไปเลย แต่จะได้ขนาดที่เล็กสุดๆ ไปเลยเช่นกัน แต่ถ้าเป็น 100 อันนี้จะคุณภาพสูงสุด ภาพจะชัดแทบไม่ต่างกับต้นฉบับ แต่ก็จะได้ขนาดที่เล็กลงเพียงเล็กน้อยเท่านั้น เพราะฉะนั้นแล้วถ้าต้องการแบบไหนก็ลองเลือกดูได้เลย
นอกจากนี้ยังสามารถปรับเป็น lossless ได้ด้วย ซึ่งหมายถึงการปรับให้ไม่สูญเสียข้อมูลเลย รูปภาพจะไม่ต่างกับต้นฉบับ แค่ถูกแปลงเป็นไฟล์ .webp เท่านั้น อันนี้คือกรณีที่ไม่อยากให้เสียคุณภาพของรูปภาพเลย แต่ขนาดก็จะลดไปน้อยมากๆ แบบแทบไม่ต่างกับขนาดไฟล์ต้นฉบับก่อนที่จะถูกแปลงเลย
cwebp -lossless image.png -o image.webp
ข้อดีของไฟล์ webp นอกจากขนาดจะเล็กลงแล้ว ยังรองรับ animated หรือรูปภาพเคลื่อนไหวแบบ GIF ได้ด้วย (แต่ต้องใช้คำสั่งแยก) และรองรับพื้นหลังโปร่งใสได้ด้วย ในขณะที่ JPEG ไม่รองรับ
สามารถศึกษารายละเอียดเพิ่มเติมนอกจากนี้ได้ที่ ➜ Getting Started | WebP | Google for Developers
