Đị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.
Tệp của bạn được xử lý hoàn toàn trong trình duyệt web bằng HTML5 Canvas và WebAssembly. Tuyệt đối không có dữ liệu nào rời khỏi thiết bị của bạn.
Bỏ qua hàng đợi tải lên và tải xuống. Quá trình chuyển đổi diễn ra cục bộ ở tốc độ phần cứng máy tính tối đa mà không bị giới hạn bởi máy chủ.
Tuân thủ các thông số kỹ thuật chính thức của ISO, W3C và IETF để đảm bảo khả năng tương thích của tệp đầu ra trên các hệ điều hành hiện đại.
So sánh định dạng & Thông số kỹ thuật
| Định dạng đầu ra | Kiểu 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 Photoshop Large Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Large Document |
| 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 | JPEG File Interchange Format |
| 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 |
Thông số kỹ thuật & Phân tích codec
Quy tắc Quyết định Định dạng Nhanh
Sử dụng WebP hoặc AVIF cho các trang web hiện đại (nhỏ hơn 30% so với JPEG và có hỗ trợ độ trong suốt). Sử dụng JPG cho các bức ảnh mà các hiện tượng nén nhỏ không thể nhận thấy không quan trọng. Sử dụng PNG cho ảnh chụp màn hình, đồ họa giao diện người dùng và hình minh họa đòi hỏi văn bản sắc nét từng pixel. Sử dụng SVG cho logo và biểu tượng cần khả năng phóng viên vô hạn.
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 là toán học thuần túy: 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) hoàn toàn chỉ là chỉ dẫn in ấn vật lý và bị trình duyệt web hoàn toàn bỏ qua. Trên điện thoại và màn hình máy tính, độ sắc nét của hình ảnh được quyết định hoàn toàn bởi kích thước điểm ảnh (ví dụ: 1920x1080) và mật độ hiển thị, chứ không phải siêu dữ liệu DPI được nhúng bên trong.
Độ trong suốt Alpha: PNG so với WebP
JPG truyền thống hoàn toàn không hỗ trợ độ trong suốt - các nền trong suốt sẽ chuyển thành màu trắng hoặc đen đặc. PNG đi đầu trong việc hỗ trợ độ trong suốt alpha 8-bit sạch sẽ, nhưng WebP hiện tại mang lại chất lượng trong suốt giống hệt với kích thước tệp nhỏ hơn tới 40%.
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.