Hướng dẫn sử dụng định dạng WebP cho hình ảnh trong WordPress.
Nếu bạn chưa biết thì WebP chính là một trong những chìa khóa quan trọng giúp WP Căn bản có được tốc độ load “thần sầu” như ngày hôm nay, bên cạnh những bí quyết đã được bật mí trước đó. Với WebP, các bạn có thể giảm page-size đi đáng kể nhờ dung lượng của ảnh ở định dạng WebP thấp hơn rất nhiều so với PNG hay JPG/JPEG truyền thống. Việc sử dụng WebP trong WordPress hiện tại cũng đã trở nên rất dễ dàng nhờ sự trợ giúp của một số plugin chuyên dụng.
Tham khảo thêm:
- ShortPixel – Plugin nén ảnh giá rẻ tốt nhất dành cho WordPress
- EWWW Image Optimizer – Sự thay thế tuyệt vời cho Smush.It
WebP là gì?
WebP là một định dạng ảnh mới, được phát triển bởi Google, với mục tiêu giảm dung lượng giúp website load nhanh hơn mà không làm ảnh hưởng nhiều đến chất lượng thực tế. Với hình thức nén lossless (không giảm chất lượng), hình ảnh ở định dạng WebP có thể nhẹ hơn định dạng PNG đến 22%. Còn với hình thức nén lossy (giảm chất lượng), hình ảnh ở định dạng WebP có thể nhẹ hơn định dạng JPG/JPEG lên đến 34%. Đây là những con số rất đáng kể, đặc biệt là với hình ảnh có kích thước lớn.
Những trình duyệt nào hỗ trợ WebP?
Không phải tất cả trình duyệt web hiện nay đều hỗ trợ định dạng WebP. Tuy nhiên, các trình duyệt web phổ biến như Google Chrome, Mozilla Firefox, Microsoft Edge, Safari hay Opera đều đã hỗ trợ định dạng này.
Ghi chú:
- Màu xanh: đã hỗ trợ WebP.
- Màu đỏ: chưa hỗ trợ WebP.
Sử dụng định dạng WebP trong WordPress
Để sử dụng định dạng WebP trong WordPress, các bạn cần tiến hành 2 bước căn bản sau đây:
Tạo định dạng WebP cho hình ảnh
Các plugin nén ảnh phổ biến hiện nay như ShortPixel, EWWW Image Optimizer, Optimus… đều đã được tích hợp sẵn công cụ tạo ảnh WebP tự động cho WordPress. Trong một bài viết cách đây không lâu, tôi đã hướng dẫn các bạn cách sử dụng plugin ShortPixel để tạo ảnh WebP. Các bạn có thể tham khảo lại thông qua link ở đầu bài viết này.
Tuy nhiên, ShortPixel không phải là một dịch vụ miễn phí. Đo đó, nếu muốn nén ảnh với số lượng lớn, các bạn cần phải mua các gói credit của họ. Theo đánh giá của tôi, ShortPixel là nhà cung cấp có mức giá rẻ nhất trong số các dịch vụ nén ảnh trả phí. Hiệu suất nén của nó cũng thuộc hàng tốt nhất. WP Căn bản cũng đang sử dụng dịch vụ này. Đăng ký mua credit ShortPixel theo link dưới đây nếu bạn có nhu cầu tương tự:
Ngoài ra, nếu đang sử dụng dịch vụ WordPress Hosting do WP Căn bản cung cấp hoặc các loại hosting chạy Web Server LiteSpeed/ OpenLiteSpeed, các bạn có thể sử dụng plugin LiteSpeed Cache để nén và tạo ảnh WebP. Tham khảo thêm: Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache.
Một giải pháp khác mà các bạn cũng có thể tham khảo đó là: Tạo ảnh WebP miễn phí với plugin WebP Converter for Media.
Kích hoạt WebP cho website
Sau khi tạo ảnh với định dạng WebP, các bạn cần phải kích hoạt chúng để trình duyệt web có thể nhận biết được. Để kích hoạt WebP, các bạn có thể sử dụng một trong 2 phương thức sau:
Sử dụng file .htaccess hoặc file config
Đối với Web Server Apache hoặc LiteSpeed, các bạn cần chèn đoạn code sau vào file .htaccess của thư mục cài đặt WordPress:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webpĐối với Web Server NginX, các bạn thêm đoạn code sau đây vào file NginX config (nginx.conf):
# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}
# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;
}Tuy nhiên, việc sử dụng code thường tiềm ẩn nhiều rủi ro nên chúng tôi khuyến khích các bạn nên sử dụng plugin.
Sử dụng plugin ShortPixel
Nếu bạn sử dụng plugin ShortPixel để tạo ảnh WebP thì bản thân nó cũng đã được trang bị sẵn tính năng load ảnh. Các bạn chỉ cần tick vào mục Deliver the next generation versions of the images in the front-end sau đó chọn một trong hai tùy chọn bên dưới là được.
Trong đó:
- Using the <PICTURE> tag syntax: thay thế các tag <img> bằng <picture> để load ảnh WebP.
- Without altering the page code (via .htaccess): sử dụng file
.htaccessđể load ảnh WebP.
Hãy kiểm tra từng cách để có sự lựa chọn phù hợp nhất cho website của bạn.
Sử dụng plugin Cache Enabler
Đây là một trong số ít các plugin miễn phí có hỗ trợ tạo bản cache với định dạng WebP. Cách sử dụng của plugin này khá đơn giản. Các bạn chỉ cần cài đặt và kích hoạt plugin Cache Enabler (download).
Tiếp theo, truy cập vào Settings => Cache Enabler. Thiết lập như hình bên dưới và lưu lại.
Lưu ý:
- Deactive và xóa bỏ các plugin tạo cache mà bạn đang sử dụng trước khi cài đặt plugin Cache Enabler để tránh bị xung đột.
- Định dạng WebP chỉ hoạt động trên bản cache. Do đó nếu bạn đang đăng nhập thì WebP sẽ không hoạt động.
Sử dụng plugin LiteSpeed Cache
Nếu website WordPress của bạn đang hoạt động trên Web Server LiteSpeed/ OpenLiteSpeed, bạn có thể load ảnh WebP thông qua plugin LiteSpeed Cache. Tham khảo bài viết “Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache” để biết thêm chi tiết.
Kiểm tra WebP
Để biết định dạng WebP đã hoạt động bình thường hay chưa, các bạn truy cập web thông qua một trình duyệt có hỗ trợ WebP, chẳng hạn Google Chrome.
Click chuột phải vào 1 trang bất kỳ, chọn Inspect => chọn tab Network => chọn mục Img => Tải lại trang (F5) và xem cột Type. Chúc các bạn thành công!
Bạn có đang sử dụng định dạng WebP trên website của mình? Bạn đánh giá thế nào về ảnh hưởng của nó đối với tốc độ load của site? Hãy chia sẻ quan điểm và ý kiến của bạn với chúng tôi trong khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
nghiệt ngã là cả Google Chrome và Cococ cho iOS đều ko hiển thị webp.
Trước sau gì cũng hỗ trợ thôi bạn ạ. Chrome trên Android đã hỗ trợ rồi. Còn Safari thì đang thử nghiệm.
Shortpixel tự động tạo ra các file có tên .png.webp mà mình không thể nào cache được nó, bực ghê
EWWW Image Optimizer mới tạo ảnh có đuôi kiểu đó. Còn ShortPixel tạo ảnh WebP với đuôi .webp thôi nhé. Nhưng cho dù là ở đuôi nào thì vẫn cache được bình thường. Nó vẫn là .webp mà thôi.
Đây bác, Test web em nè: https://hbh.vn
Pagespeed nè: https://developers.google.com/speed/pagespeed/insights/?hl=vi&url=https%3A%2F%2Fhbh.vn
Em đã cache bằng cả nginx là 30 day mà trên pagespeed vẫn là 5m :(
NginX thì mình không rõ vì chưa dùng WebP trên NginX bao giờ. Nhưng riêng Apache và LiteSpeed (hỗ trợ .htaccess) thì vẫn cache hoàn toàn bình thường.
Ừm đau thật, mình cache xong vẫn báo. Đã vậy lazyload còn không hoạt động, bực mình
Chuyển qua dùng LiteSpeed. :D
Dùng cái plug in cache thì có cần chỉnh thêm cấu hình NginX ko ạ, hay chỉ cần cài plug in cache là đc ạ
Không cần nhé.
Em dùng EWWW và Litespeed cùng tối ưu. Và đang bị lỗi là: Vistor dùng Safari, Firefox thì không load ảnh JPG được mà nó cứ nhè webp load về, trong khi đó trình duyệt không hỗ trợ. Em phải làm thế nào để cấu hình load jpg với trình duyệt không hỗ trợ webp ạ
Site của bạn có đang dùng CloudFlare hay dịch vụ CDN nào khác không?
Em dùng Cloudflare anh ạ
Nếu vậy thì nó lỗi là đúng rồi. Gỡ cái code WebP cũ ra, dùng tính năng load ảnh WebP của plugin LiteSpeed Cache ấy. Vào LiteSpeed Cache => Settings => [7] Media => chuyển mục Image WebP Replacement và WebP For Extra srcset sang trạng thái ON => Save Changes => xóa LiteSpeed Cache + cache CloudFlare rồi kiểm tra kết quả.
Em muốn dùng EWWW vì thấy nó nén ảnh hơn một xíu với Litespeed, nhanh hơn vì nó dùng tài nguyên trên host luôn. Chứ Litespeed nén lâu thậm tệ luôn anh ạ.
Bây giờ em tắt hết mục Media của LiteSpeed có giải quyết được vấn đề không anh.
Mình bảo bạn tắt tính năng load ảnh WebP bằng code của EWWWW đi chứ có bảo bạn tắt tính năng nén ảnh hay tắt luôn plugin EWWW đi đâu? Cái code load WebP của thằng EWWW là nguyên nhân xung đột với CloudFlare chứ không phải thằng LiteSpeed Cache. Bảo sao thì cứ làm đúng như vậy đi.
Thành công rồi anh ạ. Em cảm ơn anh nhiều nhiều ạ. Chúc anh một ngày tốt lành
Ý của a trong cmt này là chỉ cần xóa bỏ code load Webp của thằng EWWW trog .htaccess, và chuyển sang dùng load Webp của Litespeed, còn tính năng tạo ảnh Webp của EWWW vẫn bật bình thường đúng không ạ?
Đúng rồi bạn.
Cái Cache Enabler và WP rocket có xung đột nhau không bác
Cài 1 trong 2 thôi bạn. Ai lại đi cài 2 plugin có cùng 1 chức năng tạo cache bao giờ.
cảm ơn ad nhé giờ mới biết pluss này làm web mình lỗi định dạng nhận mỗi ảnh jpg để tải lên xem sao
WebP sẽ tạo ra các file ảnh định dạng *.webp như vậy khi up 1 ảnh lên, với các kích thước do themes tạo ra. Cộng thêm ảnh Webp cho mỗi size nữa, số lượng sẽ nhân đôi. Được về tốc độ nhưng nguy hiểm nếu dung lượng host có hạn.
Muốn nhanh thì phải đánh đổi thôi bạn. :D
Sao mình làm theo mà không được vậy Hiếu ơi, đã cài Optimus plugin và dán đoạn code vào NginX.
Kiểm tra thì ảnh vẫn hiện jpg và png.
Hiếu check giúp mình xem nó bị sao vậy: denlednhat.com
Thank Hiếu
Bạn copy 1 link hình ảnh bất kỳ và đổi đuôi của nó từ JPG/PNG sang WebP xem nó có hiển thị được trên trình duyệt không? :P
Hiếu cho mình hỏi là nếu dùng EWWW thì chỉ tích vô tùy chọn “JPG/PNG to WebP” trong tab WebP Settings thôi phải không. Có tích thêm mục nào nữa không nhỉ? sao mình tích như vậy và thêm vào file .htaccess như bài hướng dẫn rồi mà mình thấy vẫn có hình load PNG và JPEG :(
Mình chưa dùng tính năng tạo ảnh WebP của EIO bao giờ nên cũng không rõ lắm. Để tạo ảnh WebP, mình thường dùng ShortPixel hoặc Optimus. :P
Em ko xài cache trên web mà được cache trên sever vậy có dùng được ko ạ.
Nếu em dùng soft chuyển từ jpg sang webp rồi up lên hay là up cả 2 phiên bản hả anh ?
Miễn là server của bạn hỗ trợ file .htaccess thì có thể thực hiện theo hướng dẫn bên trên được. Nếu là NginX thì cần phải convert config từ .htaccess sang. Bạn phải upload cả 2 phiên bản nhé. Nếu chỉ upload 1 thì sẽ gặp lỗi ảnh trên trình duyệt Safari, Firefox hay IE. Do các trình duyệt này chưa hỗ trợ định dạng WebP. :P