แปลง SVG เป็น WebP
เรนเดอร์ไฟล์เวกเตอร์ให้เป็น WebP ที่ความกว้างพิกเซลตรงตามที่เลย์เอาต์ต้องการ เหมาะเมื่อ CMS ไม่ยอมรับการอัปโหลด SVG เมื่อพรีวิวบนโซเชียลต้องใช้ภาพบิตแมป หรือเมื่อภาพประกอบมีพาธจำนวนมากจนเบราว์เซอร์วาดภาพได้ช้า
แปลงไฟล์รูปภาพ
หรือลากไฟล์ JPG, JPEG, JPE … มาวางที่นี่ ·
สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที
ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที
ค่า 85 ทำให้ภาพถ่ายดูเหมือนต้นฉบับทุกประการ ควรลดค่านี้เฉพาะเมื่อต้องการไฟล์ที่เล็กลง
JPG, BMP และ EPS ไม่รองรับความโปร่งใส พิกเซลโปร่งใสจะถูกเติมด้วยสีนี้
รหัสสีแบบ Hex ที่ใช้แทนพิกเซลโปร่งใส เช่น #FFFFFF
รูปแบบนี้เก็บภาพได้เพียงภาพเดียว หากต้องการคงภาพเคลื่อนไหวไว้ ให้เลือกผลลัพธ์เป็น GIF หรือ WebP
ไอคอนหลายขนาดจะรวมความละเอียดหลายระดับไว้ในไฟล์เดียว เบราว์เซอร์และระบบปฏิบัติการจะเลือกขนาดที่ต้องใช้เอง
คงขนาดภาพเดิมไว้ หรือกำหนดด้านใดด้านหนึ่ง โดยระบบจะคงอัตราส่วนภาพไว้
จำนวนพิกเซลของด้านที่เลือกไว้ด้านบน
เปอร์เซ็นต์ของขนาดภาพต้นฉบับ
sRGB เหมาะสำหรับหน้าจอและเว็บไซต์ ควรคงค่าเดิมไว้สำหรับงานพิมพ์ ส่วนระดับสีเทาจะตัดสีออกทั้งหมด
เป็นข้อมูลเมตาเท่านั้น ค่า 0 จะคงค่าเดิมไว้ เครื่องพิมพ์และบางเว็บไซต์จะอ่านค่านี้ แต่จะไม่เปลี่ยนขนาดภาพเป็นพิกเซล
วิธีใช้เครื่องมือนี้
- 1
อัปโหลดไฟล์ SVG
เพิ่มไฟล์ .svg ได้สูงสุด 20 ไฟล์ ที่ส่งออกจาก Figma, Illustrator, Inkscape หรือไลบรารีสร้างกราฟ ไฟล์ละไม่เกิน 95 MB
- 2
กำหนดความกว้างของไฟล์ผลลัพธ์
ปรับขนาดภาพผลลัพธ์ เริ่มต้นที่ความกว้าง 1200 px ให้เปลี่ยนเป็นสองเท่าของความกว้างที่ภาพจะแสดงบนหน้าเว็บ คุณภาพ ตั้งไว้ที่ 90 หรือติ๊ก ไม่สูญเสียคุณภาพ ใน การตั้งค่าขั้นสูง สำหรับโลโก้และไอคอนแบบสีเรียบ
- 3
แปลงเป็น WebP
กด แปลงเป็น WebP แล้วดาวน์โหลดไฟล์ทีละไฟล์หรือเป็น ZIP เดียว พื้นที่โปร่งใสจะยังคงโปร่งใส
แปลง SVG เป็น WebP ตามขนาดที่กำหนดได้อย่างไร
อัปโหลด SVG ตั้ง ปรับขนาดภาพผลลัพธ์ เป็นความกว้างเป็นพิกเซลที่ต้องการ (ค่าเริ่มต้น 1200 px) แล้วกด แปลงเป็น WebP เวกเตอร์จะถูกวาดใหม่ที่ความกว้างนั้น จึงไม่มีการขยายภาพหรือภาพเบลอ
เมื่อใดควรแปลง SVG เป็น WebP
SVG เป็นคำแนะนำของ W3C ตั้งแต่ปี 2001 และเป็นฟอร์แมตที่เหมาะกับโลโก้และไอคอนส่วนใหญ่ คือข้อความไม่กี่กิโลไบต์ที่คมชัดทุกระดับการซูม ปัญหาเริ่มเมื่อไฟล์ออกจากโค้ดของคุณ WordPress และระบบสร้างร้านค้าออนไลน์จำนวนมากไม่รับอัปโหลด SVG ภาพตัวอย่างลิงก์บน Facebook, LinkedIn และ X ถูกดึงเป็นบิตแมป และเครื่องมือออกแบบส่งออกภาพประกอบที่ฝังเอฟเฟกต์แรสเตอร์ ทำให้ไฟล์เวกเตอร์กลายเป็นมาร์กอัปหลายเมกะไบต์
WebP ซึ่ง Google เปิดตัวในปี 2010 และ Safari รองรับในเวอร์ชัน 14 เมื่อปี 2020 เป็นบิตแมปที่ออกแบบมาสำหรับงานนี้ ไฟล์เล็กกว่า PNG ที่หน้าตาเท่ากัน และมีช่องอัลฟาจริง การเรนเดอร์ SVG เป็น WebP ที่ขนาดสุดท้ายโดยตรงช่วยข้ามขั้นตอนอ้อมไปส่งออกเป็น PNG ขนาดใหญ่ หากต้องการทิศทางกลับกัน หน้า WebP เป็น SVG อธิบายว่าเหตุใดจึงต้องลอกเส้นแทนการแปลง
ขนาดการแปลง SVG เป็น WebP สำหรับตำแหน่งภาพที่ใช้บ่อยบนเว็บ
1200 × 630 px
ภาพตัวอย่างลิงก์ Open Graph
ภาพที่แสดงเมื่อมีการแชร์หน้าเว็บ
1920 × 1080 px
ภาพประกอบ hero เต็มความกว้าง
ครอบคลุมหน้าจอเดสก์ท็อปส่วนใหญ่ที่ 1×
1600 × 900 px
ภาพในคอลัมน์บล็อกที่ 2×
สำหรับคอลัมน์เนื้อหากว้าง 800 px
400 × 100 px
โลโก้ส่วนหัวที่ 2×
สำหรับช่องโลโก้ขนาด 200 × 50 px
SVG
Scalable Vector Graphics
SVG เป็นรูปแบบเวกเตอร์ที่อิงกับ XML ซึ่ง W3C กำหนดเป็นมาตรฐานในปี 2001 แทนที่จะใช้พิกเซล จะอธิบายรูปทรง เส้นพาธ และข้อความ จึงคมชัดในทุกขนาด และมักมีขนาดเล็กมากสำหรับโลโก้และไอคอน รองรับพื้นหลังโปร่งใส การจัดสไตล์ด้วย CSS สคริปต์ และภาพเคลื่อนไหว และเบราว์เซอร์ทุกตัวแสดงผลได้โดยตรง SVG ไม่เหมาะกับภาพถ่าย และภาพประกอบที่ซับซ้อนอาจแสดงผลช้า Illustrator, Inkscape, Figma และเบราว์เซอร์เปิดและแก้ไขไฟล์นี้ได้
- การบีบอัด
- –
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ได้
- เปิดตัว
- 2001 · W3C
WEBP
ภาพ WebP
WebP เป็นรูปแบบภาพที่ Google เปิดตัวในปี 2010 เพื่อให้หน้าเว็บโหลดได้เร็วขึ้น รองรับทั้งการบีบอัดแบบสูญเสียข้อมูล (lossy) และแบบไม่สูญเสียข้อมูล (lossless) พื้นหลังโปร่งใสแบบ alpha และภาพเคลื่อนไหวในรูปแบบเดียว ไฟล์ WebP แบบ lossy มักเล็กกว่า JPEG ที่มีคุณภาพใกล้เคียงกัน 25–35% และ WebP แบบ lossless มักเล็กกว่า PNG เบราว์เซอร์ปัจจุบันทุกตัวรองรับ แต่ซอฟต์แวร์เดสก์ท็อปรุ่นเก่าบางตัว บริการพิมพ์ภาพ และแบบฟอร์มอัปโหลดบางแห่งยังไม่รับไฟล์นี้ Windows, macOS และโปรแกรมแต่งภาพสมัยใหม่ส่วนใหญ่เปิดไฟล์ WebP ได้
- การบีบอัด
- ได้ทั้งแบบสูญเสียและไม่สูญเสียข้อมูล
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ได้
- เปิดตัว
- 2010 · Google
ผู้คนแปลง SVG เป็น WebP เพื่อให้ได้บิตแมปขนาดเล็กและมีขนาดคงที่ สำหรับที่ที่ไม่รับไฟล์เวกเตอร์หรือวาดได้ช้า เช่น CMS ภาพตัวอย่างบนโซเชียล หรือแลนดิงเพจที่มีผู้เข้าชมมาก ส่วนการแปลง WebP เป็น SVG เป็นงานลอกเส้น ไม่ใช่การสลับฟอร์แมต
วิธีแปลง SVG เป็นภาพบิตแมปและสิ่งที่ควรตรวจสอบ
ตัวแปลงจะอ่านความกว้าง ความสูง และ viewBox ของ SVG แล้ววาดทุกพาธที่ความกว้างที่คุณตั้ง ส่วนความสูงเป็นไปตามอัตราส่วนภาพ เนื่องจากการวาดเกิดขึ้นที่ขนาดสุดท้าย เส้นบางและข้อความขนาดเล็กจึงถูกทำให้เรียบเพียงครั้งเดียวในสเกลที่ถูกต้อง การขยาย PNG ขนาดเล็กทีหลังไม่เคยสะอาดเท่านี้
ฟอนต์มักเป็นเรื่องที่ทำให้แปลกใจ หาก SVG ระบุฟอนต์ที่ไม่ได้ฝังหรือแปลงเป็นเส้นโครง ระบบจะใช้ฟอนต์สำรองและความยาวบรรทัดจะเปลี่ยนไป ควรแปลงข้อความเป็นเส้นโครงในเครื่องมือออกแบบก่อนส่งออก ภาพภายนอกที่ลิงก์ด้วย URL ใน SVG จะไม่ถูกดึงมา จึงควรฝังภาพหรือรวมเลเยอร์งานก่อน
แปลง SVG เป็น WebP: สิ่งที่ควรทำและไม่ควรทำ
| ควรทำ | ไม่ควรทำ |
|---|---|
| เรนเดอร์ที่ 2 เท่าของความกว้าง CSS ที่แสดงจริง | แปลงไอคอนอินไลน์ง่าย ๆ ที่เป็น SVG แล้วเล็กกว่า |
| ใช้ ไม่สูญเสียคุณภาพ กับโลโก้สีเรียบที่มีสีน้อย | เรนเดอร์ที่ 4000 px สำหรับช่องกว้าง 600 px |
| เก็บ SVG ต้นฉบับไว้สำหรับขนาดอื่นในอนาคต | ส่ง WebP ในจดหมายข่าวทางอีเมล |
| ใส่แอตทริบิวต์ width และ height ให้ WebP เพื่อหลีกเลี่ยงเลย์เอาต์ขยับ | คาดหวังข้อความที่แก้ไขได้ เพราะ WebP เป็นพิกเซล ไม่ใช่ตัวอักษรที่เลือกได้ |
คำถามเกี่ยวกับการแปลง SVG เป็น WebP
ควรใช้ความกว้างกี่พิกเซลเมื่อแปลง SVG เป็น WebP
ให้นำความกว้างที่ภาพแสดงใน CSS พิกเซลมาคูณสอง เพื่อให้ภาพยังคมชัดบนหน้าจอโทรศัพท์และแล็ปท็อปที่มีความหนาแน่นพิกเซลสูง ภาพประกอบที่แสดงในคอลัมน์กว้าง 800 px ควรเรนเดอร์ที่ 1600 px การเพิ่มเป็น 3 เท่าแทบไม่คุ้มบนเว็บ เพราะไฟล์ใหญ่ขึ้นแต่ความคมชัดที่เห็นเพิ่มขึ้นเพียงเล็กน้อย
WebP ดีกว่า SVG สำหรับเว็บไซต์หรือไม่
ไม่จำเป็นสำหรับโลโก้ ไอคอน และไดอะแกรมแบบเรียบง่าย เพราะ SVG ที่สะอาดมีขนาดเล็กและคมชัดทุกขนาด จึงควรเก็บไว้ WebP เหมาะกับภาพประกอบซับซ้อนที่มีการไล่สี ฟิลเตอร์ หรือพาธนับพัน และเหมาะกับที่ที่รับเฉพาะบิตแมป เช่น ภาพตัวอย่างบนโซเชียลหรือ CMS ที่ไม่รองรับ SVG
ไฟล์ WebP ยังคงพื้นหลังโปร่งใสของ SVG ไว้หรือไม่
ได้ WebP มีช่องอัลฟาเต็มรูปแบบทั้งโหมดสูญเสียและไม่สูญเสียคุณภาพ พื้นที่ที่ไม่มีสีเติมใน SVG จึงยังโปร่งใส ขอบของรูปทรงถูกทำให้เรียบกับพื้นหลังโปร่งใส จึงดูเหมาะสมบนสีพื้นหลังใดก็ได้
ภาพเวกเตอร์ควรใช้ WebP แบบ Lossy หรือ Lossless
แบบไม่สูญเสียคุณภาพเหมาะกับโลโก้ ไอคอน และแผนภูมิสีเรียบที่มีสีทึบไม่กี่สี ซึ่งบีบอัดได้ดีมากและขอบสะอาดสมบูรณ์ ส่วนแบบสูญเสียที่คุณภาพ 85 ถึง 90 เหมาะกับภาพประกอบที่มีการไล่สี เงา หรือพื้นผิว ซึ่งไฟล์แบบไม่สูญเสียคุณภาพจะมีขนาดใหญ่ ลองทั้งสองแบบกับไฟล์เดียวแล้วเลือกผลลัพธ์ที่เล็กกว่าและยังดูสะอาด
ทำไมจึงอัปโหลด SVG ขึ้น WordPress ไม่ได้
WordPress ไม่อนุญาตให้อัปโหลด SVG เพราะ SVG อาจมีสคริปต์ฝังอยู่ แต่รองรับ WebP ตั้งแต่เวอร์ชัน 5.8 ที่ออกในปี 2021 การแปลงจึงให้ไฟล์ที่คลังสื่อรับได้โดยไม่ต้องใช้ปลั๊กอินด้านความปลอดภัย เว็บไซต์ที่ต้องการเวกเตอร์จริงยังเพิ่มการรองรับ SVG ได้ด้วยปลั๊กอินที่ตรวจสอบและกรองโค้ด
ใช้ไฟล์ WebP ในจดหมายข่าวทางอีเมลได้หรือไม่
ควรหลีกเลี่ยง อีเมลไคลเอนต์หลายตัว รวมถึง Outlook บนเดสก์ท็อปของ Windows ไม่แสดง WebP และ Gmail ก็ไม่แสดง SVG เช่นกัน ให้เรนเดอร์ภาพด้วย แปลง SVG เป็น PNG สำหรับอีเมลแทน
