Chuyển SVG sang WebP
Kết xuất file vector thành ảnh WebP đúng chiều rộng pixel mà bố cục của bạn cần. Hữu ích khi CMS không cho tải lên SVG, ảnh xem trước trên mạng xã hội cần ảnh bitmap, hoặc hình minh họa có quá nhiều đường path khiến trình duyệt vẽ chậm.
Chuyển đổi ảnh
hoặc thả tệp JPG, JPEG, JPE … vào đây ·
Tối đa 95 MB mỗi tệp· Tối đa 20 tệp· Xóa sau 30 phút
Tệp được xử lý trên máy chủ của chúng tôi và bị xóa sau 30 phút.
Mức 85 giữ ảnh trông giống hệt bản gốc. Chỉ hạ xuống khi bạn cần tệp nhỏ hơn.
JPG, BMP và EPS không hỗ trợ độ trong suốt. Các điểm ảnh trong suốt sẽ được tô bằng màu này.
Mã màu hex dùng phía sau các điểm ảnh trong suốt, ví dụ #FFFFFF.
Định dạng này chỉ chứa một ảnh duy nhất. Hãy chọn đầu ra GIF hoặc WebP nếu bạn muốn giữ chuyển động.
Biểu tượng đa kích thước chứa nhiều độ phân giải trong một tệp; trình duyệt và hệ điều hành sẽ chọn độ phân giải cần dùng.
Giữ kích thước gốc, hoặc nhập một cạnh và tỷ lệ khung hình sẽ được giữ nguyên.
Số pixel cho cạnh bạn đã chọn ở trên.
Tỷ lệ phần trăm so với kích thước gốc.
sRGB phù hợp cho màn hình và web. Giữ nguyên bản gốc cho quy trình in ấn; thang độ xám sẽ loại bỏ màu.
Chỉ là siêu dữ liệu, 0 giữ giá trị gốc. Máy in và một số cổng thông tin đọc con số này; nó không thay đổi kích thước điểm ảnh.
Cách sử dụng công cụ này
- 1
Tải file SVG lên
Thêm tối đa 20 file .svg xuất từ Figma, Illustrator, Inkscape hoặc thư viện biểu đồ, mỗi file tối đa 95 MB.
- 2
Đặt chiều rộng đầu ra
Đổi kích thước ảnh đầu ra mặc định có chiều rộng 1200 px; hãy đổi thành gấp đôi chiều rộng mà ảnh sẽ chiếm trên trang. Chất lượng là 90, hoặc đánh dấu Không mất dữ liệu trong Cài đặt nâng cao cho logo và biểu tượng có màu phẳng.
- 3
Chuyển sang WebP
Nhấn Chuyển sang WebP rồi tải xuống từng file hoặc một file ZIP. Vùng trong suốt vẫn được giữ trong suốt.
Làm sao chuyển SVG sang WebP theo kích thước cụ thể?
Tải SVG lên, đặt Đổi kích thước ảnh đầu ra theo chiều rộng pixel bạn cần (mặc định 1200 px), rồi nhấn Chuyển sang WebP. Vector được vẽ lại ở đúng chiều rộng đó, nên không có chuyện phóng to hay bị mờ.
Khi nào nên chuyển SVG sang WebP
SVG trở thành khuyến nghị của W3C năm 2001 và là định dạng phù hợp cho hầu hết logo và biểu tượng: vài kilobyte văn bản mà vẫn sắc nét ở mọi mức phóng. Rắc rối bắt đầu khi file rời khỏi mã của bạn. WordPress và nhiều nền tảng bán hàng từ chối tải lên SVG, ảnh xem trước liên kết trên Facebook, LinkedIn và X được lấy dưới dạng bitmap, còn công cụ thiết kế xuất hình minh họa kèm hiệu ứng raster nhúng khiến file vector thành vài megabyte mã.
WebP, do Google phát hành năm 2010 và đến phiên bản 14 năm 2020 Safari mới hỗ trợ, là loại bitmap sinh ra cho việc này: nhỏ hơn PNG ở cùng chất lượng hình, lại có kênh alpha thật. Xuất SVG thẳng sang WebP ở kích thước cuối cùng giúp bỏ qua bước vòng qua file PNG lớn. Nếu bạn cần chiều ngược lại, trang WebP sang SVG giải thích vì sao chiều đó cần dò vector chứ không phải chuyển đổi.
Kích thước chuyển SVG sang WebP cho các vị trí phổ biến trên web
1200 × 630 px
Ảnh xem trước liên kết Open Graph
Ảnh hiển thị khi trang được chia sẻ
1920 × 1080 px
Hình minh họa hero toàn chiều rộng
Phủ hầu hết màn hình máy tính ở 1×
1600 × 900 px
Ảnh cột bài blog ở 2×
Cho cột nội dung rộng 800 px
400 × 100 px
Logo đầu trang ở 2×
Cho ô logo 200 × 50 px
SVG
Đồ họa vector SVG
SVG là định dạng vector dựa trên XML được W3C chuẩn hóa năm 2001. Thay vì điểm ảnh, SVG mô tả hình khối, đường path và văn bản, nên luôn sắc nét ở mọi kích thước và thường rất nhỏ với logo và biểu tượng. Định dạng hỗ trợ nền trong suốt, định kiểu bằng CSS, script và ảnh động, và mọi trình duyệt đều hiển thị nguyên bản. SVG không phù hợp cho ảnh chụp, và các hình minh họa phức tạp có thể hiển thị chậm. Illustrator, Inkscape, Figma và trình duyệt đều mở và chỉnh sửa được SVG.
- Nén
- –
- Độ trong suốt
- Có
- Ảnh động
- Có
- Ra mắt
- 2001 · W3C
WEBP
Ảnh WebP
WebP là định dạng ảnh do Google phát hành năm 2010 nhằm giúp trang web tải nhanh hơn. Định dạng hỗ trợ cả nén mất dữ liệu (lossy) lẫn không mất dữ liệu (lossless), nền trong suốt bằng kênh alpha và ảnh động trong cùng một định dạng. Tệp WebP lossy thường nhỏ hơn 25–35% so với JPEG có chất lượng hình ảnh tương đương, còn WebP lossless thường nhỏ hơn PNG. Mọi trình duyệt hiện nay đều hỗ trợ WebP, nhưng một số phần mềm máy tính cũ, dịch vụ in và biểu mẫu tải lên vẫn từ chối định dạng này. Windows, macOS và hầu hết trình chỉnh sửa ảnh hiện đại mở được tệp WebP.
- Nén
- Có hoặc không mất dữ liệu
- Độ trong suốt
- Có
- Ảnh động
- Có
- Ra mắt
- 2010 · Google
Người ta chuyển SVG sang WebP để có ảnh bitmap nhẹ, kích thước cố định cho những nơi không nhận file vector hoặc vẽ chậm, như CMS, ảnh xem trước khi chia sẻ hoặc trang đích nhiều nội dung; WebP sang SVG là việc dò vector, không phải đổi định dạng.
Cách SVG được raster hóa và những điều cần kiểm tra
Trình chuyển đổi đọc chiều rộng, chiều cao và viewBox của chính SVG, rồi vẽ mọi path ở chiều rộng bạn đặt; chiều cao theo tỉ lệ khung hình. Vì việc vẽ diễn ra ở kích thước cuối cùng, nét mảnh và chữ nhỏ chỉ được khử răng cưa một lần, đúng tỉ lệ. Phóng to một ảnh PNG nhỏ sau đó không bao giờ sạch bằng.
Phông chữ thường gây bất ngờ. Nếu SVG dùng một phông không được nhúng hoặc chuyển thành đường viền, phông thay thế sẽ được dùng và độ dài dòng thay đổi. Hãy chuyển chữ thành outline trong công cụ thiết kế trước khi xuất. Ảnh ngoài liên kết bằng URL trong SVG không được tải, nên hãy nhúng chúng hoặc làm phẳng hình trước.
Chuyển SVG sang WebP: nên và không nên
| Nên | Không nên |
|---|---|
| Xuất ở 2× chiều rộng CSS hiển thị | Chuyển các biểu tượng inline đơn giản vốn nhẹ hơn ở dạng SVG |
| Dùng Không mất dữ liệu cho logo màu phẳng ít màu | Xuất ở 4000 px cho ô rộng 600 px |
| Giữ file SVG gốc cho các kích thước sau này | Gửi WebP trong bản tin email |
| Đặt thuộc tính width và height cho WebP để tránh xô lệch bố cục | Mong có chữ thật: WebP là điểm ảnh, không phải chữ chọn được |
Câu hỏi về chuyển SVG sang WebP
Nên dùng chiều rộng bao nhiêu pixel khi chuyển SVG sang WebP?
Lấy chiều rộng hiển thị của ảnh theo pixel CSS rồi nhân đôi, để ảnh vẫn sắc nét trên màn hình điện thoại và laptop có mật độ điểm ảnh cao. Một hình minh họa hiển thị trong cột rộng 800 px nên được xuất ở 1600 px. Lên 3× hiếm khi đáng làm trên web, vì file nặng hơn mà chất lượng nhìn thấy tăng không đáng kể.
WebP có tốt hơn SVG cho website không?
Không cần với logo, biểu tượng và sơ đồ đơn giản: một file SVG gọn rất nhẹ và sắc nét ở mọi kích thước, nên hãy giữ nguyên. WebP có lợi hơn với hình minh họa phức tạp có dải màu, bộ lọc hoặc hàng nghìn đường path, và ở những nơi chỉ nhận ảnh bitmap, như ảnh xem trước khi chia sẻ mạng xã hội hoặc CMS không hỗ trợ SVG.
Ảnh WebP có giữ nền trong suốt của file SVG không?
Có. WebP có kênh alpha đầy đủ ở cả chế độ nén mất dữ liệu và không mất dữ liệu, nên vùng không có màu tô trong SVG vẫn trong suốt. Viền của các hình được khử răng cưa theo nền trong suốt, nên trông đúng trên mọi màu nền.
Nên dùng WebP lossy hay lossless cho hình vector?
Không mất dữ liệu phù hợp với logo, biểu tượng và biểu đồ màu phẳng chỉ có vài màu đặc; loại này nén rất tốt và giữ viền sạch hoàn toàn. Nén mất dữ liệu ở chất lượng 85 đến 90 phù hợp với hình minh họa có dải màu, đổ bóng hoặc họa tiết, vì file không mất dữ liệu sẽ nặng. Hãy thử cả hai trên một file và chọn kết quả nhẹ hơn mà vẫn sạch.
Vì sao không tải được SVG lên WordPress?
WordPress không cho phép tải lên SVG vì SVG có thể chứa script. Từ phiên bản 5.8 phát hành năm 2021, WordPress đã chấp nhận WebP, nên chuyển đổi sẽ cho bạn file mà thư viện media nhận được mà không cần plugin bảo mật. Các trang cần vector thật vẫn có thể thêm hỗ trợ SVG qua plugin làm sạch mã.
Có thể dùng ảnh WebP trong bản tin email không?
Nên tránh. Nhiều ứng dụng email, gồm Outlook cho Windows trên máy tính, không hiển thị WebP, và Gmail cũng không hiển thị SVG. Với email, hãy xuất hình bằng SVG sang PNG.
