แกลเลอรี 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, Norway - from Breiskrednosi. โลก UNESCO Heritage" 1

ขนาดไฟล์ JPEG: 43.84 KB
รูปภาพ WebP
ขนาดไฟล์ WebP: 29.61 KB
"Kayaker at Ekstremsportveko 2010, Voss". 2

ขนาดไฟล์ JPEG: 86.25 KB
รูปภาพ WebP
ขนาดไฟล์ WebP: 59.18 KB
เฟรมที่ 10 ของ "พาร์ครัน" ลำดับ 3

ขนาดไฟล์ JPEG: 297.05 KB
รูปภาพ WebP
ขนาดไฟล์ WebP: 198.38 KB
รูปภาพ: "ดอกซากุระป่า (Prunus avium)" 4

ขนาดไฟล์ JPEG: 251.03 KB
รูปภาพ WebP
ขนาดไฟล์ WebP: 172.82 KB
รูปภาพ: การหายใจด้วยไฟ "ชัยปุระมหาราชาสายทองเหลือง" Chassepierre เบลเยียม 5

ขนาดไฟล์ JPEG: 120.78 KB
รูปภาพ WebP
ขนาดไฟล์ WebP: 80.76 KB

เครดิตรูปภาพ

รูปภาพในหน้านี้มาจากแหล่งที่มาต่างๆ เรามี ได้เลือกภาพที่สวยงามและน่าสนใจเพื่อแสดงคุณภาพของ WebP

เครดิตสำหรับรูปภาพด้านบนปรากฏตามลำดับที่นี่

1 "Nærøyfjorden, นอร์เวย์ - จาก Breiskrednosi. มรดกโลก UNESCO"
ผู้เขียนรูปภาพ: Kjetil Birkeland Moe
ทำซ้ำโดยได้รับอนุญาตจากผู้เขียน
ต้นฉบับ PNG
บล็อกโพสต์โดยผู้เขียนพร้อมการเปรียบเทียบ JPEG และ WebP หนู ตัวอย่างการเปิดใช้งานเมื่อวางเมาส์
2 "Kayaker at Ekstremsportveko 2010, Voss"
Image Author: Kjetil Birkeland Moe
Reproduced with permission of the author.
ต้นฉบับ PNG
บล็อกโพสต์โดยผู้เขียนพร้อมการเปรียบเทียบ JPEG และ WebP การเลื่อนเมาส์ไปวางจะเปิดใช้งานตัวอย่าง
3 เฟรมที่ 10 ของ "พาร์ครัน" ลำดับ
ผู้ผลิตรูปภาพ: 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 รูปภาพ: การพ่นไฟของ "Jaipur Maharaja Brass Band" ที่ Chassepierre ประเทศเบลเยียม
ผู้แต่ง: Luc Viatour
แหล่งที่มาของ PNG
รูปภาพได้รับอนุญาตภายใต้ข้อบังคับของ Creative Commons Attribution-Share Alike 3.0 Unported
เว็บไซต์ของผู้เขียนที่ www.lucnix.be

การทำสำเนารูปภาพ

เราได้อธิบายขั้นตอนที่แน่นอนในการสร้างรูปภาพในแกลเลอรีนี้เพื่อแสดงการใช้งานพารามิเตอร์การบีบอัด WebP บางรายการและเพื่อให้สามารถผลิตซ้ำได้

เครื่องมือ

เราใช้เครื่องมือ convert ของ ImageMagick เวอร์ชันล่าสุดที่มีอยู่ใน 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 ที่เทียบเท่ากัน