SVG vs PNG/JPG : ทำไมรูปแบบเวกเตอร์จึงจำเป็นสำหรับประสิทธิภาพและ SEO

PNG และ JPG: เหมาะสำหรับภาพถ่าย แต่หนักเกินไปสำหรับอินเทอร์เฟซ

PNG และ JPG เป็นรูปแบบแรสเตอร์ (raster) ซึ่งรูปภาพจะประกอบด้วยพิกเซล โลโก้ที่ส่งออกเป็น PNG ขนาด 512×512 จะ 'ถ่ายภาพ' ทุกจุด เพื่อให้ยังคงความคมชัดบนหน้าจอ Retina คุณมักจะต้องใช้เวอร์ชันที่ใหญ่กว่าสองหรือสามเท่า ซึ่งหมายถึงจำนวน KB ที่เพิ่มขึ้นสองถึงสามเท่า JPG บีบอัดภาพถ่ายได้ดีกว่า แต่ทำลายพื้นที่สีทึบ เพิ่มรอยหยักรอบข้อความ และไม่รองรับความโปร่งใส รูปแบบทั้งสองนี้ไม่เหมาะกับโลโก้หรือไอคอนที่ต้องแสดงขนาด 24 px บนเมนูนำทาง และ 240 px บนแบนเนอร์

SVG (Scalable Vector Graphics) อธิบายรูปทรงด้วยเส้นโค้งและพิกัด ไม่ใช่พิกเซล การแปลง PNG เป็นเวกเตอร์ด้วย PixelToPath คือการแทนที่บิตแมปแบบคงที่ด้วยเส้นเวกเตอร์ที่เบราว์เซอร์จะวาดใหม่ให้พอดีกับขนาดหน้าจอ ผลลัพธ์: ไฟล์ที่เบากว่ามาก และมีความคมชัดเท่ากันบนมือถือ คอมพิวเตอร์ และหน้าจอ 4K

สิ่งที่ SVG เปลี่ยนแปลงให้เว็บไซต์อย่างเป็นรูปธรรม

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

ข้อได้เปรียบที่ชัดเจนที่สุดสำหรับนักพัฒนาและผู้ทำ SEO:

• ขนาดไฟล์: โลโก้ธรรมดามักจะลดขนาดจาก 40-80 KB ในรูปแบบ PNG เหลือเพียงไม่กี่ KB ในรูปแบบ SVG และคุณยังสามารถตัดการส่งออก @2x / @3x ออกได้ด้วย
• ความสามารถในการปรับขนาด: ไฟล์เดียวคมชัดตั้งแต่ 16 px จนถึงเต็มหน้าจอ 4K โดยไม่ต้องใช้ srcset หรือ image media queries
• Core Web Vitals: ใช้ข้อมูลในการดาวน์โหลดน้อยลง (LCP) และมีพื้นที่คงที่ผ่าน viewBox (CLS)
• SEO ทางเทคนิค: โหลดหน้าเว็บเร็วขึ้นบนมือถือ รูปแบบที่ Google ตีความได้ และข้อความที่อาจรวมอยู่ใน SVG

PNG vs SVG: ขนาดของโลโก้ไม่ใช่เรื่องเล็กน้อย

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

ตัวอย่างขนาดที่พบหลังจากแปลงเป็นเวกเตอร์ด้วย PixelToPath ในเว็บไซต์แบบหน้าเดียวหรือเว็บแอปพลิเคชันทั่วไป:

สถานการณ์	PNG / JPG	SVG
โลโก้ 512 px แบบโปร่งใส	40 ถึง 80 KB	2 ถึง 12 KB ตามจำนวนสีและโหนด
โลโก้เดียวกันที่เสิร์ฟแบบ @2x (1024 px) สำหรับ Retina	ขนาดไฟล์เพิ่มเป็นสองเท่า บางครั้งสามเท่า	ไฟล์เดียว ไม่เปลี่ยนแปลง
ไอคอน UI 20 ตัวที่ส่งออกแบบ @3x (72×72)	เพิ่มอีก 40 ถึง 160 KB	รวมแล้วเพียงไม่กี่ KB
โลโก้สีแบบแบนจาก JPG	สิ่งแปลกปลอมและรัศมีรอบรูปทรงและข้อความ	ขอบเรียบคม และไฟล์เบากว่าเดิม

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

ความสามารถในการปรับขนาด: ไฟล์เดียวที่คมชัดตั้งแต่มือถือจนถึง 4K

PNG จะคมชัดเฉพาะความละเอียดดั้งเดิมเท่านั้น เมื่อขยายใหญ่ขึ้นคุณจะเห็นพิกเซล เมื่อย่อขนาดลง เบราว์เซอร์จะต้องสุ่มตัวอย่างใหม่ ด้วยเหตุนี้จึงต้องใช้ไฟล์ @1x, @2x, @3x, srcset และ CSS densities หน้าจอที่มีความหนาแน่นพิกเซลใหม่ๆ (Retina มือถือรุ่นใหม่ จอภาพ 4K) ต้องมีการส่งออกใหม่ หรือต้องใช้ไฟล์ที่ใหญ่เกินไป 'เผื่อไว้'

SVG ข้ามข้อจำกัดนี้ เอ็นจินการเรนเดอร์จะคำนวณเส้นโค้งตามขนาด CSS ที่กำหนด Favicon 32 px, โลโก้ 48 px ในแถบนำทาง, แบรนด์เดียวกันที่ 400 px ในแบนเนอร์ หรือโปรเจคเตอร์ 4K ทั้งหมดใช้ไฟล์เดียวกัน ไม่มีภาพเบลอ ไม่มีรอยหยัก ไม่ต้องร้องขอเวอร์ชันความละเอียดสูง สำหรับไลบรารีคอมโพเนนต์ มันยังช่วยลดภาระ: 1 ไอคอน 1 ไฟล์ ใช้ได้กับทุกขนาด

Core Web Vitals และ SEO: ทำไม Google ถึงใส่ใจเรื่องรูปแบบ

ความเร็วบนมือถือคือปัจจัยสำคัญในการจัดอันดับ Core Web Vitals (LCP, INP, CLS) จะวัดประสบการณ์ผู้ใช้ การแทนที่โลโก้ PNG ที่หนักอึ้ง หรือชุดไอคอนแรสเตอร์ด้วย SVG จะไม่ช่วยลดหน้าเว็บจาก 4 MB เป็น 40 KB ได้ทั้งหมด แต่สำหรับส่วนของอินเทอร์เฟซ ผลลัพธ์จะเห็นทันที โดยเฉพาะในเครือข่าย 4G หรือ LCP ที่ชะงักเพราะโลโก้ในส่วนหัว

ในความเป็นจริง รูปแบบเวกเตอร์ช่วยตัวชี้วัด 3 อย่าง โดยมีเงื่อนไขว่าเส้นทางเวกเตอร์ต้องไม่ซับซ้อนเกินไป:

• LCP (Largest Contentful Paint): หากองค์ประกอบที่ใหญ่ที่สุดบนหน้าจอคือโลโก้หรือภาพประกอบแบบแบน ไฟล์ SVG ขนาดไม่กี่ KB จะโหลดเร็วกว่า PNG @2x ขนาด 150 KB มาก ลดปัญหาการแย่งโหลดข้อมูลสำหรับส่วนอื่นของหน้าเว็บ
• CLS (Cumulative Layout Shift): SVG ที่มี width, height และ viewBox จะจองพื้นที่กล่องทันทีในขณะวิเคราะห์ HTML ไม่ต้องรอการถอดรหัสบิตแมปเพื่อดูสัดส่วน จึงลดปัญหาหน้าเว็บกระโดดไปมา
• INP (Interaction to Next Paint) และ main thread: SVG แบบง่าย (โลโก้, ไอคอน) ใช้เวลาเรนเดอร์น้อยมาก แต่ควรหลีกเลี่ยง SVG แบบ 'ภาพถ่าย' ที่มีเส้นเวกเตอร์หลายพันเส้น เพราะมันอาจหนักกว่า PNG และทำให้โปรเซสเซอร์ทำงานหนัก นี่คือประโยชน์ของการได้เส้นเวกเตอร์ที่สะอาดจาก PixelToPath แทนการคัดลอกแบบพิกเซลต่อพิกเซล
• SEO ที่เหนือกว่าแค่ความเร็ว: Google สามารถอินเด็กซ์ไฟล์ SVG ได้ โลโก้ที่รวมอยู่ในโค้ดสามารถใส่ title เพื่อช่วยในการเข้าถึง (accessibility) แท็กรูปภาพ SVG พร้อม attribute 'alt' ยังคงเป็นพื้นฐานที่สำคัญ และหน้าเว็บที่เบาขึ้นจะช่วยลดอัตราตีกลับ (bounce rate) ซึ่งเป็นสัญญาณประสบการณ์ใช้งานที่มีผลต่อการจัดอันดับ

จุดที่ SVG เหนือกว่า PNG/JPG ในเว็บไซต์จริง

นี่ไม่ใช่แค่ทฤษฎี นี่คือตำแหน่งที่รูปแบบเวกเตอร์ให้ผลลัพธ์ที่คุ้มค่าทันที:

• โลโก้ที่ส่วนหัวและส่วนท้าย: ไฟล์เดียวคมชัดบน Retina มักจะเป็นหนึ่งในองค์ประกอบที่มีคนเห็นมากที่สุด และบางครั้งอาจเป็น LCP บนหน้าแรกสไตล์มินิมอล
• ระบบไอคอน: บอกลาสไปรต์ PNG 1x/2x รูปสัญลักษณ์แต่ละอันจะเป็น SVG (หรือสไปรต์ SVG) ซึ่งสามารถจัดรูปแบบด้วย CSS (currentColor) ได้โดยไม่ต้องส่งออกใหม่
• Favicon และ apple-touch: favicon สมัยใหม่แบบ SVG หนึ่งไฟล์บวกกับ PNG สำรอง ช่วยหลีกเลี่ยงการจัดการขนาด 16, 32, 180 px จำนวนมาก
• ภาพประกอบอินเทอร์เฟซและสถานะว่าง (empty states): ภาพวาดแบบแบนที่เป็นเวกเตอร์จะคมชัดเสมอเมื่อแสดงเต็มหน้าจอ โดยไม่เปลืองขนาดไฟล์เท่ารูปภาพแบบแบนเนอร์
• หน้า Landing Page สำหรับ SEO: ทุก KB ที่ประหยัดได้ในการจัดรูปแบบ จะช่วยปรับปรุงคะแนนบน Lighthouse, PageSpeed Insights และประสบการณ์บนมือถือ ซึ่งเป็นสัญญาณที่ส่งผลรวมต่ออันดับ

เก็บ JPG/WebP ไว้ใช้สำหรับรูปถ่าย แปลงโลโก้ รูปสัญลักษณ์ และภาพประกอบแบนๆ เป็น SVG นี่คือการจัดสรรรูปแบบที่เว็บไซต์ที่เร็วที่สุดใช้งานอยู่แล้ว