in ,

Cách upload file WebP lên WordPress

WebP là một loại định dạng hình ảnh khá mới được tạo ra bởi Google với mục đích thay thế cho các chuẩn ảnh nén có vẻ sắp lỗi thời là JPEG, PNG và GIF. Đặc điểm của WebP là hỗ trợ nén tốt, hỗ trợ lưu thông số transparent (trong suốt) và các hiệu ứng.

Thực ra WebP có lâu rồi. Định dạng này lần đầu tiên được giới thiệu vào tháng 9 năm 2010 như là một tiêu chuẩn mới cho true-color graphic trên web. Nó tạo ra file ảnh có kích thước nhỏ hơn nhưng lại có chất lượng tương đương JPEG. Năm 2012, WebP hỗ trợ hình ảnh lossless và translucent nên hoàn toàn có thể thay thế cho định dạng PNG.

Với mỗi website, dung lượng trang chính vấn đề quan trọng. Kích thước file càng nhỏ thì web càng load nhanh. Vì vậy, việc giảm kích thước hình ảnh bằng định dạng WebP hay sử dụng tính năng lazy load.

WordPress là trình CMS phổ biến nhất thế giới, hiện tại có rất nhiều plugin hỗ trợ tự động nén ảnh theo chuẩn này để giảm kích thước toàn hosting hay VPS/Server. Tuy nhiên nếu bạn upload lên một file WebP vào thư viện (Media), bạn sẽ nhận thông báo lỗi WordPress chưa hỗ trợ định dạng này.

Thực ra nếu biết code bạn có thể dễ dàng thêm phần hỗ trợ file trong file functions.php của WordPress. Tuy nhiên có một cách dễ dàng hơn đó là dùng plugin Allow Webp image.

Đầu tiên, bạn vào CMS WordPress của bạn, chọn Plugins > Add New. Tìm từ khoá WebP và chọn mục plugin có tên Allow WebP image để cài đặt. Plugin có link là https://wordpress.org/plugins/allow-webp-image/.

Sau khi cài đặt xong thì bạn không còn cần phải cấu hình gì cả, CMS của bạn sẽ chính thức hỗ trợ file WebP như một chuẩn ảnh thông thường. Bây giờ bạn vô Media đã có thể chọn các file *.webp và upload lên mà không còn bị dính thông báo lỗi nữa.

Written by Linh Nguyễn

Mình đang thực hiện trang Trải Nghiệm Số tại địa chỉ trainghiemso.vn, ngoài ra còn là BTV Công Nghệ tại báo VietNamNet. Trang blog này mình tổng hợp lại các bài viết do mình thực hiện, cũng như viết lảm nhảm cho vui.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments