Định dạng webp là gì và tại sao nên dùng webp

Admin 13:00 16-08-2019 86

WebP là định dạng hình ảnh được Google phát triển vào năm 2010. Nó được tạo ra để thay thế cho các định dạng như PNG và JPG, tạo ra kích thước tệp nhỏ hơn nhiều trong khi vẫn duy trì chất lượng hình ảnh tương tự.

Định dạng webp là gì ?

WebP là định dạng hình ảnh được Google phát triển vào năm 2010. Nó được tạo ra để thay thế cho các định dạng như PNG và JPG, tạo ra kích thước tệp nhỏ hơn nhiều trong khi vẫn duy trì chất lượng hình ảnh tương tự.

So sánh JPG và WebP

Tại sao nên sử dụng Định dạng WebP ?

WebP là một định dạng cực kỳ hữu ích vì nó cung cấp cả hiệu suất và tính năng. Không giống như các định dạng khác, WebP hỗ trợ cả nén và mất dữ liệu, cũng như độ trong suốt và hình ảnh động.

  WebP PNG JPG GIF
Nén tốt thất
Nén không mất dữ liệu
Minh bạch
Hoạt hình

Ngay cả với các tính năng này, WebP cung cấp kích thước tệp nhỏ hơn so với các lựa chọn thay thế. Trong một nghiên cứu so sánh các định dạng hình ảnh này , người ta thấy rằng hình ảnh mất WebP trung bình nhỏ hơn 30% so với JPG và hình ảnh không mất WebP nhỏ hơn trung bình 25% so với PNG.

Cách chuyển đổi hình ảnh sang định dạng WebP

Có một số công cụ chúng ta có thể sử dụng để chuyển đổi JPG, PNG và các định dạng tệp khác sang WebP.

Công cụ trực tuyến

  • Squoosh - Nén và chuyển đổi hình ảnh trực tuyến
  • Online-Convert.com - Chuyển đổi hình ảnh trực tuyến

Công cụ dòng lệnh

cwebp là công cụ dòng lệnh phổ biến nhất để chuyển đổi hình ảnh sang định dạng WebP. Sau khi cài đặt, chúng ta có thể sử dụng nó để chuyển đổi hình ảnh bằng cách chuyển vào, trong số các tùy chọn khác, chất lượng, tệp đầu vào và tệp đầu ra.

# cwebp -q [quality] [input_file] -o [output_file]

cwebp -q 75 image.png -o image.webp

Công cụ nút

fantemin , và đó là plugin fantemin-webp , là thư viện nút phổ biến nhất để chuyển đổi hình ảnh sang định dạng WebP.

Dưới đây là một tập lệnh mẫu sẽ chuyển đổi tất cả các tệp PNG và JPG trong thư mục sang WebP.

/* convert-to-webp.js */

const imagemin = require("imagemin");
const webp = require("imagemin-webp");

imagemin(["*.png", "*.jpg"], "images", {
  use: [
    webp({ quality: 75})
  ]
});

Sau đó chúng ta có thể sử dụng tập lệnh này thông qua dòng lệnh hoặc thông qua công cụ xây dựng

node convert-to-webp.js

Phác thảo

Trong Phác thảo, chúng ta có thể xuất bất kỳ lát cắt nào ở định dạng hình ảnh WebP.

Ảnh chụp màn hình của chương trình SKetch hiển thị xuất dưới dạng WebP

Cách sử dụng để WebP trên web ngày hôm nay

Tại thời điểm viết bài, WebP được hỗ trợ trong 72% trình duyệt được sử dụng trên toàn cầu.

Mặc dù điều này đủ tốt để tạo ra một trường hợp hấp dẫn để sử dụng WebP, nhưng nó không đủ tốt để dựa vào định dạng mà không cung cấp dự phòng. Trong các trình duyệt không hỗ trợ định dạng tệp này, hình ảnh sẽ xuất hiện bị hỏng.

Chúng tôi có thể cung cấp dự phòng cho hình ảnh bằng cách sử dụng <picture> phần tử. Phần tử HTML5 này cho phép chúng tôi cung cấp nhiều nguồn cho một hình ảnh.

<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" alt="My Image">
</picture>

Để cung cấp nguồn hình ảnh thay thế, chúng tôi sử dụng <source>phần tử bên trong <picture>phần tử. Phần <source>tử có một số thuộc tính chúng ta có thể sử dụng để xác định hình ảnh và khi nào nên sử dụng nó:

  • type: Loại MIME của nguồn
  • srcset: Đường dẫn đến tệp hình ảnh. Nhiều tệp có thể được sử dụng để cung cấp kích thước / mật độ hình ảnh khác nhau (xem Hình ảnh phản hồi - Thuộc tính srcset và kích thước )
  • sizes: Danh sách kích thước của từng tệp nguồn (xem bài viết ở trên)
  • media: Một truy vấn phương tiện sẽ xác định khi hình ảnh được sử dụng (xem bài viết ở trên)

Ngoài các <source>s khác nhau , một <img>phần tử thông thường cũng phải được cung cấp làm dự phòng cho các trình duyệt không hỗ trợ nhiều định dạng tệp thông qua <picture>phần tử.



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


Các tin khác

Tăng tốc độ tải trang web của bạn vì mỗi giây đều rất quan trọng

Tăng tốc độ tải trang web của bạn vì mỗi giây đều rất quan trọng

Quá trình tối ưu hóa để tăng tốc độ tải trang web của bạn có thể là một quá trình không bao giờ kết thúc, giống như chạy trên máy chạy bộ. Tối ưu hóa tốc độ trang sẽ luôn có chỗ để cải thiện và do đó, sẽ không bao giờ hoàn toàn thỏa đáng

Admin 01-07-2019 23:34 103

website và google doanh nghiệp cái nào được tin tưởng hơn

website và google doanh nghiệp cái nào được tin tưởng hơn

Nghiên cứu mới cho thấy các trang website doanh nghiệp địa phương có lượng truy cập lớn hơn nhiều so với danh sách Google My Business khi nói đến niềm tin của người tiêu dùng.

Admin 16-06-2019 13:52 124

Google pagespeed insights là gì và cách tối ưu pagespeed insights 2019 tới 100 điểm

Google pagespeed insights là gì và cách tối ưu pagespeed insights 2019 tới 100 điểm

Đọc bài viết này để hiểu Google pagespeed insights là gì và cách tối ưu pagespeed insights 100 điểm để giúp tăng ranking từ khóa một cách dễ dàng

Admin 08-06-2019 00:11 1186

Hướng dẫn cách mua tên miền hết hạn - Một số mẹo cơ bản

Hướng dẫn cách mua tên miền hết hạn - Một số mẹo cơ bản

Hầu hết người dùng thận trọng về việc mua các tên miền cũ vì tên miền spam đang lan tràn. Chúng thậm chí có thể được tìm thấy trong các trang web cấp cao mà người dùng trả tiền để truy cập

Admin 06-06-2019 23:58 184

Cách xây dựng PBN từ các tài khoản Web 2.0 miễn phí

Cách xây dựng PBN từ các tài khoản Web 2.0 miễn phí

Nếu bạn đang sử dụng phần mềm xây dựng backlink, bạn có thể tiết kiệm rất nhiều tiền bằng cách sử dụng blog của Web 2.0

Admin 06-06-2019 23:47 213

PBN là gì? Tại sao chúng rất phổ biến?

PBN là gì? Tại sao chúng rất phổ biến?

PBN là viết tắt của Mạng Blog cá nhân (Private Blog Networks) . Bạn không cần phải là một người kỳ cựu trong lĩnh vực tiếp thị SEO để tìm ra thuật ngữ này

Admin 06-06-2019 23:39 183

Cách kiếm tiền bằng tên miền hết hạn tuổi cao

Cách kiếm tiền bằng tên miền hết hạn tuổi cao

Có rất nhiều chủ đề hướng dẩn bạn cách kiếm tiền từ tên miền hết hạn và  cách sử dụng sẽ giúp nó được hiển thị nhiều hơn và tên miền hết hạn chất lượng cao và cách chúng có thể dễ dàng tìm kiếm trên google .

Admin 06-06-2019 23:19 109

Những điều cần biết khi mua tên miền hết hạn

Những điều cần biết khi mua tên miền hết hạn

Hầu hết chủ sở hữu trang web thích tìm một tên miền hết hạn trên một tên miền mới và có nhiều lý do cho việc đó. Để bắt đầu bạn nên tìm hiểu những điều cần biết khi mua một tên miền hết hạn

Admin 06-06-2019 22:59 112

Chi phí thực sự của việc xây dựng PBN

Chi phí thực sự của việc xây dựng PBN

Ngoài việc xem xét tất cả các chi phí liên quan đến việc xây dựng và điều hành PBN, chúng tôi cũng sẽ nói về một số cách bạn có thể tiết kiệm tiền trong quá trình này, giúp bạn có chi phí hợp lý hơn. Đọc để khám phá mọi thứ bạn cần biết bây giờ.

Admin 06-06-2019 22:48 134

PBN là gì và chúng có thể được sử dụng để làm gì?

PBN là gì và chúng có thể được sử dụng để làm gì?

Để giúp bạn tìm hiểu thêm về PBN là gì và cách chúng có thể được sử dụng cho lợi ích của bạn trong tương lai, chúng tôi sẽ xem xét một số vấn đề quan trọng nhất xung quanh chúng

Admin 06-06-2019 15:38 114