PNG sang WebP: Hướng dẫn Chuyển đổi và Thu nhỏ Ảnh PNG

Cập nhật lần cuối: June 27, 2026

PNG là định dạng phù hợp cho đồ họa sắc nét và độ trong suốt, nhưng các tệp của nó lại lớn — đặc biệt đối với bất kỳ nội dung nào mang tính nhiếp ảnh. Chuyển đổi PNG sang WebP giữ được độ sắc nét và kênh alpha (alpha channel) đồng thời cắt giảm đáng kể kích thước byte. Vấn đề là phải chọn đúng chế độ lossless hay lossy của WebP, vì chế độ phù hợp phụ thuộc vào nội dung hình ảnh. Hướng dẫn này bao gồm cả hai, kèm theo các kích thước đo lường thực tế.

Trả lời nhanh: bạn có nên chuyển đổi PNG sang WebP không?

Có, đối với hình ảnh web — WebP giữ được độ trong suốt và độ sắc nét của PNG nhưng chỉ bằng một phần nhỏ dung lượng. Hãy chọn chế độ dựa trên nội dung:

Đối với một hình ảnh, hãy sử dụng Image Converter; đối với các lô lớn, hãy dùng cwebp. Quyết định về định dạng đằng sau điều này nằm trong image formats explained.

PNG sang WebP tiết kiệm được bao nhiêu?

Điều này hoàn toàn phụ thuộc vào chế độ WebP bạn chọn, vì PNG là lossless và sự so sánh không phải là apples-to-apples.

Có hai điểm rút ra quan trọng từ những con số này. Thứ nhất, WebP lossless của một bức ảnh vẫn còn lớn (568 KB) — bởi vì mã hóa lossless không thể loại bỏ nhiễu trong ảnh. Nếu nội dung là ảnh chụp, nó nên dùng WebP lossy, chứ không phải lossless. Thứ hai, WebP lossless tỏa sáng trên đồ họa phẳng: đối với ảnh chụp màn hình và đồ họa UI, nó thường nhỏ hơn PNG 20–30% với các pixel giống hệt nhau. Hãy khớp chế độ với nội dung.

Nguồn gốc giống nhau cho cả bốn định dạng cho thấy vị trí của PNG so với các lựa chọn thay thế:

Hình ảnh nào nên giữ là PNG?

Một số hình ảnh không nên được chuyển đổi. Hãy giữ PNG khi hình ảnh đó là logo hoặc biểu tượng có thể dùng SVG thay thế (vector nhỏ hơn và sắc nét hơn), hoặc khi bạn đang gửi đến một hệ thống yêu cầu PNG cụ thể — một số quy trình in ấn, một số trình chỉnh sửa cũ, và hầu hết các trao đổi công cụ thiết kế đều mong đợi PNG. Đối với một biểu tượng siêu nhỏ (dưới ~3 KB), việc chuyển đổi không đáng với độ phức tạp của quy trình; hãy giữ nó là PNG. Quy tắc quyết định giống như trong image formats explained: chuyển đổi PNG sang WebP khi byte quan trọng và đích đến là trình duyệt web, giữ lại PNG khi khả năng tương thích hoặc giải pháp vector quan trọng hơn.

Phương pháp 1: Trình chuyển đổi trên trình duyệt

Đối với một hình ảnh, hãy sử dụng Imagic AI Image Converter: tải lên PNG, chọn WebP, chọn lossless cho đồ họa hoặc chất lượng ~80 cho ảnh chụp, và tải xuống. Squoosh tốt để so sánh lossless và lossy cạnh nhau trước khi bạn thực hiện.

Phương pháp 2: Dòng lệnh cwebp

## WebP Lossless (tốt nhất cho đồ họa, ảnh chụp màn hình, văn bản sắc nét, UI trong suốt)
cwebp -lossless input.png -o output.webp

## WebP Lossy (tốt nhất nếu PNG thực sự là một bức ảnh)
cwebp -q 80 input.png -o output.webp

## Một thư mục các tệp PNG, lossless, song song
mkdir -p out
ls *.png | xargs -P 4 -I {} cwebp -lossless {} -o out/{}.webp

-lossless là flag quan trọng — nếu không có nó, cwebp mặc định là lossy, điều này làm mờ các cạnh mỏng. Luôn truyền -lossless cho đồ họa và ảnh chụp màn hình.

Phương pháp 3: Python (Pillow)

from PIL import Image
from pathlib import Path

def png_to_webp(src: Path, dest: Path, lossless: bool = True, quality: int = 80):
    with Image.open(src) as img:
        img.save(dest, "WebP", lossless=lossless, quality=0 if lossless else quality, method=6)

for f in Path("assets").glob("*.png"):
    # lossless cho đồ họa sắc nét; chuyển sang lossless=False cho PNG ảnh chụp
    png_to_webp(f, Path("out") / f"{f.stem}.webp", lossless=True)

Khi lossless=True, giá trị quality bị bỏ qua; khi lossy, hãy đặt nó là ~80 cho ảnh chụp.

WebP có giữ được độ trong suốt của PNG không?

Có. WebP hỗ trợ kênh alpha đầy đủ ở cả chế độ lossy và lossless, vì vậy một PNG trong suốt sẽ trở thành WebP trong suốt mà không cần thêm công đoạn nào. Đây là lý do chính để chuyển đổi các tài sản UI và ảnh cắt sản phẩm: bạn giữ được độ trong suốt và mất đi phần lớn byte dữ liệu. Để biết chi tiết về độ trong suốt, hãy xem how to make transparent images.

Làm cách nào để phục vụ WebP với fallback PNG?

Hỗ trợ WebP là ~98%, nhưng vẫn nên giữ một fallback PNG cho các client cũ và email:

<picture>
  <source srcset="/img/icon.webp" type="image/webp">
  <img src="/img/icon.png" alt="Description" width="200" height="200" loading="lazy">
</picture>

Trình duyệt sẽ chọn loại đầu tiên nó hỗ trợ; thẻ <img PNG là fallback cuối cùng. Đối với đồ họa sắc nét, hãy dành riêng width/height để bố cục không bị dịch chuyển. Xem WebP converter guide để biết mẫu fallback đầy đủ bao gồm cả AVIF.

Khi nào thì PNG sang WebP là sai quyết định?

• Email. Nhiều client email bỏ qua WebP. Hãy giữ PNG (hoặc JPEG) cho email.
• Khi bạn cần dùng JPEG thay thế. Nếu PNG là ảnh chụp cho một marketplace chỉ chấp nhận JPEG, hãy chuyển đổi sang JPEG, chứ không phải WebP. Xem WebP to JPG.
• Các trình duyệt nhúng cũ không hỗ trợ WebP — mặc dù fallback <picture> đã bao gồm điều này.
• Khi PNG vốn đã siêu nhỏ. Một biểu tượng 2KB ít được lợi từ việc chuyển đổi; chi phí quy trình không đáng.

Những sai lầm thường gặp

• Sử dụng WebP lossy cho đồ họa sắc nét. Lossy làm mờ các cạnh và văn bản mỏng. Hãy dùng -lossless cho ảnh chụp màn hình và UI.
• Sử dụng WebP lossless cho ảnh chụp. Nó vẫn lớn vì lossless không thể loại bỏ nhiễu của ảnh chụp. Hãy dùng lossy.
• Bỏ qua fallback PNG. Các trình duyệt cũ và email cần thẻ <img PNG.
• Quên thay đổi kích thước trước. Một WebP 4000px vẫn là một tệp tải xuống 4000px, bất kể định dạng nào.
• Coi PNG như một định dạng ảnh chụp. Nếu hình ảnh là ảnh chụp, nó có lẽ ban đầu đã là JPEG/RAW — hãy chuyển đổi từ nguồn đúng.

Các câu hỏi thường gặp

Chuyển đổi PNG sang WebP tiết kiệm được bao nhiêu?

Đối với nội dung nhiếp ảnh, nhỏ hơn 25 đến 35 phần trăm ở chất lượng tương đương; đối với đồ họa phẳng có độ trong suốt, thường là nhiều hơn. WebP hỗ trợ cả chế độ lossy và lossless cộng với kênh alpha, vì vậy nó bao phủ những gì PNG làm nhưng với kích thước nhỏ hơn.

Mọi PNG có nên thành WebP không?

Đối với việc phân phối web, có, kèm theo fallback PNG cho các trình duyệt rất cũ. Hãy giữ bản gốc PNG nếu bạn có thể chỉnh sửa lại, bởi vì WebP lossy là một thế hệ nén. Hãy phục vụ WebP thông qua phần tử <picture> với fallback PNG.

WebP có hỗ trợ độ trong suốt không?

Có — WebP hỗ trợ kênh alpha đầy đủ, vì vậy các PNG trong suốt chuyển đổi sạch sẽ. Đây là lý do chính để ưu tiên WebP hơn JPEG cho đồ họa có độ trong suốt. Xem transparent images guide.

Chuyển đổi bằng dòng lệnh là gì?

cwebp -q 80 input.png -o output.webp. Flag -q đặt chất lượng (80 là mặc định web). Đối với lossless, hãy dùng -lossless. Thực hiện hàng loạt bằng vòng lặp shell hoặc ImageMagick. Xem WebP converter guide.

WebP có hỗ trợ hoạt hình không?

Có — WebP hỗ trợ ảnh động, nhỏ hơn GIF hoạt hình tương đương. Đối với các vòng lặp ngắn, WebP hoạt hình là một giải pháp thay thế hiện đại cho GIF. Đối với hoạt hình dài hơn, video (MP4) vẫn nhỏ hơn và tốt hơn.

Tôi nên chuyển PNG sang WebP lossy hay lossless?

Lossy cho ảnh chụp (nhỏ hơn nhiều, mất mát vô hình ở chất lượng 80); lossless cho đồ họa, văn bản và các master nơi mọi pixel phải chính xác. WebP hỗ trợ cả hai. Một sai lầm phổ biến là chuyển đổi logo sang lossy, điều này thêm các artifact vào các cạnh sắc nét — hãy giữ đồ họa lossless, chuyển ảnh chụp lossy.

Flag chất lượng cwebp là gì?

Flag -q đặt chất lượng lossy trên thang đo từ 0 đến 100 — 80 là mặc định web (mất mát vô hình, xấp xỉ một phần tư byte của chất lượng 100). Hãy dùng -lossless thay vì -q cho đồ họa nơi mọi pixel phải chính xác. Chất lượng cao hơn có nghĩa là tệp lớn hơn với lợi ích hiển thị giảm dần; 80 là điểm ngọt thực tế để phân phối web ảnh chụp.

Chuyển đổi PNG sang WebP có tăng tốc độ trang của tôi không?

Có, một cách đo lường được — WebP nhỏ hơn 25 đến 35 phần trăm so với PNG cho cùng nội dung, vì vậy các trang có nhiều đồ họa tải nhanh hơn và LCP cải thiện. Tiết kiệm này tích lũy trên một trang với hàng tá biểu tượng hoặc đồ họa. Hãy phục vụ WebP với fallback PNG để các trình duyệt cũ vẫn hiển thị hình ảnh, và bạn nhận được tốc độ mà không mất khả năng tương thích.

Credit hình ảnh

• So sánh PNG-to-WebP và biểu đồ thanh kích thước — do tác giả tạo từ một bức ảnh phong cách thương mại điện tử (Pexels #16675632, photo by Mikael Blomkvist) để thể hiện mức tiết kiệm PNG-to-WebP đo lường thực tế.