Định dạng Hình ảnh: So sánh WebP, PNG, JPG & SVG
Chọn sai định dạng hình ảnh có thể làm chậm thời gian tải trang hoặc làm mờ đồ họa của bạn. Dưới đây là cách các định dạng web hiện đại so sánh với nhau về độ nén, độ trong suốt và độ sắc nét.
Các tệp được xử lý cục bộ trong trình duyệt của bạn bằng các API WebAssembly và HTML5. Tệp không bao giờ rời khỏi thiết bị của bạn, vì vậy không có việc tải lên máy chủ hay lưu trữ tệp của bên thứ ba.
Bắt đầu chuyển đổi ngay lập tức trên chính thiết bị của bạn - không phải chờ tải lên, không có hàng đợi tải xuống và không bị máy chủ từ xa giảm tốc độ.
Sử dụng mọi công cụ có sẵn mà không cần tạo tài khoản, trả phí cho gói dịch vụ hay gặp phải giới hạn dung lượng tệp vô lý. Chuyển đổi thoải mái theo khả năng của trình duyệt và thiết bị của bạn.
So sánh định dạng & Thông số kỹ thuật
| Định dạng đầu ra | Loại MIME | Thông số kỹ thuật | Loại |
|---|---|---|---|
| PNG Ảnh | image/png | W3C-PNG | Đồ họa mạng di động |
| JPG Ảnh JPEG | image/jpeg | ITU-T-T81-JPEG | Định dạng hình ảnh chuẩn Joint Photographic Experts Group |
| WebP Ảnh | image/webp | RFC-6386-VP8 | Định dạng hình ảnh hiện đại Google WebP |
| SVG Ảnh vector | image/svg+xml | W3C-SVG | Đồ họa vector có thể mở rộng |
| HEIC Ảnh | image/heic | ISO-IEC-23008-12-HEIF | Vùng chứa hình ảnh hiệu suất cao |
| AVIF Ảnh | image/avif | AOMEDIA-AV1-AVIF | Định dạng tệp hình ảnh AV1 |
| PSD Photoshop Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Document |
| PSB Tài liệu Lớn Photoshop | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Tài liệu Lớn Adobe Photoshop |
| WMF Windows Metafile | image/x-wmf | MS-WMF-SPEC | Windows Metafile Vector Format |
| EMF Enhanced Metafile | image/x-emf | MS-EMF-SPEC | Enhanced Metafile Vector Format |
| JFIF Image | image/jpeg | ITU-T-T81-JPEG | Định dạng Trao đổi Tệp JPEG |
| TGA Truevision | image/x-tga | TGA-SPEC | Định dạng ảnh raster nâng cao Truevision |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
| PDF Tài liệu | application/pdf | ISO-32000-2 | Định dạng tài liệu di động |
Thông số kỹ thuật & Phân tích codec
Quy tắc Quyết định Định dạng Nhanh
WebP và AVIF có thể giảm dung lượng nhiều ảnh web và cả hai đều hỗ trợ độ trong suốt, nhưng kết quả tùy ảnh và cài đặt mã hóa. Dùng JPG cho ảnh chụp khi chấp nhận được lỗi nén nhỏ, PNG cho ảnh chụp màn hình và đồ họa sắc nét, SVG cho logo và biểu tượng có thể phóng to.
Raster so với Vector: Tại sao SVG Không Bao giờ Bị mờ
Hình ảnh raster (JPG, PNG, WebP) là lưới các điểm ảnh màu cố định - phóng to quá mức sẽ khiến chúng bị mờ hoặc vỡ pixel. SVG dựa hoàn toàn trên các phép toán: nó lưu trữ các đường thẳng, đường cong và màu sắc theo toán học, cho phép các biểu tượng và hình minh họa hiển thị cực kỳ sắc nét trên mọi thiết bị từ màn hình điện thoại di động đến màn hình 8K với kích thước tệp rất nhỏ.
Lầm tưởng: 'DPI Cao hơn Nghĩa là Chất lượng Hình ảnh Web Tốt hơn'
DPI (số chấm trên mỗi inch) chỉ là chỉ dẫn về in ấn vật lý và bị các trình duyệt web bỏ qua hoàn toàn. Trên điện thoại và màn hình máy tính, độ sắc nét của hình ảnh phụ thuộc hoàn toàn vào kích thước điểm ảnh (ví dụ: 1920x1080) và mật độ hiển thị, chứ không phụ thuộc vào siêu dữ liệu DPI được nhúng trong ảnh.
Độ trong suốt Alpha: PNG so với WebP
JPEG không có kênh trong suốt, nên pixel trong suốt sẽ thành nền đặc khi lưu thành JPEG. PNG giữ độ trong suốt alpha, còn WebP cũng có thể lưu độ trong suốt và tạo tệp nhỏ hơn; hãy so sánh ảnh vì dung lượng tùy nội dung và cài đặt mã hóa.
0 byte được tải lên máy chủ bên ngoài. Toàn bộ quá trình xử lý diễn ra cục bộ trong hộp cát trình duyệt của bạn.