เนื้อหาของแกลเลอรีนี้
หน้าแกลเลอรีนี้เหมาะที่จะดูด้วยเบราว์เซอร์ที่รองรับ 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: 29.61 KB |
"Kayaker at Ekstremsportveko 2010, Voss". 2 | |
ขนาดไฟล์ JPEG: 86.25 KB |
ขนาดไฟล์ WebP: 59.18 KB |
เฟรมที่ 10 ของ "พาร์ครัน" ลำดับ 3 | |
ขนาดไฟล์ JPEG: 297.05 KB |
ขนาดไฟล์ WebP: 198.38 KB |
รูปภาพ: "ดอกซากุระป่า (Prunus avium)" 4 | |
ขนาดไฟล์ JPEG: 251.03 KB |
ขนาดไฟล์ WebP: 172.82 KB |
รูปภาพ: การหายใจด้วยไฟ "ชัยปุระมหาราชาสายทองเหลือง" Chassepierre เบลเยียม 5 | |
ขนาดไฟล์ JPEG: 120.78 KB |
ขนาดไฟล์ 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 ที่เทียบเท่ากัน