Chuyển hình ảnh sang định dạng WebP để tăng tốc WordPress

Tối ưu hóa website giúp truy cập nhanh hơn và cải thiện thứ hạng tìm kiếm, nhưng một trong những vấn đề làm bạn đau đầu là làm sao để giảm dung lượng hình ảnh mà vẫn đảm bảo chất lượng hiển thị. Sử dụng định dạng WebP cho website của bạn chính là giải pháp được Google khuyến khích nhằm thay thế cho ảnh JPG, PNG và GIF hiện có.

WebP là gì?

WebP là một định dạng ảnh đượ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?

Ghi chú: Màu xanh là hỗ trợ WebP, còn màu đỏ là không hỗ trợ.

Có khoảng 80% trình duyệt web hiện nay hỗ trợ định dạng ảnh WebP. Trừ những trình duyệt đã lạc hậu (IE, Blackberry), có thể thấy Apple không mặn mà gì lắm khi không hỗ trợ hiển thị trên trình duyệt Safari nền tảng web và cả iOS.

Cách cài đặt WebP vào website WordPress

Có rất nhiều plugin hỗ trợ chuyển đổi các định dạng ảnh thông thường qua WebP, tuy nhiên trong bài viết này mình sẽ giới thiệu plugin WebP Converter for Media bởi dễ cài đặt, sử dụng và hoàn toàn miễn phí.

Yêu cầu về hosting để cài đặt WebP

  • PHP từ phiên bản 7.0 trở lên
  • Đã bật phần mở rộng GD hoặc Imagick (có hỗ trợ WebP)
  • Đã bật mô-đun mod_mime, mod_rewritemod_expires
  • REST API phải được bật và không bị giới hạn hoạt động

Nếu không đáp ứng được các yêu cầu trên, bạn hãy liên hệ nhà cung cấp hosting để được hỗ trợ.

Chuyển hình ảnh sang định dạng WebP để tăng tốc WordPress
Ví dụ một hosting đáp ứng yêu cầu về cấu hình để cài đặt WebP.

Hướng dẫn cấu hình, sử dụng plugin WebP Converter for Media

Sau khi cài đặt và kích hoạt plugin, website của bạn đã bắt đầu hỗ trợ định dạng WebP rồi đấy. Từ nay những ảnh bạn tải lên sẽ tự động được chuyển đổi sang định dạng mới (trừ trường hợp định dạng mới có kích thước lớn hơn ảnh tải lên, cái này có thể cấu hình được).

Để cấu hình plugin, tại trang back-end bạn truy cập mục Settings → WebP Converter. Trang plugin sẽ hiển thị như sau:

  • List of supported files extensions (Danh sách phần mở rộng file hỗ trợ): Bạn đánh dấu chọn những định dạng ảnh muốn chuyển đổi sang WebP. Mặc định plugin hỗ trợ định dạng .jpg, .jpeg, .png và bạn có thể tùy chọn thêm ảnh .gif.
  • Conversion method (Cách thức chuyển đổi): Bạn có thể tùy chọn 1 trong 2 hình thức là GD hoặc Imagick. Tuy nhiên tôi khuyên bạn nên để mặc định là GD.
  • Extra features (Tính năng nâng cao): Giúp tối ưu website hơn với tùy chọn Automatic removal of WebP files larger than original (Tự xóa ảnh WebP nếu lớn hơn kích thước ảnh gốc) và Browser Caching for WebP files (Lưu ảnh trong bộ nhớ đệm trình duyệt). Bạn nên đánh dấu chọn cả 2 mục này.
  • Images quality (Chất lượng hình ảnh): Có 6 tùy chọn nén ảnh từ 75% cho tới 100%, dĩ nhiên ảnh được nén càng nhiều thì chất lượng càng giảm và ngược lại, nếu bạn nén ở mức độ vừa phải thì chất lượng ảnh cũng sẽ tốt hơn. Mình khuyên bạn nên chọn mức nén 85% để cân bằng được 2 mục tiêu: Nén ảnh mà vẫn đảm bảo chất lượng hiển thị.

Sau khi cấu hình xong, bạn ấn nút Save Changes để lưu.

Chuyển toàn bộ hình ảnh hiện có của website sang định dạng WebP

Plugin còn tích hợp một công cụ hữu ích giúp bạn chuyển toàn bộ hình ảnh hiện có sang định dạng WebP chỉ với 1 cú click chuột.

Cũng tại trang cấu hình plugin, bạn ấn nút Regenerate All để thực hiện. Nếu bạn muốn bỏ qua những hình ảnh đã được chuyển đổi sang định dạng WebP rồi, hãy đánh dấu chọn tại muc Skip converted images.

Quá trình chuyển đổi sẽ mất một khoảng thời gian nhất định phụ thuộc vào số lượng ảnh hiện có của website.

Trong lúc chờ đợi hãy nhâm nhi một ly cafe và theo các bài viết của blog nhé. Chúc bạn thành công!