ทำความรู้จักกับ WebP มาตรฐานรูปภาพสำหรับใช้บนเว็บ

WebP มาตรฐานรูปภาพสำหรับบนเว็บ ที่มาถึงวันนี้ผมว่ายังนับว่าใหม่อยู่มากๆ เพราะยังมีคนใช้งานอยู่ไม่เยอะมากและ Browser ก็ยังไม่ได้รองรับกันครบหมดแบบนั้น

WebP

WebP มาตรฐานรูปภาพสำหรับบนเว็บ ที่มาถึงวันนี้ผมว่ายังนับว่าใหม่อยู่มากๆ เพราะยังมีคนใช้งานอยู่ไม่เยอะมากและ Browser ก็ยังไม่ได้รองรับกันครบหมดแบบนั้น

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

และตั้งใจ ให้มีความสามารถ ในการรองรับ animation ได้แบบ GIF แถมยังมี transparent ได้ด้วยแบบเดียวกับของ PNG แต่ต้องได้มาซึ่งคุณภาพที่เล็กลงให้ได้

ซึ่งนับว่ามันก็ทำงานได้ดีนะ เพราะเท่าที่ลองเล่นดูก็พบว่า ขนาดมันลดลงได้ถึง 30% เลยทีเดียว แต่อันที่จริงเรื่องแบบนี้ต้องใช้สถิติมาคุย 555 งั้นเรา…ข้ามไป

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

ส่วนวิธีการทำไฟล์นามสกุล WebP ไม่จำเป็นต้องไปจดทะเบียนสมรส เพื่อขอย้ายนามสกุลอะไรกัน ที่ไหน มีมากมายหลากหลายวิธี ทั้งการ Convert ผ่านทาง บริการออนไลน์ก็หลายเจ้า อย่างเช่น
https://webp-convertor.com/
https://ezgif.com/jpg-to-webp
https://convertio.co/th/jpg-webp/

หรือจะทำผ่าน ค่าย Google เองก็ได้กับ WebP Converter Download ก็ได้ที่ 
Link Download

ทำความรู้จักกับ WebPยัง…ยังไม่จบ ไหนๆมาแล้ว เอาให้คุ้ม ส่วนเวลาทำงาน ก็ไหนบอกเองว่า Browser ยังรองรับไม่ครบไง แล้วจะมาใช้งานตอนนี้ทำไม ไม่รอให้รองรับกันครบๆไปก่อนละ โฮ…ยุคนี้แล้ว เรารออะไรแบบนั้นไม่ไหวกันแล้วครับ

เรามาดูวิธีการทำงานเพื่อแก้ปัญหานี้กัน เราจะใช้พลังความสามารถของ HTML ธรรมดาๆนี่แหละเล่นงานมันซะเลย โดยที่เราจะเลือก Card เอ้ย..เลือก Tag <picture> มาใช้งานซะ

แล้วก็ระบุ source ลงไปทั้งแบบี่เป็น format ปรกติอย่าง JPG หรือ PNG กับ webp เพื่อให้ picture มันเลือกเองว่า browser ไหนรองรับ ก็ให้ใช้ webp ไป ถ้าไม่รองรับก็ใช้แบบปรกติไป นี่สิเข้าท่า เวลาจะเขียนก็แบบนี้นะ

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg">
</picture>

เอาเป็นว่า ถ้าอยากให้ user ได้สัมพัสกับเว็บไซต์ระดับคุณภาพ Premium บนเน็ตแบบบ้านๆวันนี้ แนะนำว่า การทำ Web Performance เป็นสิ่งสำคัญ และให้เริ่มต้นด้วยอะไรที่มันง่ายๆนี่แหละครับ ค่อยๆทำกันไป เริ่มจากรูปภาพนี่ก็แก้ไปได้เยอะอยู่น๊าาาา

เรื่องที่คุณอาจสนใจ Default Browser Styles กับ เรื่องของ CSS

Leave a Reply

Your email address will not be published. Required fields are marked *