Khắc Phục Lỗi WordPress WebP Không Hiển Thị: Nguyên Nhân Và Giải Pháp Toàn Diện

Định dạng ảnh WebP giúp giảm dung lượng tới 30% mà vẫn giữ chất lượng cao, nhưng không ít chủ website WordPress gặp tình trạng webp không hiển thị. Lỗi này khiến ảnh bị vỡ, hiển thị icon lỗi hoặc trình duyệt chỉ tải phiên bản JPEG/PNG. Bài viết này phân tích toàn bộ nguyên nhân và hướng dẫn chi tiết từng bước khắc phục lỗi WordPress WebP không hiển thị, giúp bạn tối ưu tốc độ trang mà không ảnh hưởng trải nghiệm người dùng.

Bản chất của lỗi WordPress WebP không hiển thị

WebP là định dạng ảnh do Google phát triển, được hầu hết trình duyệt hiện đại hỗ trợ. Tuy nhiên, khi tích hợp vào WordPress, có nhiều lớp trung gian: plugin tạo WebP, cấu hình máy chủ, CDN, cache trình duyệt. Lỗi xảy ra khi một trong các lớp này không đồng bộ với nhau. Cụ thể, file WebP tồn tại trên server nhưng trình duyệt không thể hiển thị do thiếu header Content-Type đúng, hoặc plugin chuyển đổi tạo ra định dạng không tương thích, hoặc hosting không hỗ trợ module rewrite.

Nguyên nhân phổ biến gây lỗi WebP không hiển thị trong WordPress

1. Trình duyệt không hỗ trợ WebP

Mặc dù Chrome, Firefox, Edge, Opera đã hỗ trợ đầy đủ, nhưng Safari (phiên bản cũ) và Internet Explorer hoàn toàn không đọc được WebP. Nếu plugin của bạn không có cơ chế fallback (dự phòng) sang JPEG/PNG, người dùng Safari sẽ thấy ảnh trắng hoặc không tải được. Hãy kiểm tra User-Agent và sử dụng thẻ <picture> để phân phối đúng định dạng.

2. Plugin WebP không cấu hình đúng cơ chế phục vụ

Đa số plugin tạo WebP như Imagify, ShortPixel, WebP Express, EWWW IO đều có chức năng phục vụ ảnh trực tiếp. Tuy nhiên, nếu bạn chọn chế độ “Deliver WebP only” thay vì “Use rewrite rules” hoặc “Use <picture> tags”, ảnh WebP sẽ không được gửi đúng MIME type cho trình duyệt. Cần kiểm tra lại cài đặt Delivery Method trong từng plugin.

3. Server không hỗ trợ rewrite hoặc MIME type

Khi plugin dùng phương thức.htaccess để kiểm tra và trả về WebP, server cần có mod_rewrite (Apache) hoặc tương đương trên Nginx. Nếu hosting chặn RewriteRule hoặc không có module, quá trình rewrite thất bại. Thêm vào đó, thiếu dòng AddType image/webp.webp trong.htaccess khiến Apache không nhận diện đúng kiểu file, trình duyệt hiểu đó là file text/plain và không hiển thị.

4. Cache plugin hoặc CDN giữ phiên bản cũ

Sau khi kích hoạt WebP, bộ nhớ đệm của W3 Total Cache, WP Rocket, hoặc Cloudflare vẫn phục vụ ảnh JPEG gốc. Bạn cần purge cache hoàn toàn. Đồng thời, nếu CDN không hỗ trợ WebP tự động, bạn phải cấu hình quy tắc edge để chuyển đổi nội dung dựa trên Accept header.

5. Lỗi tạo WebP từ plugin convert

Một số plugin tạo WebP chất lượng thấp, file bị lỗi trong quá trình nén. Khi trỏ trực tiếp vào đường dẫn ảnh WebP, trình duyệt hiện thông báo lỗi. Hãy dùng công cụ kiểm tra như Google PageSpeed Insights hoặc mở URL ảnh riêng lẻ để xác minh.

Hướng dẫn khắc phục lỗi WebP không hiển thị từng bước

Bước 1: Kiểm tra xem server có thực sự trả đúng file WebP không

• Mở Chrome DevTools (F12), tab Network.
• Tải lại trang, tìm request ảnh.
• Kiểm tra cột Type – nếu hiển thị image/webp là đúng. Nếu hiển thị image/jpeg hoặc text/html, chứng tỏ rewrite chưa hoạt động.

Bước 2: Thêm MIME type WebP vào.htaccess

AddType image/webp.webp

Dòng này phải nằm trước các rewrite rule. Đối với Nginx, thêm vào block location ~ .webp$ với dòng types { image/webp webp; }.

Bước 3: Cấu hình đúng Delivery Method trong plugin

Ví dụ với WebP Express (miễn phí): Vào Settings > WebP Express, chọn Destination folder: “Uploads”. Trong “Operation mode”, chọn “Varied image responses”. Kích hoạt “Enable webp conversion” và “Enable redirection to existing webp”. Sau đó test bằng công cụ Test của plugin. Nếu kết quả báo “Image is displayed as webp” là thành công.

Plugin	Delivery Method khuyên dùng	Ghi chú
WebP Express	Varied image responses (via.htaccess)	Chỉ hoạt động khi hosting có mod_rewrite
Imagify	Serve WebP using <picture> tags	Yêu cầu chỉnh theme để thêm thẻ picture
ShortPixel	Global WebP delivery (via.htaccess)	Kiểm tra thêm mục “WebP as “
EWWW Image Optimizer	Same as WebP rewrite rules	Đảm bảo “Enable WebP rewriting” được bật

Bước 4: Xóa cache hoàn toàn

• Xóa cache plugin (WP Rocket, W3 Total Cache, LiteSpeed Cache).
• Xóa cache trình duyệt hoặc dùng chế độ Ẩn danh.
• Nếu dùng Cloudflare: Purge Cache, hoặc tùy chỉnh Page Rule: bật “Cache Level: Standard” và thêm header “Accept: image/webp”.

Bước 5: Thêm code fallback cho Safari và IE

function webp_fallback( $attr ) { if ( isset( $attr['src'] ) && strpos( $attr['src'], '.webp' )!== false ) { $attr['src'] = str_replace( '.webp', '.jpg', $attr['src'] ); } return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'webp_fallback' );

Hoặc đơn giản hơn: dùng plugin “WebP & AVIF for Media” hoặc bật chế độ “Use <picture> tag” trong Imagify để tự động sinh fallback.

So sánh ưu và nhược điểm của các phương pháp phân phối WebP

Phương pháp	Ưu điểm	Nhược điểm
Rewrite via.htaccess	Không thay đổi code theme, hỗ trợ hầu hết trình duyệt hiện đại	Cần server có mod_rewrite, không fallback cho Safari cũ
<picture> tags	Kiểm soát 100% việc hiển thị, bảo vệ SEO vì có fallback rõ ràng	Phải chỉnh sửa theme hoặc dùng plugin hỗ trợ
Content negotiation (Accept header)	Tự động chọn đúng định dạng, tương thích CDN	Phức tạp hơn, cần cấu hình Nginx/Apache thủ công

Lợi ích khi khắc phục thành công lỗi WebP không hiển thị


• Tốc độ tải trang tăng 15-30% nhờ dung lượng ảnh giảm mạnh.
• Điểm PageSpeed Insights tăng (LCP giảm).
• Giảm băng thông hosting, đặc biệt với site nhiều ảnh.
• Trải nghiệm người dùng đồng nhất trên mọi trình duyệt hiện đại.

Sai lầm thường gặp khi xử lý lỗi WebP trên WordPress

Chỉ tạo WebP mà không phân phối đúng cách

Nhiều người chỉ cài plugin convert ảnh sang WebP, nghĩ rằng ảnh sẽ tự động hiển thị. Thực tế, cần một cơ chế riêng để thay thế ảnh gốc bằng WebP trong luồng phục vụ.

Quên cập nhật chính sách CDN

Nếu dùng Cloudflare, hãy vào Rules > Page Rules tạo rule: example.com/* với setting “Cache Level: Standard” và “Edge Cache TTL” hợp lý. Đồng thời, bật tính năng “Polish” (nếu có gói Pro) để nén WebP tự động.

Dùng plugin WebP xung đột với plugin tối ưu ảnh khác

Việc chạy đồng thời EWWW IO và WebP Express cùng lúc có thể gây lỗi rewrite vòng lặp. Chỉ nên dùng một plugin duy nhất để tạo và phân phối WebP.

Các câu hỏi thường gặp (FAQ) về lỗi WordPress WebP không hiển thị

Tại sao ảnh WebP hiển thị trên Chrome nhưng không hiển thị trên Safari?

Safari cũ (trước iOS 14) không hỗ trợ WebP. Cần kích hoạt fallback bằng thẻ <picture> hoặc filter attribute. Kiểm tra phiên bản Safari và bật chế độ dự phòng trong plugin.

Lỗi ‘ERR_INVALID_OUTSIDE_REWRITE’ khi dùng WebP Express là gì?

Do file.htaccess có cú pháp sai hoặc server không cho phép rewrite. Hãy kiểm tra file.htaccess trong thư mục wp-content và uploads. Xóa dòng thừa và thử chế độ “Use <picture> tags” thay vì rewrite.

WebP có ảnh hưởng SEO không?

Không ảnh hưởng xấu. Google hỗ trợ crawl WebP và đánh giá cao vì tốc độ nhanh. Tuy nhiên, phải đảm bảo ảnh có thẻ alt và title đầy đủ. Fallback bằng JPEG giúp bot hiểu nội dung ảnh.

Làm sao kiểm tra hosting có hỗ trợ WebP không?

Vào cPanel > PHP Info, tìm “WebP support” trong dòng “gd” hoặc “imagick”. Nếu không có, liên hệ host yêu cầu kích hoạt extension. Hoặc dùng plugin “Health Check & Troubleshooting” để kiểm tra.

Có nên dùng plugin WebP miễn phí không?

Có, WebP Express hoặc EWWW IO miễn phí rất tốt. Nếu site có ít ảnh, dùng miễn phí đủ. Với site lớn, nên dùng Imagify (trả phí) để có thêm tính năng fallback tự động, hỗ trợ AVIF và CDN.

Kết luận

Lỗi WordPress WebP không hiển thị thường xuất phát từ việc thiếu cấu hình MIME type, rewrite rule, hoặc fallback cho trình duyệt cũ. Bằng cách kiểm tra DevTools, thêm dòng AddType vào.htaccess, chọn đúng plugin và xóa cache, bạn có thể giải quyết vấn đề trong vài phút. Đừng quên test trên nhiều trình duyệt và thiết bị để đảm bảo mọi người đều thấy ảnh đẹp, nhanh. Nếu vẫn còn lỗi, hãy disable từng plugin cache để kiểm tra xung đột. Cuối cùng, WebP không chỉ giúp tăng tốc WordPress mà còn cải thiện trải nghiệm người dùng, giảm chi phí hosting – một giải pháp tối ưu cho bất kỳ website nào.