แปลง PNG เป็น WebP

ลดขนาดไฟล์ PNG ประเภทภาพหน้าจอ โลโก้ และภาพสินค้าไดคัทบนเว็บไซต์ของคุณให้เป็นไฟล์ WebP ที่ยังคงขอบโปร่งใสไว้ และโหลดได้เร็วกว่าเดิมหลายเท่า เลือกแบบ lossy หรือ lossless กดแปลง แล้วอัปโหลดไฟล์ที่ได้ขึ้น CMS ของคุณ

หรือลากไฟล์ JPG, JPEG, JPE … มาวางที่นี่ ·

สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที

ผลลัพธ์

แปลงเป็น

ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที

คุณภาพและสี

คุณภาพ

ค่า 85 ทำให้ภาพถ่ายดูเหมือนต้นฉบับทุกประการ ควรลดค่านี้เฉพาะเมื่อต้องการไฟล์ที่เล็กลง

ไม่สูญเสียคุณภาพ

คงทุกพิกเซลไว้ตามเดิม ไฟล์จะมีขนาดใหญ่ขึ้นและระบบจะไม่ใช้ค่าแถบเลื่อนคุณภาพ

ปรับขนาดภาพผลลัพธ์

คงขนาดภาพเดิมไว้ หรือกำหนดด้านใดด้านหนึ่ง โดยระบบจะคงอัตราส่วนภาพไว้

ข้อมูลเมตาและโปรไฟล์สี

ปรับแนวภาพอัตโนมัติ

หมุนภาพตามข้อมูลการวางแนวใน EXIF เพื่อให้ภาพแสดงในแนวตั้งตรงในทุกโปรแกรม

ลบข้อมูลเมตา

ลบตำแหน่ง GPS ข้อมูลกล้อง และความคิดเห็นออก ส่วนโปรไฟล์สีสามารถเลือกเก็บไว้แยกต่างหากได้ด้านล่าง

คงโปรไฟล์สี

เก็บโปรไฟล์ ICC ที่ฝังอยู่ไว้ เพื่อให้สีถูกต้องหลังการแปลง

ปริภูมิสี

sRGB เหมาะสำหรับหน้าจอและเว็บไซต์ ควรคงค่าเดิมไว้สำหรับงานพิมพ์ ส่วนระดับสีเทาจะตัดสีออกทั้งหมด

ค่า DPI ในไฟล์

dpi

เป็นข้อมูลเมตาเท่านั้น ค่า 0 จะคงค่าเดิมไว้ เครื่องพิมพ์และบางเว็บไซต์จะอ่านค่านี้ แต่จะไม่เปลี่ยนขนาดภาพเป็นพิกเซล

วิธีใช้เครื่องมือนี้

1
วางไฟล์ PNG ลงในหน้านี้
ลากไฟล์ PNG สูงสุด 20 ไฟล์มาวางในพื้นที่อัปโหลด หรือเลือกจากโฟลเดอร์ แต่ละไฟล์มีขนาดได้สูงสุด 95 MB ซึ่งรองรับแม้ไฟล์ mockup ที่ส่งออกมาขนาดใหญ่มาก
2
เลือกแบบ lossy หรือ lossless
หน้านี้เริ่มต้นที่ คุณภาพ 80 ในโหมดสูญเสียคุณภาพ ซึ่งสมดุลดีสำหรับรูปถ่ายและภาพประกอบบนเว็บ หากเป็นไอคอน พิกเซลอาร์ต หรือภาพหน้าจอ UI ที่ต้องคงพิกเซลเดิมทุกจุด ให้ติ๊ก ไม่สูญเสียคุณภาพ ใน การตั้งค่าขั้นสูง
3
แปลงแล้วนำไปแทนที่ไฟล์เดิม
กด แปลงเป็น WebP แล้วดาวน์โหลดไฟล์ทีละไฟล์หรือเป็น ZIP

คำตอบ

คุ้มไหมที่จะแปลง PNG เป็น WebP

สำหรับรูปบนเว็บไซต์ เกือบทุกกรณีคุ้ม ภาพเดียวกันรวมถึงความโปร่งใสมักมีขนาดเล็กลงมาก และเบราว์เซอร์ปัจจุบันทุกตัวแสดงผลได้ ควรเก็บ PNG ไว้สำหรับไฟล์ที่ยังต้องแก้ไข หรือไฟล์ที่ส่งให้ผู้อื่นเปิดในซอฟต์แวร์บนเดสก์ท็อป

ทำไมนักพัฒนาเว็บจึงเปลี่ยนจาก PNG มาใช้ WebP

PNG ออกแบบมาให้ไม่สูญเสียคุณภาพ W3C กำหนดมาตรฐานในปี 1996 เป็นทางเลือกแทน GIF ที่ไม่ติดสิทธิบัตร และไม่ทิ้งข้อมูลพิกเซลเลย เหมาะกับไฟล์ต้นฉบับ แต่สิ้นเปลืองบนหน้าเว็บ เพราะภาพประกอบหลักขนาด 1600 px ที่บันทึกเป็น PNG อาจมีขนาดใหญ่กว่าสคริปต์ทั้งหมดในหน้ารวมกัน

Google เปิดตัว WebP ในปี 2010 เพื่อลดช่องว่างนี้ โดยมีสองกลไกในคอนเทนเนอร์เดียว คือโหมดไม่สูญเสียคุณภาพที่ผลเปรียบเทียบซึ่ง Google เผยแพร่เองระบุว่าเล็กกว่า PNG ประมาณ 26% และโหมดสูญเสียคุณภาพที่อิงตามโคเดกวิดีโอ VP8 ซึ่งเล็กลงอีก ทั้งสองโหมดรองรับช่องอัลฟาเต็มรูปแบบ ซึ่งทำให้โลโก้และภาพสินค้าที่ตัดพื้นหลังใช้บนพื้นสีได้ดี

เครื่องมือวัดความเร็วหน้าเว็บอย่าง PageSpeed Insights ชี้มานานแล้วว่าไฟล์ PNG และ JPEG ที่ใหญ่เกินไปเป็นจุดที่ประหยัดได้ง่าย และชุดรูปที่แปลงแล้วมักเป็นวิธีที่เร็วที่สุดในการปรับปรุง Largest Contentful Paint หากรูปต้องเปลี่ยนขนาดภาพด้วย ให้ใช้ เครื่องมือปรับขนาดรูป ก่อน แล้วค่อยแปลง

WebP มีขนาดไฟล์เล็กกว่า PNG มากเพียงใด

PNG ต้นฉบับ

1.2 MB

1600 × 900 · 24 บิตพร้อมอัลฟา ภาพสินค้าตัดพื้นหลัง

โดยทั่วไปเล็กลง 80–85%

WebP คุณภาพ 80

190 KB

1600 × 900 · สูญเสียคุณภาพ คงช่องอัลฟาไว้

PNG

Portable Network Graphics

PNG เป็นรูปแบบภาพแรสเตอร์แบบไม่สูญเสียข้อมูล (lossless) ที่ PNG Development Group เผยแพร่ในปี 1996 และต่อมาได้รับการกำหนดเป็นมาตรฐานโดย W3C และ ISO รักษาทุกพิกเซลไว้อย่างแม่นยำ รองรับพื้นหลังโปร่งใสแบบ alpha เต็มรูปแบบ และแสดงข้อความ ขอบคม และสีพื้นเรียบได้โดยไม่มีสิ่งแปลกปลอมในภาพ (artefact) ความแม่นยำนี้ทำให้เหมาะกับภาพหน้าจอ โลโก้ ไอคอน และกราฟิกส่วนติดต่อผู้ใช้ ข้อแลกเปลี่ยนคือขนาด ภาพถ่ายที่บันทึกเป็น PNG มักใหญ่กว่าภาพเดียวกันในรูปแบบ JPEG หรือ WebP หลายเท่า เบราว์เซอร์ ระบบปฏิบัติการ และโปรแกรมแต่งภาพทุกตัวเปิดไฟล์ PNG ได้

การบีบอัด: แบบไม่สูญเสียข้อมูล
พื้นหลังโปร่งใส: ได้
ภาพเคลื่อนไหว: ไม่ได้
เปิดตัว: 1996 · PNG Development Group

ตัวแปลงไฟล์ PNG

WEBP

ภาพ WebP

WebP เป็นรูปแบบภาพที่ Google เปิดตัวในปี 2010 เพื่อให้หน้าเว็บโหลดได้เร็วขึ้น รองรับทั้งการบีบอัดแบบสูญเสียข้อมูล (lossy) และแบบไม่สูญเสียข้อมูล (lossless) พื้นหลังโปร่งใสแบบ alpha และภาพเคลื่อนไหวในรูปแบบเดียว ไฟล์ WebP แบบ lossy มักเล็กกว่า JPEG ที่มีคุณภาพใกล้เคียงกัน 25–35% และ WebP แบบ lossless มักเล็กกว่า PNG เบราว์เซอร์ปัจจุบันทุกตัวรองรับ แต่ซอฟต์แวร์เดสก์ท็อปรุ่นเก่าบางตัว บริการพิมพ์ภาพ และแบบฟอร์มอัปโหลดบางแห่งยังไม่รับไฟล์นี้ Windows, macOS และโปรแกรมแต่งภาพสมัยใหม่ส่วนใหญ่เปิดไฟล์ WebP ได้

การบีบอัด: ได้ทั้งแบบสูญเสียและไม่สูญเสียข้อมูล
พื้นหลังโปร่งใส: ได้
ภาพเคลื่อนไหว: ได้
เปิดตัว: 2010 · Google

ตัวแปลงไฟล์ WEBP

เจ้าของเว็บไซต์แปลง PNG เป็น WebP เพื่อลดขนาดหน้าเว็บโดยยังคงความโปร่งใส ส่วนการแปลงจาก WebP กลับเป็น PNG ใช้เมื่อต้องการแก้ไขหรือเปิดไฟล์ในซอฟต์แวร์ที่อ่าน WebP ไม่ได้

ตัวเลขข้างต้นเป็นผลโดยทั่วไปของภาพถ่ายที่ตัดพื้นหลัง ไม่ใช่คำรับประกัน กราฟิกแบบเรียบจะเล็กลงน้อยกว่าในโหมดสูญเสียคุณภาพ และบางครั้งเล็กลงมากกว่าในโหมดไม่สูญเสียคุณภาพ ภาพหน้าจอที่เต็มไปด้วยข้อความเป็นกรณีเดียวที่ WebP แบบสูญเสียคุณภาพอาจทำให้ขอบตัวอักษรพร่า ให้ติ๊ก ไม่สูญเสียคุณภาพ กับไฟล์เหล่านี้ ก็ยังประหยัดพื้นที่ได้โดยไม่เปลี่ยนพิกเซล

ขนาดภาพ สี และความโปร่งใสคงเดิมทั้งหมด และ ลบข้อมูลเมตา (เปิดไว้โดยค่าเริ่มต้น) จะลบประวัติการแก้ไขที่เบราว์เซอร์ไม่จำเป็นต้องใช้

ก่อนอัปโหลดไฟล์ WebP ขึ้นเว็บไซต์

เก็บไฟล์ PNG ต้นฉบับไว้ในโฟลเดอร์แยก WebP เป็นสำเนาสำหรับใช้งาน ไม่ใช่ต้นฉบับสำหรับแก้ไข
ตรวจสอบว่า CMS ของคุณรับการอัปโหลดไฟล์ .webp (WordPress รองรับตั้งแต่เวอร์ชัน 5.8)
ดูรูปโปร่งใสหนึ่งรูปบนพื้นขาวและพื้นเข้ม เพื่อยืนยันว่าขอบสะอาด
เปลี่ยนการอ้างอิงรูปใน HTML หรือ CSS จาก .png เป็น .webp หรือให้ CMS สร้างภาพตัวอย่างใหม่
เปรียบเทียบขนาดหน้าเว็บก่อนและหลังในแผงเครือข่ายของเบราว์เซอร์ เพื่อให้รู้ว่าประหยัดไปเท่าใด

คำถามเกี่ยวกับการแปลง PNG เป็น WebP

แปลง PNG เป็น WebP แล้วพื้นหลังโปร่งใสยังอยู่หรือไม่

ได้ WebP เก็บช่องอัลฟาไว้ทั้งในโหมดสูญเสียและไม่สูญเสียคุณภาพ ภาพสินค้าที่ตัดพื้นหลังและโลโก้จึงยังโปร่งใสอยู่ ในโหมดสูญเสียคุณภาพ พิกเซลบริเวณขอบจะถูกบีบอัดเล็กน้อย หากเห็นขอบสว่างจาง ๆ รอบเส้นผมหรือตัวอักษรที่ละเอียด ให้แปลงไฟล์นั้นใหม่โดยติ๊ก ไม่สูญเสียคุณภาพ หากภายหลังต้องการย้อนกลับ แปลง WebP เป็น PNG จะได้ไฟล์ PNG ที่แก้ไขได้

แปลง PNG เป็น WebP ควรเลือกแบบ lossy หรือ lossless

เลือกแบบไม่สูญเสียคุณภาพเมื่อ PNG เป็น UI แบบเรียบ แผนภาพ โลโก้ หรือพิกเซลอาร์ต เพราะทุกพิกเซลคงเดิมและขนาดไฟล์มักยังลดลงได้ เลือกแบบสูญเสียคุณภาพที่ 75 ถึง 85 เมื่อ PNG เป็นรูปถ่ายหรือภาพประกอบแบบนุ่มนวล เพราะเป็นกรณีที่ประหยัดขนาดได้มากที่สุด

เบราว์เซอร์ใดบ้างที่แสดงรูป WebP ได้

Chrome, Edge, Firefox และ Opera แสดง WebP ได้มาหลายปีแล้ว ส่วน Safari รองรับตั้งแต่เวอร์ชัน 14 ในปี 2020 (บน macOS Big Sur ขึ้นไปและ iOS 14) ปัจจุบันเบราว์เซอร์ที่ใช้งานอยู่ทุกตัวแสดงผลได้ ดังนั้นแท็ก img ธรรมดาที่ชี้ไปยังไฟล์ .webp ก็เพียงพอสำหรับเว็บไซต์ส่วนใหญ่

WordPress รองรับการอัปโหลดไฟล์ WebP หรือไม่

WordPress 5.8 ที่เปิดตัวในเดือนกรกฎาคม 2021 เพิ่ม WebP เป็นประเภทไฟล์ที่อัปโหลดเข้าคลังสื่อได้ การติดตั้งรุ่นเก่ากว่านั้นจะปฏิเสธไฟล์ เว้นแต่ปลั๊กอินจะเพิ่มประเภท MIME ดังนั้นควรตรวจสอบเวอร์ชันก่อนแปลงทั้งโฟลเดอร์

ทำไมไฟล์ WebP ที่ได้จึงใหญ่กว่าไฟล์ PNG ต้นฉบับ

เกิดกับไฟล์ PNG ขนาดเล็กที่ใช้พาเลตต์แบบ indexed ไม่กี่สี เช่นไอคอน 8 สี เพราะ PNG มีประสิทธิภาพสูงอยู่แล้วในกรณีนี้ ลองใช้ ไม่สูญเสียคุณภาพ กับไฟล์เหล่านี้ และหากผลลัพธ์ยังใหญ่กว่า ให้เก็บ PNG ไว้ การประหยัดขนาดจะเห็นผลกับภาพที่ใหญ่และมีสีสันมากกว่า

แปลงไฟล์ PNG ทั้งโฟลเดอร์เป็น WebP ในครั้งเดียวได้หรือไม่

แปลงได้สูงสุด 20 ไฟล์ต่อครั้ง แต่ละไฟล์ไม่เกิน 95 MB และได้ไฟล์กลับมาพร้อมกันเป็น ZIP หากมีโฟลเดอร์ใหญ่กว่านั้น ให้ทำซ้ำเป็นชุดละ 20 ไฟล์ ไม่มีขีดจำกัดรายวัน และไฟล์ที่อัปโหลดจะถูกลบโดยอัตโนมัติหลังผ่านไป 30 นาที