WebP คือ Format รูปภาพที่พัฒนาโดย Google เปิดตัวมาตั้งแต่ปี 2553 มีเป้าหมายหลักเพื่อมาแทนที่ Format รูปภาพ JPEG, PNG, และ GIF เพื่อให้การแสดงผลรูปภาพบนเว็บไซต์ทำได้เร็วขึ้น ทำให้เว็บไซต์โหลดเร็วขึ้น ประหยัดปริมาณการรับส่งข้อมูล (Bandwidth) และมอบประสบการณ์ที่ดีให้กับผู้ใช้งาน

หลักการของ WebP คือการบีบอัดไฟล์ สามารถทำให้ไฟล์รูปภาพมีขนาดเล็กลงเมื่อเทียบกับ Format เดิม ในขณะที่ยังคงคุณภาพของรูปไว้ในระดับที่ใกล้เคียงกัน

รูปแบบการบับอัดไฟล์ของ WebP มี 2 รูปแบบ ดังนี้

1. Lossy Compression (การบีบอัดแบบสูญเสียคุณภาพ):
   เหมาะสำหรับ: รูปภาพทั่วไป รูปถ่าย คล้ายกับ JPEG
   หลักการทำงาน: ใช้วิธีการทำนายพิกเซล (predictive coding) จากบล็อกพิกเซลข้างเคียง แล้วเก็บเฉพาะส่วนต่าง ทำให้ข้อมูลที่ต้องเก็บน้อยลง ทำให้ไฟล์มีขนาดเล็กกว่า JPEG ได้ถึง 25-34% โดยที่สายตามนุษย์แยกความแตกต่างไม่ออก
   
2. Lossless Compression (การบีบอัดแบบไม่สูญเสียคุณภาพ):
   เหมาะสำหรับ: รูปภาพที่มีพื้นหลังโปร่งใส (Transparency), ไอคอน, โลโก้ คล้ายกับ PNG
   หลักการทำงาน: ใช้วิธีการค้นหาและสร้าง “จานสี” (color palette) ในส่วนต่างๆ ของภาพ แล้วแทนที่ค่าสีพิกเซลด้วย index จากจานสีนั้น ทำให้ไฟล์มีขนาดเล็กกว่า PNG ได้ถึง 26% โดยที่ยังคงคุณภาพและความคมชัดไว้ 100%

การสร้างไฟล์ WebP มีหลายวิธี ดังนี้

• ใช้ผ่านเว็บที่แปลงไฟล์ออนไลน์ โดยค้นหาผ่าน Search engine “Convert JPEG to WebP”
• ใช้โปรแกรมแต่งรูปยอดนิยม เช่น Adobe Photoshop (plug-in), Affinity Photo สามารถเซฟไฟล์เป็น .webp ได้โดยตรง
• ใช้เครื่องมือสำหรับนักพัฒนา โดยใช้ Command line ของ Google หรือ Library ในภาษาโปรแกรม เพื่อแปลงไฟล์

การแปลงไฟล์สำหรับนักพัฒนาเว็บแอปพลิเคชัน

ในการทำงานเราจำเป็นต้องแปลงไฟล์ภาพหลายภาพ หรือทั้งโปรเจ็ก เครื่องมือที่ช่วยให้เราทำงานได้สะดวก คือ การใช้งานผ่านเครื่องมือสำหรับนักพัฒนา ใช้ Library หรือ Command line tool ของ Google

สามารถดาวน์โหลด ได้ที่ WebP Downloads

• สำหรับระบบปฏิบัติการ Windows สามารถดาวน์โหลดไฟล์ libwebp เวอร์ชันล่าสุดที่ลงท้ายด้วย -windows-x64.zip (สำหรับ Windows 64-bit)

เมื่อดาวน์โหลดไฟล์แล้วให้แตกไฟล์ .zip จากนั้นไปที่ Folder “bin”

ทาง Google มี Library ให้เราเลือกใช้หลายหลายรูปแบบในการแปลงไฟล์

สำหรับการแปลงไฟล์ภาพนิ่ง (.jpg, /jpeg) ไฟล์ภาพโปร่งใส (.png) ไปเป็นไฟล์ .webp จะใช้โปรแกรม cwebp.exe

ส่วนการแปลงไฟล์ .webp กลับไปเป็นไฟล์ภาพ .jpg หรือ .png สามารถใช้โปรแกรม dwebp.exe

วิธีการใช้งาน

1. คัดลอกไฟล์ cwebp จาก /bin ที่ดาวน์โหลดมา ไปยัง Folder ภาพที่เราต้องการแปลงไฟล์

2. เปิดโปรแกรม Command Prompt เข้าถึง Path Folder ภาพที่ต้องการแปลง

3. รันคำสั่งเพื่อแปลงไฟล์ภาพ

cwebp -q 80 photo-1005-full.jpeg -o photo-1005-full-lossy.webp

ค่า default ของการใช้คำสั่งแปลงไฟล์เป็น webp จะเป็นการแปลงไฟล์แบบ Lossy สูญเสียคุณภาพภาพ จะได้ขนาดไฟล์ที่เล็ก

คำอธิบาย

• cwebp: คือคำสั่งเรียกใช้โปรแกรมแปลงไฟล์
• -q 80: เป็น Option สำหรับตั้งค่า Quality (คุณภาพ) ที่ 80% (ตัวเลข 75-85 เป็นค่าที่นิยม เพราะขนาดเล็กลงมากแต่คุณภาพยังดีเยี่ยม)
• photo-1005-full.jpeg: ชื่อไฟล์ต้นฉบับ
• -o: คือ Option สำหรับระบุไฟล์ปลายทาง (Output)
• photo-1005-full-lossy.webp: ชื่อไฟล์ปลายทาง

ตัวเลือก (Options) เพิ่มเติม

cwebp -q 80 -m 6 photo-1005-full.jpeg -o photo-1005-full-lossy.webp

• -m 6 : กำหนดระดับการบีบอัด (0-6) ยิ่งค่าสูง ยิ่งใช้เวลาแปลงนานขึ้น แต่ขนาดไฟล์จะเล็กลง (กรณีที่ไม่ระบุค่า -m ตามคำสั่ง default จะเป็นการบีบอัดด้วยค่า -m 4)

cwebp -lossless -q 80 photo-1005-full.jpeg -o photo-1005-full-lossless.webp

• -lossless : แปลงไฟล์เป็น WebP แบบ Lossless คุณภาพไม่ลดลง ในบางครั้งอาจจะได้ไฟล์ภาพที่มีขนาดใหญ่กว่าไฟล์ต้นฉบับ (เหมาะสำหรับเว็บ Gallery หรืองาน Graphics ที่ต้องการแสดงผลภาพคุณภาพสูง)

cwebp -q 80 -resize 800 0 photo-1005-full.jpeg -o photo-1005-full-lossy-800px.webp

• -resize 800 0: แปลงไฟล์และปรับขนาดภาพให้กว้าง 800px โดยที่ความสูงจะปรับอัตโนมัติ

สำหรับนักพัฒนาระบบ ต้องแปลงไฟล์ภาพหลายภาพ หรือทั้ง Folder สามารถทำได้โดยใช้คำสั่งวน Loop เพื่อแปลงไฟล์ทั้งหมดทีเดียว

# สำหรับ Windows ใช้งานผ่าน Command Prompt
for %f in (*.jpeg *.png) do cwebp -q 80 "%f" -o "%~nf.webp"

# สำหรับ macOS และ Linux (ใช้ Bash/Zsh)
for file in *.jpeg *.png; do
  cwebp -q 80 "$file" -o "webp_images/$(basename "$file" .jpeg | basename -s .png).webp"
done

คำอธิบาย

• for %f in (*.jpeg *.png) do … : คือ Loop สำหรับไฟล์ใน Command Prompt
• %f: คือตัวแปรที่เก็บชื่อไฟล์ปัจจุบัน
• %~nf: คือการดึงเอาเฉพาะ “ชื่อไฟล์” (ไม่รวมนามสกุล) ออกมาจากตัวแปร %f

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

การใช้งานบนเว็บ สามารถใช้งานผ่าน tag <img> เหมือนไฟล์ภาพทั่วไป

<img src="photo-1005-full.webp" alt="SWU">

การเปิดอ่านไฟล์ภาพ เปิดผ่านเว็บเบราว์เซอร์ (Chrome, Firefox, Edge, Safari, etc.)

สำหรับการแปลงไฟล์จาก webp เป็นไฟล์ภาพทั่วไป ใช้โปรแกรม dwebp.exe และรันคำสั่ง

dwebp photo-1005-full.webp -o photo-1005-full.png

Note: การใช้ dwebp สามารถแปลงไฟล์กลับเป็นรูปแบบ ดังนี้ PNG, PAM, PPM หรือ PGM ส่วนไฟล์ภาพเครื่องไหว (Animated) ไม่สามารถแปลงได้

ประโยชน์ของไฟล์ webp ช่วยให้เว็บแอปพลิเคชันและเว็บไซต์โหลดเร็วขึ้นและช่วยประหยัดค่าใช้จ่ายด้านการจัดเก็บข้อมูลด้วย เพื่อน ๆ นักพัฒนา ลองใช้งานกันดูนะคะ 🙂

อ้างอิง: WebP