Cách chuyển đổi ảnh trên trình duyệt hoạt động
Mỗi lần chuyển đổi là một quy trình bốn bước chạy hoàn toàn trong JavaScript. Không có thư viện codec nào được tải xuống — Canvas API tích hợp của trình duyệt xử lý việc giải mã và mã hóa lại.
- Đọc từng tệp đã tải lên dưới dạng Blob và tạo URL đối tượng để trình duyệt có thể giải mã mà không cần sao chép byte lên máy chủ.
- Vẽ ảnh đã giải mã lên phần tử Canvas ngoài màn hình, áp dụng bất kỳ ràng buộc kích thước nào trong khi giữ nguyên tỷ lệ khung hình gốc.
- Gọi
canvas.toBlob(callback, targetMimeType, quality)để mã hóa lại các pixel. Đầu ra PNG luôn không mất dữ liệu; JPEG và WebP tuân theo thanh trượt chất lượng. - Hiển thị hình thu nhỏ trước/sau với kích thước đầu ra và dung lượng tệp, sau đó cung cấp nút tải xuống cho từng ảnh hoặc một ZIP duy nhất cho toàn bộ lô.
Tại sao cần chuyển đổi định dạng ảnh?
- Chuyển từ PNG sang WebP giảm kích thước tệp điển hình 25–35% mà không mất chất lượng nhìn thấy ở 0,8, trực tiếp giảm trọng lượng trang và cải thiện điểm LCP Core Web Vitals.
- PNG bảo toàn độ trong suốt mà JPEG bỏ đi, vì vậy PNG→JPEG hiển thị các pixel trong suốt trên nền trắng — hữu ích khi đích đến (email, CMS cũ) không chấp nhận PNG.
- Các nền tảng mạng xã hội và mạng quảng cáo có yêu cầu định dạng nghiêm ngặt: Facebook và LinkedIn ưa thích JPEG cho ảnh; quy trình xem trước OG của Twitter xử lý WebP; một số máy chủ quảng cáo từ chối tài nguyên không phải JPEG.
- Chuẩn hóa một lô ảnh định dạng hỗn hợp (ảnh chụp màn hình PNG, ảnh JPEG, xuất WebP) sang một định dạng duy nhất trước khi tải lên CMS hoặc DAM loại bỏ sự phức tạp xử lý định dạng trong quy trình nhập.
Ứng dụng phổ biến
Chuyển đổi định dạng cần thiết khi định dạng nguồn và kỳ vọng của đích không khớp nhau.
- Chuẩn bị ảnh sản phẩm cho cửa hàng Shopify hoặc WooCommerce — bản gốc JPEG được chuyển đổi sang WebP ở chất lượng 0,85 cho mặt tiền cửa hàng, PNG giữ lại cho xuất sẵn in ấn.
- Chuyển đổi ảnh xuất PNG từ nhà thiết kế sang JPEG hoặc WebP trước khi nhúng vào bản build React hoặc Next.js, để bộ tối ưu hóa ảnh của framework bắt đầu từ nguồn nhỏ hơn.
- Xử lý hàng loạt thư mục ảnh chụp màn hình từ một lần chạy QA — PNG sang JPEG ở chất lượng 0,9 để giảm kích thước lưu trữ trước khi đính kèm vào phiếu trình theo dõi lỗi.
Ví dụ thực tế: PNG 2 MB → WebP 300 KB
Ảnh hero PNG 2 MB ở 2400×1600 pixel là tải trọng phổ biến trên các trang đích marketing.
Kéo PNG vào đây, chọn WebP làm định dạng đích, đặt chất lượng thành 0,8, và tùy chọn đặt chiều rộng tối đa thành 1200 để giảm một nửa kích thước pixel. Quy trình canvas vẽ ảnh ở 1200×800 (giữ nguyên tỷ lệ), mã hóa lại sang WebP, và thẻ đầu ra hiển thị kết quả — thường là 280–320 KB, giảm 85%. Nhấp Tải xuống trên thẻ hoặc tải hàng loạt ZIP nếu bạn đã chuyển đổi nhiều ảnh.
Những định dạng nào được hỗ trợ?
Ảnh nguồn: bất kỳ định dạng nào trình duyệt có thể giải mã — PNG, JPEG, WebP, GIF và BMP đều được chấp nhận. Định dạng đầu ra: PNG (không mất dữ liệu), JPEG và WebP. Đầu ra AVIF chưa được hỗ trợ vì bộ mã hóa Canvas API chỉ có trong Chrome 105+ và vắng mặt trong Safari và Firefox; đường dẫn AVIF dựa trên WASM đang được lên kế hoạch cho bản phát hành tương lai.
Điều này có xảy ra trên thiết bị của tôi không?
Có. Trang sử dụng Canvas API gốc của trình duyệt và Web File API. Không có dữ liệu ảnh nào được gửi đến máy chủ; quy trình chuyển đổi chạy hoàn toàn trong tab trình duyệt của bạn. Bạn có thể xác minh điều này bằng cách mở DevTools và kiểm tra bảng Mạng — không có yêu cầu gửi đi nào sau khi trang được tải.
Sự đánh đổi chất lượng giữa PNG và JPEG là gì?
PNG là định dạng không mất dữ liệu — mỗi pixel tồn tại nguyên vẹn qua chu kỳ mã hóa. JPEG sử dụng nén DCT và loại bỏ chi tiết mịn mà mắt hiếm khi nhận ra; chất lượng 0,8 là điểm ngọt ngào phổ biến nơi sự khác biệt trực quan với bản gốc hầu như không thể nhận thấy với hầu hết người xem nhưng tệp nhỏ hơn PNG 4–6 lần. WebP có thể hoạt động ở cả chế độ không mất và mất dữ liệu; thanh trượt chất lượng ở đây điều khiển bộ mã hóa có mất dữ liệu, và chất lượng 0,85 thường hoạt động tốt hơn JPEG 0,85 25–30% trên ảnh tự nhiên.
Khi nào có hỗ trợ AVIF?
Mã hóa AVIF qua canvas.toBlob(…, 'image/avif') hiện chỉ hoạt động trong Chrome 105+; Safari và Firefox không hỗ trợ. Bản phát hành tương lai sẽ thêm đường dẫn AVIF tùy chọn sử dụng bộ mã hóa WebAssembly nhẹ để tính năng hoạt động trên tất cả trình duyệt. Cho đến lúc đó, tùy chọn AVIF được hiển thị là "sắp ra mắt" và bộ mã hóa WebP (được hỗ trợ phổ biến trong các trình duyệt hiện đại) là giải pháp thay thế thế hệ tiếp theo được khuyến nghị.
Kéo ảnh của bạn vào, chọn định dạng, chuyển đổi. Mọi thứ chạy trong tab của bạn — không tải lên, không cần tài khoản, không chờ máy chủ.