เนื้อหาของแกลเลอรีนี้
หน้าแกลเลอรีนี้จะดูดีที่สุดด้วยเบราว์เซอร์ที่รองรับ WebP เช่น Google Chrome, Opera และอื่นๆ
หากไม่มีสิทธิ์เข้าถึง Google Chrome คุณดาวน์โหลดรูปภาพในไดรฟ์ในเครื่องเพื่อใช้กับผลิตภัณฑ์อื่นๆ ที่รองรับ WebP ได้
ตัวอย่างไฟล์ภาพเป็น JPEG และ WebP และแหล่งที่มา PNG
ตารางด้านล่างแสดงรูปภาพ JPEG (ทางด้านซ้าย) และรูปภาพ WebP (ทางด้านขวา) ที่ปรับขนาดไว้ข้างกันเพื่อเปรียบเทียบ เนื่องจากมีเบราว์เซอร์ที่รองรับ WebP อยู่แล้ว เราจึงไม่ได้วางรูปภาพ WebP ไว้ในคอนเทนเนอร์ PNG อีกต่อไปอย่างที่เคยทำตอนเปิดตัว ไฟล์ภาพมีขนาดเท่ากับ เมื่อคลิกภาพขนาดย่อของ JPEG และ WebP จะเป็นการเปิดรูปภาพขนาดใหญ่ในแท็บใหม่
ขนาดไฟล์ที่อยู่ด้านล่างภาพขนาดย่อจะตรงกับขนาดไฟล์ของภาพที่แสดงเมื่อคลิกภาพขนาดย่อ รูปภาพ WebP มีขนาดเล็กกว่าภาพ JPEG 30%
JPEG | WebP |
|---|---|
| "Nærøyfjorden, นอร์เวย์ - จาก Breiskrednosi มรดกโลกของ UNESCO" 1 | |
 ขนาดไฟล์ JPEG: 43.84 KB |
 ขนาดไฟล์ WebP: 29.61 KB |
| "เรือคายัคที่ Ekstremsportveko 2010, Voss" 2 | |
 ขนาดไฟล์ JPEG: 86.25 KB |
 ขนาดไฟล์ WebP: 59.18 KB |
| เฟรมที่ 10 ของลำดับ "พาร์รัน" 3 | |
 ขนาดไฟล์ JPEG: 297.05 KB |
 ขนาดไฟล์ WebP: 198.38 KB |
| รูปภาพ: "A Wild Cherry (Prunus avium) ในดอกไม้" 4 | |
 ขนาดไฟล์ JPEG: 251.03 KB |
 ขนาดไฟล์ WebP: 172.82 KB |
| รูปภาพ: หายใจด้วยดอกไม้ไฟ "Jaipur Maharaja Brass Band" Chassepierre เบลเยียม 5 | |
 ขนาดไฟล์ JPEG: 120.78 KB |
 ขนาดไฟล์ WebP: 80.76 KB |
เครดิตรูปภาพ
รูปภาพในหน้านี้มาจากแหล่งที่มาต่างๆ เราได้เลือกรูปภาพที่สมบูรณ์และน่าสนใจเพื่อแสดงคุณภาพของ WebP น่าเสียดายที่รูปภาพคลาสสิกที่โด่งดังอย่าง Lena, Baboon ฯลฯ ที่มักใช้ในการเปรียบเทียบการบีบอัดนั้นไม่ก็ไม่มีลิขสิทธิ์แต่อย่างใด
เครดิตสำหรับรูปภาพด้านบนแสดงไว้ที่นี่ตามลำดับ
| 1 |
"Nærøyfjorden, นอร์เวย์ - จาก Breiskrednosi มรดกโลกของ UNESCO" ผู้เขียนรูปภาพ: Kjetil Birkeland Moe ทำซ้ำโดยได้รับอนุญาตจากผู้แต่ง แหล่งที่มา PNG บล็อกโพสต์โดยผู้เขียนที่มีการเปรียบเทียบ JPEG และ WebP การเลื่อนเมาส์ไปวางจะเปิดใช้งานตัวอย่าง |
| 2 |
"เรือคายัคที่ Ekstremsportveko 2010, Voss" ผู้เขียนรูปภาพ: Kjetil Birkeland Moe ทำซ้ำโดยได้รับอนุญาตจากผู้เขียน แหล่งที่มา PNG บล็อกโพสต์โดยผู้เขียนที่มีการเปรียบเทียบ JPEG และ WebP การเลื่อนเมาส์ไปวางจะเปิดใช้งานตัวอย่าง |
| 3 |
เฟรมที่ 10 ของลำดับ "Parkrun" ผู้ผลิตรูปภาพ: Lars Haglund, SVT Sveriges Television AB ทำซ้ำโดยได้รับอนุญาตจากผู้ผลิต แหล่งที่มา PNG |
| 4 |
รูปภาพ: "A Wild Cherry (Prunus avium) in flower" ผู้เขียนรูปภาพ: Benjamin Gimmel แหล่งที่มา PNG รูปภาพที่ได้รับอนุญาตภายใต้ใบอนุญาต ครีเอทีฟคอมมอนส์ Attribution-Share Alike 3.0 Unported |
| 5 |
รูปภาพ: Fireในทางที่ดีขึ้น "Jaipur Maharaja Brass Band" Chassepierre เบลเยียม ผู้เขียน: Luc Viatour แหล่งข้อมูล PNG รูปภาพได้รับอนุญาตภายใต้ใบอนุญาต Creative Commons Attribution-Share Alike 3.0 Unported เว็บไซต์ของผู้เขียนที่ www.lucnix.be |
การทำซ้ำรูปภาพ
เพื่อให้เกิดความสามารถในการทำซ้ำและเพื่อสาธิตการใช้พารามิเตอร์การบีบอัด WebP บางอย่าง เราได้อธิบายขั้นตอนที่เกี่ยวข้องเมื่อสร้างรูปภาพในแกลเลอรีนี้
เครื่องมือ
ในการแปลงและปรับขนาดรูปภาพต้นฉบับ เราใช้เครื่องมือของ ImageMagick เวอร์ชันใหม่ชื่อ convert ที่มีอยู่ที่ https://www.imagemagick.org
ข้อมูลเวอร์ชันประกอบด้วยข้อมูลต่อไปนี้
Version: ImageMagick 6.5.7-8 2010-12-02 Q16 https://www.imagemagick.org
สำหรับการบีบอัด JPEG เราใช้โปรแกรมเปลี่ยนไฟล์อ้างอิงของ IJG เวอร์ชัน 8b ดาวน์โหลดได้ที่ https://www.ijg.org/files/jpegsrc.v8b.tar.gz
ข้อมูลเวอร์ชันประกอบด้วยข้อมูลต่อไปนี้
Independent JPEG Group's CJPEG, version 8b 16-May-2010
Copyright (C) 2010, Thomas G. Lane, Guido Vollbeding
กำลังสร้างภาพ PNG ต้นฉบับ
ก่อนอื่น ระบบจะแปลงแหล่งที่มาของ JPEG แบบไม่สูญเสียข้อมูลให้อยู่ในรูปแบบ PNG ได้ง่ายๆ ดังนี้
convert in.jpg out.png
จากนั้นจะปรับขนาดรูปภาพต้นฉบับขนาดใหญ่ให้มีความกว้างน้อยลง 1024 พิกเซลโดยใช้คำสั่งต่อไปนี้
convert in.png -depth 16 -gamma 0.454545 -filter lanczos -resize 1024 -gamma 2.2 -depth 8 out.png
เพื่อสร้างชุดรูปภาพ PNG ต้นฉบับ
กำลังบีบอัดเป็นรูปแบบ JPEG
โปรแกรมเปลี่ยนไฟล์ของ JPEG (cjpeg) ถ่ายภาพอินพุตในรูปแบบ PPM เราใช้ convert เพื่อสร้าง ลำดับ Conversion ที่สมบูรณ์จะเป็นดังนี้
convert in.png tmp.ppm
cjpeg -optimize -quality 80 -outfile out.jpg tmp.ppm
ซึ่งจะสร้างไฟล์ JPEG ที่มีการเพิ่มประสิทธิภาพด้วยค่าคุณภาพ 80
การบีบอัดเป็นรูปแบบ WebP
เราตั้งเป้าหมายว่าไฟล์จะลดขนาดลง 30% เมื่อเทียบกับไฟล์ JPEG ที่เพิ่มประสิทธิภาพแล้ว
เราจึงระบุขนาดเป้าหมายของแต่ละภาพไว้อย่างชัดเจน
นอกจากนี้ เรายังกำหนดค่าเฉพาะกิจสำหรับระดับการกรองของภาพแต่ละภาพด้วยตัวเลือก -f ของเครื่องมือ cwebp ยังเสริมแอมพลิจูดของการกำหนดรูปร่างสัญญาณรบกวนเชิงพื้นที่สำหรับบางภาพโดยใช้ตัวเลือก -sns บรรทัดคำสั่งที่ใช้อ่าน:
cwebp -m 6 -f 50 -size 31500 1.png -o 1.webp
cwebp -m 6 -f 20 -sns 100 -size 62000 2.png -o 2.webp
cwebp -m 6 -sns 90 -size 213000 3.png -o 3.webp
cwebp -m 6 -f 40 -size 181000 4.png -o 4.webp
cwebp -m 6 -f 40 -size 89000 5.png -o 5.webp
โดยรวมแล้ว ไฟล์ WebP ที่ได้ทำให้ประหยัดทรัพยากรทั่วโลกถึง 32% เมื่อเทียบกับขนาดไฟล์ JPEG
โปรดทราบว่าภาพขนาดย่อของ WebP ที่ใช้ในหน้านี้จะมีขนาดเล็กกว่า 26% เมื่อเทียบกับภาพ JPEG ที่เทียบเท่า