Chuyển tới nội dung
Logo KWeb
Gọi chúng tôi 0987196180
  • Web công ty
  • Website bán hàng
  • Bảo trì website
  • Tối ưu website

Duyệt:

  • Trang chủ
  • Tư vấn dịch vụ
  • Kinh nghiệm tối ưu website
  • Có nên sử dụng định dạng ảnh WebP trên website?

Có nên sử dụng định dạng ảnh WebP trên website?

Đăng vào 08/07/2021 bởi Công ty Code TốtDanh mục: Kinh nghiệm tối ưu website
Bảo trì website là gì?

WebP là định dạng hình ảnh dung lượng thấp được Google tạo ra nhằm mang lại trải nghiệm nén hình ảnh cao trong khi hạn chế việc giảm chất lượng hình ảnh. Liệu bạn có nên sử dụng không?

Theo Google, hình ảnh định dạng WebP có kích thước nhỏ hơn 26% so với PNG. File WebP có dung lượng thấp hơn 25-34% so với hình ảnh JPEG.  Định dạng WebP lossless hỗ trợ độ trong suốt (còn được gọi là kênh alpha) với chỉ 22% byte.

Nhưng thực sự bạn có nên sử dụng định dạng WebP không? Ta hãy cùng cân nhắc một số tiêu chí phù hợp, thay vì áp dụng mọi thứ mà nghĩ ảnh hưởng tới tốc độ website.

Cách tạo ra định dạng ảnh WebP

Mục lục ẩn
1 Cách tạo ra định dạng ảnh WebP
2 Có thể tạo ảnh WebP trực tiếp trên hosting/VPS hay máy chủ?
3 Sử dụng ảnh WebP như thế nào?

Điều mọi người hay nhầm lẫn là có thể up định dạng ảnh WebP lên và sử dụng chúng thay vì ảnh thông thường. Điều nàu là không nên, vì thực tế là WebP không được 100% các trình duyệt cả phiên bản cũ hỗ trợ. Thêm vào đó, nó cũng nên cân nhắc là chỉ sử dụng ở các trình duyệt có hỗ trợ. Bởi vậy, cách thức sử dụng ảnh trực tiếp là không đúng.

Cách hợp lý là sử dụng các công cụ tự động tạo file ảnh WebP và SAO CHÉP ẢNH GỐC (với định dạng PNG, JPG). Cách này được nhiều plugin WordPress về tạo file WebP áp dụng.

Có thể tạo ảnh WebP trực tiếp trên hosting/VPS hay máy chủ?

Trừ khi bạn dùng công cụ cho phép upload ảnh lên 1 máy chủ khác và trả về định dạng WebP (gọi là cloud converter), thì nếu sử dụng thư viện trên máy chủ của website hiện tại có thể không thành công, chẳng hạn như chỉ mới các máy chủ với web server Apache được hỗ trợ. Khi bạn dùng nginx web server, không thể tạo file ảnh WebP. Xin chia buồn!

Sử dụng ảnh WebP như thế nào?

Thực tế, kể cả khi plugin hỗ trợ tạo WebP, thì cũng dễ dàng thấy có mấy lựa chọn:

  • Tạo chuyển tiếp bằng rewrites (ví dụ khi truy cập anh.jpg, đường dẫn này sẽ được chuyển sang anh.webp).
  • Thay thế bằng tag <picture></picture> khi render <img>.

Về mặt nguyên lý, cách đầu tiên là khả thi nhất. Cách thay thế ảnh bằng thẻ <picture> có thể gặp vấn đề hiển thị ảnh do bố cục có thể không hiển thị ảnh chuẩn.

Thống kê của w3techs cho thấy, tính tới thời điểm hiện tại mới chỉ có 1.7% website được thống kê đang sử dụng định dạng ảnh WebP, trong khi có tới 73,9% đang sử dụng định dạng phổ thông JPEG. Trong một số dự án, Code Tốt vẫn mang lại chỉ số cam kết kể cả khi không hề dùng định dạng WebP. Bởi vậy, lời khuyên là chừng nào yếu tố ảnh WebP không phải là thứ gây ảnh hưởng còn lại tới tốc độ website, bạn không cần vội vàng chuyển sang dùng định dạng WebP đâu.

Hãy tìm một chuyên gia về web để đánh giá và thực hiện việc sử dụng ảnh WebP sẽ là quyết định phù hợp nhất.

Từ khóa: WEBP

Danh mục

  • Bảo trì website
  • Kinh nghiệm tối ưu website
  • Web công ty

Bài viết mới

Cấu hình Gravity Forms với Google Sheets Hướng dẫn tích hợp form Gravity Forms lên Google Sheets 09/08/2021
Tiêu chí chọn lựa dịch vụ bảo trì web Chi phí bảo trì website chỉ từ 150,000đ có hợp lý không? 21/07/2021
WordPress 5.8 có gì mới Bản cập nhật WordPress 5.8 có gì mới 21/07/2021

Bài liên quan

Logo KWeb
5 điều giúp bạn tăng tốc website WordPress 23/06/2021

KWEB.VN

KWeb là thương hiệu riêng của Công ty CP Code Tốt, cung cấp dịch vụ sản xuất website dành cho khách hàng là doanh nghiệp vừa và nhỏ tại Việt Nam.

Giấy chứng nhận ĐKKD 0109265212 cấp ngày 14/07/2020 tại Sở Kế hoạch và Đầu tư TP. Hà Nội.

Thông tin liên hệ

  • 0987196180
  • Tầng 7, Tòa nhà Sannam, số 78 phố Duy Tân, Phường Dịch Vọng Hậu, Quận Cầu Giấy, Thành Phố Hà Nội.
  • [email protected]
  • 0987196180

KWeb đã đăng ký với Bộ Công Thương

Tư vấn sản phẩm

  • Web công ty
  • Web bán hàng
  • Bảo trì website
  • Kinh nghiệm tối ưu website

Điều khoản

  • Hướng dẫn mua hàng
  • Chính sách hoàn tiền

Bài viết mới

  • Hướng dẫn tích hợp form Gravity Forms lên Google Sheets
  • Chi phí bảo trì website chỉ từ 150,000đ có hợp lý không?
  • Bản cập nhật WordPress 5.8 có gì mới
  • Cập nhật phiên bản bảo mật WooCommerce 5.5.1
  • Bảo trì website là gì?

Sản phẩm

  • Web công ty
  • Website bán hàng
  • Bảo trì website
  • Tối ưu website

Thông tin

  • Đối tác
  • Liên hệ

Đăng ký dùng thử dịch vụ

Bản quyền © thuộc về KWeb. Xây dựng với nền tảng Web Builder bởi Công ty Cổ phần CODE TỐT.

Xem facebook

  • Web công ty
  • Website bán hàng
  • Bảo trì website
  • Tối ưu website
Gõ để tìm