เนื้อหาของแกลเลอรีนี้
แกลเลอรีนี้แสดงตัวอย่างรูปภาพบางส่วนเพื่อแสดง WebP ใหม่ 2 โหมด ได้แก่ WebP แบบไม่สูญเสียรายละเอียดและ WebP-lossy พร้อมอัลฟ่า (การรองรับความโปร่งใส)
การเปรียบเทียบแบบเคียงข้างกัน
ตารางด้านล่างแสดงรูปภาพ PNG (บีบอัดด้วย pngcrush และ pngout) รูปภาพ WebP แบบไม่สูญเสียรายละเอียดและรูปภาพ WebP แบบ Anchor ที่มีรุ่น Alpha แสดงเคียงข้างกัน เปรียบเทียบ รูปภาพจะวางซ้อนบนพื้นหลังลายตารางหมากรุกตามปกติ ทำในซอฟต์แวร์กราฟิก
โปรดทราบว่าเราใช้คุณภาพระดับ WebP 90 สําหรับรูปภาพ WebP แบบสูญเสียที่มีอัลฟ่าและ คุณภาพเริ่มต้นสำหรับรูปภาพแบบไม่สูญเสียรายละเอียด WebP โปรดดู ส่วนจำลองภาพเพื่อดูรายละเอียดเพิ่มเติม
เรานำเสนอภาพ WebP ซึ่งแปลงกลับเป็น PNG สำหรับเบราว์เซอร์ที่ไม่ใช่ สามารถแสดงผล WebP ได้ หากคุณมีเบราว์เซอร์ที่เข้ากันได้ คุณจะเห็น ลิงก์ไปยังไฟล์ WebP ด้านล่าง นอกจากนี้ รูปภาพในหน้านี้ ลดขนาดลงเพื่อความสะดวกในการดู คลิกรูปภาพเพื่อดูขนาดเต็ม รูปภาพ
ตารางยังแสดงขนาดรูปภาพที่ได้รับในแต่ละโหมดด้วย
PNG | WebP แบบไม่สูญเสียรายละเอียด | WebP-lossy (มีอัลฟ่า) |
|---|---|---|
| "กุหลาบสีเหลือง" 1 | ||
 ขนาดไฟล์ที่เพิ่มประสิทธิภาพ PNG: 110.7 KB |
 ขนาดไฟล์ WebP-lossless: 79.9 KB |
 ขนาดไฟล์ WebP-lossy (มีอัลฟ่า): 17.7 KB |
| "Baby tux สำหรับหน้าผู้ใช้ของฉัน" 2 | ||
 ขนาดไฟล์ที่เพิ่มประสิทธิภาพ PNG: 38.1 KB |
 ขนาดไฟล์ WebP-lossless: 27.0 KB |
 ขนาดไฟล์ WebP-lossy (มีอัลฟ่า): 13.8 KB |
| "การสาธิตความโปร่งใส PNG" 3 | ||
 ขนาดไฟล์ที่เพิ่มประสิทธิภาพ PNG: 213.5 KB |
 ขนาดไฟล์ WebP-lossless: 149.0 KB |
 ขนาดไฟล์ WebP-lossy (มีอัลฟ่า): 51.6 KB |
| "วันเกิดปีที่ 189 ของ Gregor Mendel" 4 | ||
 ขนาดไฟล์ที่เพิ่มประสิทธิภาพ PNG: 49.2 KB |
 ขนาดไฟล์ WebP-lossless: 33.2 KB |
 ขนาดไฟล์ WebP-lossy (มีอัลฟ่า): 18.3 KB |
| "การ์ดเข็มทิศแบบโปร่งใสสำหรับการวางซ้อน" 5 | ||
 ขนาดไฟล์ที่เพิ่มประสิทธิภาพ PNG: 126.8 KB |
 ขนาดไฟล์ WebP-lossless: 97.1 KB |
 ขนาดไฟล์ WebP-lossy (มีอัลฟ่า): 57.3 KB |
ต่อไปนี้คือลิงก์ไปยังไฟล์ WebP (ที่ดูได้ใน Chrome 22 ขึ้นไป)
| "กุหลาบสีเหลือง": | ไฟล์ WebP แบบไม่สูญเสียรายละเอียด (80.1 KB) | ไฟล์ WebP-lossy (พร้อมอัลฟ่า) (18.4 KB) |
| "Baby tux สำหรับหน้าผู้ใช้ของฉัน": | ไฟล์ WebP แบบไม่สูญเสียรายละเอียด (27.0 KB) | ไฟล์ WebP-lossy (พร้อมอัลฟ่า) (14.1 KB) |
| "การสาธิต PNG Transperancy": | ไฟล์ WebP แบบไม่สูญเสียรายละเอียด (149.1 KB) | ไฟล์ WebP-lossy (พร้อมอัลฟ่า) (52.6 KB) |
| "วันเกิดปีที่ 189 ของ Gregor Mendel": | ไฟล์ WebP แบบไม่สูญเสียรายละเอียด (33.3 KB) | ไฟล์ WebP-lossy (พร้อมอัลฟ่า) (19.0 KB) |
| "การ์ดเข็มทิศแบบโปร่งใสสำหรับการวางซ้อน": | ไฟล์ WebP แบบไม่สูญเสียรายละเอียด (97.1 KB) | ไฟล์ WebP-lossy (พร้อมอัลฟ่า) (57.3 KB) |
เครดิตรูปภาพ
รูปภาพในหน้านี้มาจากแหล่งที่มาต่างๆ เครดิตสำหรับ รูปภาพข้างต้นแสดงไว้ที่นี่ตามลำดับ
| 1 |
"ภาพสต็อกฟรีในความละเอียดสูง - กุหลาบสีเหลือง 3 - ดอกไม้" ผู้เขียนรูปภาพ: Jon Sullivan ไฟล์นี้เป็นสาธารณสมบัติ แหล่งที่มาของ JPEG |
| 2 |
"Baby Tux สำหรับหน้าผู้ใช้ของฉัน" ผู้จัดทำรูปภาพ: Fizyplankton ไฟล์นี้เป็นสาธารณสมบัติ ต้นฉบับ PNG |
| 3 |
"การสาธิตความโปร่งใส PNG" ผู้เขียนรูปภาพ: ซอร์สโค้ด POV-Ray รูปภาพได้รับอนุญาตภายใต้ ครีเอทีฟคอมมอนส์ แสดงที่มา-อนุญาตอนุญาตใช้สิทธิ์แบบเดียวกัน 3.0 ต้นฉบับ PNG |
| 4 |
"วันเกิดปีที่ 189 ของ Gregor Mendel" ผู้สร้างรูปภาพ: ทีม Google Doodle ขอขอบคุณทีม Google Doodle สำหรับรูปภาพนี้ ต้นฉบับ PNG |
| 5 |
"การ์ดเข็มทิศแบบโปร่งใสสำหรับการวางซ้อน" ผู้จัดทำรูปภาพ: Denelson83 ไฟล์นี้ได้รับอนุญาตภายใต้ ครีเอทีฟคอมมอนส์ แสดงที่มา-อนุญาตอนุญาตใช้สิทธิ์แบบเดียวกัน 3.0 ต้นฉบับ 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