Sử dụng ShortPixel Image Optimizer (SPIO), bạn có thể tạo và phục vụ các tệp AVIF bên cạnh những ảnh hiện có khi tối ưu hóa chúng.
Hiện nay các định dạng tệp hình ảnh phổ biến nhất cho web là JPG và PNG. Vài năm trước, WebP, do Google phát triển, đã xuất hiện trên thị trường, cung cấp hình ảnh nhỏ hơn 30% so với JPG nhưng có cùng chất lượng hình ảnh. AVIF hứa hẹn hình ảnh nhỏ hơn 50% so với JPG , với cùng chất lượng hình ảnh.
Đọc thêm về lý do tại sao AVIF tốt cho trang web của bạn tại đây: AVIF là gì và Cơ hội tăng thứ hạng SEO cho website
Làm thế nào để tạo ảnh AVIF?
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 AVIF của hình ảnh”
Làm thế nào để tạo ảnh AVIF
3. click Save and Go to Bulk Process ==> và bắt đầu tối ưu và tạo ảnh AVIF 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)
>> Tham khảo: Cách tạo và phục vụ các tệp WebP bằng ShortPixel Image Optimizer
Phải làm gì nếu tôi muốn tạo AVIF 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 các tệp AVIF 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 AVIF 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 AVIF hoặc WebP (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”.
Làm thế nào để cung cấp hình ảnh AVIF trên giao diện người dùng?
Tạo hình ảnh AVIF 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”.
cung cấp hình ảnh AVIF trên 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).
Xử lý sự cố phân phối các tệp AVIF
Máy chủ không được cấu hình đúng
Nếu bạn nhận được thông báo này trên bảng điều khiển quản trị WordPress…
Kiểm tra máy chủ Avif không thành công. Máy chủ của bạn có thể không được cấu hình để hiển thị các tệp AVIF đúng cách. Phục vụ Avif có thể khiến hình ảnh của bạn không tải được. Kiểm tra hình ảnh của bạn, tắt tùy chọn AVIF hoặc cập nhật cấu hình máy chủ web của bạn.
Nếu bạn đang sử dụng NGINX hoặc nếu bạn gặp sự cố sau khi tạo tệp AVIF trên trang web của mình và các trình duyệt hỗ trợ đang tải xuống hình ảnh thay vì hiển thị chúng…. kiểm tra bài viết này: Tôi nhận được thông báo “Kiểm tra máy chủ Avif không thành công”. Làm cách nào để định cấu hình máy chủ web của tôi để phân phối hình ảnh AVIF?
Cách kiểm tra xem hình ảnh AVIF của bạn có được phục vụ đúng cách 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ân phối dưới dạng AVIF 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.
kiểm tra xem hình ảnh AVIF của bạn có được phục vụ đúng cách không
Nhấn F5 trên Windows hoặc CTRL + R trên Mac để tải lại trang (ấn 2 lần cho chắc cú), sau đó cuộn xuống để tải tất cả hình ảnh:
Kiểm tra hình ảnh AVIF trên giao diện người dùng
Bạn sẽ thấy tất cả hình ảnh có Type avif , 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ể thấy Type avif, xin chúc mừng! Bây giờ bạn đã phục vụ thành công hình ảnh AVIF cho các trình duyệt web tương thích.
Phải làm gì nếu hình ảnh AVIF không được phục vụ đúng cách
Nếu bạn gặp vấn đề với phương thức phân phối của SPIO, trước tiên hãy xem qua các bài viết sau:
- 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 thế hệ tiếp theo 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 được 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 AVIF, 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 AVIF một cách minh bạch: Định cấu hình NGINX để phục vụ các tệp AVIF một cách minh bạch khi được hỗ trợ.
- Sử dụng một plugin khác để cung cấp các tệp AVIF được tạo bởi ShortPixel. Nếu bạn chọn tùy chọn này, hãy nhớ bỏ chọn tùy chọn “Gửi các phiên bản AVIF 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 AVIF có nằm trên máy chủ của bạn không
Bằng cách sử dụng FTP, SSH, Trình quản lý tệp cPanel, CyperPanel hoặc chỉ cần cài đặt plugin WP File Manager , bạn có thể kiểm tra /wp-content/uploads/ đường dẫn để xem liệu có tệp .avif tương ứng nào được tạo cho hình ảnh của bạn hay không.
Cách kiểm tra xem các tệp AVIF có nằm trên máy chủ của bạn 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 !!!
