ใช้ SVG เมื่อต้องใช้โลโก้หลายขนาดหรือแก้ไขส่วนต่าง ๆ ของภาพ ถ้า PNG ชัดในขนาดที่ต้องการอยู่แล้ว ก็ใช้ต่อได้ ทั้งสองฟอร์แมตมีพื้นหลังโปร่งใสได้
เลือกตามงาน
- โลโก้หลายขนาด: ใช้ SVG ต้นฉบับถ้ามี และเช็กว่ายังอ่านได้ในขนาดเล็กสุด
- โลโก้กว้าง 200 พิกเซลบนเว็บ: PNG ที่ชัดอาจเพียงพอ ตรวจทั้งบนโทรศัพท์และคอมพิวเตอร์
- ภาพถ่าย: ใช้ PNG, JPEG หรือ WebP ตามที่แอปรองรับ
- เปลี่ยนสีหรือเส้นโค้งบางส่วน: ใช้ SVG แล้วลองเลือกส่วนนั้นในโปรแกรมวาดภาพ
- แอปไม่รับ SVG: ใช้ PNG ตามขนาดที่กำหนด และตรวจบนพื้นหลังจริง
PNG ควรใหญ่แค่ไหน?
ถ้าแสดงโลโก้กว้าง 200 พิกเซล PNG กว้าง 400 พิกเซลจะมีพิกเซลเผื่อสำหรับจอ 2× แต่ควรสร้างจากต้นฉบับที่ใหญ่กว่า การยืดภาพจาก 100 เป็น 400 พิกเซลไม่ได้กู้รายละเอียดที่หายไป
SVG ทำให้ไฟล์เล็กลงไหม?
บางครั้ง โลโก้เรียบง่ายอาจใช้รูปทรงเพียงไม่กี่ชิ้น แต่ภาพละเอียดอาจใช้หลายพันชิ้นและได้ไฟล์ใหญ่กว่า PNG เทียบทั้งขนาดไฟล์และหน้าตาก่อนเปลี่ยนภาพบนเว็บไซต์
ถ้าต้องการแค่พื้นหลังโปร่งใส?
PNG ก็ทำได้ ลองวางบนสีเข้ม หากยังเห็นกรอบขาวหรือตารางหมากรุก แสดงว่าสิ่งนั้นเป็นส่วนหนึ่งของภาพ ต้องนำออกก่อน
ภาพเดียวกันในสองฟอร์แมต
PNG ของสุนัขส่งจดหมายด้านล่างอาจเพียงพอสำหรับภาพประกอบเล็ก ๆ บนเว็บ ถ้าต้องเปลี่ยนซองจดหมายสีแดง ให้เปิด SVG แล้วเลือกรูปทรงของซอง พื้นหลังฟ้าอ่อนเป็นส่วนหนึ่งของภาพและยังคงอยู่หลังแปลง การเลือก SVG ไม่ได้ลบพื้นหลังให้อัตโนมัติ
