WebP คืออะไร ? มาทำความรู้จัก พร้อมวิธีแปลงไฟล์ภาพแบบง่าย ๆ

ไฟล์รูปภาพที่เราใช้งานกับในเว็บไซต์นั้นมีหลายชนิด ที่เราคุ้นเคยกันดีก็จะมี JPEG , PNG และ GIF ซึ่งก็พอจะรู้ขัอดีของไฟล์ภาพแต่ละนามสกุลกันดีอยู่แล้ว JPEG นั้นเป็นไฟล์ที่นิยมกันมาก ๆ สำหรับภาพถ่ายและภาพกราฟฟิกออนไลน์เพราะมีขนาดไฟล์ภาพที่เล็ก ส่วน PNG นั้นเป็นไฟล์ที่ค่อนข้างอเนกประสงค์ ไม่สูญเสียข้อมูลระหว่างการบีบอัด ที่สำคัญรองรับควางโปร่งใสอีกด้วย แต่ถ้าต้องการสร้างภาพเคลื่อนไหวที่เรียบง่ายนั้นไฟล์ภาพประเภท GIF นั้นรองรับการใช้งานประเภทนี้ได้เป็นอย่างดี

แต่ทั้งหมดที่กล่าวมานั้นยังไม่เพียงพอครับ เพราะว่าไฟล์แต่ละประเภทยังมีขนาดไฟล์ภาพที่ใหญ่อยู่ ทาง Google จึงได้พัฒนารูปแบบไฟล์ประเภทใหม่ขึ้นมา ซึ่งเป้าหมายคือเพื่อรองรับการโหลดไฟล์ที่เร็วขึ้น โดยเฉพาะการใช้งานภาพกราฟฟิกในเว็บไซต์นั้นต้องการไฟล์ที่มีขนาดเล็กโหลดเร็ว ๆ และต้องรองรับการใช้งานที่หลากหลาย ไม่ว่าจะเป็น Animation และ ภาพที่โปร่งใสได้

WebP คืออะไร ? ทำไมช่วงหลัง ๆ มีคนพูดถึงกันจัง

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

การบีบอัดรูปภาพแบบไม่สูญเสียคุณภาพ WebP จะมีขนาดไฟล์ที่เล็กกว่า PNG ถึง 26% และเล็กกว่า JPEG กว่า 25 – 34%
เมื่อได้ขนาดภาพที่เล็กลงมาดขนาดนี้ก็ย่อมส่งผลให้หน้าเว็บของเราโหลดเร็วขึ้น ผู้ใช้งานหน้าเว็บก็ได้รับประสบการณ์ใช้งานที่ดี
หากต้องการอ่านข้อมูลเกี่ยวกับ WebP เพิ่มเติมสามารถอ่านได้ที่บล็อกของ developers.google หัวข้อ WebP รูปแบบรูปภาพสำหรับเว็บ
ถึงแม้ว่าไฟล์รูปแบบใหม่นี้จะมีข้อดีหลายอย่าง แต่ก็มีข้อเสียเหมือนกัน เรามาดูกันว่ามีข้อดีข้อเสียอะไรบ้าง

ข้อดี / ข้อเสีย ของไฟล์รูปภาพ WebP

ข้อดีของ WebP

• เว็บไซต์ที่โหลดเร็ว ๆ จะส่งผลดีต่อประสบการณ์ผู้ใช้ เราคงเคยเจอเว็บไซต์ที่โหลดนาน ๆ บางทีก็ขี้เกียจรอจนปิดหนีไปเลยก็มี และยังช่วยส่งผลดีต่อการทำ SEO เพราะ Search Engine อย่างเช่น Google ให้คะแนนกับหน้าเว็บที่โหลดเร็ว
• ด้วยขนาดไฟล์ที่เล็กลง WebP ก็จะช่วยให้เราประหยัดพื้นที่ในการเก็บข้อมูล ลดค่าใช้จ่ายได้ด้วย
• รองรับการใช้งานได้กับบราวเซอร์ส่วนใหญ่ ไม่ว่าจะเป็น Google Chrome , Firefox , Microsoft Edge และ Safari ปัจจุบันบราวเซอร์อื่น ๆ รองรับไฟล์ประเภทนี้เกือบทั้งหมดแล้ว
• WebP รองรับไฟล์ภาพแบบโปร่งใส สามารถใช้แทน PNG ได้เลย
• WebP รองรับการทำภาพเคลื่อนไหว สามารถใช้แทน GIF แบบเดิมได้

ข้อเสียของ WebP

• เหมาะกับการใช้งานบนเว็บไซต์เท่านั้น ไม่เหมาะกับการนำไปใช้แบบอื่น เช่น นำไปอัดเป็นรูปภาพแบบออฟไลน์ เพราะอาจจะได้คุณภาพงานที่ไม่ดี
• การบีบอัดไฟล์ ถึงแม้เราจะบีบอัดเพียงเล็กน้อย ก็อาจจะส่งผลเสียต่อคุณภาพของรูปภาพได้ ไม่เหมาะกับการนำไปใช้ในงานที่ต้องการคุณภาพสูง ๆ เช่น ช่างภาพ ที่ต้องการนำเสนอภาพถ่ายที่เน้นคุณภาพสูง ๆ ก็ไม่เหมาะที่จะนำ WebP ไปใช้งาน เป็นต้น
• บราวเซอร์รุ่นเก่า ๆ บางส่วน เช่น Internet Explorer อาจจะไม่รองรับไฟล์ประเภทนี้ (แต่ปัจจุบันนี้มีสัดส่วนการใช้งานที่น้อยมากแล้ว)

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

วิธีการแปลงไฟล์ PNG หรือ JPEG ให้เป็น WebP แบบออนไลน์

เราสามารถแปลงไฟล์รูปภาพให้เป็น .webp ก่อนที่จะอัพโหลดขึ้นไปใช้งานบนเว็บไซต์ โดยใช้เครื่องมือแบบออนไลน์ ซึ่งมีหลายเว็บมาก ๆ ลองค้นหาด้วยคำว่า “jpg to webp” หรือ “png to webp” ผลลัพธ์ก็จะขึ้นมาเพียบเลย ส่วนตัวผู้เขียนนั้นชอบเว็บนี้มาก ๆ เพราะว่าใช้งานง่ายและแปลงไฟล์ได้หลากหลาย ครบในเว็บเดียวเลย

• https://convertio.co/th/image-converter

การ Save file WebP ด้วย Photoshop (Version 23.2 ขึ้นไป)

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

• เลือก Lossless หากไม่ต้องการบีบอัด เราจะไม่สูญเสียความละเอียดของภาพ หากเลือกตัวเลือกนี้
• หรือเลือก Lossy แล้วเราจะสามารถปรับ Quality ของรูปภาพได้ ให้เลือกปรับตามความเหมาะสมกับการนำไปใช้งาน ยิ่ง Quality สูง ขนาดไฟล์ก็จะใหญ่มากขึ้น แต่ก็จะละเอียดมากขึ้นตามไปด้วย

เมื่อเราแปลงไฟล์ภาพหรือ Save ภาพเป็น WebP เสร็จเรียบร้อยแล้ว สามารถนำไปใช้งานอัพโหลดขึ้นเว็บไซต์ของเราได้เลย

เป็นอย่างไรกันบ้าง หากคิดว่าบทความของเราเป็นประโยชน์ สามารถสนับสนุนเราได้ง่าย ๆ ด้วยการแชร์บทความนี้ไปให้เพื่อน ๆ ของเราได้อ่านกัน ไม่ว่าจะเป็นทาง Facebook , Line หรือทางช่องทางการสื่อสารที่ท่านถนัด ขอให้มีความสุขและสนุกกับการทำเว็บไซต์ไปกับเราครับ