Chạy Lighthouse
Lỗi này đủ nhỏ để có thể kiểm tra hình ảnh theo cách thủ công. Tuy nhiên, đối với hầu hết các trang web, việc sử dụng một công cụ như Lighthouse để tự động hoá việc này là điều cần thiết.
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Toàn màn hình .
- Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
- Nhấp vào thẻ Lighthouse (Tháp hải đăng).
- Đả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.
- Tìm kết quả của quy trình kiểm tra Định kích thước hình ảnh đúng cách.
Kết quả kiểm tra Lighthouse cho thấy cả hai hình ảnh trên trang này đều cần đổi kích thước.
Khắc phục flower_logo.png
Bắt đầu từ đầu trang và sửa hình ảnh biểu trưng.
- Kiểm tra
flower_logo.png
trong bảng điều khiển Phần tử của DevTools.
Đây là CSS cho flower_logo.png
:
.logo {
width: 50px;
height: 50px;
}
Chiều rộng CSS của hình ảnh này là 50 pixel, vì vậy, bạn nên đổi kích thước flower_logo.png
để khớp. Bạn có thể sử dụng ImageMagick để đổi kích thước hình ảnh cho vừa. ImageMagick là một công cụ dòng lệnh để chỉnh sửa hình ảnh được cài đặt sẵn trong môi trường lớp học lập trình.
- Nhấp vào Remix to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.
- Nhấp vào Terminal (Thiết bị đầu cuối) (lưu ý: nếu nút Terminal không xuất hiện, bạn có thể cần sử dụng tuỳ chọn Toàn màn hình).
- Trong bảng điều khiển, hãy nhập:
convert flower_logo.png -resize 50x50 flower_logo.png
Sửa flower_photo.jpg
Tiếp theo, hãy chỉnh sửa ảnh hoa màu tím.
- Kiểm tra
flower_photo.jpg
trong bảng điều khiển phần tử DevTools.
Đây là CSS cho flower_photo.jpg
:
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
50vw
đặt chiều rộng CSS của flower_photo.jpg
thành "nửa chiều rộng của trình duyệt".
(1vw
bằng 1% chiều rộng của trình duyệt).
Kích thước lý tưởng cho hình ảnh này sẽ phụ thuộc vào thiết bị đang xem hình ảnh, vì vậy, bạn nên đổi kích thước hình ảnh thành kích thước phù hợp với hầu hết người dùng. Bạn có thể kiểm tra dữ liệu phân tích để tìm hiểu độ phân giải màn hình phổ biến trong số người dùng:
Dữ liệu này cho thấy hơn 95%khách truy cập trang web này sử dụng độ phân giải màn hình rộng 1920 pixel trở xuống.
Bằng cách sử dụng thông tin này, chúng ta có thể tính toán chiều rộng của hình ảnh: (chiều rộng 1920 pixel) * (50% chiều rộng trình duyệt) = 960 pixel
Ở độ phân giải lớn hơn 1920 pixel, hình ảnh sẽ được kéo giãn để phủ kín khu vực. Hình ảnh đã đổi kích thước vẫn khá lớn, vì vậy, hiệu ứng của việc này sẽ không đáng kể.
- Sử dụng ImageMagick để đổi kích thước hình ảnh thành rộng 960 pixel. Trong loại thiết bị đầu cuối:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg
# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg
Chạy lại Lighthouse
- Chạy lại quy trình kiểm tra Hiệu suất của Lighthouse để xác minh rằng bạn đã đổi kích thước hình ảnh thành công.
… Và không thành công! Tại sao lại như vậy?
Lighthouse chạy các bài kiểm thử trên một thiết bị Nexus 5x. Nexus 5x có màn hình 1080 x 1920.
Đối với Nexus 5x, kích thước tối ưu của flower_photo.jpg
sẽ là 540 pixel chiều rộng (1080 pixel * . 5). Kích thước này nhỏ hơn nhiều so với hình ảnh đã đổi kích thước.
Bạn có nên đổi kích thước hình ảnh để nhỏ hơn nữa không? Có thể. Tuy nhiên, câu trả lời cho câu hỏi này không phải lúc nào cũng rõ ràng.
Mối đánh đổi ở đây là giữa chất lượng hình ảnh trên các thiết bị có độ phân giải cao và hiệu suất. Bạn có thể dễ dàng đánh giá quá cao mức độ người dùng sẽ kiểm tra kỹ hình ảnh, vì vậy, bạn nên làm cho hình ảnh nhỏ hơn. Tuy nhiên, chắc chắn có các trường hợp sử dụng mà chất lượng hình ảnh quan trọng hơn.
Tin vui là bạn có thể bỏ qua sự đánh đổi này bằng cách sử dụng hình ảnh thích ứng để phân phát nhiều kích thước hình ảnh. Bạn có thể tìm hiểu thêm về vấn đề này trong Hướng dẫn về hình ảnh thích ứng.