Chạy Lighthouse
Nhiễu sọc này đủ nhỏ để có thể kiểm tra hình ảnh của nó bằng tay. 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à cần thiết.
- Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào
Fullscreen
(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.
- Tìm kết quả của kiểm tra Hình ảnh có kích thước phù hợp.
Quy trình kiểm tra Lighthouse cho thấy cả hai hình ảnh trên trang này đều cần bạn phải đổi kích thước.
Khắc phục flower_logo.png
Hãy bắt đầu ở phần trên cùng của trang và chỉnh sửa hình ảnh biểu trưng.
- Kiểm tra
flower_logo.pngtrong bảng điều khiển Phần tử của công cụ cho nhà phát triển.
Đâ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 phải đổi kích thước flower_logo.png cho phù hợ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ụ CLI để 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 để chỉnh sửa (Remix) để chỉnh sửa dự án.
- Nhấp vào Thiết bị đầu cuối (lưu ý: nếu nút Thiết bị đầu cuối không hiển thị, bạn có thể cần phải sử dụng tùy 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 hoa_photo.jpg
Tiếp theo, hãy sửa ảnh những bông hoa màu tím.
- Kiểm tra
flower_photo.jpgtrong bảng điều khiển các thành phần của Công cụ cho nhà phát triển.
Đâ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 "một 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ị mà người dùng sử dụng để 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 của người dùng:
Dữ liệu này cho thấy rằng hơn 95%khách truy cập vào trang web này sử dụng độ phân giải màn hình có chiều rộng từ 1920 pixel trở xuống.
Dựa vào thông tin này, chúng ta có thể tính toán được chiều rộng của hình ảnh sẽ là: (rộng 1920 pixel) * (50% chiều rộng trình duyệt) = 960 pixel
Trên độ phân giải lớn hơn 1920 pixel, hình ảnh sẽ bị kéo giãn để bao phủ vùng đó. Hình ảnh được đổi kích thước vẫn khá lớn, vì vậy ảnh hưở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 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 bài kiểm tra Hiệu suất 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 thử nghiệm trên 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 là rộng 540 pixel (1080 pixel * . 5). Hình này nhỏ hơn nhiều so với hình ảnh được đổi kích thước của chúng tôi.
Bạn có nên đổi kích thước hình ảnh cho nhỏ hơn nữa không? Có thể. Tuy nhiên, câu trả lời cho không phải lúc nào cũng rõ ràng.
Sự đá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 ước tính mức độ chặt chẽ mà người dùng sẽ kiểm tra hình ảnh. Vì vậy, bạn nên thu nhỏ hình ảnh. Tuy nhiên, có một số 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ể hoàn toàn 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.