แกลเลอรี WebP

เนื้อหาของแกลเลอรีนี้

หน้าแกลเลอรีนี้จะดูดีที่สุดด้วยเบราว์เซอร์ที่รองรับ 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 ที่เทียบเท่า