Hướng dẫn sử dụng WebP cho WordPress mới nhất

Định dạng ảnh WebP đang được sử dụng ngày càng phổ biến, rất nhiều Websites lớn đã chính thức chuyển từ các định dạng png, jpg sang WebP, nó sẽ sớm là lựa chọn số 1 cho ảnh trên Website.

WebP cũng là yếu tố quan trọng khi Google đánh giá tốc độ Website và tác động trực tiếp tới việc trang web có đạt các tiêu chuẩn Core Web Vitals 2022 hay không.

Bài viết trích từ Khóa học Tăng tốc WordPress 2022 trên WPVUI Premium:

Trong topic này, ta sẽ tìm hiểu WebP, ưu điểm và cách sử dụng nó trên Website thông thường và cách chuyển đổi tự động ảnh PNG, JPG sang WebP trên WordPress (rất dễ).

WebP là gì?

WebP là định dạng tệp hình ảnh mà Google phát triển (từ 2010) để thay thế cho các định dạng tệp JPEG, PNG và GIF. WebP sử dụng thuật toán nén ảnh thế hệ mới để tạo ra các tệp nhỏ hơn với cùng chất lượng hoặc chất lượng cao hơn với cùng kích thước.

Nó hỗ trợ cả nén mất dữ liệu (lossy) và không mất dữ liệu (lossless), cũng như ảnh động (như GIF) và ảnh trong suốt (như PNG).

Ưu nhược điểm của WebP

Khả năng nén chính là lý do WebP được chọn để thay thế JPEG, PNG trên môi trường web, WebP nén lossless tốt hơn 26% so với PNG, nén lossy tốt hơn đến 34% so với JPEG. Với WebP, tốc độ load trang sẽ cải thiện đáng kể, nhất là với những trang web có nhiều hình ảnh.

Ngoài việc ngày càng phổ biến trên website, WebP không thay thế hoàn toàn cho JPEG, PNG và GIF ở các môi trường khác (như desktop, mobile..).

Nó được ủng hộ và hỗ trợ chính thức bởi các trình duyệt hiện đại nhưng với các công cụ chỉnh sửa ảnh thì vẫn còn hỗ trợ rất dè dặt.

Đa phần hiện nay người dùng vẫn lưu ảnh dưới định dạng phổ biến quen thuộc JPEG, PNG, GIF và sẽ chỉ chuyển đổi sang WebP khi cần upload lên web.

WebP tiếp tục được cải tiến theo thời gian để nâng cao chất lượng ảnh/ tỉ lệ nén, phiên bản WebP 2 được phát triển từ năm 2021, hứa hẹn sẽ giúp WebP đánh bại hoàn toàn JPEG, PNG, GIF trên môi trường Web.

Giới thiệu định dạng ảnh AVIF

Một đối thủ tiềm năng của WebP là AVIF, ra đời sau WebP (2019) bởi AOMedia (Alliance for Open Media), một tổ chức công nghệ phi lợi nhuận sáng lập bởi những gã khổng lồ Google, Microsoft, Amazon, Cisco, Intel, Netflix và Mozilla.

AVIF có tỉ lệ nén tốt hơn WebP đến 20%, nhưng hiện nay chưa được hỗ trợ nhiều bởi các trình duyệt phổ biến.

Tuy nhiên AVIF cũng có nhược điểm là trong một số loại ảnh như non-photographic (ảnh đồ họa, không phải ảnh chụp), tỉ lệ nén nó không tốt bằng WebP.

Tìm hiểu thêm về AVIF

Thời gian tới, AVIF và WebP, với một số ưu điểm bù trừ được cho nhau, sẽ là 2 định dạng chính cho ảnh web, và khả năng JPEG, PNG, GIF chỉ còn được dùng cho các ứng dụng chạy offline trên các thiết bị.

Thế SVG thì sao?

Cũng nên nhắc một xíu, ngoài các định dạng ảnh kể trên thì trên web hiện nay cũng bắt đầu phổ biến mạnh ảnh đồ họa vector SVG. 

SVG là dạng ảnh đồ họa vector, không thể thay thế được các loại ảnh khác (ví dụ ảnh chụp người, cảnh vật… không thể dùng định dạng SVG).

SVG hay Scalable Vector Graphics – có ưu điểm vượt trội là có thể scale (phóng lớn hay thu nhỏ) mà không bị mất chất lượng, vì nó là dạng vector đồ họa 2 chiều.

Đặc biệt nữa là SVG cũng hỗ trợ hiệu ứng chuyển động, nên được dùng thay thế cho định dạng GIF, tất nhiên là đối với các loại ảnh vector thôi, chứ ảnh GIF làm từ video thì SVG chịu thua.

SVG khuyến khích sử dụng cho logo và các ảnh illustrator và ảnh vector động trên web.

Trên WordPress, bạn muốn upload được SVG để dùng thì cần cài plugin hỗ trợ như SVG Support hay Safe SVG vì mặc định WordPress chặn upload SVG files do các file SVG không rõ nguồn gốc có thể bị chèn mã độc.

Cách sử dụng WebP trên Website

Hiện nay việc sử dụng WebP trên Website, đặc biệt là Website WordPress rất dễ dàng, theo 2 cách:

1. Upload ảnh WebP có sẵn lên như ảnh bình thường khác (png, jpg, gif, svg) vì WordPress từ phiên bản 5.8 (2021) đã chính thức hỗ trợ WebP, bạn có thể chuyển định dạng từ png, jpg, gif sang WebP bằng công cụ tối ưu/ chuyển đổi ảnh online số 1 hiện nay Squoosh App.
2. Dùng plugin hỗ trợ chuyển định dạng ảnh png, jpg, gif sang WebP, hiện có rất nhiều plugin hỗ trợ tốt công việc này, có thể chuyển tất cả ảnh hiện dùng trên web và ảnh khi mới upload.

Nhiều plugin tối ưu ảnh nổi tiếng như Smush, ShortPixel, Imagify,.. đều đã hỗ trợ chuyển đổi tự động ảnh PNG, JPG, GIF sang WebP.

 

A. Chuyển đổi ảnh PNG, JPG sang WebP thủ công

Ta có thể chuyển đổi ảnh PNG, JPG sang định dạng WebP trước khi upload lên WordPress, cách này có ưu điểm là bạn có thể biết chính xác kích cỡ và chất lượng ảnh WebP so với ảnh gốc PNG, JPG trước khi dùng, nhờ đó bạn có thể quyết định nên giữ lại một số ảnh ở định dạng cũ (PNG, JPG) nếu nó có chất lượng phù hợp hơn so với khi chuyển sang WebP.

Như đã nói Squoosh App là ứng dụng chuyển đổi ảnh sang WebP nổi tiếng nhất, nhưng thời gian gần đây có một dịch vụ miễn phí rất tốt vừa hỗ trợ nén ảnh chất lượng cao, lại có tùy chọn chuyển kết quả sang WebP, là CompressImage.IO, đây là dự án đang được đánh giá rất cao trên ProductHunt.

So với Squoosh App thì CompressImage.IO dễ dùng hơn rất nhiều.

Với CompressImage.IO, bạn chỉ cần upload ảnh JPG, PNG và chọn chất lượng nén phù hợp, và ở phần filter, cho phép chọn chất lượng ảnh so với ảnh gốc và Convert to WebP.

Như hình dưới, ảnh chất lượng tới 85% so với ảnh gốc, khi chuyển qua WebP thì kích thước giảm tới 91%, cực kỳ ấn tượng:

 

Bạn cũng có thể click vào thumbnail của ảnh để đối chiếu ảnh gốc và ảnh nén (before & after) để điều chỉnh lại tỉ lệ Image quality cho phù hợp:

Tất nhiên nếu có số lượng lớn ảnh, bạn nên chọn Image Quality và Covert To WebP trong mục Filter một lần, sau đó upload số lượng lớn ảnh để chuyển đổi cùng lúc:

Giải pháp nén ảnh và convert sang WebP thủ công với CompressImage.IO khuyên dùng cho website mới hoặc số lượng ảnh trên website cần chuyển sang WebP ít, nếu bạn có số lượng ảnh đến hàng nghìn, thì giải pháp dùng plugin để tự động nén và chuyển đổi (với site WordPress) sẽ tối ưu hơn.

 

B. Chuyển đổi PNG, JPG sang WebP tự động

Với WordPress, việc dùng plugin chuyển đổi ảnh JPG, PNG tự động sang WebP là giải pháp tối ưu nếu bạn muốn chuyển số lượng lớn ảnh sang định dạng mới.

Ta có một plugin miễn phí hoàn toàn là WebP Converter for Media. Thực ra plugin này cũng có bản trả phí, nhưng đó là dành cho tính năng chuyển ảnh sang AVIF, còn với WebP thì bản miễn phí hỗ trợ không giới hạn thứ gì cả.

So với ShortPixel, Imagify, Smush thì WebP Converter for Media không hề thua kém gì về tính năng và hiệu quả, mà lại miễn phí 100%.

Để cài đặt, ta vào WP Repository (Plugin -> Add New), gõ trên plugin hoặc chỉ cần WebP để thấy plugin này:

Sau khi kích hoạt, mọi thứ sẽ làm việc tự động luôn với những thiết lập khuyên dùng.

Dù vậy ta cần xem qua một số tùy chọn và thiết lập lại nếu cần thiết:

Có 9 phần riêng biệt:

1. List of supported files extensions

Cả 4 loại ảnh phổ biến đều được hỗ trợ chuyển sang WebP, thường ta chọn chuyển đổi tất cả png, jpg, jpeg.

Cần biết jpg và jpeg là một loại ảnh nhưng đôi khi được dùng dưới 2 phần mở rộng có tên khác nhau. Chuyển đổi từ gif sang WebP chưa mang lại hiệu quả cao, ta bỏ qua cho nhẹ bớt tác vụ chuyển đổi.

2. List of supported directories

Mặc định plugin sẽ chuyển mọi ảnh jpg/jpeg, png trên thư mục uploads sang WebP vì tất cả các ảnh dùng cho nội dung đều nằm ở thư mục này.

Nhưng bạn có thể chọn chuyển đổi luôn ảnh trên các thư mục themes và plugins.

Một số themes, plugins có thể sẽ dùng ảnh cho phần thiết kế của trang web, do đó có thể bạn muốn chuyển chúng sang WebP luôn.

3. Access Token

Phần này để nhập key bản quyền nếu bạn dùng bản Pro, với bản Pro ta sẽ có thêm 2 tính năng:

• Chuyển tự động ảnh sang định dạng AVIF
• Chuyển đổi ảnh qua Remote Server – tức thực hiện chuyển đổi ảnh bằng máy chủ của nhà phát triển plugin, với tính năng này, ta không cần sử dụng tài nguyên hosting để thực hiện chuyển đổi sang WebP, AVIF

Nói chung 2 cái này không cần thiết, tác vụ chuyển đổi ảnh sang WebP thực sự không tốn quá nhiều tài nguyên hosting trừ phi website có hàng ngìn bài viết/ sản phẩm.. giàu hình ảnh.

4. List of supported output formats

Chọn định dạng đích, bản free thì mặc định chỉ có WebP, nếu bạn dùng bản Pro thì có thể chọn AVIF.

Hiện nay đa số trường hợp không nên dùng AVIF vì các trình duyệt hỗ trợ hiển thị định dạng ảnh này chưa nhiều.

5. Conversion method

Có phương thức chuyển đổi:

• Imagick (ImageMagic): là phần mở rộng của PHP (PHP extensions) có tác dụng xử lý chỉnh sửa, chuyển đổi ảnh, hỗ trợ đến cả trăm định dạng ảnh và có thể dùng đến 300 hàm xử lý tối ưu.
• GD: tương tự Imagick, cũng là PHP extensions hỗ trợ chỉnh sửa, chuyển đổi ảnh
• Remote Server: chuyển đổi bằng server của nhà phát triển, không cần quan tâm họ dùng Imagick hay GD hay cái gì khác, ảnh sẽ tự động import tới Remote Server và trả về định dạng đích (WebP, AVIF) cho chúng ta.

Với phiên bản free, ta sẽ chọn GD hoặc Imagick.

Về hiệu quả chuyển đổi và tối ưu thì Imagick thường nhỉnh hơn GD. Nhưng do GD là extensions luôn được bật sẵn trên PHP, còn Imagick phải bật thủ công, nên mặc định plugin sẽ dùng phương thức GD.

Bạn có thể kiểm tra và tự bật Imagick trên Hosting/ server (phần PHP extensions), và chọn Imagick làm phương thức chuyển đổi.

6. Images quality

Chọn chất lượng ảnh so với ảnh gốc, thực chất là chọn tỉ lệ tối ưu, khuyên dùng là 85% – có sự cân bằng giữa chất lượng và tỉ lệ nén.

7. Image loading mode

Chọn chế độ load ảnh:

• Via .htacess: thực hiện qua file cấu hình server, khuyên dùng nhưng bạn phải cho phép quyền write với file .htaccess, thường các dịch vụ hosting đã bật sẵn quyền này. Chỉ cần lưu ý nếu bạn có cài đặt các plugin bảo mật và có tùy chọn chặn edit .htaccess, nếu gặp phải trường hợp này thì chọn Pass Thru.
• Pass Thru: không cần sử dụng file cấu hình server, cái này bạn chọn khi gặp lỗi với tùy chọn mặc định ở trên.

8. Extra Features

Các tính năng bổ sung:

• Automatic removal of files in output formats larger than original: tự động xóa file đích (WebP, AVIF) nếu kích thước của nó lớn hơn file gốc (PNG, JPG/JPEG), nên chọn.
  
• Browser Caching for files in output formats (saving images in browser cache memory): hỗ trợ lưu ảnh đích (WebP, AVIF) vào bộ nhớ đệm của trình duyệt để tối ưu tốc load. Cái này nếu bạn dùng plugin tăng tốc như WP-Rocket thì nó hỗ trợ sẵn, không cần chọn ở đây.
• Keep images metadata stored in EXIF or XMP formats (unavailable for GD conversion method): giữ thông tin siêu dữ liệu của ảnh trong định dạng EXIF/ XMP, chỉ hỗ trợ với Imagick và Remote Server. Cái này không quá quan trọng.
• Enable cron to automatically convert images from outside Media Library (images from Media Library are converted immediately after upload): tự động chuyển đổi ảnh bên ngoài Media Libary (thư mục Uploads), nếu ở mục (2) bạn chọn chuyển đổi ảnh cả thư mục themes, plugins thì nên check vào tùy chọn này.
• Force redirections to output formats for all domains : tùy chọn hiển thị ảnh đích WebP/ AVIF trên domain bên ngoài, mặc định chỉ hiển thị WebP/ AVIF trên domain của bạn, còn domain bên ngoài thì dùng ảnh gốc. Cái này ta có thể bỏ qua.
• Log errors while converting to debug.log file (when debugging in WordPress is active): ghi lỗi trong quá trình chuyển đổi vào file debug.log, cái này chỉ bật nếu chế độ debugging trên WP được bật (thường là không bật công khai để tránh hiển thị lỗi ra front-end, hacker có thể lợi dụng để tấn cong). Cái này bỏ qua.

Nếu bạn chỉnh sửa gì ở các tùy chọn mặc định trong 8 phần trên, nhấp Save Changes để thay đổi có hiệu lực nhé!

9. Regenerate images

Tính năng này sẽ thực hiện chuyển đổi toàn bộ các ảnh trên Media Libary (thư mục Uploads) sang định dạng WebP /AVIF nếu chúng chưa được chuyển đổi.

Bình thường, khi bạn cài và kích hoạt plugin WebP Converter for Media, thì từ đó trở đi tất cả các ảnh được thêm vào Media Libary sẽ được tự động chuyển đổi sang WebP/ AVIF, nhưng các ảnh đã có trước đó thì plugin không tự động chuyển đổi.

Do vậy, bạn cần chạy Generate Images để plugin thực hiện chuyển đổi toàn bộ các ảnh hiện có.

Việc chạy Generate Images chỉ nên thực hiện một lần khi mới kích hoạt plugin WebP Convert for Media, từ đó về sau, các ảnh bổ sung vào Media Libary đều được tự động chuyển đổi.

KẾT

Qua bài viết, hi vọng các bạn có thể dễ dàng sử dụng WebP thay thế dành cho các định dạng PNG, JPG trên Website WordPress của mình.

Chúc thành công!