• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Sử dụng định dạng WebP cho hình ảnh trong WordPress
hosting-tot-nhat-danh-cho-wordpress

Sử dụng định dạng WebP cho hình ảnh trong WordPress

Cập nhật: 24/06/2022 Trung Hiếu 90 Bình luận

Mục lục Hiện
  • 1. WebP là gì?
  • 2. Những trình duyệt nào hỗ trợ WebP?
  • 3. Sử dụng định dạng WebP trong WordPress
    • 3.1. Tạo định dạng WebP cho hình ảnh
    • 3.2. Kích hoạt WebP cho website
      • 3.2.1. Sử dụng file .htaccess hoặc file config
      • 3.2.2. Sử dụng plugin ShortPixel
      • 3.2.3. Sử dụng plugin Cache Enabler
      • 3.2.4. Sử dụng plugin LiteSpeed Cache
  • 4. Kiểm tra WebP

Hướng dẫn sử dụng định dạng WebP cho hình ảnh trong WordPress.

su-dung-dinh-dang-webp-cho-hinh-anh-trong-wordpess

Nếu bạn chưa biết thì WebP chính là một trong những chìa khóa quan trọng giúp WP Căn bản có được tốc độ load “thần sầu” như ngày hôm nay, bên cạnh những bí quyết đã được bật mí trước đó. Với WebP, các bạn có thể giảm page-size đi đáng kể nhờ dung lượng của ảnh ở định dạng WebP thấp hơn rất nhiều so với PNG hay JPG/JPEG truyền thống. Việc sử dụng WebP trong WordPress hiện tại cũng đã trở nên rất dễ dàng nhờ sự trợ giúp của một số plugin chuyên dụng.

Tham khảo thêm:

  • ShortPixel – Plugin nén ảnh giá rẻ tốt nhất dành cho WordPress
  • EWWW Image Optimizer – Sự thay thế tuyệt vời cho Smush.It

WebP là gì?

WebP là một định dạng ảnh mới, được phát triển bởi Google, với mục tiêu giảm dung lượng giúp website load nhanh hơn mà không làm ảnh hưởng nhiều đến chất lượng thực tế. Với hình thức nén lossless (không giảm chất lượng), hình ảnh ở định dạng WebP có thể nhẹ hơn định dạng PNG đến 22%. Còn với hình thức nén lossy (giảm chất lượng), hình ảnh ở định dạng WebP có thể nhẹ hơn định dạng JPG/JPEG lên đến 34%. Đây là những con số rất đáng kể, đặc biệt là với hình ảnh có kích thước lớn.

Những trình duyệt nào hỗ trợ WebP?

Không phải tất cả trình duyệt web hiện nay đều hỗ trợ định dạng WebP. Tuy nhiên, các trình duyệt web phổ biến như Google Chrome, Mozilla Firefox, Microsoft Edge, Safari hay Opera đều đã hỗ trợ định dạng này.

cac-trinh-duyet-web-ho-tro-dinh-dang-webp

Ghi chú:

  • Màu xanh: đã hỗ trợ WebP.
  • Màu đỏ: chưa hỗ trợ WebP.

Sử dụng định dạng WebP trong WordPress

Để sử dụng định dạng WebP trong WordPress, các bạn cần tiến hành 2 bước căn bản sau đây:

Tạo định dạng WebP cho hình ảnh

Các plugin nén ảnh phổ biến hiện nay như ShortPixel, EWWW Image Optimizer, Optimus… đều đã được tích hợp sẵn công cụ tạo ảnh WebP tự động cho WordPress. Trong một bài viết cách đây không lâu, tôi đã hướng dẫn các bạn cách sử dụng plugin ShortPixel để tạo ảnh WebP. Các bạn có thể tham khảo lại thông qua link ở đầu bài viết này.

Tuy nhiên, ShortPixel không phải là một dịch vụ miễn phí. Đo đó, nếu muốn nén ảnh với số lượng lớn, các bạn cần phải mua các gói credit của họ. Theo đánh giá của tôi, ShortPixel là nhà cung cấp có mức giá rẻ nhất trong số các dịch vụ nén ảnh trả phí. Hiệu suất nén của nó cũng thuộc hàng tốt nhất. WP Căn bản cũng đang sử dụng dịch vụ này. Đăng ký mua credit ShortPixel theo link dưới đây nếu bạn có nhu cầu tương tự:

mua-shortpixel-credits

Ngoài ra, nếu đang sử dụng dịch vụ WordPress Hosting do WP Căn bản cung cấp hoặc các loại hosting chạy Web Server LiteSpeed/ OpenLiteSpeed, các bạn có thể sử dụng plugin LiteSpeed Cache để nén và tạo ảnh WebP. Tham khảo thêm: Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache.

Một giải pháp khác mà các bạn cũng có thể tham khảo đó là: Tạo ảnh WebP miễn phí với plugin WebP Converter for Media.

Kích hoạt WebP cho website

Sau khi tạo ảnh với định dạng WebP, các bạn cần phải kích hoạt chúng để trình duyệt web có thể nhận biết được. Để kích hoạt WebP, các bạn có thể sử dụng một trong 2 phương thức sau:

Sử dụng file .htaccess hoặc file config

Đối với Web Server Apache hoặc LiteSpeed, các bạn cần chèn đoạn code sau vào file .htaccess của thư mục cài đặt WordPress:

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
	RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule></p>
<p><IfModule mod_headers.c>
	Header append Vary Accept env=REDIRECT_accept
</IfModule></p>
<p>AddType image/webp .webp

Đối với Web Server NginX, các bạn thêm đoạn code sau đây vào file NginX config (nginx.conf):

# http config block
map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
}</p>
<p># server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
    add_header Vary Accept;
    try_files $uri$webp_ext $uri =404;
}

Tuy nhiên, việc sử dụng code thường tiềm ẩn nhiều rủi ro nên chúng tôi khuyến khích các bạn nên sử dụng plugin.

Sử dụng plugin ShortPixel

Nếu bạn sử dụng plugin ShortPixel để tạo ảnh WebP thì bản thân nó cũng đã được trang bị sẵn tính năng load ảnh. Các bạn chỉ cần tick vào mục Deliver the next generation versions of the images in the front-end sau đó chọn một trong hai tùy chọn bên dưới là được.

load-anh-webp-bang-plugin-shortpixel

Trong đó:

  • Using the <PICTURE> tag syntax: thay thế các tag <img> bằng <picture> để load ảnh WebP.
  • Without altering the page code (via .htaccess): sử dụng file .htaccess để load ảnh WebP.

Hãy kiểm tra từng cách để có sự lựa chọn phù hợp nhất cho website của bạn.

Sử dụng plugin Cache Enabler

Đây là một trong số ít các plugin miễn phí có hỗ trợ tạo bản cache với định dạng WebP. Cách sử dụng của plugin này khá đơn giản. Các bạn chỉ cần cài đặt và kích hoạt plugin Cache Enabler (download).

cai-dat-va-kich-hoat-plugin-cache-enabler

Tiếp theo, truy cập vào Settings => Cache Enabler. Thiết lập như hình bên dưới và lưu lại.

thiet-lap-plugin-cache-enabler

Lưu ý:

  • Deactive và xóa bỏ các plugin tạo cache mà bạn đang sử dụng trước khi cài đặt plugin Cache Enabler để tránh bị xung đột.
  • Định dạng WebP chỉ hoạt động trên bản cache. Do đó nếu bạn đang đăng nhập thì WebP sẽ không hoạt động.

Sử dụng plugin LiteSpeed Cache

Nếu website WordPress của bạn đang hoạt động trên Web Server LiteSpeed/ OpenLiteSpeed, bạn có thể load ảnh WebP thông qua plugin LiteSpeed Cache. Tham khảo bài viết “Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache” để biết thêm chi tiết.

Kiểm tra WebP

Để biết định dạng WebP đã hoạt động bình thường hay chưa, các bạn truy cập web thông qua một trình duyệt có hỗ trợ WebP, chẳng hạn Google Chrome.

kiem-tra-webp-co-hoat-dong-hay-khong

Click chuột phải vào 1 trang bất kỳ, chọn Inspect => chọn tab Network => chọn mục Img => Tải lại trang (F5) và xem cột Type. Chúc các bạn thành công!

Bạn có đang sử dụng định dạng WebP trên website của mình? Bạn đánh giá thế nào về ảnh hưởng của nó đối với tốc độ load của site? Hãy chia sẻ quan điểm và ý kiến của bạn với chúng tôi trong khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

Bài viết liên quan

Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Tính năng Crawl Optimization của plugin Yoast SEO
Tính năng Crawl Optimization của plugin Yoast SEO
Vô hiệu hóa WooCommerce Brands để tăng tốc độ
Vô hiệu hóa WooCommerce Brands để tăng tốc độ

Chuyên mục: Thủ thuật WordPress Thẻ: ShortPixel/ Tăng tốc WordPress/ WebP

wpcanban-com-facebook-group

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

Bài viết trước « Hướng dẫn nâng cấp PHP 7.1 cho website WordPress
Bài viết sau Hiển thị file .htaccess trong cPanel một cách đơn giản »

Reader Interactions

Bình luận

    Để lại một bình luận Hủy

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

  1. Khánh 5 bình luậnviết

    07/08/2024 lúc 22:26

    ở dạng soạn thảo Gutenberg editor. Mình chèn link hình ảnh dạng JPG dạng anchor text thì khi bấm vào thì hình ảnh sẽ hiện trong bài viết đó luôn, chỉ cần thao tác zoom in, out là tắt mở hình, còn đối với Webp thì chuyển đến trang xem đính kèm nên sẽ thêm bước back lại post.
    Mình muốn hiện hình ảnh đuôi .Webp trong post luôn như dạnh .jpg cho tiện thì làm sao?. mình dụng Flasome

    Bình luận
    • Trung Hiếu Quản lýviết

      08/08/2024 lúc 06:41

      Bạn đang sử dụng plugin gì để tạo lightbox cho hình ảnh và dùng plugin hay phương pháp gì để load ảnh WebP nhỉ?

      Bình luận
      • Nguyen Duc Khanh 5 bình luậnviết

        08/08/2024 lúc 17:18

        mình không cài plugin hình ảnh gì cả, thấy trong mẫu khối có sẵn của Wordpress (Gutenberg) mình chèn link hình ảnh upload (file webp) lên web như file hình bình thường. định dạng hình thì mình tạo bằng photoshop

        Bình luận
        • Trung Hiếu Quản lýviết

          08/08/2024 lúc 21:11

          Hình như cái lightbox chưa hỗ trợ ảnh WebP thì phải? Mình vừa kiểm tra lightbox của Beaver Builder cũng thấy nó vẫn load ảnh PNG và JPG thôi.

          Bình luận
          • Khánh 5 bình luậnviết

            08/08/2024 lúc 21:55

            Có cách nào ko ad nhỉ, mình đang tính dùng wepb cho nhẹ, mình thiết kế bảng giá sản phẩm dạng list, muốn nhấp vào liên kết là view nhanh hình sp luôn dạng lighbox

          • Trung Hiếu Quản lýviết

            09/08/2024 lúc 06:54

            Bạn thử cài plugin Lightbox with PhotoSwipe gì đó xem sao. Hình như nó có hỗ trợ ảnh WebP.

  2. Huy Thành 2 bình luậnviết

    29/06/2023 lúc 16:04

    Cho mình hỏi phương pháp tạo cache webp có làm mất thuộc tính của image ko, ví dụ latitude & longitude…

    Bình luận
    • Trung Hiếu Quản lýviết

      29/06/2023 lúc 16:26

      Nếu mình không nhầm thì WebP có hỗ trợ lưu trữ thông tin về hình ảnh. Bạn có thể tham khảo chi tiết tại đây.

      Bình luận
  3. Tuấn 1 bình luậnviết

    05/05/2023 lúc 15:04

    Gần đây mình dùng trang này để tạo ảnh Webp : https://squoosh.app/ không biết có ổn không nhỉ?

    Bình luận
    • Trung Hiếu Quản lýviết

      05/05/2023 lúc 16:16

      Bạn nên dùng plugin để tạo ảnh WebP nhé. Vì phải duy trì song song cả 2 phiên bản là WebP và PNG/JPG để không bị lỗi ảnh trên các trình duyệt không hỗ trợ ảnh WebP nữa.

      Bình luận
« 1 2 3 4

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới. Tặng miễn phí ebook "Bảo mật WordPress toàn tập" do WP Căn bản biên soạn!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-chat-luong-cao

Bạn đang tìm gì?

WordPress căn bản

Bảo mật WordPress

Tăng tốc WordPress

Thủ thuật CloudFlare

Sửa lỗi WordPress

Thủ thuật LiteSpeed

Thủ thuật Genesis

Thủ thuật SEO

Thủ thuật WooCommerce

Sử dụng theme Paradise

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-wordpress-mien-phi

Dịch vụ quét mã độc miễn phí

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

Bài viết mới nhất

  • Monarx Security được tích hợp vào dịch vụ WordPress Hosting 15/06/2025
  • Hiển thị code trong bài viết của WordPress 07/06/2025
  • Plugin SMTP siêu nhẹ dành cho WordPress 26/05/2025
  • Plugin contact form siêu nhẹ cho WordPress 23/05/2025

Bình luận mới nhất

  • Trung Hiếu trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting
  • TITAN VINA trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting
  • Trung Hiếu trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting
  • TITAN VINA trong Monarx Security được tích hợp vào dịch vụ WordPress Hosting

Thông tin hữu ích

  • Giới thiệu bản thân
  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

9 Chuyên mục - 1.005 Bài viết - 35.545 Bình luận

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting