Toàn tập về định dạng ảnh WEBP dành cho website

Việc sử dụng ảnh WEBP để phục vụ việc tối ưu website là một phương án được nhiều chuyên gia khuyến nghị, bao gồm cả các lập trình viên làm việc tại Google. Với cùng kích thước và chất lượng, định dạng ảnh WEBP có dung lượng nhẹ hơn từ 20-30%. Code Tốt chia sẻ cách bạn kiểm tra nhanh xem website của mình đã hỗ trợ định dạng ảnh WEBP sau khi bật hoặc tích hợp chức năng nén ảnh WEBP chưa trong bài viết sau.

Mục lục ẩn
1. Định dạng ảnh WEBP tạo ra bằng cách nào?
2. Định dạng WEBP được xử lý trên máy chủ như thế nào?
3. Kiểm tra ảnh WEBP có đang sử dụng trong website của bạn
4. Các vấn đề thường gặp khi sử dụng ảnh WEBP

Định dạng ảnh WEBP tạo ra bằng cách nào?

Nếu bạn đang sử dụng website WordPress, bạn có thể chọn một plugin để tạo ra phiên bản WEBP.

Các plugin WordPress miễn phí cho phép tạo định dạng ảnh WEBP phổ biến nhất:

Convert ảnh WEBP miễn phí sử dụng plugin WordPress WebP Express

Các công cụ trả phí cũng tạo định dạng ảnh WEBP, nhưng thường sẽ có các giới hạn và bạn cần trả tiền theo lượt nén ảnh. Tất nhiên, nó có cả phiên bản dành cho WordPress.

Nếu bạn cần làm thao tác thủ công trên máy tính, ví dụ chuyển luôn một thư mục chứa ảnh thành định dạng WEBP ngay trên máy tính, sau đó reupload lên hosting:

WebP Converter (dành cho máy tính Windows/Mac)

Nếu bạn có ít ảnh và chỉ muốn upload bằng tay một vài hình ảnh để chuyển sang WEBP, có các công cụ miễn phí dạng trình duyệt:

Công cụ chuyển ảnh WEBP trên trình duyệt miễn phí

WebP Converter Online
Cloudinary WebP Convert
CloudConverter WebP

Định dạng WEBP được xử lý trên máy chủ như thế nào?

Thường các định dạng ảnh WEBP sẽ nằm đồng thời cùng với ảnh nguyên gốc (các định dạng ảnh file PNG, JPG, JPEG). Lý do là bởi WEBP chưa được hỗ trợ trên một số trình duyệt cũ, và thực tế mọi tác vụ của người dùng khi chuyển đổi sang WEBP như bạn thấy là mất nhiều thời gian hoặc cần công cụ đi kèm.

Có 2 phương thức thường thấy khi cài đặt lên môi trường máy chủ:

Sử dụng code để hỗ trợ ảnh định dạng WEBP sử dụng HTML5, như ví dụ sau:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg">
</picture>

Sử dụng phương thức rewrite hỗ trợ cho các máy chủ Apache, Nginx hoặc LiteSpeed để khi trình duyệt gửi request, ảnh sẽ tải phiên bản WEBP.

Đây là phương thức phổ biến nhất và có sẵn với hầu hết các web server phổ biến nhất. Bạn nên liên hệ với nhà cung cấp dịch vụ Hosting để biết thêm nếu quá trình kiểm tra không thấy ảnh WEBP được tải về trình duyệt mặc dù bạn có thấy ảnh WEBP đã convert.

Ví dụ cho máy chủ Apache có bật Rewrite, hãy sửa file .htaccess:

<Files *.webp>
    Header set Vary "Accept-Encoding"
    AddType "image/webp" .webp
    AddEncoding webp .webp
</Files>

RewriteCond %{HTTP:Accept} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.*)$ $1.webp [L]

Với máy chủ hỗ trợ Nginx, bạn có thể tham khảo cấu hình file .conf sau:

# WebP
location ~* ^/.+\.(png|gif|jpe?g)$ {
    # BEGIN Browser Caching of WebP
    expires 180d; 
    add_header Pragma "public";
    add_header Cache-Control "public";
    # END Browser Caching of WebP

    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
}

# Browser Caching
location ~* \.(css|js|ico|gif|jpeg|jpg|webp|png|svg|eot|otf|woff|woff2|ttf|ogg)$ {
    expires 180d; 
    add_header Pragma "public";
    add_header Cache-Control "public";
}

Với máy chủ Litespeed, bạn có thể tham khảo cấu hình trong tài liệu này.

Kiểm tra ảnh WEBP có đang sử dụng trong website của bạn

Tuy việc bật tính năng lên khá dễ dàng, có thể tuỳ môi trường máy chủ mà bạn cần yêu cầu hỗ trợ thêm từ phía nhà cung cấp dịch vụ hosting cho việc này.

Để kiểm tra, bạn hãy thử các bước sau:

  1. Truy cập công cụ kiểm tra HTTP status tại https://httpstatus.io
  2. Trên website của bạn, copy một URL ảnh, ví dụ ảnh logo hoặc ảnh trong bài viết.
  3. Dán URL ảnh vào trong công cụ HTTPStatus và bấm “Check status”
  4. Ở phần kết quả trả ra, nếu định dạng ảnh WEBP được tải, bạn sẽ thấy hiện ra ở mục “Content-Type”
Kiểm tra định dạng ảnh WEBP hỗ trợ trên công cụ online

Các gói Bảo trì website và Tối ưu Website đều hỗ trợ chuyển đổi ảnh sang WEBP trên website. Vui lòng liên hệ bộ phận CSKH của Code Tốt nếu bạn cần chức năng này trên web.

Các vấn đề thường gặp khi sử dụng ảnh WEBP

Qua quá trình sử dụng WebP cho các dự án, Code Tốt có thể đưa ra mấy vấn đề thường gặp như sau.

Định dạng ảnh WEBP có thể không tối ưu tốt như định dạng ảnh gốc, trong một số trường hợp. Đặc biệt là với ảnh đã tối ưu rồi.

Định dạng ảnh WEBP thường sẽ tồn tại song song với định dạng ảnh gốc như một phiên bản bổ sung, nên sẽ ảnh hưởng tới tổng dung lượng hosting/VPS của gói bạn đang dùng.

Trong trường hợp bạn upload trực tiếp định dạng ảnh WEBP lên web, việc đọc định dạng này trên một số trình duyệt cũ sẽ dẫn tới lỗi. Nên hãy cân nhắc vẫn sử dụng các định dạng ảnh truyền thống (JPG, JPEG, PNG) khi upload lên, và sử dụng công cụ chuyển ảnh WEBP tự động để tạo thêm phiên bản bổ sung.

5/5 - (1 bình chọn)

Bài viết liên quan