Cách định dạng hình ảnh WebP trong WordPress

WebP là một định dạng hiện đại để phục vụ hình ảnh nhanh hơn bao giờ hết. Nếu bạn đang sử dụng WordPress, bạn có thể dễ dàng phục vụ tất cả các hình ảnh trong WebP với một số điều chỉnh cơ bản. Vì vậy, hãy sẵn sàng cho công việc khó khăn với sự kiên nhẫn. 

Trong bài viết này, tôi sẽ chỉ ra rằng không sử dụng bất kỳ plugin nào, tôi đã triển khai hình ảnh WebP để tự động phục vụ trên trình duyệt web được hỗ trợ. WebP hiện được hỗ trợ trong Google Chrome , Opera, Mozilla Firefox, Microsoft Edge và một số trình duyệt Android . Theo báo cáo của Google Analytics, bạn có thể thấy rằng hơn 49% người sử dụng trình duyệt loại nội dung được hỗ trợ này. Vì vậy, đã đến lúc phải thực hiện kỹ thuật này.

Những lợi ích chính của việc sử dụng hình ảnh định dạng WebP là gì?

• So với kích thước của hình ảnh JPG hoặc PNG bình thường, WebP hình ảnh cùng chiều có thể phân phối theo byte nhỏ. Do đó, hình ảnh của bạn sẽ tải nhanh hơn.
• Phục vụ hình ảnh chất lượng theo byte nhỏ, có nghĩa là tiết kiệm đáng kể băng thông theo cách thông minh hơn.
• Giữ cho trang web của bạn cập nhật với xu hướng thị trường. Đừng để mất cuộc trò chuyện chỉ vì vấn đề tải kiểu xe bò.

Tôi thích phục vụ trang web nhanh nhất có thể, vì vậy tôi cũng đã bắt đầu thực hiện kỹ thuật này trên blog của mình. Vì vậy, tôi nghĩ rằng để chia sẻ lời khuyên hữu ích này với bạn từng bước.

Bước 1: Thêm định dạng WebP trong Tài liệu HTML

Trước tiên, bạn cần chuyển đổi tất cả các hình ảnh của mình trong WebP và cùng với định dạng hình ảnh trước đó của bạn làm dự phòng. Có một số plugin như Optimus có thể tự động thực hiện công việc này. Nhưng, tôi sẽ chỉ ra một cách dễ dàng khác để làm điều này bằng tay.

1. Truy cập trang web này  image.online-convert.com/convert-to-webp
2. Dán Liên kết hình ảnh của bạn và nhấp vào chuyển đổi. Hình ảnh định dạng WebP của bạn sẽ được tải xuống
3. Bây giờ hãy chỉnh sửa mã HTML thô nơi Hình ảnh bình thường của bạn xuất hiện.

Giả sử, lúc đầu, mã HTML hình ảnh của bạn giống như thế này

<img src="https://gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />

Bạn cần phải bọc mã ở trên với đánh dấu HTML ít hơn.

<picture><source srcset="https://gulshankumar.net/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" /><img src="https://gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" /></picture>;

Bây giờ, tài liệu HTML của bạn đã sẵn sàng để phục vụ hình ảnh ở định dạng WebP. 
Bước 2: Định cấu hình cài đặt máy chủ
Chỉ cần một bước nữa, bạn cần định cấu hình một số cài đặt Máy chủ web Apache thông qua .htacccess để trình duyệt và máy chủ web có thể xử lý chính xác như tất cả các hình ảnh khác.

Máy chủ Web Hosting của bạn có thể không biết loại mime nào loại hình ảnh định dạng mà họ cần phục vụ. Vì vậy, phải thêm loại mime thích hợp. Ngoài ra, sẽ rất đáng để thiết lập tiêu đề hết hạn cho bộ nhớ đệm.

# Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

Vui lòng lưu ý : WordPress theo mặc định không hỗ trợ tải lên hình ảnh định dạng WebP. Vì vậy, phải khắc phục sự cố này bằng cách thêm mã này vào các chức năng chủ đề của bạn. Sẽ rất hữu ích trong trường hợp bạn sẽ tải lên hình ảnh của mình trực tiếp từ Bảng điều khiển WordPress > Tùy chọn phương tiện .

function webp_upload_mimes( $existing_mimes ) {
    // add webp to the list of mime types
    $existing_mimes['webp'] = 'image/webp';

    // return the array back to the function with our added mime type
    return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

Làm xong.

Nếu bạn cần bất kỳ sự giúp đỡ, xin vui lòng hỏi tôi trong phần bình luận . Đó sẽ là niềm vui của tôi để giúp bạn. Trong tương lai, tôi sẽ tiếp tục chia sẻ một số mẹo hữu ích hơn về tối ưu hóa WordPress . Bạn có thể đăng ký vào blog của tôi để cập nhật nhiều hơn.