07Sep, 2020
Language blog :
Thai
Share blog : 
07 September, 2020
Thai

ทำ Website Optimization ด้วย WebP Images

By

3 mins read
ทำ Website Optimization ด้วย WebP Images

วันนี้เราจะมาพูดถึงเรื่องของ website optimization กันนะครับ ซึ่งหัวข้อในวันนี้คือ webp ซึ่งหลาย ๆ คนอาจจะสงสัยกันว่า webp นี่มันคืออะไรกัน มันมาช่วยอะไรในการ optimize website

WebP เป็นไฟล์นามสกุลภาพที่พัฒนาและเปิดตัวครั้งแรกโดย Google ในปี 2010 ซึ่งทาง google ได้คิดวิธีที่ทำให้โหลดภาพบนเว็บไซต์ได้เร็วขึ้นโดยทำการพัฒนาตัว encoding images เป็นสกุลไฟล์ WebP ซึ่งสามารถลดขนาดของไฟล์ได้โดยมีคุณภาพของภาพเท่าเดิม

ยกตัวอย่างภาพ

WebP

(Photo reference: css-tricks.com)

ภาพซ้ายมือเป็นภาพต้นฉบับ ภาพขวามือถูกแปลงเป็น webp จะเห็นว่าถ้ามองด้วยตาแล้ว แทบไม่ต่างกันเลย แต่ความจริงแล้วขนาดไฟล์ภาพของทั้ง 2 ไฟล์นี้ต่างกัน โดยที่ ภาพจริงมีขนาด 56.7 KB ส่วนภาพที่แปลงเป็น webp เหลือขนาดเพียงแค่ 38 KB จะเห็นว่าขนาดไฟล์นั้น ลดลงไปถึง 33 % จากภาพจริง แต่ข้อเสียอีกอย่างของ webp คือไม่สามารถรองรับได้ทุก browser ซึ่งเป็นอีกจุดหนึ่งที่ developer ต้องคำนึงถึงด้วย ดังนั้นในบทความนี้เราจะมาบอกวิธีการที่จะทำให้ webp รองรับทุก browser ได้

ขั้นตอนแรก เรามาดูการเรียกใช้งานไฟล์. webp กันดีกว่า ซึ่งไม่ยากเลย เพียงแค่นำ file .webp หย่อนลงไปใน src ของ image tag แบบนี้ ก็ใช้ได้แล้ว

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

จาก code ข้างบน จะเห็นไฟล์ .webp อยู่บนสุดใน tag ของ picture เพราะเราพยายามที่จะแสดงผลของรูปภาพ webp ให้ได้ก่อน เพื่อให้เว็บไซต์ของเรานั้นโหลดรูปเร็วขึ้นเพราะขนาดไฟล์ที่เล็กกว่ารูปต้นฉบับ แต่ถ้ารูปภาพ webp ไม่สามารถนำมาแสดงผลได้ ซึ่งอาจเกิดจากการเปิดเว็บไซต์ด้วย browser อื่น รูปภาพนามสกุลอื่นจะถูกนำมาแสดงผลแทนตามลำดับของ tag picture 

เพียงเท่านี้ก็ทำให้เราสามารถ optimize website ของเราได้ส่วนนึงแบบง่าย ๆ แล้วครับ

ติดตามอ่านบทความดี ๆ ที่น่าสนใจ เกี่ยวกับ Machine Learning, Startup, Design, Software Development และ Management ทาง Senna Labs Blog นะครับ

_____

อ้างอิง:

 

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

29
May, 2024
JS class syntax
29 May, 2024
JS class syntax
เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class

By

4 mins read
Thai
29
May, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
29 May, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

By

4 mins read
Thai
29
May, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
29 May, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.