เนื้อหาของแกลเลอรีนี้
แกลเลอรีนี้จะนำเสนอรูปภาพตัวอย่างเพื่อแสดงให้เห็นถึง 2 โหมดใหม่ของ WebP ได้แก่ WebP แบบไม่สูญเสียรายละเอียด และ WebP-lossy พร้อมด้วยเวอร์ชันอัลฟ่า (รองรับความโปร่งใส)
การเปรียบเทียบแบบเคียงข้างกัน
ตารางด้านล่างนำเสนอรูปภาพ PNG (บีบอัดด้วย pngcrush และ pngout) รูปภาพ WebP แบบไม่สูญเสียรายละเอียด และรูปภาพ WebP แบบสูญเสียรายละเอียดด้วยเวอร์ชันอัลฟ่าสำหรับเปรียบเทียบ รูปภาพจะวางซ้อนบนพื้นหลังลายตารางหมากรุก ตามที่ทำในซอฟต์แวร์กราฟิก
โปรดทราบว่าเราใช้คุณภาพ WebP 90 สำหรับรูปภาพแบบ WebP แบบสูญเสียรายละเอียดที่มีเวอร์ชันอัลฟ่าและคุณภาพเริ่มต้นสำหรับรูปภาพ WebP ที่ไม่สูญเสียรายละเอียด ดูรายละเอียดเพิ่มเติมได้ที่ส่วนการสร้างรูปภาพซ้ำ
เรานำเสนอรูปภาพ WebP ที่แปลงกลับไปเป็น PNG สำหรับเบราว์เซอร์ที่แสดงผล WebP ไม่ได้ หากคุณมีเบราว์เซอร์ที่เข้ากันได้ คุณจะเห็นลิงก์ไปยังไฟล์ WebP ด้านล่าง รูปภาพในหน้านี้จะลดขนาดลง เพื่อความสะดวกในการดู คลิกที่รูปภาพใดๆ เพื่อดูรูปภาพขนาดเต็ม
ตารางยังแสดงถึงขนาดภาพที่ได้จากแต่ละโหมด
PNG | WebP แบบไม่สูญเสียรายละเอียด | WebP-lossy (มีอัลฟ่า) |
|---|---|---|
| "เหลืองโรส" 1 | ||
 ขนาดไฟล์ที่เพิ่มประสิทธิภาพ PNG: 110.7 KB |
 ขนาดไฟล์ WebP-Loss: 79.9 KB |
 ขนาดไฟล์ WebP-lossy (มีอัลฟ่า) ขนาดไฟล์: 17.7 KB |
| "baby tux สำหรับหน้าผู้ใช้ของฉัน" 2 | ||
 ขนาดไฟล์ที่เพิ่มประสิทธิภาพ PNG: 38.1 KB |
 ขนาดไฟล์ WebP-Loss: 27.0 KB |
 ขนาดไฟล์ WebP-lossy (มีอัลฟ่า) ขนาดไฟล์: 13.8 KB |
| "การสาธิตความโปร่งใสของ PNG" 3 | ||
 ขนาดไฟล์ที่เพิ่มประสิทธิภาพ PNG: 213.5 KB |
 ขนาดไฟล์ WebP แบบไม่สูญเสียข้อมูล: 149.0 KB |
 ขนาดไฟล์ WebP-lossy (มีอัลฟ่า) ขนาดไฟล์: 51.6 KB |
| "วันเกิดปีที่ 189 ของ Gregor Mendel" 4 | ||
 ขนาดไฟล์ที่เพิ่มประสิทธิภาพ PNG: 49.2 KB |
 ขนาดไฟล์ WebP-Loss: 33.2 KB |
 ขนาดไฟล์ WebP-lossy (มีอัลฟ่า) ขนาดไฟล์: 18.3 KB |
| "การ์ดเข็มทิศแบบโปร่งใสสำหรับการวางซ้อน" 5 | ||
 ขนาดไฟล์ที่เพิ่มประสิทธิภาพ PNG: 126.8 KB |
 ขนาดไฟล์ WebP-Loss: 97.1 KB |
 ขนาดไฟล์ WebP-lossy (มีอัลฟ่า) ขนาดไฟล์: 57.3 KB |
ต่อไปนี้คือลิงก์ไปยังไฟล์ WebP (ดูได้ใน Chrome 22 ขึ้นไป)
| "Yellow Rose": | ไฟล์ WebP-lossless (80.1 KB) | ไฟล์ WebP-lossy (พร้อมอัลฟ่า) (18.4 KB) |
| "baby tux สำหรับหน้าผู้ใช้ของฉัน": | ไฟล์ WebP-lossless (27.0 KB) | ไฟล์ WebP-lossy (พร้อมอัลฟ่า) (14.1 KB) |
| "การสาธิตการแปลงไฟล์ PNG": | ไฟล์ WebP-lossless (149.1 KB) | ไฟล์ WebP-lossy (พร้อมอัลฟ่า) (52.6 KB) |
| "วันเกิดปีที่ 189 ของ Gregor Mendel": | ไฟล์ WebP-lossless (33.3 KB) | ไฟล์ WebP-lossy (พร้อมอัลฟ่า) (19.0 KB) |
| "การ์ดเข็มทิศแบบโปร่งใสสำหรับการวางซ้อน": | ไฟล์ WebP-lossless (97.1 KB) | ไฟล์ WebP-lossy (พร้อมอัลฟ่า) (57.3 KB) |
เครดิตรูปภาพ
รูปภาพในหน้านี้มาจากแหล่งที่มาต่างๆ เครดิตสำหรับรูปภาพด้านบนแสดงไว้ที่นี่ตามลำดับ
| 1 |
"ภาพสต็อกฟรีแบบความละเอียดสูง - เหลืองโรส 3 - ดอกไม้" รูปภาพผู้สร้าง: Jon Sullivan ไฟล์นี้เป็นสาธารณสมบัติ แหล่งที่มา JPEG |
| 2 |
"baby tux for my user page" ผู้เขียนรูปภาพ: Fizyplankton ไฟล์นี้เป็นสาธารณสมบัติ แหล่งที่มา PNG |
| 3 |
"การสาธิตความโปร่งใสของ PNG" ผู้เขียนรูปภาพ: ซอร์สโค้ด POV-Ray รูปภาพได้รับอนุญาตภายใต้ใบอนุญาต Creative Commons Attribution-Share Alike 3.0 Unported แหล่งที่มา PNG |
| 4 |
"วันเกิดปีที่ 189 ของ Gregor Mendel" ผู้จัดทำรูปภาพ: ทีม Google Doodle ทีม Google Doodle สำหรับรูปภาพนี้ แหล่งที่มา PNG |
| 5 |
"การ์ดเข็มทิศแบบโปร่งใสสำหรับการวางซ้อน" ผู้เขียนรูปภาพ: Denelson83 ไฟล์นี้ได้รับอนุญาตภายใต้ ครีเอทีฟคอมมอนส์ Attribution-Share Alike 3.0 Unported แหล่งที่มา PNG |
การทำซ้ำรูปภาพ
เพื่อให้เกิดความสามารถในการทำซ้ำและเพื่อสาธิตการใช้พารามิเตอร์การบีบอัด WebP บางอย่าง เราได้อธิบายขั้นตอนที่เกี่ยวข้องเมื่อสร้างรูปภาพในแกลเลอรีนี้
เครื่องมือ
สำหรับการบีบอัด PNG ซ้ำ จะใช้ผลลัพธ์ที่ดีที่สุดจาก pngcrush 1.8.13 และ ZopfliPNG 1.0.3 ใช้ตัวเลือกบรรทัดคำสั่งต่อไปนี้
Pngcrush:
pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png
ZopfliPNG:
zopflipng --lossy_transparent input.png output-candidate.png
ZopfliPNG ที่มีตัวกรองทั้งหมด:
zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png
ในการปรับขนาดภาพต้นฉบับบางส่วนใหม่ (สำหรับการดูเท่านั้น) เราใช้เครื่องมือของ ImageMagick เวอร์ชันล่าสุดชื่อ convert ซึ่งมีให้ใช้งานที่ https://www.imagemagick.org บรรทัดคำสั่งมีดังนี้
convert image.png -resize 240x image_resized.png
การบีบอัดเป็น WebP แบบไม่สูญเสียข้อมูล
เราใช้ตัวเลือก "แบบไม่สูญเสียรายละเอียด" ในเครื่องมือ cwebp เพื่อแปลง PNG เป็น WebP แบบไม่สูญเสียข้อมูล หากต้องการได้เอาต์พุตขั้นต่ำสุด บรรทัดคำสั่งที่ใช้มีดังนี้
cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp
การแสดงผล WebP แบบไม่สูญเสียรายละเอียด
เราแปลงรูปภาพ WebP แบบไม่สูญเสียข้อมูลกลับไปเป็น PNG โดยใช้เครื่องมือ dwebp ในการแสดงผล บรรทัดคำสั่งที่ใช้มีดังนี้
dwebp webp_lossless.webp -o output.png
การบีบอัดเป็น WebP-lossy (มีอัลฟ่า)
เราใช้เครื่องมือ cwebp ในการแปลง PNG เป็น WebP-lossy (มีอัลฟ่า) เราเลือกคุณภาพ WebP ที่ 90 (บีบอัดแบบสูญเสียรายละเอียด) และคุณภาพอัลฟ่าเป็น 100 (การบีบอัดแบบไม่สูญเสียข้อมูล) บรรทัดคำสั่งที่ใช้มีดังนี้
cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp
การแสดงผล WebP-lossy (มีอัลฟ่า)
เราแปลงรูปภาพแบบ WebP-lossy (ที่มีอัลฟ่า) กลับไปเป็น PNG โดยใช้เครื่องมือ dwebp ในการแสดงผล บรรทัดคำสั่งที่ใช้มีดังนี้
dwebp webp_alpha.webp -o output.png