Định dạng ảnh WebP, AVIF cho website: nhẹ hơn JPG, PNG bao nhiêu và cách chuyển đổi

Ảnh thường chiếm phần lớn dung lượng một trang web. Một trang sản phẩm có mười ảnh JPG chưa tối ưu có thể nặng vài MB, khiến khách dùng điện thoại chờ lâu và bỏ đi. Định dạng ảnh hiện đại như WebP và AVIF giúp giảm mạnh dung lượng mà mắt thường gần như không thấy khác biệt.

Bài viết giải thích WebP, AVIF là gì và cách áp dụng cho website.

So sánh các định dạng

Định dạng	Ưu điểm	Hạn chế	Dùng cho
JPG	Phổ biến, tương thích mọi nơi	Nặng hơn định dạng mới, không nền trong	Ảnh chụp
PNG	Nền trong, sắc nét đường nét	Rất nặng với ảnh chụp	Logo, biểu tượng, ảnh chụp màn hình
WebP	Nhẹ, hỗ trợ nền trong, động	Một số phần mềm cũ chưa mở được	Thay JPG, PNG trên web
AVIF	Nén mạnh, chất lượng tốt	Mã hoá chậm, hỗ trợ chưa tuyệt đối	Ảnh lớn khi cần tối ưu tối đa
SVG	Vector, siêu nhẹ, sắc nét mọi kích thước	Chỉ cho hình vẽ	Logo, biểu tượng

Nhẹ hơn bao nhiêu?

Mức giảm phụ thuộc nội dung ảnh và mức nén, nhưng trong nhiều trường hợp WebP nhẹ hơn JPG tương đương một phần đáng kể, AVIF còn có thể nhẹ hơn nữa. Cách tốt nhất là thử với ảnh thật của website và so sánh bằng mắt trên điện thoại.

Trình duyệt có hỗ trợ không?

WebP được các trình duyệt phổ biến hiện nay hỗ trợ. AVIF được hỗ trợ trên phần lớn trình duyệt mới nhưng vẫn nên có ảnh dự phòng. Các plugin chuyển đổi thường tự phục vụ định dạng phù hợp theo trình duyệt của khách, nên chủ website không cần lo.

Chuyển đổi trên WordPress

1. Plugin tối ưu ảnh: tự động tạo bản WebP, AVIF khi tải ảnh lên và chuyển đổi ảnh cũ hàng loạt.
2. Tính năng cache hosting: một số plugin cache của hosting (như LiteSpeed Cache) có sẵn chuyển WebP.
3. CDN: một số mạng phân phối nội dung tự chuyển định dạng khi phục vụ ảnh.
4. Tải lên sẵn WebP: WordPress hỗ trợ tải ảnh WebP trực tiếp.

Chọn mức chất lượng

Mức nén quá cao làm ảnh mờ, nhiễu, đặc biệt ảnh sản phẩm có chi tiết nhỏ, chữ trên ảnh. Bắt đầu ở mức chất lượng trung bình khá, so sánh bằng mắt, điều chỉnh. Ảnh sản phẩm cao cấp có thể giữ chất lượng cao hơn; ảnh nền, ảnh minh hoạ có thể nén mạnh hơn.

Kích thước quan trọng không kém định dạng

Đổi định dạng chưa đủ nếu ảnh có chiều rộng 5000px trong khi khung hiển thị chỉ 800px. Thu nhỏ ảnh về kích thước phù hợp trước, WordPress sẽ tạo các kích thước khác nhau cho từng thiết bị. Kết hợp tải chậm (lazy load) cho ảnh phía dưới trang. Xem tối ưu hình ảnh chuẩn SEO.

SEO và định dạng mới

Google hiểu và lập chỉ mục ảnh WebP, AVIF bình thường. Vẫn cần đặt tên file có nghĩa, văn bản thay thế mô tả, ảnh nằm gần nội dung liên quan. Tốc độ tải nhanh hơn cũng giúp cải thiện trải nghiệm và chỉ số hiệu suất trang.

Ví dụ cửa hàng nội thất

Một cửa hàng nội thất có hàng nghìn ảnh sản phẩm JPG lớn. Sau khi thu nhỏ kích thước về mức phù hợp và bật chuyển đổi WebP tự động, dung lượng ảnh mỗi trang giảm rõ rệt, trang danh mục tải nhanh hơn trên điện thoại, tỷ lệ thoát trang danh mục giảm.

Sai lầm thường gặp

• Chỉ đổi định dạng, không thu nhỏ kích thước.
• Nén quá mạnh, ảnh sản phẩm mờ.
• Cài nhiều plugin ảnh cùng lúc, tạo trùng file.
• Dùng PNG cho ảnh chụp.
• Quên xoá cache sau khi chuyển đổi.

Kế hoạch áp dụng

1. Đo dung lượng ảnh, tốc độ các trang chính.
2. Chọn một công cụ chuyển đổi.
3. Thu nhỏ ảnh quá lớn, chuyển ảnh cũ hàng loạt.
4. Bật tự động cho ảnh mới.
5. Kiểm tra hiển thị, đo lại tốc độ.

Đo lường hiệu quả

So sánh tổng dung lượng trang, thời gian tải phần tử lớn nhất, điểm tốc độ trước và sau.

Findme hỗ trợ gì?

Findme tối ưu ảnh, chuyển WebP và cấu hình tải chậm trong dịch vụ tối ưu tốc độ website và mọi website bàn giao.

Lời kết

Ảnh đẹp không cần nặng. Định dạng hiện đại kết hợp kích thước phù hợp giúp website vừa sắc nét vừa tải nhanh trên mọi thiết bị.

Ảnh trong nội dung do nhân viên tải lên

Nhân viên đăng bài thường tải ảnh trực tiếp từ điện thoại với kích thước rất lớn. Thiết lập tự động thu nhỏ ảnh khi tải lên về chiều rộng tối đa phù hợp, kết hợp chuyển định dạng tự động, giúp website không phình to dù người đăng không có kiến thức kỹ thuật. Hướng dẫn nhân viên đặt tên file có nghĩa trước khi tải lên.

Ảnh nền và ảnh banner

Ảnh banner đầu trang thường là phần tử lớn nhất cần tải, quyết định tốc độ hiển thị nội dung chính. Không nên tải chậm ảnh này; thay vào đó nén tốt, dùng định dạng hiện đại, cung cấp kích thước riêng cho điện thoại và có thể đánh dấu ưu tiên tải. Ảnh nền trang trí có thể thay bằng màu hoặc dải màu CSS để nhẹ hơn.

Dung lượng hosting

Plugin chuyển đổi thường giữ ảnh gốc và tạo thêm bản WebP, AVIF cho mọi kích thước, khiến dung lượng thư mục tải lên tăng. Theo dõi dung lượng hosting, cân nhắc chỉ tạo một định dạng hiện đại, hoặc dùng CDN chuyển đổi trực tiếp để không lưu thêm tệp trên máy chủ.

Ảnh động và video

Ảnh GIF động rất nặng; có thể thay bằng video ngắn định dạng MP4, WebM hoặc WebP động với dung lượng nhỏ hơn nhiều. Video nên tải chậm và có ảnh xem trước nhẹ.

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

Có cần chuyển tất cả ảnh cũ?
Nên chuyển, plugin làm hàng loạt được.

WebP có hiển thị trên iPhone?
Có, trên các phiên bản hệ điều hành hiện đại.

Ảnh gốc có bị xoá không?
Thường plugin giữ ảnh gốc làm dự phòng.

Nên chọn WebP hay AVIF?
WebP an toàn, phổ biến; AVIF khi cần tối ưu thêm.