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
- Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
- 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).
- 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>
choflower2.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.
- Để 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 .
- 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.
- Nhấp vào thẻ Lighthouse.
- Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
- Nhấp vào nút Tạo báo cáo.
- 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.