🚀
เล็กกว่า JPG 25–35%
WebP ใช้การเข้ารหัสเชิงทำนายจากโคเดควิดีโอ VP8 สำหรับภาพ ที่คุณภาพภาพเดียวกัน ไฟล์จะเล็กกว่า JPG ทั่วไป 25–35%; ในการตั้งค่าที่เหมาะสมที่สุดเล็กลงได้ถึง 50% ชัยชนะโดยตรงสำหรับข้อมูลมือถือและแบนด์วิดท์เซิร์ฟเวอร์
แปลง JPG, PNG, GIF และ HEIC จาก iPhone เป็นรูปแบบ WebP สมัยใหม่ ที่คุณภาพภาพเทียบเท่ากัน WebP มักเล็กกว่า JPG 25–35% — ชัยชนะโดยตรงสำหรับ Core Web Vitals, Google PageSpeed และเวลาโหลดบนมือถือ คงความโปร่งใสของ PNG ไว้
วางรูปภาพ เลือกโหมดและคุณภาพ บันทึกเป็น WebP
หรือคลิกเพื่อเลือก — .jpg, .png, .gif, .heic
เครื่องมือ WebP ที่แยกโหมดมีการสูญเสียและไม่มีการสูญเสียได้อย่างถูกต้อง
WebP ใช้การเข้ารหัสเชิงทำนายจากโคเดควิดีโอ VP8 สำหรับภาพ ที่คุณภาพภาพเดียวกัน ไฟล์จะเล็กกว่า JPG ทั่วไป 25–35%; ในการตั้งค่าที่เหมาะสมที่สุดเล็กลงได้ถึง 50% ชัยชนะโดยตรงสำหรับข้อมูลมือถือและแบนด์วิดท์เซิร์ฟเวอร์
ต่างจาก JPG, WebP รองรับช่องอัลฟา — โลโก้ ไอคอน และกราฟิก PNG ยังคงความโปร่งใสใน WebP WebP แบบไม่มีการสูญเสียพร้อมอัลฟามักเล็กกว่า PNG ต้นฉบับ 26% เหมือนต้นฉบับทุกพิกเซล
มีการสูญเสียสำหรับภาพถ่าย (เล็กลง สูญเสียทางสายตาน้อย) ไม่มีการสูญเสียสำหรับโลโก้และกราฟิกที่มีเส้นขอบคม (เหมือนทุกพิกเซล) เราแยกสองโหมดอย่างชัดเจน — เครื่องมืออื่นผสมกัน ทำให้ได้ WebP ของโลโก้ใหญ่เกินจำเป็น
Google PageSpeed Insights เตือนชัดเจนเมื่อคุณยังใช้ JPG/PNG แทน WebP/AVIF เพียงอัปเดตเป็น WebP มักได้คะแนน Mobile เพิ่ม 8–15 จุด — และ LCP ดีขึ้น เป็นปัจจัย SEO โดยตรงตั้งแต่ปี 2021
หลังแปลง เครื่องมือแสดงทันที: ขนาดต้นฉบับ ขนาด WebP เปอร์เซ็นต์ที่ประหยัด คุณเห็นชัดว่าภาพ hero ประหยัดในแคชเบราว์เซอร์ของผู้เข้าชมได้แค่ไหน
Chrome, Edge, Firefox และ Safari 14+ มีตัวเข้ารหัส WebP ในตัว — เราใช้ผ่าน Canvas API เร็วกว่าไลบรารี JavaScript ใดๆ และทำงานในเบราว์เซอร์ทั้งหมด ไม่อัปโหลด ไม่ใช้คลาวด์ ไม่ประมวลผลที่เซิร์ฟเวอร์
สามขั้นตอน ใช้ได้ดีทั้งภาพถ่ายและโลโก้
JPG, PNG, GIF หรือ HEIC ของ iPhone ผ่านการลากและวางหรือกล่องเลือกไฟล์ HEIC ใช้ได้ใน Safari และ Chrome บน Mac
มีการสูญเสียสำหรับภาพถ่าย (80% คือจุดที่เหมาะที่สุด) ไม่มีการสูญเสียสำหรับโลโก้ ไอคอน สกรีนช็อตที่มีข้อความ — เหมือนต้นฉบับทุกพิกเซลและยังเล็กกว่า PNG ~25%
คลิกแปลง ระบบเปรียบเทียบขนาดทันที ดาวน์โหลดเป็น .webp
ที่ที่การเปลี่ยนมาใช้ WebP ให้ผลที่วัดได้
CMS สมัยใหม่ทุกตัวเสิร์ฟ WebP อัตโนมัติเมื่อมีไฟล์ — หลายตัวยังแปลงตอนอัปโหลดด้วย ไฟล์ต้นฉบับคุณภาพสูงถูกปรับให้เหมาะสมล่วงหน้าด้วยเครื่องมือของเรา เพื่อให้เวอร์ชันของ CMS เริ่มจากขนาดที่เล็ก
การตรวจสอบของ Lighthouse ทำเครื่องหมาย JPG/PNG ว่า "Serve images in next-gen formats" — เป็นทั้งปัจจัยประสิทธิภาพและ SEO วิธีแก้ที่ง่ายที่สุด: เสิร์ฟภาพ hero, แบนเนอร์ และภาพส่วนหัวทั้งหมดเป็น WebP
iOS (14+) และ Android รองรับ WebP โดยตรง ชุดแอสเซตของแอปเล็กลง 30–40% ด้วย WebP แทน PNG/JPG — ดาวน์โหลดจาก App Store เร็วขึ้น อยู่ใต้เกณฑ์ "น้อยกว่า 200 MB สำหรับเซลลูลาร์" ได้ง่ายขึ้น
SVG เป็นตัวเลือกแรกสำหรับโลโก้ แต่สำหรับโลโก้ซับซ้อนที่มีไล่สี WebP แบบไม่มีการสูญเสียมักเล็กกว่าการส่งออก PNG เทียบเท่าจาก Figma/Sketch คงความโปร่งใส — เหมาะกับพื้นหลังทั้งสว่างและมืด
ภาพสินค้า 10 ใบต่อรายการ × 1000 สินค้า = 10,000 ภาพ ทุก 30% ที่เล็กลงประหยัดพื้นที่เซิร์ฟเวอร์ แบนด์วิดท์ CDN และปรับปรุงอัตราการเปลี่ยนเป็นลูกค้าบนมือถืออย่างเห็นได้ชัด (งานวิจัย: โหลดเร็วขึ้น 100 ms = ซื้อเพิ่ม 1–2%)
Mailchimp, Klaviyo, ActiveCampaign รองรับ WebP ในไคลเอนต์เมลสมัยใหม่ นิวส์เลตเตอร์ที่มีภาพ WebP โหลดเร็วขึ้น เพิ่ม engagement ส่วน above-the-fold ได้อย่างวัดผลได้ Outlook 2019 ใช้ WebP ไม่ได้ — ยังต้องมี fallback JPG สำหรับความเข้ากันได้กับไคลเอนต์ต่างๆ
WebP เป็นรูปแบบภาพสมัยใหม่จาก Google (ตั้งแต่ปี 2010 รองรับเบราว์เซอร์อย่างกว้างขวางตั้งแต่ปี 2020) ผสมผสานคุณภาพของ JPEG กับการบีบอัดที่ดีกว่าประมาณ 25–35% — และรองรับความโปร่งใสเหมือน PNG รวมถึงภาพเคลื่อนไหวเหมือน GIF สำหรับเว็บไซต์ถือเป็นชัยชนะด้านประสิทธิภาพโดยตรง
Chrome, Firefox, Edge, Opera, Brave: รองรับเต็มที่มาหลายปีแล้ว Safari: ตั้งแต่เวอร์ชัน 14 (macOS Big Sur, iOS 14, ฤดูใบไม้ร่วงปี 2020) ครอบคลุมกว่า 97% ของเบราว์เซอร์ในปัจจุบัน สำหรับส่วนที่เหลือไม่กี่เปอร์เซ็นต์ ให้ใช้องค์ประกอบ <picture> พร้อม fallback เป็น JPG — แต่เว็บส่วนใหญ่ไม่จำเป็นต้องทำแบบนั้นแล้ว
ใช่ WebP รองรับช่องอัลฟา (ความโปร่งใส) อย่างเป็นธรรมชาติ — ทั้งในโหมดมีการสูญเสียและไม่มีการสูญเสีย PNG ที่มีพื้นหลังโปร่งใสจะกลายเป็น WebP ที่มีพื้นหลังโปร่งใส โดยปกติเล็กกว่า PNG ต้นฉบับประมาณ 30%
มีการสูญเสีย (คุณภาพ 75–85): สำหรับภาพถ่าย ในเชิงสายตาแทบแยกไม่ออกจากต้นฉบับ เล็กกว่า JPG 25–35% ไม่มีการสูญเสีย (คุณภาพ 100): สำหรับโลโก้ ไอคอน สกรีนช็อต กราฟิกที่มีเส้นขอบคม — เหมือนต้นฉบับทุกพิกเซล และเล็กกว่า PNG ประมาณ 25%
Vital หลักสำหรับรูปภาพคือ LCP (Largest Contentful Paint) ซึ่งโดยปกติคือภาพ hero เหนือ fold ภาพ hero JPG ขนาด 1.5 MB กลายเป็น WebP 1.0 MB — ดีกว่าสำหรับ 4G บนมือถือ ใน Google PageSpeed Insights เพียงแค่อัปเดตเป็น WebP มักได้คะแนน Mobile เพิ่มขึ้น 8–15 จุด
ในหน้านี้ใช่ — เราแปลงเฉพาะเฟรมแรกเป็น WebP แบบนิ่ง WebP เคลื่อนไหวยังสร้างจาก API ของเบราว์เซอร์บางตัวไม่ได้โดยตรง สำหรับ WebP เคลื่อนไหวปัจจุบันต้องใช้เครื่องมือเฉพาะทาง (ffmpeg, ImageMagick)
ใช้งานได้ใน Safari (macOS และ iOS) และ Chrome บน macOS — เบราว์เซอร์ถอดรหัส HEIC โดยตรง บน Chrome ของ Windows และเบราว์เซอร์ Android ขาดการถอดรหัส HEIC; ให้แปลง HEIC เป็น JPG ก่อนด้วยฟังก์ชันในตัวของ iPhone
ไม่ การเข้ารหัส WebP ทำงานผ่าน Canvas API ในเบราว์เซอร์โดยตรง — Chrome/Edge/Firefox มีตัวเข้ารหัส WebP ในตัว ไม่มีการรับส่งกับเซิร์ฟเวอร์ ไม่มีล็อก หน้าเว็บทำงานแบบออฟไลน์ได้เมื่อโหลดเสร็จแล้ว
WebP เป็นรูปแบบภาพที่ Google แนะนำบนเว็บตั้งแต่ปี 2020 ผสมผสานจุดแข็งของ JPEG (การบีบอัดภาพถ่ายที่ดี) และจุดแข็งของ PNG (ความโปร่งใส การบีบอัดแบบไม่มีการสูญเสีย) ในรูปแบบเดียว — และเล็กกว่า JPG หรือ PNG เทียบเท่า 25–35% เจ้าของเว็บไซต์ที่เปลี่ยนมาใช้ WebP อย่างสม่ำเสมอจะสามารถลดต้นทุนแบนด์วิดท์ได้อย่างวัดผลได้ ปรับปรุงเวลาโหลดอย่างเห็นได้ชัด และยกระดับคะแนน Google PageSpeed อย่างมีนัยสำคัญในการตรวจสอบของ Lighthouse ตัวแปลงออนไลน์ของเราทำให้การเปลี่ยนนี้ง่าย — ในเบราว์เซอร์โดยตรง ไม่อัปโหลด
เราโหลดรูปภาพลงในแคนวาส HTML5 และเรียก canvas.toDataURL('image/webp', quality) เมธอดนี้มีในตัว Chrome, Edge, Firefox และ Safari 14+ และใช้ตัวเข้ารหัส WebP เนทีฟของระบบปฏิบัติการ หรือการใช้งาน libwebp ภายในของเบราว์เซอร์ ซึ่งเร็วกว่า polyfill JavaScript ใดๆ และให้ผลลัพธ์เทียบเท่ากับ cwebp CLI ของ Google
WebP แบบมีการสูญเสีย ใช้การเข้ารหัสเชิงทำนาย (สืบทอดจากโคเดควิดีโอ VP8): แต่ละพิกเซลถูกทำนายจากเพื่อนบ้าน และเก็บเฉพาะส่วนต่าง มีประสิทธิภาพสำหรับภาพถ่ายที่มีการไล่สีนุ่มและพื้นผิวละเอียด แต่ข้อมูลรายละเอียดเล็กๆ จะหายไป จุดที่เหมาะที่สุด: คุณภาพ 75–85% WebP แบบไม่มีการสูญเสีย ไม่สูญเสียและใช้อัลกอริทึมที่ต่างออกไป (อิงการอ้างย้อนแบบ LZW) เหมือนต้นฉบับทุกพิกเซล — เหมาะสำหรับโลโก้ ไอคอน สกรีนช็อตที่มีข้อความ และกราฟิกที่ทุกพิกเซลสำคัญ มักเล็กกว่า PNG เทียบเท่า 25%
WebP รองรับโดยเบราว์เซอร์ที่เกี่ยวข้องเกือบทุกตัวในปัจจุบัน: Chrome 32+ (ตั้งแต่ปี 2014), Firefox 65+ (ตั้งแต่ปี 2019), Edge 18+ (ตั้งแต่ปี 2018), Opera 19+ และที่สำคัญ Safari 14+ (ตั้งแต่ Big Sur และ iOS 14, ฤดูใบไม้ร่วงปี 2020) การรองรับทั่วโลกตาม caniuse.com อยู่ที่กว่า 97% สำหรับอีก 3% ที่เหลือ (สมาร์ตทีวีเก่า เบราว์เซอร์ Android เก่ามาก Outlook 2019) ให้ใช้องค์ประกอบ HTML <picture> พร้อม fallback JPG ในทางปฏิบัติ เว็บสมัยใหม่ส่วนใหญ่ไม่จำเป็นต้องทำแบบนั้นแล้ว
ตั้งแต่ปี 2021 Core Web Vitals เป็นปัจจัยจัดอันดับอย่างเป็นทางการของ Google LCP (Largest Contentful Paint) — ปกติคือภาพ hero ขนาดใหญ่เหนือ fold — ควรอยู่ใต้ 2.5 วินาที ด้วย hero JPG 1.5 MB บน 4G เป็นเรื่องยาก ด้วย WebP 1.0 MB จริงกว่ามาก Lighthouse เตือนชัดเจนใน "Opportunities — Serve images in next-gen formats" และหักคะแนนอย่างวัดได้ เพียงการย้ายไป WebP มักได้คะแนน Mobile เพิ่ม 8–15 จุด
ไลบรารีโลโก้ ชุดไอคอน และกราฟิกตัดของสินค้าตามประเพณีอยู่ในรูปแบบ PNG — เพราะ PNG มีความโปร่งใสและ JPG ไม่มี WebP ทำได้ทั้งสองอย่าง: ความโปร่งใส และการบีบอัดที่ดีกว่า PNG อย่างมีนัยสำคัญ WebP แบบไม่มีการสูญเสียพร้อมอัลฟามักเล็กกว่า PNG เดียวกัน 26% สำหรับไลบรารีโลโก้ที่มี 500 โลโก้แบรนด์ นั่นคือพื้นที่เซิร์ฟเวอร์และ CDN ที่ประหยัดได้อย่างวัดผลได้
สำหรับงานที่คล้ายแต่ต่างกัน: บีบอัดรูปภาพ คงรูปแบบไว้ ลดเฉพาะขนาด ปรับขนาดรูปภาพ เปลี่ยนขนาดพิกเซล JPG เป็น PNG และ PNG เป็น JPG สำหรับการเปลี่ยนรูปแบบคลาสสิก สำหรับการแก้ไขภาพเต็มสไตล์ Lightroom: ตัวแก้ไขภาพ รวมหลายภาพเป็น PDF: รูปภาพเป็น PDF