SVG กับ PNG สำหรับกราฟิกเว็บ: เมื่อใดจึงควรใช้แต่ละรูปแบบ

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

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

SVG สามารถจัดสไตล์ด้วย CSS และจัดการด้วย JavaScript คุณสามารถเปลี่ยนสีเมื่อวางเมาส์เหนือ ทำให้องค์ประกอบแต่ละรายการเคลื่อนไหว และทำให้ SVG ตอบสนองโดยการปรับแอตทริบิวต์ของ viewBox สำหรับกราฟิกที่เรียบง่าย เช่น โลโก้และไอคอน โดยทั่วไป SVG จะมีน้ำหนัก 1-5 KB

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

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

สำหรับโลโก้บริษัททั่วไป เวอร์ชัน SVG อาจมีน้ำหนัก 2-5 KB โลโก้เดียวกันที่ส่งออกเป็น PNG ที่ความละเอียด 2x สำหรับจอเรตินาอาจมีขนาด 30-80 KB ได้อย่างง่ายดาย นั่นคือความแตกต่าง 10-15 เท่า

คูณค่านั้นกับไอคอน โลโก้ และองค์ประกอบ UI ทั้งหมดบนเพจ แล้ว SVG จะให้เพย์โหลดที่เบากว่ามาก จากการทดสอบบนไซต์อีคอมเมิร์ซที่มีไอคอนมากกว่า 60 รายการ การเปลี่ยนจาก PNG เป็น SVG จะลดแบนด์วิดท์ที่เกี่ยวข้องกับไอคอนลง 87%

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

นี่คือข้อได้เปรียบที่กำหนดโดย SVG SVG ดูสมบูรณ์แบบทุกพิกเซลไม่ว่าจะแสดงที่ความกว้าง 32 พิกเซลหรือ 3200 พิกเซล ไม่มีแนวคิดในการแก้ปัญหา — เบราว์เซอร์จะวาดเส้นทางเวกเตอร์ใหม่ตามขนาดที่ต้องการ

สิ่งนี้สำคัญบนหน้าจอตั้งแต่จอภาพเดสก์ท็อป 72 DPI ไปจนถึงโทรศัพท์ 460+ DPI ไฟล์ SVG หนึ่งไฟล์ครอบคลุมทุกอุปกรณ์ PNG หนึ่งอันไม่มี

PNG มีตารางพิกเซลคงที่ แสดง PNG ขนาด 200x200 ที่ 400x400 พิกเซล (ซึ่งเกิดขึ้นบนจอเรตินา) และเบราว์เซอร์จะแก้ไข ทำให้ภาพดูนุ่มนวลหรือพร่ามัว วิธีแก้ปัญหาคือส่งออก PNG ที่ความละเอียด 2x หรือ 3x แต่จะเพิ่มขนาดไฟล์ตามสัดส่วน ชุดไอคอน 3x อาจใหญ่กว่านี้ได้ 9 เท่า

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

PNG ยังชนะในด้านศิลปะพิกเซลและภาพที่ทุกพิกเซลมีความสำคัญในขนาดเฉพาะ สไปรต์ของเกม รายละเอียดไอคอน Fav ขนาด 16x16 และรูปภาพที่พฤติกรรมการลดรอยหยักต้องการการควบคุมที่แม่นยำ ทั้งหมดนี้จะแสดงเป็น PNG ได้ดีกว่า

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

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

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

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

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

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

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

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