Hướng dẫn đầy đủ để sử dụng định dạng hình ảnh WebP

WebP, hoặc phát âm không chính thức là weppy, là một định dạng hình ảnh được giới thiệu bởi Google Developers khoảng 5 năm trước. nếu bạn là nhà thiết kế web hoặc nhà phát triển cố gắng giảm và tối ưu hóa kích thước tệp hình ảnh của bạn, những gì WebP có khả năng sẽ mang lại nụ cười trên khuôn mặt của bạn.

Tóm lại, đây là một số nội dung quan trọng bạn cần biết về định dạng hình ảnh không quá mới mẻ nhưng vẫn tuyệt vời này:

• WebP đi bằng phần mở rộng tệp của .webp.
• WebP chấp nhận cả nén và mất dữ liệu.
• Hình ảnh mất WebP có khả năng Nhỏ hơn 25-34% so với JPEG.
• WebP hình ảnh lossless có khả năng Nhỏ hơn 25% so với PNG.
• WebP hỗ trợ tính minh bạch không mất mát, tức là PNG với kênh alpha.
• WebP hỗ trợ hoạt hình. tức là GIF hoạt hình.

Tóm lại, WebP có khả năng giảm đáng kể kích thước tệp hình ảnh của JPEG, GIF, PNG. Đây là một phần giới thiệu trên WebP, bạn nên kiểm tra trước khi chúng tôi đi vào công cụ thú vị.

Một thí nghiệm

Điều tốt nhất về khiếu nại trên Web là chúng ta luôn có thể chạy thử nghiệm để kiểm tra tính trung thực và tính xác thực. Dưới đây là một số thí nghiệm tôi đã làm để tìm hiểu làm thế nào một hình ảnh nhỏ có thể có khả năng có được sau khi chúng được chuyển đổi từ các định dạng hình ảnh khác nhau (JPEG, PNG và GIF) sang WebP.

1. JPEG - Ảnh bị mất

Đây là hình ảnh JPEG ngẫu nhiên tôi lấy từ Pexels. Kích thước tập tin gốc - 165kb. ↓

Hình ảnh được tối ưu hóa với JpegMini. Kích thước tập tin mới - 101kb. ↓

Cuối cùng, hình ảnh tương tự được chuyển đổi sang định dạng WebP. Kích thước tập tin cuối cùng - 70kb. ↓

Còn một chú ý đáng nói: Dưới đây là các kích thước tệp khác nhau nếu cùng một hình ảnh được chuyển đổi sang các định dạng sau:

• QUÀ TẶNG - 285kb
• PNG 8 - 241,2kb
• PNG 24 - 657,6kb

2. PNG - Hình ảnh không mất dữ liệu

Bây giờ, hãy thử với PNG với độ trong suốt. (Nguồn). Kích thước tập tin gốc - 587kb. ↓

Đây là hình ảnh được tối ưu hóa với tinypng. Kích thước tập tin mới - 278kb. ↓

Và cuối cùng, hình ảnh được chuyển đổi sang định dạng WebP. Kích thước tập tin cuối cùng - 112kb. ↓

3. GIF hoạt hình

Khi được chuyển đổi sang WebP, hình ảnh JPEG đã tăng từ 165kb lên 70kb, trong khi hình ảnh PNG tăng từ 587kb lên 112kb.

Chúng ta hãy xem giá vé GIF hoạt hình như thế nào:

• Kích thước tệp gốc - 6.8mb
• Kích thước tệp WebP - 6.3mb

Tóm lược:

Đây là bảng để tóm tắt toàn bộ thử nghiệm:

	Mất mát (JPG)	Mất mát (PNG)	Hoạt hình-GIF
Nguyên	165kb	587kb	6,8mb
Tối ưu hóa với các công cụ	101kb	278kb	-
Định dạng WebP	70kb	112kb	6,3mb

Không dựa nhiều vào các tính toán toán học, những số liệu này cho thấy giảm đáng kể kích thước tệp và đánh giá từ các hình ảnh, bạn thực sự không thể biết được sự khác biệt về độ rõ và độ phân giải. Kích thước tệp nhỏ hơn, nhẹ hơn với cùng mức chất lượng hình ảnh, WebP chắc chắn đáng để xem xét.

Chuyển đổi sang WebP bằng Công cụ

Nếu bạn đã ở trên tàu và muốn bắt đầu phát hành hình ảnh ở định dạng WebP, hãy đi sâu vào và xem cách bạn có thể chuyển đổi hình ảnh của mình một cách dễ dàng sang định dạng này. Tất cả các phương pháp được đề cập dưới đây khác nhau về các điều khiển, dễ sử dụng và tính đồng nhất. Chọn thuốc độc của bạn.

WebPonize cho Mac

WebPonize có lẽ là cách đơn giản nhất và nhanh nhất để chuyển đổi hình ảnh sang định dạng WebP trên máy Mac. Tất cả những gì bạn cần làm chỉ là kéo và thả hình ảnh của bạn vào WebPonize và nó sẽ thực hiện chuyển đổi. Bạn sẽ nhận được thông số, kích thước trước, kích thước sau và% giảm của tệp gốc. [Tải xuống WebPonize]

Webpconv cho các cửa sổ

Nếu bạn đang chạy Windows, Webpconv là ứng dụng bạn nên cài đặt. Nó cũng có phiên bản di động để bạn có thể chạy độc lập trên ổ đĩa flash. [Tải xuống Webconv]

Chuyển đổi với dòng lệnh

Nếu bạn cảm thấy geeky, có lẽ bạn muốn thực hiện chuyển đổi bằng cách sử dụng các dòng lệnh. cwebp chuyển đổi hình ảnh JPEG, PNG hoặc TIFF của bạn thành định dạng WebP và người lùn chuyển đổi chúng trở lại định dạng PNG. Hãy xem cách nó hoạt động.

Chú thích: Hướng dẫn sau đây dành cho Mac OS X. Đối với người dùng Windows và Linux, bấm vào đây.

Thiết lập MacPorts trên Mac OSX

Trước tiên, hãy đảm bảo bạn đã cài đặt Xcode, sau đó làm theo các bước sau:

1. Tải xuống và cài đặt MacPorts. Nếu bạn đã cài đặt MacPorts trong máy Mac của mình, hãy chuyển sang bước 2.
2. Phóng Thiết bị đầu cuối.
3. Kiểu "cổng sudo selfupdate"và nhấn enter. Điều này sẽ cập nhật MacPorts của bạn lên phiên bản mới nhất.

   

4. Tiếp theo, gõ "cổng sudo cài đặt webp"và nhấn enter. Cái này sẽ cài đặt libwebp (Thư viện WebP).

   

Đó là nó. Bây giờ hãy xem Cách chuyển đổi hình ảnh sang WebP bằng dòng lệnh.

Các lệnh để chuyển đổi / hoàn nguyên

Dưới đây là các lệnh để:

I - Chuyển đổi tệp hình ảnh JPEG / PNG sang định dạng WebP

định dạng: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

Thí dụ:

cwebp -q 80 example.png -o example.webp 

II - Chuyển đổi tập tin hình ảnh WebP trở lại PNG

định dạng: dwebp [WebP_filename] -o [PNG_filename]

Thí dụ:

hình ảnh dwebp.webp -o image.png 

Hơn: Nếu bạn truy cập chuyển đổi thông qua các phương tiện khác, đây là hướng dẫn sử dụng tác vụ Grunt và Gulp để chuyển đổi tệp JPG / PNG sang WebP.

Chuyển đổi với các công cụ trực tuyến

Nếu bạn không xem việc cài đặt bất kỳ ứng dụng nào trên hệ điều hành của mình để thực hiện tác vụ này, thay vào đó, hãy chọn sử dụng các công cụ trực tuyến này. Đây là một vài điều mà tôi đã biết:

• Trực tuyến-converter.com
• Webp-convertor.com
• Zamzar

Tiền boa: Nếu bạn google chuyển đổi webp trực tuyến , bạn có thể sẽ tìm thấy nhiều lựa chọn hơn.

Plugin Photoshop

Bạn có thể vui mừng khi biết rằng cũng có một Plugin Photoshop cho phép bạn lưu hình ảnh sang định dạng WebP thông qua Photoshop. Plugin này hỗ trợ Mac OS X (CS 2- CS 6) và Windows (32 bit & 64 bit). [Tải xuống plugin tại đây.]

chú thích: Chỉ cần nghĩ rằng bạn nên biết rằng tôi đã thử nó trên Photoshop CC. Không làm việc ở đó.

Hỗ trợ trình duyệt WebP

Cuối cùng, hãy nói về khả năng tương thích. Hiện tại, bạn có thể xem hình ảnh định dạng WebP trên các trình duyệt sau (ref):

• Chrome / Chrome cho iOS
• Opera / Opera Mini

Không có nhiều may mắn cho FireFox và Safari, vốn vẫn không hỗ trợ định dạng WebP nguyên bản. Tuy nhiên, bạn có thể sử dụng thư viện Javascript WebPJS để chuyển đổi hình ảnh WebP thành chuỗi dataURI trên trang web của khách hàng.

Quay trở lại các định dạng hình ảnh khác

Luôn luôn là một ý tưởng tốt để sử dụng dự phòng để tránh hiển thị lỗi hình ảnh do các trình duyệt không được hỗ trợ. Trong trường hợp này, dự phòng sẽ là hình ảnh ở định dạng JPG hoặc PNG. Đây là cách bạn làm điều đó.

  nguồn srcset = "example.webp 1x" type = "hình ảnh / webp">   

Đối với mã này, hình ảnh / hướng dẫn đầy đủ để sử dụng webp-image-format_13.jpg sẽ được tải nếu người dùng sử dụng Firefox hoặc Safari.

Xem trước hình ảnh WebP

Bạn có thể xem trước hình ảnh WebP trên trình duyệt Chrome và Opera. Nhưng nếu bạn muốn thực hiện cục bộ trên máy của mình, bạn sẽ cần một vài công cụ.

Người dùng Mac có thể sử dụng WebPQuickLook để xem trước hình ảnh định dạng WebP bằng chức năng Xem nhanh (với hình ảnh được chọn hoặc tô sáng, nhấn phím cách).

Đối với người dùng Windows, WebPCodec sẽ hiển thị bản xem trước hình thu nhỏ của hình ảnh WebP trong File Explorer. Cả hai tương đương WebP và JPEG sẽ được hiển thị. Trên một số HĐH Window được hỗ trợ (Vista, 7, 8), hình ảnh WebP cũng có thể được hiển thị trên Windows Photo Viewer.

Hơn: ReSCR.it tự động cung cấp hình ảnh ở định dạng WeBP và nó khả dụng nếu bạn lưu trữ hình ảnh của mình với MaxCDN. (Đọc thêm)

Tham khảo thêm

• Chuyển đổi GIF hoạt hình sang WebP
• Cách thức hoạt động của WebP
• Triển khai WebP thông qua Chấp nhận đàm phán nội dung
• Web nhanh hơn, nhỏ hơn và đẹp hơn với WebP
• Triển khai các định dạng hình ảnh mới trên web
• Tài liệu API WebP