Triển khai định dạng hình ảnh webp trên wordpress

Thông tin hệ thống: Ubuntu 20.4 + Nginx + Webinoly
Plugin cache hỗ trợ webp: WP Rocket, Litecache…
Plugin chuyển định dạng png, jpg sang webp: WebP Express

1. Cài đặt các plugin cần thiết

  • WebP Express
  • WP Rocket

2. Cấu hình plugin WebP Express

Đối với vps apache có hỗ trợ .htaccess thì việc cấu hình quá đơn giản và có thể sử dụng chức năng Live test để kiểm tra. Còn trên Nginx, phải thêm file cấu hình.
Các bạn có thể để cài đặt mặc định và chỉ thiết lập phần Alter HTML dưới cuối. Tuy nhiên mình cũng sẻ cấu hình của mình để các bạn tham khảo:

Operation mode & General

Operation mode & General

Đối với nginx và một số plugin cache khác, tác giả đề nghị File extension: Append ".webp" – tức nối thêm .webp. Ví dụ: hinh_anh.png sau khi chuyển sang webp sẽ là hinh_anh.png.webp. Và nó hoạt động tốt với hầu hết mọi plugin cache.
Nhưng cá nhân mình thích .webp hơn, tức là hinh_anh.webp vì vậy mình sẽ chọn File extension: Set to ".webp". May mắn thay, mình thấy nó hoạt động với WP Rocket.

.htaccess rules for webp generation

Phần này chọn hết. .htaccess không hoạt động với nginx nên bạn sẽ phải thêm cấu hình thủ công. Nó giúp chuyển hình ảnh sang webp khi duyệt hình ảnh đó và sử dụng hình ảnh webp nếu có sẵn…

Conversion

Conversion method: Phương pháp chuyển đổi – Bắt buộc phải có ít nhất 1 phương pháp chuyển đổi hoạt động trên server của bạn.

Alter HTML

Sau khi hoàn thành các cài đặt, nhấn nút Save settings để lưu lại.

3. Cấu hình trên nginx

  • Truy cập đường dẫn /var/www/example.com/
  • Tạo file webp-nginx.conf
  • Sao chép nội dung tệp tại File cấu hình nginx cho WebP Express
  • Lưu file và reload nginx: nginx -t && nginx -s reload

4. Cấu hình plugin cache để phục vụ webp

:warning: Hiện tại WP Rocket chưa hỗ trợ cache định dạng image.webp vì vậy nếu ở phần (2) bạn chọn File extension là Set to “.webp” thì có thể bỏ qua phần này. WP Rocket chỉ hỗ trợ cache image.png.webp, image.jpg.webp. Nếu bật Enable WebP caching thì Rocket Nginx có thể hoạt động không đúng.

WP Rocket

Tab MEDIA > WebP compatibility > Enable WebP caching

Enable webp on wp rocket

5. Kiểm tra hoạt động

Kiểm tra với hình ảnh tải lên

Tạo một bài đăng mới với hình ảnh tải lên. Mở bài đăng mới trên trình duyệt (chrome hoặc Firefox). Click chuột phải vào hình ảnh > Chọn kiểm tra. Nếu liên kết hình ảnh kết thúc với .webp > OK

Kiểm tra với hình ảnh cũ

Mở trong trình duyệt một hình ảnh cũ bất kỳ có đuôi .png hoặc .jpg. sau đó xóa phần mở rộng và thay bằng .webp. Nếu hình ảnh tải > OK

Kiểm tra trên di động

Truy cập bài đăng vừa tạo của bạn ở tất cả các trình duyệt trên điện thoại di động (chrome, safari…). Nếu hình ảnh hiển thị đầy đủ > OK