Sử dụng ShortPixel Image Optimizer (SPIO), bạn có thể tạo và phục vụ các tệp WebP cùng với các hình ảnh hiện có khi tối ưu hóa chúng.
Định dạng WebP là gì ?
WebP là một định dạng hình ảnh hiện đại do Google tạo ra, cung cấp tính năng nén không mất dữ liệu và mất dữ liệu vượt trội cho hình ảnh trên web. Khi sử dụng WebP, quản trị viên trang web và nhà phát triển web có thể tạo ra những hình ảnh nhỏ hơn, phong phú hơn để tăng tốc độ web.
Theo Google, hình ảnh không tổn hao WebP có kích thước nhỏ hơn 26% so với PNG. Hình ảnh tổn hao WebP nhỏ hơn 25 – 34% so với hình ảnh JPEG
WebP không tổn hao hỗ trợ độ trong suốt (còn gọi là kênh alpha) với chi phí chỉ là 22% byte bổ sung. Đối với các trường hợp nén RGB có tổn hao được chấp nhận, WebP mất dữ liệu cũng hỗ trợ độ trong suốt, thường cung cấp kích thước tệp nhỏ hơn 3 lần so với PNG.
Định dạng hao tổn, không tổn hao và độ trong suốt đều được hỗ trợ trong hình ảnh WebP động, có thể giúp giảm kích thước so với GIF và APNG – đó là một cải tiến lớn!
Làm thế nào để tạo hình ảnh WebP trong Wordpress?
1. Các bạn đăng nhập bảng điều khiển quản trị WordPress ==> Plugin ==> Thêm mới ==> Tìm kiếm cài đặt và kích hoạt ShortPixel Image Optimizer (SPIO)
2. Sau khi Active ==> vào Cài đặt ==> Shortpixel ==> tab “Nâng cao (Advanced)” bật tùy chọn “Tạo phiên bản WebP của hình ảnh”
Làm thế nào để tạo hình ảnh WebP
3. click Save and Go to Bulk Process ==> và bắt đầu tối ưu và tạo ảnh webP cho website
(quá trình nhanh chậm tùy thuộc vào số lượng hình ảnh trên website của bạn)
Phải làm gì nếu tôi muốn tạo WebP nhưng tôi đã tối ưu hóa hình ảnh của mình?
Trước hết, hãy đảm bảo rằng bạn cập nhật SPIO lên phiên bản mới nhất. Điều này rất quan trọng vì phiên bản 5.0 cho phép bạn tạo tệp WebP cho các hình ảnh đã được tối ưu hóa. Với các phiên bản cũ hơn, bạn sẽ phải khôi phục hình ảnh của mình và tối ưu hóa chúng một lần nữa, tiêu tốn tín dụng không cần thiết.
Sau khi SPIO được cập nhật lên phiên bản mới nhất, hãy làm theo ba bước sau:
tạo WebP khi đã tối ưu hóa hình ảnh
- Đi tới Media ==> Bulk ShortPixel ==> check “Media Library”
- Trong “Options“, hãy chọn tùy chọn để tạo tệp WebP hoặc AVIF (hoặc cả hai).
- Nhấp vào Tính toán và tiếp tục các bước còn lại như bình thường và “Bắt đầu tối ưu hóa”.
>> Xem thêm: Cách tạo và phục vụ các tệp AVIF bằng ShortPixel Image Optimizer
Làm thế nào để phân phối hình ảnh WebP ở giao diện người dùng?
Tạo hình ảnh WebP chỉ là bước đầu tiên! Bạn cũng cần cung cấp chúng cho tất cả người dùng của mình. May mắn thay, SPIO cung cấp hai phương pháp khác nhau để thực hiện việc này. Đầu tiên, hãy bật tùy chọn “Cung cấp các phiên bản thế hệ tiếp theo của hình ảnh trong giao diện người dùng”.
Làm thế nào để phân phối hình ảnh WebP ở giao diện người dùng
Sau đó chọn một trong các phương pháp sau:
- Sử dụng cú pháp thẻ <PICTURE>: Phương pháp này thay đổi mã trang.
Không thay đổi mã trang (thông qua .htaccess): Với phương pháp này, một khối mã mới được chèn vào tệp .htaccess. Đây là tùy chọn được đề xuất (nhưng thường không tương thích với CDN của bạn hoặc nếu bạn sử dụng NGINX).
Đọc bài viết này để tìm hiểu thêm về phương thức phân phối bạn nên sử dụng: Phương thức phân phối tệp WebP nào là tốt nhất cho tôi?
Khắc phục sự cố phân phối WebP
Cách kiểm tra xem hình ảnh WebP của bạn có được phục vụ chính xác hay không
Bạn có thể sử dụng các công cụ dành cho nhà phát triển của trình duyệt để kiểm tra xem hình ảnh của bạn có được phục vụ dưới dạng WebP hay không. Đầu tiên, hãy truy cập trang web của bạn và sau đó nhấn F12. Một cửa sổ tương tự như cửa sổ bên dưới sẽ xuất hiện. Tiếp theo, nhấp vào tab Network và sau đó nhấp vào bộ lọc Img.
Khắc phục sự cố phân phối WebP
Nhấn F5 trên Windows hoặc CTRL + R trên Mac để tải lại trang, sau đó cuộn xuống để tải tất cả hình ảnh.
Cách kiểm tra xem hình ảnh WebP của bạn có được phục vụ chính xác hay không
Bạn sẽ thấy tất cả hình ảnh có Type webp , bất kể phần mở rộng của tệp. Có khả năng trong trường hợp này bạn cũng sẽ thấy một số thứ không liên quan khác, như svg+xml hoặc text/html. Bạn có thể bỏ qua điều đó.
Nếu bạn có thể nhìn thấy Type webp, xin chúc mừng! Bây giờ bạn đang phục vụ thành công hình ảnh WebP cho các trình duyệt web tương thích.
Phải làm gì nếu hình ảnh WebP không được phục vụ chính xác
Nếu bạn gặp vấn đề với phương thức giao hàng của SPIO, hãy xem các bài viết sau trước:
- Nếu bạn chọn “Sử dụng cú pháp thẻ <PICTURE>”, hãy kiểm tra điều này: Tùy chọn “Sử dụng cú pháp thẻ <PICTURE>” không hoạt động; Hình ảnh WebP sẽ không hiển thị.
- Nếu bạn đã chọn “Không thay đổi mã trang (thông qua .htaccess)”, hãy kiểm tra điều này: Các lưu ý về việc phân phối hình ảnh WebP hoặc AVIF qua .htaccess
Nếu bạn vẫn không thể giải quyết vấn đề hoặc nếu phương thức phân phối của chúng tôi không đáp ứng nhu cầu của bạn, bạn nên thử một giải pháp thay thế để phục vụ hình ảnh WebP, chẳng hạn như…
- Định cấu hình máy chủ NGINX của bạn (nếu có liên quan) để phục vụ các tệp WebP một cách minh bạch: Định cấu hình NGINX để phục vụ các tệp WebP một cách minh bạch khi được hỗ trợ.
- Nếu bạn sử dụng Cloudways, hãy bật Chuyển hướng WebP theo hướng dẫn ở đây (bước #2). Nếu bạn chọn tùy chọn này, hãy nhớ tắt tùy chọn “Gửi các phiên bản WebP của hình ảnh ở giao diện người dùng” trong cài đặt ShortPixel của bạn.
Cách kiểm tra xem các tệp WebP có nằm trên máy chủ của bạn hay không
Khi sử dụng FTP, SSH, Trình quản lý tệp cPanel hoặc chỉ cần cài đặt plugin Trình quản lý tệp WP, bạn có thể kiểm tra đường dẫn /wp-content/uploads/ để xem liệu tệp .webp đã được tạo cho hình ảnh của bạn hay chưa.
Cách kiểm tra xem các tệp WebP có nằm trên máy chủ của bạn hay không
Như hình trên bạn thấy các tệp Webp, Avif đã nằm trên máy chủ.
Chúc các bạn thành công !!!
