Phân phát hình ảnh có kích thước chính xác

Katie Hempenius
Katie Hempenius

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.

  1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh 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 (Tháp hải đăng).
  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. Tìm kết quả của quá trình kiểm tra Kích thước hình ảnh phù hợp.

Quy trình kiểm tra hình ảnh có kích thước phù hợp không thành công trong Lighthouse.

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ông cụ cho nhà phát triển.

Bảng điều khiển phần tử trong 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.

  1. Nhấp vào Remix to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.
  2. 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).
  3. 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 những bông hoa màu tím.

  • Kiểm tra flower_photo.jpg trong bảng điều khiển phần tử DevTools.

Bảng điều khiển phần tử trong 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 "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ị đ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:

Google Analytics về độ phân giải màn hình.

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.

Dựa trên thông tin này, chúng ta có thể tính toán chiều rộng của hình ảnh: (rộng 1920 pixel) * (50% chiều rộng của 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 chiều 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 Lighthouse để xác minh rằng bạn đã thay đổi kích thước hình ảnh thành công.

Bài kiểm tra của Lighthouse về việc định kích thước hình ảnh đúng cách.

… 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 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à chiều rộng 540 pixel (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.

Sự đánh đổi ở đây là giữa chất lượng ảnh trên thiết bị có độ phân giải cao và hiệu suất. Bạn có thể dễ dàng ước tính quá mức người dùng sẽ kiểm tra hình ảnh kỹ lưỡng hơn. Vì vậy, bạn nên giảm kích thước 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ể 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.