Tạo hình ảnh WebP bằng dòng lệnh

Katie Hempenius

Chúng tôi đã cài đặt công cụ dòng lệnh webp cho bạn, vì vậy, bạn đã sẵn sàng để bắt đầu. Công cụ này chuyển đổi hình ảnh JPG, PNG và TIFF thành WebP.

Chuyển đổi hình ảnh sang WebP

1. Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
2. Nhấp vào Terminal (lưu ý: nếu nút Terminal không hiển thị, thì có thể bạn cần phải dùng chế độ Toàn màn hình).
3. Nhập lệnh sau:

cwebp -q 50 images/flower1.jpg -o images/flower1.webp

Lệnh này chuyển đổi, với chất lượng 50 (0 là kém nhất; 100 là tốt nhất), tệp images/flower1.jpg và lưu dưới dạng images/flower1.webp.

Sau khi thực hiện việc này, bạn sẽ thấy như sau trong bảng điều khiển:

Saving file 'images/flower1.webp'
File:      images/flower1.jpg
Dimension: 504 x 378
Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
           (1.24 bpp)
block count:  intra4:        750  (97.66%)
              intra16:        18  (2.34%)
              skipped:         0  (0.00%)
bytes used:  header:            116  (0.4%)
             mode-partition:   4014  (13.6%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |      22%|      26%|      36%|      17%|     768
      quantizer:  |      52 |      42 |      33 |      24 |
   filter level:  |      16 |       9 |       6 |      26 |

Bạn vừa chuyển đổi thành công hình ảnh sang WebP.

Tuy nhiên, việc chạy lệnh cwebp mỗi lần một hình ảnh như thế này sẽ mất nhiều thời gian để chuyển đổi nhiều hình ảnh. Nếu cần thực hiện việc này, bạn có thể sử dụng một tập lệnh.

• Chạy tập lệnh này trong bảng điều khiển (đừng quên dấu phẩy ngược):

`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

Tập lệnh này chuyển đổi tất cả tệp trong thư mục images/ ở chất lượng 50 và lưu các tệp đó dưới dạng tệp mới (cùng tên tệp, nhưng có đuôi tệp là .webp) trong cùng thư mục.

✔︎ Nhận phòng

Bây giờ, bạn có 6 tệp trong thư mục images/:

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

Tiếp theo, hãy cập nhật trục trặc này để phân phát hình ảnh WebP cho các trình duyệt có hỗ trợ định dạng này.

Thêm hình ảnh WebP bằng thẻ <picture>

Thẻ <picture> cho phép bạn phân phát WebP cho các trình duyệt mới hơn trong khi vẫn hỗ trợ các trình duyệt cũ.

• Trong index.html, hãy thay thế <img src="images/flower1.jpg"/> bằng HTML sau:

<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>

• Tiếp theo, hãy thay thế các thẻ <img> cho flower2.jpg và flower3.png bằng thẻ <picture>.

✔︎ Nhận phòng

Sau khi hoàn tất, các thẻ <picture> trong index.html sẽ có dạng như sau:

<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower2.webp">
  <source type="image/jpeg" srcset="images/flower2.jpg">
  <img src="images/flower2.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower3.webp">
  <source type="image/png" srcset="images/flower3.png">
  <img src="images/flower3.png">
</picture>

Tiếp theo, hãy sử dụng Lighthouse để xác minh rằng bạn đã triển khai hình ảnh WebP trên trang web đúng cách.

Xác minh việc sử dụng WebP bằng Lighthouse

Tính năng kiểm tra hiệu suất Phân phát hình ảnh ở định dạng mới của Lighthouse có thể cho bạn biết liệu tất cả hình ảnh trên trang web của bạn có đang sử dụng định dạng thế hệ mới như WebP hay không.

1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào Toàn màn hình .
2. Nhấn tổ hợp phím "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
3. Nhấp vào thẻ Lighthouse.
4. Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
5. Nhấp vào nút Tạo báo cáo.
6. Kiểm tra xem bài kiểm tra Phân phát hình ảnh ở định dạng mới đã được vượt qua hay chưa.

Thành công! Bạn hiện đang phân phát hình ảnh WebP trên trang web của mình.