Tuy nhiên, việc cung cấp hình ảnh qua WebP không hề đơn giản. Nó phụ thuộc vào máy chủ web của máy chủ của bạn, cdn đã chọn, chủ đề, plugin bộ nhớ đệm, v.v.
Hướng dẫn này sẽ giúp bạn cung cấp hình ảnh WebP cho WordPress theo ba cách.
WebP là gì?
Định dạng Hình ảnh Mới cho Web
bởi Google
WebP là một định dạng hình ảnh (như png và jpg) do Google phát triển. Hình ảnh WebP (.webp) có xu hướng nhỏ hơn nhiều, giúp tăng tốc trang web và sử dụng ít băng thông hơn.
Tùy thuộc vào hình ảnh, bạn có thể giảm kích thước từ 25% đến 70%.
JPEG, PNG, GIF, v.v. có ưu và nhược điểm của chúng. Bảng dưới đây sẽ cung cấp cho bạn một ý tưởng:
| JPG | GIF | PNG | SVG | |
| Véc tơ | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Minh bạch | ❌ | ✅ | ✅ | ✅ |
| Hoạt hình | ❌ | ✅ | ✅ | ✅ |
| Mất đi | ✅ | ❌ | ❌ | ❌ |
WebP có gần như tất cả các tính năng được đề cập ở trên! Vậy tại sao chúng ta không thể sử dụng WebP ở mọi nơi?
Tại sao không sử dụng WebP ở mọi nơi?
Như bạn có thể thấy, chỉ 80% thiết bị chỉ hỗ trợ WebP. Không chỉ các trình duyệt cũ, Safari / iOS Safari vẫn không hỗ trợ WebP.
Tại sao phục vụ WebP lại khó đến vậy?
Như bạn nhận thấy, chúng tôi cung cấp hình ảnh theo trình duyệt. Nếu trình duyệt không hỗ trợ WebP, chúng tôi phải cung cấp cho họ hình ảnh gốc (jpg / png / gif).
Có hai cách chính để phục vụ WebP:
Sử dụng thẻ hình ảnh
Chúng ta có thể sử dụngbức ảnhđể cho trình duyệt biết rằng chúng tôi có định dạng WebP. Nếu trình duyệt hỗ trợ nó, hình ảnh thông thường / dự phòng sẽ được tải.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Bằng câu trả lời khác
Trong một câu trả lời khác, như thường lệ, bạn có một tệp. Chính xác:
<img src="img.jpg" />Một URL hình ảnh hỗ trợ phân phối các tệp jpg và webp. Đây là những gì máy chủ làm.
Mặc dù đó là phần mở rộng tệp .jpg, nếu trình duyệt hỗ trợ WebP, thì phản hồi sẽ là WebP. Còn được gọi là "phản ứng đa dạng".
Thẻ hình ảnh so với Phản hồi đa dạng
Mỗi thứ đều có ưu và nhược điểm riêng. Đây là bảng so sánh:
| thẻ hình ảnh | Phản hồi đa dạng | |
|---|---|---|
| Làm việc với hình nền | ❌ | ✅ |
| CDN thân thiện | ✅ | ✅ (chỉ một số ít) |
| Máy chủ cần được cấu hình | ❌ | ✅ (nginx) |
| Hoạt động với tải chậm | ✅ | ✅ |
Làm thế nào để cung cấp hình ảnh trong WebP trong WordPress?
Phương pháp # 1 - Chỉ sử dụng CDN với chuyển đổi WebP bay
Đây có lẽ là giải pháp đơn giản nhất. Một số nhà cung cấp CDN hiện hỗ trợ chuyển đổi hình ảnh nhanh chóng sang WebP cùng với việc tối ưu hóa hình ảnh.
Ở đây có một ít:
- BunnyCDN
- Cloudflare với tiếng Ba Lan (Gói chuyên nghiệp)
- Đám mây
- Hình ảnh thích ứng với ShortPixel (sử dụng StackPath CDN)
- Nén WP
Bạn cũng có thể tiết kiệm dung lượng ổ đĩa bằng cách sử dụng phương pháp này vì bạn không phải lưu trữ cả hình ảnh WebP thông thường và đã chuyển đổi.
BunnyCDN
BunnyCDN đi kèm với Bunny Optimizer, có thể nén hình ảnh và chuyển đổi chúng sang WebP một cách nhanh chóng.
Phương pháp # 2 - Sử dụng Phản hồi đa dạng + CDN
Như đã mô tả ở trên, một "phản hồi đa dạng" sẽ có một URL hình ảnh duy nhất có thể phân phát cả hình ảnh WebP và không phải webp tùy thuộc vào trình duyệt được yêu cầu.
Chúng tôi cũng cần chọn CDN phù hợp hỗ trợ tiêu đề yêu cầu WebP làm khóa bộ nhớ cache. Nếu không, khi hình ảnh WebP được lưu vào bộ nhớ cache trên máy chủ, nó sẽ được gửi đến các trình duyệt không hỗ trợ WebP.
Tùy chỉnh các phản hồi khác nhau trong WordPress
Cách dễ nhất để thiết lập phản hồi phong phú cho WebP trong WordPress là sử dụng plugin WebP Express. Chỉ cần cài đặt plugin và nhấp vào "Lưu cài đặt và buộc các quy tắc .htaccess mới".
WebP Express sẽ định cấu hình trình chuyển đổi WebP và ghi đè các quy tắc để khi nhận được yêu cầu, nó sẽ chuyển đổi hình ảnh sang WebP ngay lập tức và nếu trình duyệt không hỗ trợ WebP, hình ảnh mặc định sẽ được phân phối.
Nếu bạn đang ở Nginx
WebP Express thêm các quy tắc ghi lại '.htaccess' cần thiết, nhưng chỉ hoạt động trên máy chủ Apache, LiteSpeed hoặc OpenLiteSpeed. Nếu bạn đang sử dụng Nginx, bạn cần chỉnh sửanginx.configvà thêm mã sau:
# Quy tắc WebP Express # -------------------- vị trí ~ * ^ /? Wp-content /.* . (Png | jpe? G) $ {add_header Vary Chấp nhận; hết hạn 365 ngày; if ($ http_accept! ~ * "Webp") {break;} try_files / wp-content / webp-express / webp-images / doc-root / $ uri.webp $ uri.webp / wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Định tuyến yêu cầu các web không tồn tại tới vị trí chuyển đổi ~ * ^ /? wp-content / . * . (png | jpe? g) . webp $ {try_files $ uri / wp-content / plugins / webp-express / wod / webp-realizer.php? wp-content = wp-content;} # - ----------------- (Quy tắc của WebP Express kết thúc tại đây)Đoạn mã trên thêm các tiêu đề phản hồi bắt buộc (quản lý bộ nhớ cache cũng khác nhau) và cố gắng phân phối WebP nếu nó tồn tại, nếu không, hãy chuyển hướng nó đến trình chuyển đổi (dựa trên hỗ trợ của trình duyệt)
Các nhà cung cấp CDN hỗ trợ Phản hồi đa dạng
Nếu nhà cung cấp CDN của bạn không hỗ trợ WebP làm khóa lưu vào bộ nhớ đệm, thì các tệp WebP sẽ được gửi đến các trình duyệt không hỗ trợ WebP. Tương tự, có khả năng hình ảnh không phải webp sẽ được phân phối đến các trình duyệt được hỗ trợ.
BunnyCDN , KeyCDN , CDN của Google và nhiều nhà cung cấp CDN khác hỗ trợ WebP như một khóa bộ nhớ cache. Đảm bảo rằng bạn bật chúng trong cài đặt.
VBunnyCDN :
VKeyCDN :
Bạn có đang sử dụng gói miễn phí của Cloudflare không?
Thật không may, gói miễn phí của Cloudflare không hỗ trợ WebP làm khóa bộ nhớ cache. Sử dụng CDN như BunnCDN hoặc nâng cấp lên gói chuyên nghiệp của họ.
Thiết lập phản hồi đa dạng + CDN với các nhà cung cấp dịch vụ lưu trữ phổ biến
Đảm bảo đã cài đặt WebP Express.
- Kinsta hoặc WP Engine - liên hệ với nhóm hỗ trợ của họ để thêm cấu hình Nginx ở trên và bao gồm khóa bộ nhớ đệm WebP trong CDN (KeyCDN) của họ.
- Cloudways - chỉ cần cài đặt WebP Express và lưu cài đặt bằng .htacess. Vì Cloudways sử dụng phương pháp kết hợp Apache + Nginx nên nó hoạt động hiệu quả.
- SiteGound - Liên hệ với bộ phận hỗ trợ để thêm cấu hình Nginx. Sử dụng CDN được hỗ trợ như trên.
- Máy chủ LiteSpeed / OpenLiteSpeed / Apache - chỉ cần cài đặt WebP Express và lưu cài đặt với '.htacess'. Cũng sử dụng CDN được hỗ trợ như trên.
- VPS tùy chỉnh với Nginx (LEMP Stack) - Thiết lập
nginx.confvà sử dụng CDN được hỗ trợ như trên.
Phương pháp # 3 - Sử dụng thẻ hình ảnh
Nếu cả hai phương pháp trên không hiệu quả với bạn, bạn có thể sử dụng thẻ hình ảnh. Nó không yêu cầu cấu hình máy chủ (chỉnh sửa nginx.conf) và hỗ trợ tất cả các nhà cung cấp CDN.
Sử dụng phương pháp này sẽ thay đổi HTML để phân phối WebP. Nó sẽ không hoạt động với hình nền, không tương thích với một số chủ đề, plugin bộ nhớ đệm, plugin tải chậm, v.v.
Nếu bạn sử dụng phương pháp này, tất cả các thẻ img sẽ được chuyển đổi như sau:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Nếu trình duyệt hỗ trợ WebP, tệp tương ứng sẽ được phân phối; nếu không, một hình ảnh thông thường sẽ được phân phối.
Tùy chỉnh thẻ hình ảnh cho WebP trong WordPress
Cách dễ nhất để thiết lập thẻ hình ảnh là thông qua WebP Express.
Đặt chế độ làm việc thành “Thân thiện với CDN” và bật “Thay đổi HTML”.
Sự kết luận
Tôi ước một ngày sẽ đến khi tất cả các trình duyệt hỗ trợ WebP!
Nếu bạn có thể chi tiêu một vài đô la mỗi tháng, thì cách dễ nhất và hiệu quả nhất là sử dụng một CDN như BunnyCDN, nó sẽ chuyển đổi hình ảnh sang WebP một cách nhanh chóng. Nếu không, hãy làm theo phương pháp số 2 mà tôi đã đề cập ở trên.
