Bộ Chuyển Đổi WebP: Hướng Dẫn Chuyển Ảnh Sang WebP (Kích Thước Thực)

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

Chuyển đổi hình ảnh sang WebP là một trong những cải tiến nhanh nhất và hiệu quả nhất cho hiệu suất web — WebP nhỏ hơn khoảng 25–35% so với JPEG và nhỏ hơn nhiều so với PNG đối với cùng nội dung, với độ hỗ trợ trình duyệt ~98%. Hướng dẫn này sẽ chỉ cách chuyển đổi hình ảnh sang WebP cùng với kích thước tệp đo được mà bạn có thể mong đợi, và cách giữ lại phương án dự phòng (fallback) cho các trình duyệt vẫn cần JPEG.

Câu trả lời nhanh: làm thế nào để chuyển đổi sang WebP?

Sử dụng lệnh cwebp trên dòng lệnh để tăng tốc độ và xử lý hàng loạt, sử dụng công cụ chuyển đổi của trình duyệt cho các tác vụ đơn lẻ, hoặc dùng Pillow cho các script. Đối với một bức ảnh điển hình, việc chuyển từ JPEG→WebP với chất lượng tương đương sẽ cắt giảm kích thước tệp khoảng ~30–45%.

WebP thực sự tiết kiệm được bao nhiêu?

Được đo trên một bức ảnh 1400×933, chuyển đổi ở chất lượng tương đương về mặt thị giác:

Đối với đồ họa PNG, WebP lossless thường nhỏ hơn PNG từ 20–30% ở chất lượng pixel tương tự — hữu ích cho các tài sản UI trong suốt. Cùng một nguồn ảnh trên cả bốn định dạng làm nổi bật sự khác biệt:

So sánh đầy đủ các định dạng có tại image formats explained.

Bạn nên chọn WebP hay AVIF?

Cả hai đều nhỏ hơn JPEG; AVIF lại nhỏ hơn WebP thêm 20–30% nhưng mã hóa chậm hơn và có độ hỗ trợ trình duyệt thấp hơn một chút. Câu trả lời thực tế cho hầu hết các trang web là: xuất cả AVIF và WebP, với phương án dự phòng JPEG, và để phần tử <picture> phục vụ cho từng trình duyệt bằng định dạng tốt nhất mà nó hỗ trợ. Nếu bạn chỉ có thể thêm một cái, WebP là lựa chọn an toàn hơn vì nó mã hóa nhanh và có độ hỗ trợ rộng hơn. Khi bạn sẵn sàng thêm AVIF, hãy xem AVIF vs WebP comparison.

Phương pháp 1: Công cụ 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, chọn WebP, đặt chất lượng khoảng 80 cho ảnh (hoặc lossless cho đồ họa), và tải xuống. Để kiểm soát chất lượng/kích thước trực tiếp, Squoosh hiển thị kích thước đầu ra khi bạn di chuyển thanh trượt.

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

cwebp là bộ mã hóa WebP chính thức, nhanh và có thể lập script.

## WebP Lossy từ JPEG/PNG, chất lượng 80
cwebp -q 80 input.jpg -o output.webp

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

## Thay đổi kích thước thành 1600px chiều rộng khi chuyển đổi
cwebp -q 80 -resize 1600 0 input.jpg -o output.webp

## Cả một thư mục, song song
mkdir -p out
ls *.jpg | xargs -P 4 -I {} cwebp -q 80 {} -o out/{}.webp

Để giải mã ngược lại, dwebp sẽ thực hiện điều đó; magick của ImageMagick cũng đọc và ghi WebP nếu bạn đã sử dụng nó. Xem batch resize guide để biết về mẫu thư mục song song.

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

Đối với bước build hoặc máy chủ, Pillow chuyển đổi và cho phép bạn kiểm soát chất lượng bằng lập trình:

from PIL import Image
from pathlib import Path

def to_webp(src: Path, dest: Path, quality: int = 80, lossless: bool = False):
    with Image.open(src) as img:
        img.save(dest, "WebP", quality=quality, lossless=lossless, method=6)

for f in Path("images").glob("*"):
    if f.suffix.lower() in (".jpg", ".jpeg", ".png"):
        to_webp(f, Path("out") / f"{f.stem}.webp", quality=80)

method=6 là mức nỗ lực mã hóa chậm nhất, tốt nhất — ổn khi bạn chỉ mã hóa một lần lúc tải lên, chứ không phải trên mỗi yêu cầu. Đối với đồ họa lossless, hãy truyền lossless=True.

Làm thế nào để phục vụ WebP với phương án dự phòng?

Hỗ trợ WebP là ~98%, nhưng 2% còn lại (Safari cũ, một số trình duyệt nhúng) cần phương án dự phòng JPEG/PNG. Hãy sử dụng phần tử <picture>:

<picture>
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>

Trình duyệt sẽ chọn kiểu đầu tiên mà nó hỗ trợ. Hãy giữ lại một thẻ <img> thực tế với src là JPEG làm phương án dự phòng cuối cùng để không có gì hiển thị trống. Nếu bạn cũng tạo AVIF, hãy thêm nó vào <source> đầu tiên — xem AVIF vs WebP comparison.

Bạn nên sử dụng chất lượng và cài đặt phương pháp nào?

Đối với ảnh chụp WebP lossy, chất lượng 75–80 là điểm lý tưởng — tệp nhỏ mà không bị mất mát rõ ràng ở khoảng cách xem bình thường. Dưới 70, các gradient mượt và tông màu da bắt đầu hiển thị hiện tượng giả; trên 85 bạn đang tiêu tốn byte mà mắt người không thể thấy được. Cờ -m (method) đánh đổi thời gian mã hóa để lấy kích thước tệp nhỏ hơn: -m 0 là nhanh nhất, -m 6 là chậm nhất nhưng tạo ra đầu ra nhỏ nhất. Sử dụng -m 4 cho công việc tương tác và -m 6 cho lần mã hóa hàng loạt một lần mà tốc độ không quan trọng.

Đối với WebP lossless (đồ họa, ảnh chụp màn hình, văn bản sắc nét), -lossless -m 6 mang lại tỷ lệ tốt nhất; WebP lossless vượt trội hơn PNG khoảng 20–30% trên cùng nội dung. Nếu đồ họa có rất ít màu, hãy thử giảm bảng màu trước — ít màu sẽ nén tốt hơn đáng kể trong bất kỳ định dạng lossless nào. Những chi tiết tinh chỉnh này phù hợp với hướng dẫn rộng hơn trong image compression deep dive.

Khi nào WebP là lựa chọn sai?

• Email. Nhiều client email bỏ qua WebP. Hãy sử dụng JPEG/PNG cho email.
• Các trình duyệt nhúng cũ (Smart TV, ki-ốt đời cũ) không hỗ trợ WebP.
• Nguồn cấp dữ liệu đối tác/thị trường chỉ chấp nhận JPEG.
• Khi hệ thống công cụ không thể xuất nó. Nếu CMS của bạn không thể phục vụ <picture>, một quy trình chỉ dùng JPEG sẽ đơn giản hơn là cố gắng khắc phục nó.

Trong những trường hợp đó, format guide đề cập đến giải pháp thay thế phù hợp.

Các lỗi thường gặp

• Chuyển đổi rồi không thay đổi kích thước. WebP 4000px vẫn là tải xuống 4000px. Hãy thay đổi kích thước trước.
• Sử dụng WebP lossy cho đồ họa sắc nét. WebP lossy làm mờ các cạnh mảnh giống như JPEG; hãy sử dụng -lossless cho ảnh chụp màn hình và văn bản.
• Phục vụ WebP mà không có phương án dự phòng. Các trình duyệt cũ sẽ hiển thị trống nếu không có fallback <img> là JPEG.
• So sánh ở cùng một số chất lượng. JPEG q85 ≈ WebP q80 ≈ AVIF q68 về chất lượng cảm nhận; hãy so sánh bằng mắt, chứ không phải bằng con số.
• Mã hóa quá mức trên mỗi yêu cầu. Mã hóa một lần lúc tải lên; mã hóa WebP chậm hơn JPEG.

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

WebP thực sự tiết kiệm được bao nhiêu?

Nhỏ hơn 25 đến 35 phần trăm so với JPEG ở chất lượng bằng nhau, và thường nhỏ hơn PNG đối với đồ họa có độ trong suốt. Tiết kiệm là lý do để chuyển đổi cho việc phân phối web. Hãy giữ bản gốc làm master; xuất WebP để phân phối.

Tôi nên chọn WebP hay AVIF?

WebP là mặc định an toàn (hỗ trợ trình duyệt phổ quát, mã hóa dễ dàng); AVIF dành cho các tệp nhỏ nhất trên các trình duyệt hiện đại (nhỏ hơn JPEG khoảng 50 phần trăm, nhưng chậm hơn để mã hóa và có lỗ hổng trên các trình duyệt cũ). Hãy gửi AVIF với phương án dự phòng WebP thông qua phần tử <picture>.

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

cwebp -q 80 input.jpg -o output.webp. Cờ -q đặt chất lượng (80 là mặc định web). Xử lý hàng loạt với vòng lặp shell hoặc ImageMagick. Đối với lossless, sử dụng -lossless.

Mọi trình duyệt có hỗ trợ WebP không?

Tất cả các trình duyệt hiện tại đều hỗ trợ. Các trình duyệt rất cũ (IE cũ) thì không, đó là lý do bạn phục vụ WebP với phương án dự phòng JPEG hoặc PNG thông qua phần tử <picture>. Phương án dự phòng này bao phủ khoảng trống nhỏ còn lại.

Làm thế nào để tôi chuyển đổi sang WebP hàng loạt?

Sử dụng vòng lặp shell với cwebp (for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done), ImageMagick, hoặc script Python (Pillow). Dòng lệnh xử lý hàng nghìn tệp mà không giới hạn trên mỗi tệp và không cần đăng ký tài khoản, đó là lý do tại sao nó là con đường cho các danh mục sản phẩm. Xem batch processing guide.

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

Nhỏ hơn 25 đến 35 phần trăm so với JPEG ở chất lượng bằng nhau, và thường nhỏ hơn PNG đối với đồ họa có độ trong suốt. Tiết kiệm là lý do để chuyển đổi cho việc phân phối web. Hãy giữ bản gốc làm master; xuất WebP để phân phối, và phục vụ nó với phương án dự phòng cho các trình duyệt cũ.

WebP là lossy hay lossless?

Cả hai — WebP hỗ trợ chế độ lossy (nhỏ hơn, dành cho ảnh) và chế độ lossless (pixel chính xác, dành cho đồ họa và master). Chọn theo nội dung: lossy cho ảnh chụp, lossless cho đồ họa có cạnh sắc nét hoặc văn bản nơi các hiện tượng giả sẽ hiển thị. Sự hỗ trợ kép này là một lý do WebP thay thế cả JPEG và PNG cho việc phân phối web.

Lệnh cwebp là gì?

cwebp -q 80 input.jpg -o output.webp chuyển đổi một tệp JPEG sang WebP ở chất lượng 80. Cờ -q đặt chất lượng; thêm -lossless để xuất lossless, và -resize W 0 để thay đổi kích thước thành chiều rộng mục tiêu. Xử lý hàng loạt với vòng lặp shell: for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done. Đây là con đường miễn phí, không giới hạn cho các lô lớn.

Tín dụng hình ảnh

• Biểu đồ trước-sau và kích thước JPEG/WebP — được tác giả tạo từ một bức ảnh kiểu thương mại điện tử (Pexels #16675632, photo by Mikael Blomkvist) để thể hiện mức tiết kiệm thực tế khi chuyển đổi JPEG sang WebP.