SVG vs PNG/JPG: tại sao định dạng vector lại cần thiết cho hiệu suất và SEO

PNG và JPG: hoàn hảo cho ảnh, quá nặng cho giao diện

PNG và JPG là định dạng raster: hình ảnh là một lưới các pixel. Một logo được xuất ra ở dạng PNG 512×512 «chụp» mọi điểm. Để giữ độ sắc nét trên màn hình Retina, bạn thường phải cung cấp một phiên bản lớn hơn gấp hai hoặc ba lần, do đó số KB nhiều gấp hai hoặc ba lần. JPG nén ảnh tốt hơn, nhưng nó phá hủy các màu phẳng, thêm lỗi ảnh xung quanh văn bản và không hỗ trợ độ trong suốt. Cả hai định dạng đều không được thiết kế cho logotype hoặc biểu tượng cần hiển thị ở 24 px trong điều hướng và ở 240 px trong biểu ngữ.

SVG (Scalable Vector Graphics) mô tả các hình dạng thông qua các đường cong và tọa độ, không phải thông qua các pixel. Vector hóa một PNG bằng PixelToPath có nghĩa là thay thế một bitmap tĩnh bằng một đường dẫn mà trình duyệt sẽ vẽ lại chính xác kích thước của màn hình. Kết quả: một tệp thường nhẹ hơn nhiều và độ sắc nét tương tự trên thiết bị di động, máy tính và màn hình 4K.

SVG thực sự thay đổi điều gì cho một trang web

Đối với giao diện, SVG không phải là một «phụ kiện» thẩm mỹ. Đó là một đòn bẩy hiệu suất: ít byte hơn trên mạng, ít biến thể cần duy trì hơn, bộ nhớ cache đơn giản hơn và kết xuất vector gốc trong tất cả các trình duyệt hiện đại.

Những lợi ích rõ ràng nhất đối với một nhà phát triển hoặc chuyên gia SEO:

• Dung lượng: một logo đơn giản thường giảm từ 40 đến 80 KB ở định dạng PNG xuống vài KB ở định dạng SVG và bạn sẽ loại bỏ được các tệp xuất @2x / @3x
• Khả năng mở rộng: một tệp duy nhất, sắc nét ở 16 px giống như toàn màn hình 4K, không cần thuộc tính srcset hoặc media queries cho hình ảnh
• Core Web Vitals: dữ liệu tải xuống ít hơn (LCP) và khung chứa ổn định thông qua viewBox (CLS)
• SEO kỹ thuật: các trang hiển thị nhanh hơn trên thiết bị di động, một định dạng mà Google có thể giải thích và văn bản có khả năng xuất hiện trong SVG

PNG vs SVG: dung lượng của một logo không hề nhỏ

Hình ảnh vẫn là một trong những thành phần nặng nhất của một trang. Chúng ta tối ưu hóa ảnh ở định dạng WebP, nhưng lại quên mất logo ở tiêu đề và khoảng hai mươi biểu tượng PNG trong CSS. Tuy nhiên, các tệp này được lặp lại trên tất cả các URL: mỗi mili giây bị mất đều được tính cho toàn bộ trang web.

Các chỉ số quan sát được sau khi vector hóa bằng PixelToPath, trên các kịch bản thực tế của trang web giới thiệu hoặc ứng dụng web:

Kịch bản	PNG / JPG	SVG
Logo 512 px có độ trong suốt	40 đến 80 KB	2 đến 12 KB tùy số màu sắc và điểm nốt
Cùng logo được phát ở @2x (1024 px) cho Retina	Khối lượng gấp đôi, đôi khi gấp ba	Một tệp duy nhất, không đổi
20 biểu tượng giao diện xuất ở @3x (72×72)	Thêm 40 đến 160 KB	Chỉ vài KB tổng cộng
Logo màu phẳng từ JPG	Lỗi nén và quầng sáng quanh hình khối và chữ	Cạnh sạch, và tệp còn nhẹ hơn

Quy tắc rất đơn giản: bất kỳ thứ gì là hình dạng, văn bản, hình vẽ tượng hình hoặc logotype đều được hưởng lợi từ việc sử dụng SVG. Ảnh chụp và ảnh chụp màn hình thì lưu ở định dạng JPG, WebP hoặc AVIF. SVG không phải là sự thay thế cho tất cả: nó là định dạng phù hợp cho giao diện.

Khả năng mở rộng: tệp sắc nét từ điện thoại thông minh đến 4K

PNG chỉ hiển thị rõ nét ở độ phân giải gốc của nó. Khi phóng to, bạn sẽ thấy các điểm pixel. Nếu thu nhỏ đột ngột, trình duyệt phải lấy mẫu lại. Do đó mà có sự linh hoạt của các tệp @1x, @2x, @3x, srcset và mật độ CSS. Mỗi điểm gãy mới hoặc mật độ màn hình mới (Retina, điện thoại đời mới, màn hình 4K) đều yêu cầu xuất một phiên bản tệp khác hoặc phải tạo một tệp quá lớn "phòng hờ".

SVG không quan tâm đến những hạn chế này. Công cụ kết xuất tính toán các đường cong theo kích thước CSS được yêu cầu. Favicon 32 px, logo 48 px trong điều hướng, cùng một nhãn hiệu ở 400 px trong biểu ngữ, trình chiếu 4K: chúng đều là cùng một tệp. Không bị mờ, không bị răng cưa, không có yêu cầu tải xuống lần hai cho phiên bản phân giải cao. Đối với thư viện các thành phần, nó cũng giảm bớt gánh nặng về sau: một biểu tượng, một tệp, cho mọi kích thước.

Core Web Vitals và SEO: tại sao Google quan tâm đến định dạng

Tốc độ di động là một yếu tố xếp hạng. Core Web Vitals (LCP, INP, CLS) đánh giá trải nghiệm thực tế của người dùng. Việc thay thế một logo PNG nặng hoặc một chuỗi các biểu tượng raster bằng SVG sẽ không khiến một trang giảm từ 4 MB xuống 40 KB. Nhưng đối với bố cục trang web, hiệu ứng này ngay lập tức mang lại kết quả, đặc biệt trên mạng 4G hoặc trong trường hợp LCP bị nghẽn bởi logo trên tiêu đề trang.

Cụ thể, định dạng vector hỗ trợ 3 số liệu, với điều kiện độ phức tạp của đường nét được giữ ở mức hợp lý:

• LCP (Largest Contentful Paint): nếu phần tử hiển thị lớn nhất là logo hoặc hình minh họa phẳng, tệp SVG vài KB sẽ tải nhanh hơn tệp PNG @2x 150 KB. Nhờ vậy, băng thông còn lại sẽ được phân bổ cho phần còn lại của trang web
• CLS (Cumulative Layout Shift): tệp SVG với các thuộc tính width, height và viewBox sẽ định hình sẵn khung của nó ngay từ khi phân tích cú pháp HTML. Không cần chờ quá trình giải mã của bitmap để xác định tỉ lệ khung hình, do đó giảm thiểu việc bố cục bị giật cục
• INP và luồng thực thi chính: một tệp SVG đơn giản (logo, biểu tượng) sẽ tốn rất ít chi phí để vẽ lại. Ngược lại, hãy tránh các tệp SVG dạng "ảnh" với hàng ngàn đường dẫn: chúng có thể nặng hơn một tệp PNG và buộc CPU phải hoạt động liên tục. Đó là lý do tại sao một đường nét gọn gàng được tạo thông qua PixelToPath lại đem đến hiệu quả, chứ không phải một bản sao y hệt đến từng pixel
• SEO vượt ra ngoài tốc độ: Google lập chỉ mục cho các tệp SVG. Một logo được tích hợp vào trang web có thể chứa tiêu đề hỗ trợ tính năng tiếp cận. Việc dùng thẻ image SVG với thuộc tính alt là một kỹ thuật SEO căn bản. Thêm vào đó, một trang tải nhanh hơn sẽ làm giảm tỷ lệ thoát, một tín hiệu về trải nghiệm người dùng ảnh hưởng trực tiếp đến kết quả xếp hạng

Nơi SVG vượt qua PNG/JPG trên trang web thực tế

Đây không phải là lý thuyết. Sau đây là những vị trí mà định dạng vector sẽ ngay lập tức phát huy giá trị:

• Logo của tiêu đề và chân trang: một tệp duy nhất, hiển thị sắc nét trên Retina, thường là một trong các phần tử được xem nhiều nhất và đôi khi chính là LCP trên trang chủ tối giản
• Hệ thống biểu tượng: không còn sprites PNG 1x/2x nữa. Mỗi biểu tượng đều là một SVG (hoặc sprite SVG), có khả năng định kiểu qua CSS (currentColor) mà không cần phải thực hiện tải xuống tệp mới
• Favicon và apple-touch: một tệp SVG favicon hiện đại với một tệp PNG dự phòng sẽ giúp tránh phải bảo trì một loạt các biểu tượng đủ kích cỡ 16, 32, 180 px
• Hình minh họa giao diện và trạng thái trống: các hình minh họa 2D được vector hóa sẽ duy trì độ sắc nét ở chế độ toàn màn hình mà không làm dung lượng ảnh ở phần tiêu đề trang trở nên quá nặng
• Trang đích chuẩn SEO: việc tiết kiệm được từng KB cho khâu thiết kế giao diện sẽ cải thiện điểm số của Lighthouse, PageSpeed Insights cũng như trải nghiệm người dùng trên các thiết bị di động, tập hợp các yếu tố quyết định đến điểm xếp hạng

Dùng JPG/WebP với ảnh chụp. Thay đổi các định dạng cho logo, biểu tượng hình và hình minh họa phẳng thành SVG. Đây là phương pháp phân loại đã được áp dụng ở các trang web chạy nhanh nhất.