WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Sử dụng định dạng WebP cho hình ảnh trong WordPress

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

57 Bình luận

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

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:

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 blog/ 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, một số trình duyệt phổ biến như Chrome hay Opera đều đã hỗ trợ định dạng này. Firefox và Safari cũng đang nghiên cứu để hỗ trợ WebP trong tương lai. Trong khi đó IE và Edge của Microsoft có vẻ không mặn mà gì lắm.

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:

1. 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í, do đó, 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í. Đăng ký mua credit ShortPixel theo link dưới đây:

2. Kích hoạt WebP cho blog/ 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:

Đối với web server NginX, các bạn thêm đoạn code sau đây vào file NginX config:

Sử dụng plugin Cache Enabler

Đây là một trong số hiếm hoi plugin tạo cache 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.

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.

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.

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.

Click chuột phải vào 1 trang bất kỳ, chọn Inspect => chọn tab Network => chọn mục Img => Load lại trang 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 blog/ 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 subscribe 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 qua email nhé. Cảm ơn rất nhiều. :)

Reader Interactions

Bình luận

    Trả lời

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. Mình dùng keycdn thì có dùng được không Hiếu ơi, có cả Wp-Rocket, phải deactive mới dùng được à?

    Trả lời

    • Plugin Cache Enabler cũng của KeyCDN đó bạn. Nên nếu bạn sử dụng kết hợp với plugin CDN Enabler (của KeyCDN) thì hoàn toàn được nhé. Nếu bạn cài Cache Enabler thì xóa WP Rocket đi. Không dùng được đồng thời 2 plugin tạo cache đâu nhé. :P

      Trả lời

  2. Đang dùng nhiều ảnh là vecter (svg) nhưng chủ yếu là ảnh đồ hoạ. Giờ mới biết tới ông thần này, để thử xem sao. Thank Hiếu.

    Trả lời

  3. Anh Hiếu ơi cho em hỏi tí là có các nào giới hạn plugin chỉ hoạt động trên máy tính không ạ ? ví dụ như những plugin ảnh hưởng trực tiếp tới người dùng như Lazyload ấy anh

    Trả lời

    • Chrome chiếm phần lớn thị phần trình duyệt bạn ơi. Nên Chrome hỗ trợ là ngon rồi. Sắp tới có thêm Firefox và Safari. :P

      Trả lời

  5. Share cho mọi người soft free convert ảnh sang Webp trên máy tính này “webpconv Romeolight” tìm trên gu là có :b không giới hạn số lượng ảnh , đồng thời cho phép mã hóa sang Base64 luôn , sau khi convert ảnh lưu ở folder ngoài màn hình

    Trả lời

  6. Blog của mình hiện nay hay gặp 1 số lỗi 504 hay 508. Liên hệ bên hotting họ bảo blog của mình nặng và bảo mình xem lại code hoặc nâng cấp hoting.
    Mình thì không biết kiểm tra lỗi code nặng hay nhẹ thế nào? bạn có plugin nào giúp mình giải quyết vẫn đề trên không?

    Trả lời

  7. trước giờ em cứ tưởng chỉ cần giảm dung lượng anh khi mình đăng lên là được nên toàn cố làm sao giảm nhiều nhất có thể may hnay đọc được bài này cám ơn anh nhiều

    Trả lời

    • Làm gì mà không dám thử? :D Nếu trình duyệt nào chưa hỗ trợ WebP thì nó vẫn dùng các định dạng ảnh cũ mà. Đâu có bị lỗi mà lo. :P

      Trả lời

  9. e làm tới bước Sử dụng plugin Cache Enabler thì hình như là không ổn rồi vì e đang có WP rocket @@ vậy giờ sao hả a :P

    Trả lời

    • thêm 1 điều nữa là hình như e chèn code không có tác dụng. thử cách text a chỉ thấy ảnh vẫn PNG. không hiểu có phải e chèn sai code của server không (e không biết host godaddy dùng server gì).

      Trả lời

      • đang dùng rất ok thì chợt phát hiển ra vào web bằng safari bị lỗi không load ảnh a ạ. Nhìn bên trên thì đúng là nó chưa hỗ trợ safari ios 10 nhưng sao vào web a hình ảnh vẫn lên đều đều ta

        Trả lời

      • Mình làm được rồi >.<, mà phải dùng plugin, hic. Chứ không chèn code vô file htaccess đc.
        Mình có thắc mắc là khi mình xem link ảnh của mình thì đuôi là webp nhưng của wpcanban vẫn là png :D. Không biết là nó khác biệt như thế nào

        Trả lời

        • Của mình đuôi file vẫn là PNG và JPG, nhưng Type lại là WebP. Mình cũng dùng plugin ShortPixel để nén ảnh và chèn code vào .htaccess thôi. :P

          Trả lời

  11. Em ko xài cache trên web mà được cache trên sever vậy có dùng được ko ạ.
    Nếu em dùng soft chuyển từ jpg sang webp rồi up lên hay là up cả 2 phiên bản hả anh ?

    Trả lời

    • Miễn là server của bạn hỗ trợ file .htaccess thì có thể thực hiện theo hướng dẫn bên trên được. Nếu là NginX thì cần phải convert config từ .htaccess sang. Bạn phải upload cả 2 phiên bản nhé. Nếu chỉ upload 1 thì sẽ gặp lỗi ảnh trên trình duyệt Safari, Firefox hay IE. Do các trình duyệt này chưa hỗ trợ định dạng WebP. :P

      Trả lời

  12. Hiếu cho mình hỏi là nếu dùng EWWW thì chỉ tích vô tùy chọn “JPG/PNG to WebP” trong tab WebP Settings thôi phải không. Có tích thêm mục nào nữa không nhỉ? sao mình tích như vậy và thêm vào file .htaccess như bài hướng dẫn rồi mà mình thấy vẫn có hình load PNG và JPEG :(

    Trả lời

    • Mình chưa dùng tính năng tạo ảnh WebP của EIO bao giờ nên cũng không rõ lắm. Để tạo ảnh WebP, mình thường dùng ShortPixel hoặc Optimus. :P

      Trả lời

  13. Sao mình làm theo mà không được vậy Hiếu ơi, đã cài Optimus plugin và dán đoạn code vào NginX.
    Kiểm tra thì ảnh vẫn hiện jpg và png.
    Hiếu check giúp mình xem nó bị sao vậy: denlednhat.com

    Thank Hiếu

    Trả lời

    • Bạn copy 1 link hình ảnh bất kỳ và đổi đuôi của nó từ JPG/PNG sang WebP xem nó có hiển thị được trên trình duyệt không? :P

      Trả lời

  14. WebP sẽ tạo ra các file ảnh định dạng *.webp như vậy khi up 1 ảnh lên, với các kích thước do themes tạo ra. Cộng thêm ảnh Webp cho mỗi size nữa, số lượng sẽ nhân đôi. Được về tốc độ nhưng nguy hiểm nếu dung lượng host có hạn.

    Trả lời

  17. Em dùng EWWW và Litespeed cùng tối ưu. Và đang bị lỗi là: Vistor dùng Safari, Firefox thì không load ảnh JPG được mà nó cứ nhè webp load về, trong khi đó trình duyệt không hỗ trợ. Em phải làm thế nào để cấu hình load jpg với trình duyệt không hỗ trợ webp ạ

    Trả lời

        • Nếu vậy thì nó lỗi là đúng rồi. Gỡ cái code WebP cũ ra, dùng tính năng load ảnh WebP của plugin LiteSpeed Cache ấy. Vào LiteSpeed Cache => Settings => [7] Media => chuyển mục Image WebP Replacement và WebP For Extra srcset sang trạng thái ON => Save Changes => xóa LiteSpeed Cache + cache CloudFlare rồi kiểm tra kết quả.

          Trả lời

          • Em muốn dùng EWWW vì thấy nó nén ảnh hơn một xíu với Litespeed, nhanh hơn vì nó dùng tài nguyên trên host luôn. Chứ Litespeed nén lâu thậm tệ luôn anh ạ.

            Bây giờ em tắt hết mục Media của LiteSpeed có giải quyết được vấn đề không anh.

          • Mình bảo bạn tắt tính năng load ảnh WebP bằng code của EWWWW đi chứ có bảo bạn tắt tính năng nén ảnh hay tắt luôn plugin EWWW đi đâu? Cái code load WebP của thằng EWWW là nguyên nhân xung đột với CloudFlare chứ không phải thằng LiteSpeed Cache. Bảo sao thì cứ làm đúng như vậy đi.

          • Thành công rồi anh ạ. Em cảm ơn anh nhiều nhiều ạ. Chúc anh một ngày tốt lành

    • Safari is experimenting with supporting WebP images.

      Trước sau gì cũng hỗ trợ thôi bạn ạ. Chrome trên Android đã hỗ trợ rồi. Còn Safari thì đang thử nghiệm.

      Trả lời

  21. ý e là Chrome cho Iphone với Ipad ấy ạ. e nghĩ bản Chrome đó vẫn hỗ trợ nhưng KHÔNG :((

    Trả lời

    • Ý mình là Chrome Android đã hỗ trợ thì trước sau gì Chrome iOS cũng hỗ trợ thôi. Ngay cả Safari cũng đang trên lộ trình rồi mà. :P

      Trả lời

Footer

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

Bình luận nhiều nhất (tháng)

  1. Ngô Văn Cương (10)
  2. Cường (7)
  3. Đồng (7)
  4. Tùng (7)
  5. An Ba (6)
  6. Anh Khôi (6)

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

10 Chuyên mục - 918 Bài viết - 32863 Bình luận