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

Admin 02:08 27-02-2019 351

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. Thực hiện theo hướng dẫn hữu ích này để tìm hiểu về cách sử dụng WebP để cung cấp hình ảnh chất lượng cao ở kích thước nhỏ hơn.

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. 
webp

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.



Cảm ơn bạn đã đánh giá
5 Sao 1 Đánh giá


Các tin khác

7 plugin tốt nhất có thể thay thế cho Yoast SEO

7 plugin tốt nhất có thể thay thế cho Yoast SEO

Yoast SEO là một trong những plugin SEO phổ biến nhất , Tuy nhiên vẩn Có một số plugin tốt nhất khác trong các plugin WordPress SEO có thể thay thế cho Yoast SEO

Admin 27-06-2019 15:24 114

Cách cải thiện tốc độ website wordpress của bạn

Tìm hiểu cách cải thiện tốc độ trang web wordpress của bạn và tối ưu hóa trang web WordPress của bạn để có kết quả tốt hơn.

Admin 06-04-2019 15:44 122

Cách cài đặt WordPress trên Hostinger Web Hosting

Cách cài đặt WordPress trên Hostinger Web Hosting

Kiểm tra hướng dẫn dễ dàng từng bước này để tìm hiểu cách cài đặt WordPress trên máy chủ lưu trữ web miễn phí của Hostinger trong 10 phút tiếp theo.

Admin 27-02-2019 02:23 160

LEMP là gì , Cách Cài đặt WordPress với LEMP trên Ubuntu 18.04

LEMP là gì , Cách Cài đặt WordPress với LEMP trên Ubuntu 18.04

LEMP là gì? LEMP là sự kết hợp của Linux, Nginx, MySQL / MariaDB và PHP 7.2 được sử dụng để triển khai WordPress. Để cài đặt WordPress với LEMP trên Ubuntu 18.04, vui lòng làm theo hướng dẫn từng bước.

Admin 26-02-2019 15:40 338

Cách tắt Plugin AMP trong WordPress mà không ảnh hưởng đến SEO

Cách tắt Plugin AMP trong WordPress mà không ảnh hưởng đến SEO

Bạn có muốn tắt amp trong wordpress không? Đừng chỉ tắt plugin amp . Bạn có thể mất lưu lượng truy cập . Để loại bỏ amp khỏi tìm kiếm google mà không ảnh hưởng đến seo, hãy làm theo hướng dẫn từng bước này.

Admin 26-02-2019 10:07 373

Cách khắc phục lổi 404 trên các trang AMP sau khi tắt Plugin AMP

Cách khắc phục lổi 404 trên các trang AMP sau khi tắt Plugin AMP

Sau khi tắt plugin Tăng tốc trang di động (AMP) khỏi trang web của bạn, bạn phải thiết lập chuyển hướng từ đường dẫn AMP sang Non-AMP để khắc phục lỗi 404.

Admin 26-02-2019 09:24 262