Hướng dẫn tạo ảnh WebP miễn phí với plugin WebP Converter for Media đầy đủ và chi tiết.
Trong 2 bài viết trước, tôi đã hướng dẫn cho các bạn cách tối ưu hình ảnh bằng plugin reSmush.it Image Optimizer và Robin Image Optimizer rồi phải không nào? Nếu chưa xem, bạn có thể theo dõi trong phần link tham khảo bên dưới. Một nhược điểm của 2 plugin này là chúng không hỗ trợ tạo ảnh WebP đối với phiên bản miễn phí. Do đó, nếu muốn sử dụng định dạng ảnh WebP, chúng ta sẽ cần phải cài đặt thêm một plugin khác để bổ trợ tính năng. Và plugin mà tôi đang muốn giới thiệu đến các bạn trong bài viết hôm nay chính là WebP Converter for Media.
Tham khảo thêm:
- Hướng dẫn nén ảnh bằng plugin reSmush.it Image Optimizer
- Hướng dẫn nén ảnh bằng plugin Robin Image Optimizer
Tại sao bạn nên chọn WebP Converter for Media?
- Hoàn toàn miễn phí, không có bất cứ giới hạn nào.
- Ảnh WebP được đặt trong thư mục riêng (nằm ngang hàng với thư mục
uploads, có tên làuploads-webpc), có thể dễ dàng xóa bỏ nếu bạn không còn nhu cầu sử dụng ảnh WebP nữa. - Hỗ trợ tạo định dạng WebP cho cả ảnh JPG, JPEG, PNG và GIF.
- Tự động load ảnh WebP sau khi tạo (thông qua 1 file .htaccess nằm trong thư mục
uploads), bạn không cần phải làm gì thêm. - Tích hợp tính năng xóa những ảnh WebP có dung lượng cao hơn ảnh gốc.
Tạo ảnh WebP miễn phí với WebP Converter for Media
1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt plugin WebP Converter for Media (download).
2. Tiếp theo, truy cập Settings => WebP Converter. Tại đây, các bạn sẽ thấy một số thiết lập như sau.
Trong đó:
- List of supported files extensions: tick vào các định dạng ảnh mà bạn muốn tạo thêm phiên bản WebP.
- Conversion method: lựa chọn phương pháp tạo ảnh WebP (sử dụng module GD hoặc Imagick trong PHP). Việc này yêu cầu bạn phải kích hoạt 2 module là
gdvàimagicktrong PHP của host. Dịch vụ WordPress Hosting do WP Căn bản cung cấp đã mặc định được bật sẵn 2 module này nên các bạn không cần làm nữa.
- Automatic removal of WebP files larger than original: tự động xóa bỏ các hình ảnh WebP có kích thước lớn hơn ảnh gốc. Các bạn nên kích hoạt tính năng này vì không phải lúc nào ảnh WebP cũng nhẹ hơn ảnh JPG.
- Browser Caching for WebP files (saving images in browser cache memory): bật tính năng cache trình duyệt cho định dạng ảnh WebP. Các bạn nên kích hoạt nó.
- Images quality: lựa chọn mức chất lượng ảnh WebP so với ảnh gốc. Các bạn nên chọn khoảng 85%.
Sau khi thiết lập xong, click vào nút Save Changes để lưu lại.
3. Kéo xuống phía dưới, click vào nút Regenerate All để bắt đầu quá trình tạo ảnh WebP. Các bạn có thể tick vào mục Skip converted images để bỏ qua những ảnh đã tạo trước đó nhằm tiết kiệm thời gian.
4. Sau khi hoàn tất, các bạn sẽ nhận được thông báo trông giống như thế này.
5. Việc cuối cùng là xóa cache website, cache trình duyệt và cache CDN (nếu có) rồi kiểm tra kết quả.
Thật đơn giản phải không nào? Chúc các bạn thành công!
WP Căn bản đang sử dụng định dạng ảnh WebP, còn bạn thì sao? Theo bạn có nên sử dụng định dạng ảnh WebP hay không? Hãy cho chúng tôi biết ý kiến của bạn thông qua khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy subscribe 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 qua email nhé. Cảm ơn rất nhiều. :)
Anh cho em hỏi là nếu cấu hình theo như anh hướng dẫn nhưng host em không kích hoạt extention Imagick thì có ảnh hưởng gì không ạ? Em thấy vẫn có ảnh webp khi load.
Không vấn đề gì bạn nhé. Nó sẽ sử dụng các thư viện khác nhau để convert mà. Không có cái này thì dùng cái khác.
Cám ơn anh nhiều nhiều.
A Hiếu gỡ cái mục lục rồi à?
Lỗi xung đột với tính năng tối ưu JS của plugin LiteSpeed Cache bạn ạ. Mình vừa chỉnh lại rồi. Cảm ơn bạn đã phản ánh. :D
Sao nó không chuyển đổi sang nhỉ. Mình đã làm theo hướng dẫn của bạn. Trang web của mình là viavili.com
Mình vừa check thử thấy site của bạn có load ảnh WebP mà? Bạn check kiểu gì mà không thấy nó hiển thị vậy?
Mình cài xong thấy trên host có thư mục mới là uploads-webpc rồi và có ảnh .webp rồi nhưng sao khi load bài viết vẫn ra ảnh cũ. Đã xóa cache các kiểu đầy đủ.
Nếu theo như của wpcanban thì ảnh có dạng anh1.jpg sẽ chuyển thành anh1.jpg.webp
Mình làm theo bài viết này, không biết có thiếu công đoạn nào nữa không bạn Hiếu?
Website của bạn có sử dụng CDN không? Web server của bạn là Apache, LiteSpeed hay NginX?
Không dùng CDN và mình dùng web server LiteSpeed bạn.
em cũng dùng webp nhưng nó chưa chuyển đổi hết thì phải
Bạn dùng plugin gì để convert sang ảnh WebP và làm cách nào để load ảnh WebP?
em dùng WP WebPNative để convert và load mà có vẻ ko ổn lắm.
em cũng thử dùng WebP Converter for Media wpcanban giới thiệu mà nó không tự tải ảnh webp như này https://wpcanban.com/wp-content/uploads/2020/04/click-vao-nut-regenerate-all.png.webp
Mình tạo ảnh WebP bằng plugin ShortPixel sau đó load ảnh bằng plugin LiteSpeed Cache. Tất nhiên là phải dùng 1 thủ thuật nhỏ thì ShortPixel nó mới tạo ảnh WebP đuôi .png.webp hoặc .jpg.webp. Vì theo mặc định nó sẽ tạo ảnh chỉ có duy nhất đuôi .webp thôi. Mà LiteSpeed Cache thì không load được ảnh chỉ có duy nhất đuôi .webp.
hóng hướng dẫn của anh, giờ thì lại tạm gỡ webp đã, hix
Mai có nhé. :P
Hiện mình đã cài Robin Image Optimizer như bạn hướng dẫn, thấy tối ưu khá tốt.
Nhưng giờ cài thêm plugin chuyển định dạng WebP này thì lúc upload trực tiếp lên (đăng bài viết) thì nó có vừa tự động nén ảnh theo Plugin nén ảnh và tự động chuyển sang WebP theo plugin WebP Converter for Media không bạn?
Mình dùng nginx nên không có file .htaccess, như bạn nói để load tự động ảnh WebP thì xử lý thế nào bạn nhỉ?
Bạn truy cập trang download plugin, kéo xuống phần “FAQ” xem mục “Configuration for Nginx” nhé.
comback cực mạnh à bro?
Cái gì comeback thế bạn? :O
Mình đang gặp vấn đề Ladyload khi sử dụng WeBP. Không biết Hiếu có bị không?
Tất nhiên là không rồi bạn. Bạn lazyload bằng plugin gì và tạo ảnh WebP bằng plugin gì?
Mình gặp trên nginx không biết Hiếu đang dùng webserver gì?
Mình dùng LiteSpeed bạn ạ. Load ảnh WebP bằng plugin LiteSpeed Cache, lazyload hình ảnh bằng plugin WP Lazy Loading.
Mình cũng dính như bác này, nginx webserver không hỗ trợ rewrite
Chuyển qua dùng Open LiteSpeed đi bạn ơi. Đảm bảo ngon hơn NginX. Hỗ trợ .htaccess giống hệt Apache. Lại còn có cả Control Panel miễn phí (CyberPanel) nữa.
Để mình nghiên cứu thêm về nginx, mình không thích dùng panel, xài bash script nó quen rồi :)
Mình tìm ra cách cho nginx rồi, bạn Hải Nguyễn có thể xem ở đây: https://pus.edu.vn/wordpress/huong-dan-kich-hoat-webp-tren-nginx.html
Chào Hiếu, mình đang dùng Jetpack thì có nên chuyển webp không và nó có hỗ trợ không? Cám ơn bạn
Nếu bạn có bật module Asset CDN của Jetpack thì mặc định sẽ có sẵn WebP luôn nhé.
Bác có thể làm 1 thử đo tử nghiệm khi dùng WebP.
Mình đo thử thì không thấy tốc độ được cả thiện đáng kể lắm
Mình cũng thấy vậy. Nhưng test với google speed sẽ thấy khác!
Vì chỉ mới có Google PageSpeed đưa WebP vào tiêu chuẩn đánh giá thôi. :D
Mình thì chú trọng trải nghiệm của ng dùng, cứ nhanh là đc.
Ở thời điểm hiện tại thì mình vẫn chưa sử dụng webp bởi vì trình duyệt safari trên macos và ios đều chưa hỗ trợ.
Trình duyệt nào không hỗ trợ WebP thì nó load ảnh PNG, JPG mà. Đâu có ảnh hưởng gì?