PNG เทียบกับ SVG

ราสเตอร์กับเวกเตอร์

ความแตกต่างในระดับพื้นฐานที่สุดระหว่าง PNG กับ SVG ก็คือไฟล์หนึ่งเป็นประเภทไฟล์แบบราสเตอร์ ขณะที่อีกไฟล์เป็นแบบเวกเตอร์

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับไฟล์แบบราสเตอร์เมื่อเทียบกับไฟล์แบบเวกเตอร์

ขนาดไฟล์

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

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

การบีบอัด

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

ไฟล์ PNG เองก็ให้ประโยชน์จากการบีบอัดแบบไม่สูญเสียข้อมูลในอัตราส่วน 5-20% ซึ่งสามารถช่วยชดเชยขนาดไฟล์ที่ใหญ่ได้ อย่างไรก็ตาม ไฟล์ประเภทนี้ก็มักมีขนาดใหญ่กว่า SVG

การถ่ายภาพ

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

ในทางกลับกัน ไฟล์ SVG ไม่ได้ใช้พิกเซล จึงมีปัญหาในการแสดงภาพถ่ายในระดับมาตรฐานที่สูง

การใช้งานบนเว็บ

ทั้งไฟล์ PNG และ SVG ต่างก็สามารถแสดงรายละเอียดในระดับที่ซับซ้อนสำหรับกราฟิกบนเว็บ ภาพประกอบ โลโก้ อินโฟกราฟิก และตารางได้

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

นอกจากนี้ ไฟล์ SVG โดยทั่วไปแล้วยังมีขนาดเล็กกว่า จึงโหลดบนหน้าเว็บได้เร็วกว่าด้วย ระยะเวลาการโหลดหน้าเว็บเป็นอีกหนึ่งองค์ประกอบที่สำคัญมากในการจัดอันดับของโปรแกรมค้นหา

ทั้งนี้ ไฟล์ PNG เองก็รองรับกราฟิกแบบข้อความบางส่วนเช่นกัน แต่ไม่รองรับมากเท่า SVG

ความเข้ากันได้และความซับซ้อน

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

ในทางกลับกัน PNG เป็นไฟล์รูปแบบมาตรฐานสำหรับโลกออนไลน์ที่เว็บเบราว์เซอร์และระบบปฏิบัติการต่างๆ ให้การรับรองอย่างแพร่หลาย

ภาพเคลื่อนไหว

ไฟล์ PNG ไม่รองรับภาพเคลื่อนไหว ต่างกับไฟล์รูปภาพแบบราสเตอร์ที่คล้ายกันอย่าง GIF

ส่วนไฟล์ SVG นั้นรองรับภาพเคลื่อนไหว แต่ก็ไม่พร้อมที่จะรองรับเท่ากับไฟล์ประเภทอื่นๆ เช่น AI ซึ่งเป็นรูปแบบในระบบของ Adobe Illustrator

เรียนรู้เพิ่มเติมเกี่ยวกับไฟล์ AI

ความโปร่งใส

ไฟล์ PNG และ SVG รองรับความโปร่งใส ทั้งสองจึงเป็นตัวเลือกที่ยอดเยี่ยมสำหรับโลโก้และกราฟิกบนโลกออนไลน์

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

1. เปิด Adobe Illustrator
2. คลิก File (ไฟล์) > Open (เปิด) แล้วเลือกรูปภาพจากในคอมพิวเตอร์
3. คลิก Open (เปิด)
4. คลิกตัวเลือก Trace (ลอกลาย) จากเมนูด้านบนและเลือก Image Trace (ลอกลายรูปภาพ)
5. ปรับแต่งการแปลงไฟล์ให้เป็นไปตามข้อกำหนดที่คุณต้องการ ทั้งนี้ การดำเนินการนี้อาจทำให้สีของรูปภาพเปลี่ยนไปได้
6. หลังจากเสร็จสิ้นกระบวนการแล้ว ให้เลือกรูปภาพที่ทำการลอกลายแล้วคลิก Ungroup (ยกเลิกการจัดกลุ่ม) ซึ่งจะเป็นการแยกรูปทรงสีออกมา
7. คลิก File (ไฟล์) > Export (ส่งออก)
8. บันทึกไฟล์ของคุณเป็น SVG

1. เปิด Adobe Photoshop
2. คลิก File (ไฟล์) > Open (เปิด)
3. เลือกไฟล์ SVG จากในคอมพิวเตอร์
4. คลิก Export (ส่งออก) > Export As (ส่งออกเป็น) > PNG
5. บันทึกไฟล์ของคุณเป็น PNG