มาใช้ webp นามสกุลไฟล์รูปภาพสมัยใหม่กันเถอะ

เวลาไปเรานำเว็บไซต์ไปทดสอบความเร็วของเว็บไซต์ที่ Google Page Speed หรือ GT Metrix บางครั้งระบบก็จะแนะนำให้แก้ไขรูปภาพประกอบเว็บให้เป็นแบบ Next-Gen

ซึ่งไฟล์รูปภาพในแบบ Next-Gen หรือเป็นไฟล์นามสกุลรูปแบบใหม่ ต่างจากที่เราเคยใช้คือ jpeg jpg bmp png และ gif

ไฟล์รูปแบบใหม่นี้คือ ไฟล์ WebP และ JPEG 2000 นั่นเอง โดยที่ไฟล์ทั้ง 2 ชนิดนี้จะเป็นไฟล์ที่มีขนาดเล็ก และความคมชัดของภาพก็เทียบเท่ากับไฟล์ต้นฉบับ เรียกได้ว่าแทบจะไม่แตกต่างกันเลย

ทำไมถึงต้องใช้ webp

เพราะ webp มีไฟล์ขนาดเล็ก จึงทำให้โหลดเร็ว ผลคะแนนของ core web vital ก็ดีขึ้น ส่งผลให้คะแนน SEO ดีขึ้น ซึ่งในตอนนี้มี Web Browser ต่างๆ ที่รองรับการใช้งาน webp แล้วกว่า 90%

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

ไฟล์ webp นี้สามารถเลือกระดับคุณภาพของภาพได้ ดังนี้

  • Lossless compression – เป็นการบีบอัดแบบไม่เสียคุณภาพของภาพ โดยภาพที่ได้นั้นจะไม่เสียความคมชัดของภาพ สามารถเทียบได้เท่ากับไฟล์ PNG เลยทีเดียว แต่ขนาดไฟล์จะเล็กว่า 22-50% ทำให้สามารถแสดงผลแบบ transparent ได้อีกด้วย เจ๋งป่ะล่ะ
    อ้างอิงจาก KeyCDN’s comparison
  • Lossy compression – ในกรณีที่ต้องการคุณภาพของรูปภาพเทียบเท่ากับ JPEG ไฟล์ webp ก็สามารถทำได้เช่นกัน แถมไฟล์มีขนาดเล็กกว่า JPEG กว่า 25-34%
    อ้างอิงจาก Google’s WebP study
ที่มาภาพ: caniuse

นอกจากไฟล์ webp แล้ว ยังมีไฟล์ต่างๆ ที่มีคุณสมบัติคล้ายๆ กับ webp ได้แก่ avif, jpeg2000 และ JPEG XR ซึ่งไฟล์เหล่านี้จะบีบขนาดของไฟล์ให้เล็กกว่าต้นฉบับ แต่ทางเรายังไม่แนะนำให้ใช้เพราะเว็บเบราว์เซอร์ส่วนใหญ่ยังไม่รองรับการใช้งานไฟล์เหล่านี้

วิธีบันทึกไฟล์ webp

  1. แนะนำโปรแกมแปลงไฟล์จาก JPG เป็น webp
  2. วิธีทำให้ Photoshop เปิดและบันทึกไฟล์ webp
  3. การแปลงไฟล์จากไฟล์อื่นเป็น Webp ด้วย Xnconvert
  4. วิธี convert ไฟล์รูปเป็น webp ออนไลน์แบบฟรีๆ

Was this article helpful?

Related Articles