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

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

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

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.

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

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

WP Rocket

Tab MEDIA > WebP compatibility >  Enable WebP caching

Enable webp on wp rocket

4. 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

Nguồn: https://aznet.io/t/trien-khai-dinh-dang-hinh-anh-webp-tren-wordpress/108

Đã test trên datvnn.com

Tags:

Chúng tôi sẽ rất vui khi nghe những suy nghĩ của bạn

Để lại một bình luận

DATVNN.COM
Logo
Register New Account
Reset Password
Shopping cart