สำหรับใครที่ต้องการปรับสปีดเว็บไซต์ให้เร็ว ในยุคปะจจุบันคงต้องหันไปใช้ไฟล์รูป .WebP ที่ทาง Google พัฒนาขึ้นมาใหม่เพื่อใช้กับการแสดงผลบนเว็บไซต์ ที่ทำให้การโหลดหน้าเว็บเร็วขึ้น เนื่องจาก File Format ไฟล์นามสกุล .WebP นั้นมีขนาดไฟล์ที่เล็กลง ให้ความคมชัดเช่นเดียวกับ JPG, PNG ที่เราใช้กันอยู่ ถ้าเว็บเราเปิดมานานก็อาจจะแก้ลำบากหน่อย ต้องหันไปใช้ตัวช่ว CDN ในการแปลงไฟล์ทั้งเว็บ แต่ก็แลกด้วยค่าใช้จ่ายรายเดือนที่ต้องเสียไป แต่ถ้าวันนี้เราเพิ่งจะสร้างเว็บอัพรูป เป็นเรื่องง่ายที่เราจะตั้งไข่ ตั้งต้นให้ถูกทางโดยการแปลงรูป JPG, PNG ที่ใช้ในเว็บให้เป็น .WebP ซะทั้งหมด ประหยัดเงินไปได้เยอะ แค่เสียเวลานิดหน่อย
ในบทความที่แล้วได้เขียนรวบรวม Optimize WordPress Images ไม่ใช้ Plugin? ในบทความนี้จะแนะนำการติดตั้งปลั๊กอินที่ชื่อ WebPShop ให้กับ Photoshop เพื่อที่จะรองรับไฟล์ .WebP และสามารถ Save as เป็นไฟล์นามสกุล WebP ได้ เพราะว่า Photoshop ทุกเวอร์ชั่นรวมทั้งล่าสุด Photoshop CC 2022 ก็ยังไม่รองรับการเซฟเป็นไฟล์ WebP ทำให้เราต้องเอาไฟล์ปลั๊กอินไปวางใน Folder Plugin ของ Photoshop
ดาวน์โหลดไฟล์ปลั๊กอิน
เป็นไฟล์ฟรีสามารถดาวน์โหลดได้ที่ WebPShop 0.4.0 หรือโหลดจากหน้าเว็บ Adobe Download plug-in for Photoshop 23.1 and below
Source code (zip)
Source code (tar.gz)
WebPShop.8bi <<—— โหลดตัวนี้
วิธีการติดตั้ง
คือ ก๊อปปี้ไฟล์ plug-in ไปวางในโฟล์เดอร์ของ Photoshop plug-in
- C:\Program Files\Adobe\Adobe Photoshop 2022\Plug-ins\ สำหรับ Windows
- Applications/Adobe Photoshop/Plug-ins/ สำหรับเครื่อง Mac
เมื่อวางไฟล์เสร็จแล้วเปิด Terminal ขึ้นมาแล้ว Run คำสั่ง
xattr -r -d com.apple.quarantine /Applications/Adobe\ Photoshop\ 2020/Plug-ins/WebPShop.plugin
เพื่อให้เครื่อง Mac ไม่บล็อคไฟล์นามสกุลลนี้
เสร็จแล้วเปิดโปรแกรม Photoshop ขึ้นมาได้เลย จะเห็น file Type เป็น WebP แล้วครับ
เปิดไฟล์รูปขึ้นมาใน Photoshop เมื่อตกแต่งเสร็จแล้ว File >> Save as >> เลื่อก Type เป็น WebP แล้วกด Save ได้เลยครับ
จากการทดสอบ
ขนาดรูปต้นฉบับ 1,008 KB —- 0.98 MB
ถ้าตั้ง Quality 50% จะได้ขนาดไฟล์ 846 KB —- 0.846 MB
ถ้าตั้ง Quality 75% จะได้ขนาดไฟล์ 1,181 KB —-
1.18 MB
ถ้าตั้ง Quality 100% จะได้ขนาดไฟล์ 8,377 KB —- 8.3 MB
Photoshop 2022 v.23 รองรับไฟล์ .WebP แล้ววว!
อัพเดทนะครับ Adobe Photoshop 2022 v.23.2.1 ที่ผมติดตั้งล่าสุด รองรับการ Save as WebP แล้วนะครับ ถ้าใครติดตั้งหลังจากนี้ก็ไม่ต้องไปหาปลั๊กอินเสริมแล้วนะครับ