Đổi PNG sang WebP để trang web nhẹ hơn mà không mất nền trong suốt
Ảnh PNG là thủ phạm quen thuộc khiến trang web nặng: banner, ảnh sản phẩm tách nền, ảnh chụp màn hình thường vài trăm KB đến vài MB mỗi tấm. Công cụ chuyển PNG sang WebP này nén lại ảnh theo mức chất lượng bạn chọn, giữ kênh trong suốt, và cho thấy ngay mỗi ảnh nhẹ đi bao nhiêu. Mọi xử lý chạy trong trình duyệt của bạn.
Tính năng nổi bật
- Chọn hoặc kéo thả nhiều ảnh PNG cùng lúc, chuyển lần lượt sang WebP
- Thanh chất lượng WebP từ 0,10 đến 1,00, mặc định 0,90
- Giữ kênh trong suốt của PNG trong tệp WebP, có ghi chú với từng ảnh có vùng trong suốt
- Kiểm tra trình duyệt có mã hóa được WebP không trước khi chuyển, báo rõ nếu không
- Kiểm tra lại từng tệp đầu ra đúng là image/webp, không âm thầm trả về PNG
- Bảng kết quả: kích thước pixel, dung lượng PNG, dung lượng WebP, phần trăm giảm, tổng cả loạt
- Đổi chất lượng sau khi chuyển thì bấm một lần để chuyển lại cả loạt, không phải chọn tệp lại
- Tải từng ảnh hoặc gói ZIP, tên tệp giữ nguyên với đuôi .webp
- Nhận diện PNG động (APNG) và báo rằng WebP đầu ra chỉ giữ khung đầu
Vì sao nên dùng WebP thay PNG trên website
Tốc độ tải trang ảnh hưởng trực tiếp đến trải nghiệm người xem và các chỉ số Core Web Vitals mà Google dùng để đánh giá trang, trong đó ảnh lớn đầu trang thường quyết định chỉ số LCP. Ảnh PNG nén không mất dữ liệu nên nặng, đặc biệt là ảnh chụp hoặc ảnh sản phẩm đã tách nền. WebP giữ được nền trong suốt như PNG nhưng cho phép nén có mất dữ liệu, nên cùng một ảnh thường nhẹ đi đáng kể mà mắt khó nhận ra khác biệt. Các công cụ đo tốc độ như PageSpeed Insights cũng thường gợi ý phục vụ ảnh ở định dạng hiện đại như WebP. Mọi trình duyệt phổ biến hiện nay đều hiển thị được WebP, nên với ảnh trên web, đổi PNG sang WebP gần như chỉ có lợi.
Lợi ích khi sử dụng
- Trang web tải nhanh hơn, giảm băng thông máy chủ và dung lượng lưu trữ
- Giữ nền trong suốt cho ảnh sản phẩm, logo, banner, điều JPG không làm được
- Tự chọn điểm cân bằng giữa dung lượng và độ nét, thấy ngay kết quả bằng con số
- Đổi cả loạt ảnh trước khi tải lên WordPress, Shopify, Haravan hay CMS bất kỳ
- Không cần plugin chuyển đổi trên máy chủ, ảnh không đi qua dịch vụ bên thứ ba
- Biết chắc trình duyệt đang dùng có mã hóa được WebP hay không trước khi làm
Cách chuyển PNG sang WebP
- 1Kéo thả các ảnh PNG vào khung hoặc bấm để chọn, chọn được nhiều ảnh cùng lúc. Nếu trình duyệt không mã hóa được WebP, trang sẽ báo ngay ở đầu.
- 2Kéo thanh Chất lượng WebP. Mặc định 0,90; ảnh cho web thường để 0,75 đến 0,85 là đủ đẹp.
- 3Bấm Chuyển ... ảnh sang WebP và chờ từng dòng chuyển sang Xong.
- 4Xem cột Trước, Sau, Thay đổi và dòng tổng để biết cả loạt nhẹ đi bao nhiêu. Ảnh có nền trong suốt sẽ ghi rõ đã được giữ.
- 5Muốn thử mức chất lượng khác, kéo thanh rồi bấm nút chuyển lại; các ảnh cần chuyển lại được đánh dấu sẵn.
- 6Bấm Tải ở từng ảnh hoặc Tải tất cả dạng ZIP để đưa lên website.
WebP nén PNG như thế nào
WebP có hai kiểu nén. Kiểu có mất dữ liệu dựa trên cách nén khung hình của video VP8: ảnh được chia thành các khối, mỗi khối được dự đoán từ khối bên cạnh, phần chênh lệch được biến đổi và làm tròn. Kiểu không mất dữ liệu dùng các kỹ thuật riêng như bảng màu, dự đoán điểm ảnh và mã hóa entropy. Khi bạn xuất WebP qua canvas của trình duyệt với mức chất lượng dưới 1,00, trình duyệt dùng kiểu có mất dữ liệu, còn kênh trong suốt được nén riêng. Theo số liệu Google công bố, WebP có mất dữ liệu nhỏ hơn JPG cùng chất lượng khoảng 25 đến 34%, còn so với PNG thì chênh lệch thường lớn hơn nhiều, nhất là với ảnh chụp. Đây là số liệu tổng hợp trên tập ảnh thử nghiệm của Google, không phải cam kết cho từng ảnh; ảnh của bạn giảm bao nhiêu thì xem cột Thay đổi trong bảng kết quả.
Ảnh nào đổi sang WebP lợi nhất, ảnh nào không
Lợi nhất là ảnh chụp lưu dưới dạng PNG: ảnh sản phẩm tách nền, ảnh người mẫu, ảnh chụp màn hình có nhiều hình ảnh. PNG gần như không nén được những ảnh này, nên WebP thường giảm rất mạnh, có khi chỉ còn một phần nhỏ dung lượng ban đầu. Banner có chữ trên nền ảnh cũng được lợi nhiều. Ngược lại, icon nhỏ, logo vài màu, sơ đồ đường nét đơn giản vốn đã nén PNG rất gọn, đổi sang WebP có mất dữ liệu chỉ giảm ít, và ở chất lượng thấp có thể làm viền chữ, nét mảnh hơi nhòe. Với loại ảnh này, hãy giữ chất lượng cao từ 0,9 trở lên, hoặc cân nhắc dùng SVG nếu có bản vector. Quy tắc thực tế: chuyển thử, nhìn cột Thay đổi; ảnh nào giảm dưới khoảng 10% thì giữ PNG cũng không thiệt bao nhiêu.
Chọn chất lượng WebP cho website
Thang chất lượng WebP không tương đương từng số với JPG: cùng con số 0,8, ảnh WebP và ảnh JPG có thể khác nhau về độ nét và dung lượng. Mặc định của trang là 0,90, an toàn cho hầu hết ảnh. Với ảnh nội dung bài viết, ảnh sản phẩm hiển thị ở kích thước vừa, mức 0,75 đến 0,85 thường cân bằng tốt giữa độ nét và dung lượng. Ảnh lớn đầu trang, ảnh nền hero có thể hạ thêm vì được xem lướt. Ảnh có chữ nhỏ, chi tiết mảnh nên giữ cao. Cách nhanh để chọn: chuyển ở 0,9, mở vài ảnh ra xem ở kích thước thật, rồi hạ dần thanh chất lượng và chuyển lại cho đến khi bắt đầu thấy khác. Một bước quan trọng không kém chất lượng là kích thước: ảnh 4000 điểm ảnh chiều ngang hiển thị trong khung 800 điểm ảnh thì nên thu nhỏ trước bằng công cụ đổi kích thước ảnh, sau đó mới đổi sang WebP.
Hỗ trợ WebP trên trình duyệt và hệ điều hành
Về hiển thị, WebP đã được hỗ trợ rộng rãi: Chrome, Edge, Opera, Firefox từ bản 65 và Safari từ bản 14, tức là gần như mọi thiết bị đang dùng. WordPress cho phép tải ảnh WebP lên thư viện từ bản 5.8. Về tạo ảnh, tức mã hóa WebP ngay trong trình duyệt, tình hình khác: Chrome, Edge, Firefox bản mới làm được qua canvas, còn Safari trên iPhone, iPad, Mac và các trình duyệt cũ có thể không làm được, khi đó canvas lặng lẽ trả về PNG. Công cụ kiểm tra điều này ngay khi mở trang bằng cách thử mã hóa một ảnh nhỏ, và kiểm tra lại kiểu tệp của từng ảnh đầu ra. Nếu trình duyệt không hỗ trợ, trang hiện thông báo đỏ và khóa nút chuyển thay vì đưa bạn một tệp đuôi .webp mà bên trong là PNG. Trên iPhone, iPad mọi trình duyệt dùng chung nhân Safari, nên hãy làm trên máy tính hoặc Android.
Đưa ảnh WebP lên website đúng cách
Sau khi có tệp WebP, có vài điều nên làm để tận dụng hết lợi ích. Đặt tên tệp có nghĩa và không dấu, vì tên tệp được giữ nguyên từ PNG gốc, bạn nên đặt tên tốt ngay từ tệp PNG. Viết thuộc tính alt mô tả nội dung ảnh, định dạng không thay đổi điều này. Khai báo chiều rộng, chiều cao cho thẻ ảnh để tránh bố cục bị nhảy khi tải, bảng kết quả có ghi số pixel của từng ảnh. Nếu website vẫn cần phục vụ các trình duyệt rất cũ, dùng thẻ picture với nguồn WebP trước và PNG dự phòng sau. Nhiều CMS và plugin có thể tự tạo WebP trên máy chủ; công cụ này hữu ích khi bạn muốn tự kiểm soát chất lượng, làm với website tĩnh, hoặc chuẩn bị ảnh trước khi tải lên nền tảng không tự chuyển đổi. Tệp WebP đầu ra không còn EXIF, giúp ảnh gọn hơn và không lộ thông tin máy chụp.
Giới hạn khi chuyển PNG sang WebP trong trình duyệt
Có vài điều công cụ không làm được và bạn nên biết. Thứ nhất, canvas của trình duyệt chỉ nhận một thông số chất lượng, không có tùy chọn rõ ràng cho WebP không mất dữ liệu hay các tham số nâng cao như phần mềm cwebp của Google; ở mức 1,00, một số trình duyệt như Chrome chuyển sang nén không mất dữ liệu, nhưng hành vi này tùy trình duyệt. Thứ hai, PNG động (APNG) chỉ còn khung hình đầu tiên, công cụ có ghi chú khi gặp loại ảnh này. Thứ ba, PNG 16 bit mỗi kênh bị giảm xuống 8 bit vì canvas làm việc ở 8 bit, với ảnh web thì không thấy khác. Thứ tư, hồ sơ màu nhúng và siêu dữ liệu không được giữ. Cuối cùng là bộ nhớ: mỗi megapixel cần khoảng 4 MB khi giải mã, nên công cụ cảnh báo ảnh trên 50 megapixel, từ chối ảnh trên 100 megapixel, và chuyển lần lượt từng ảnh. Với nhu cầu nâng cao như nén không mất dữ liệu hay xử lý hàng nghìn ảnh, công cụ dòng lệnh vẫn phù hợp hơn.
WebP, AVIF, JPG hay PNG: chọn định dạng nào cho ảnh web
WebP không phải định dạng hiện đại duy nhất. AVIF, dựa trên chuẩn nén video AV1, thường còn nhẹ hơn WebP ở cùng độ nét và cũng có kênh trong suốt, được Chrome hỗ trợ từ bản 85, Firefox từ bản 93 và Safari từ bản 16. Đổi lại, mã hóa AVIF chậm hơn và không phải trình duyệt nào cũng tạo được AVIF qua canvas; công cụ chuyển định dạng ảnh tổng hợp của site chỉ hiện lựa chọn AVIF khi trình duyệt bạn đang dùng làm được. Với phần lớn website, WebP là điểm cân bằng tốt: hỗ trợ hiển thị gần như tuyệt đối, tạo ảnh nhanh, giảm dung lượng rõ rệt so với PNG. JPG vẫn hợp khi hệ thống của bạn chưa nhận WebP, còn PNG nên giữ cho ảnh cần chính xác từng điểm ảnh như ảnh chụp màn hình hướng dẫn có chữ nhỏ, hoặc đồ họa ít màu đã nén PNG rất gọn. Logo và icon có bản vector thì SVG thường là lựa chọn nhẹ và sắc nét nhất ở mọi kích thước.
Câu hỏi thường gặp (FAQ)
PNG sang WebP có giữ được nền trong suốt không?
Có. WebP hỗ trợ kênh trong suốt, công cụ giữ nguyên độ đục từng điểm ảnh. Mỗi ảnh có vùng trong suốt sẽ có dòng ghi chú xác nhận đã được giữ.
Chuyển PNG sang WebP giảm được bao nhiêu dung lượng?
Tùy loại ảnh. Ảnh chụp, ảnh sản phẩm tách nền thường giảm rất mạnh; icon, logo ít màu giảm ít. Cột Thay đổi và dòng tổng cho biết con số thật với ảnh của bạn.
PNG sang WebP có giảm chất lượng ảnh không?
Có một chút, vì dưới mức 1,00 công cụ xuất WebP nén có mất dữ liệu. Ở mức 0,9 mặc định gần như không nhận ra; hạ thấp thì tệp nhẹ hơn nhưng viền chữ, nét mảnh có thể hơi nhòe.
Chất lượng WebP bao nhiêu là hợp cho website?
Ảnh nội dung và ảnh sản phẩm thường để 0,75 đến 0,85. Ảnh có chữ nhỏ hoặc logo nên giữ từ 0,9 trở lên. Hãy chuyển thử và xem ảnh ở kích thước thật trước khi chốt.
Vì sao trang báo trình duyệt không mã hóa được WebP?
Một số trình duyệt, hay gặp là Safari và các trình duyệt cũ, không tạo được ảnh WebP qua canvas. Công cụ kiểm tra trước và khóa nút chuyển. Hãy dùng Chrome, Edge hoặc Firefox trên máy tính hoặc Android.
Có tạo được WebP không mất dữ liệu không?
Không đảm bảo. Công cụ chỉ có thang chất lượng; ở mức 1,00, một số trình duyệt như Chrome xuất WebP không mất dữ liệu, trình duyệt khác thì không. Cần chắc chắn thì dùng công cụ dòng lệnh cwebp hoặc phần mềm biên tập ảnh có tùy chọn lossless.
Đổi PNG sang WebP có tốt cho SEO không?
Ảnh nhẹ giúp trang tải nhanh, có lợi cho trải nghiệm và chỉ số LCP trong Core Web Vitals. Định dạng tự nó không làm tăng thứ hạng, nhưng trang nhanh hơn là một lợi thế.
WordPress có nhận ảnh WebP không?
Có, WordPress từ bản 5.8 cho tải ảnh WebP lên thư viện như ảnh JPG, PNG thông thường.
Tất cả trình duyệt có xem được ảnh WebP không?
Các trình duyệt phổ biến đều xem được: Chrome, Edge, Firefox từ bản 65, Safari từ bản 14. Chỉ các thiết bị rất cũ chưa cập nhật mới gặp vấn đề.
Có đổi nhiều ảnh PNG sang WebP cùng lúc được không?
Được. Chọn hoặc kéo thả nhiều ảnh, bấm chuyển một lần, rồi tải từng ảnh hoặc gói ZIP. Dòng tổng cho biết cả loạt nhẹ đi bao nhiêu.
Ảnh WebP sau khi đổi có bị thu nhỏ kích thước không?
Không. Chiều rộng, chiều cao giữ nguyên như PNG gốc. Nếu ảnh lớn hơn khung hiển thị trên web, hãy thu nhỏ bằng công cụ đổi kích thước ảnh trước khi đổi sang WebP để nhẹ hơn nữa.
Ảnh có bị tải lên máy chủ khi chuyển không?
Không. Việc nén WebP diễn ra trong trình duyệt của bạn. Trang không gửi ảnh đi đâu và không lưu lại gì sau khi bạn đóng tab.
PNG động có chuyển sang WebP động được không?
Không. Công cụ chỉ lấy khung hình đầu tiên của PNG động và ghi chú rõ ở dòng của ảnh đó, vì canvas không xuất được WebP nhiều khung hình.
Nên chọn WebP hay JPG cho ảnh trên web?
WebP thường nhẹ hơn JPG ở cùng độ nét và giữ được nền trong suốt. JPG chỉ nên ưu tiên khi hệ thống của bạn chưa nhận WebP.
Đổi đuôi .png thành .webp có được không?
Không. Đổi tên không nén lại ảnh, dữ liệu vẫn là PNG và dung lượng y nguyên. Phải mã hóa lại như công cụ này làm thì ảnh mới thật sự là WebP.
Đổi chất lượng xong có phải chọn lại ảnh không?
Không. Ảnh đã chuyển sẽ hiện trạng thái Cần chuyển lại, bấm nút chuyển một lần là áp dụng mức chất lượng mới cho cả loạt.
Từ khóa liên quan
- png sang webp
- chuyển png sang webp
- đổi png sang webp
- convert png to webp
- png to webp online
- chuyển ảnh png sang webp
- chuyển ảnh sang webp
- png sang webp giữ nền trong suốt
- nén ảnh webp
- tối ưu ảnh website
- ảnh webp cho wordpress
- chuyển nhiều ảnh png sang webp
- png sang webp hàng loạt
- chất lượng webp bao nhiêu
- webp có tốt cho seo không
- giảm dung lượng ảnh png
- core web vitals ảnh
- định dạng ảnh hiện đại
- webp và png khác nhau
- png sang webp không mất chất lượng
- chuyển png sang webp trên điện thoại
- ảnh sản phẩm webp