Skip to main content

Askboon

All About WebP

ลืมไฟล์ภาพแบบ JPG,PNG ไปได้เลย แล้วมารู้จักไฟล์ภาพแบบ WebP ที่เป็นรูปแบบของภาพที่จะใช้ในการแสดงผลบนหน้าเว็บในอนาคตกัน

WebP คืออะไร

  • WebP เป็นรูปแบบของภาพรูปแบบใหม่ที่พัฒนาโดยนักพัฒนาที่ Google สำหรับใช้งานบนหน้าเว็บได้มีประสิทธิภาพมากขึ้น
  • WebP ถูกนำเสนอโดย Google มาตั้งแต่ปี 2010 แล้ว แต่ในปัจจุบัน Web Browser รุ่นใหม่ๆเพิ่งจะเริ่มมารองรับรูปแบบนี้กันมากขึ้น แต่ยังไม่เท่า PNG หรือ JPG
  • รูป WebP มีขนาดเล็ก ทำให้โหลดบนหน้าเว็บได้เร็วกว่า และเปลือง bandwidth น้อยกว่า
  • WebP lossess จะมีขนาดเล็กกว่า PNG ประมาณ 26%
  • WebP lossy จะมีขนาดเล็กกว่า JPG ประมาณ 25-34%
  • WebP รองรับการทำ transparent แบบที่อยู่ในภาพ PNG ได้
  • WebP รองรับการทำ animation แบบใน GIF ได้

การแปลงรูปให้เป็น WebP

โปรแกรมสำหรับแปลงรูปในปัจจุบันมีมากมาย ทั้งบน Windows, macOS, Linux หรือออนไลน์ ผมคงแสดงลิสต์ไว้เฉพาะที่ผมเคยใช้ละกันนะครับ แล้วจะทะยอย update โพสต์นี้เรื่อยๆถ้าได้ลองอะไรใหม่ๆ

macOS

WebPonize
ลาก วาง จบ

ขนาดภาพลดลงแค่ไหน?

เว็บ Hongkiat.com ได้ทดสอบแปลงรูปเพื่อดูขนาดของไฟล์ต่างๆ ได้ผลตามตารางด้านล่างนี้ครับ
Lossy (JPG) Lossless (PNG) Animated-GIF
Original 165kb 587kb 6.8mb
Optimized with tools 101kb 278kb
WebP format 70kb 112kb 6.3mb

การใช้ WebP ด้วย HTML

เราสามารถใช้ทั้ง tag img และ picture ในการแสดงภาพ WebP ได้ แต่ tag picture จะเหมาะกว่าเพราะมันสามารถ fallback ให้แสดงรูปในรูปแบบอื่นได้ในกรณีที่เว็บบราวเซอร์ที่ดูเว็บไม่รองรับ WebP

1
<img src="img/myImage.webp" alt="..." />
1
2
3
4
5
<picture>
  <source srcset="img/myImage.webp" type="image/webp">
  <source srcset="img/myImage.jpg" type="image/jpeg"> 
  <img src="img/myImage.jpg" alt="...">
</picture>

Web Browser ที่รองรับ WebP

ณ.วันที่เขียนโพสต์นี้ (6 เมย. 2020) จากข้อมูลที่เว็บ CanIUse.com จะเห็นได้ว่า Browser หลักๆเช่น Chrome, Firefox, Edge, Opera รองรับ WebP หมดแล้ว ยกเว้น Safari 😅

Chrome Extension

สำหรับส่วนขยายของ Chrome สำหรับ WebP ที่ผมชอบมากอันหนึ่งก็คือ WebP Highlighter ซึ่งมันจะช่วยให้เราสามารถเห็นได้ว่าหน้าเว็บไหนที่ใช้ภาพในรูปแบบ WebP บ้าง โดยจะแสดงกรอบสีรูปภาพที่เป็น WebP

  • กรอบสีเขียว เป็นภาพแบบ lossy
  • กรอบสีชมพู เป็นภาพแบบ lossless
  • กรอบสีแดง เป็นภาพแบบ extended ที่มีพวก transparent, animations,.. เป็นต้น

WordPress Plugin

Imagify ใช้ง่าย เร็ว ดี ฟรี(freemium)

การแปลงไฟล์เป็น WebP ด้วย Python

สำหรับขา dev เราก็สามารถใช้ Pillow Library ของ Python ในการแปลงไฟล์ในโปรแกรมของเราได้

1
2
3
4
5
6
7
8
from PIL import Image

imagePath = "Your Image Path" #example ./test.jpg
outputPath = "Output Path" #example ./myWebPimage.webp
quality = "Number of quality you want" #example 100

im = Image.open(imagePath)
im.save(outputPath,'webp',quality = quality)

ส่งท้าย

การใช้ WebP ยังมีความยุ่งยากอยู่เล็กน้อย เพราะมันไม่ได้รองรับ Browser รุ่นเก่าๆ และ Safari ก็ยังไม่เข้ามาร่วมวงด้วย (ด้วยเหตุผลอะไรก็ยังไม่มีใครทราบชัดเจน) แต่สำหรับคนที่อยากทำเว็บให้ Optimize แบบสุดๆ ก็สามารถ Implement WebP ได้ ซึ่งผมอยากให้ข้อแนะนำในการใช้ WebP เล็กน้อย คือ

  1. ควรมีการทำ fallback เสมอ ในกรณีที่ Browser ที่มาเปิดเว็บเราไม่รองรับ WebP จะได้ไม่แสดงผลเป็นรูปภาพ Error
  2. WebP จะยิ่งมีประสิทธิภาพถ้าแสดงผลบนหน้าที่มีรูปภาพเป็นจำนวนมาก หรือหน้า Home ของเว็บ ส่วนหน้าอื่นๆก็แล้วแต่ว่าเราจะใช้ WebP หรือไม่ (แนะนำว่าใช้ถ้าไม่ยุ่งยากในการทำ)

เครดิต:
https://developers.google.com/speed/webp
https://www.hongkiat.com/blog/webp-guide/
https://en.wikipedia.org/wiki/WebP
https://qiita.com/hengsokvisal/items/e4610ec5c39a2f0045cc
https://news.softpedia.com/news/Big-Improvements-for-the-WebP-Image-Format-and-Support-in-Gmail-Picasa-201623.shtml