ClearByte.
Tiếng Việt
Web và phát triển / CLEARBYTE

Ảnh đáp ứng: hiểu srcset, sizes và tỷ lệ điểm ảnh thiết bị

srcset liệt kê tệp ảnh khả dụng. Với mô tả chiều rộng, sizes cho biết vùng hiển thị dự kiến theo pixel CSS. Trình duyệt kết hợp thông tin này với DPR và chính sách riêng để chọn tệp; bố cục thực tế vẫn do CSS điều khiển.

Trong hướng dẫn này

Ảnh có thể nhìn đúng nhưng tải nhiều pixel hơn bố cục dùng, hoặc tệp nhỏ bị kéo giãn trên màn hình mật độ cao. Đánh dấu ảnh đáp ứng nối các tệp được tạo với vùng ảnh chiếm. Hai phía phải mô tả cùng một bố cục.

Bắt đầu từ một thành phần thật và vài kích thước có ý nghĩa. Ví dụ dùng cột nội dung tối đa 800 pixel CSS, lề ngoài 16 pixel trên màn hình hẹp. Mọi tệp có cùng nội dung và tỷ lệ 4:3.

Tách pixel nguồn, pixel CSS và DPR

Tệp rộng 800 pixel không nhất thiết chiếm 800 pixel CSS. Nó có thể nằm trong vùng 400 pixel CSS; tại DPR 2 vùng đó tương ứng khoảng 800 điểm ảnh thiết bị. Đây là quan hệ lập kế hoạch độ phân giải, không ép trình duyệt chọn một tài nguyên cụ thể.

Tính vùng hiển thị trước: giá trị nhỏ hơn giữa 800 và chiều rộng viewport trừ 32. Nhân vùng này với DPR để có chiều rộng nguồn mục tiêu. Không nhân toàn viewport nếu ảnh chỉ nằm trong cột hẹp; diện tích thật của thành phần mới là đầu vào.

Kế hoạch ảnh cho cột nội dung 800 pixel
Chiều rộng viewportVùng hiển thị theo pixel CSSDPRChiều rộng nguồn mục tiêu
3923601360 pixel nguồn
3923602720 pixel nguồn
10248001800 pixel nguồn
102480021600 pixel nguồn

Dùng mô tảw khi chiều rộng bố cục thay đổi

w mô tả chiều rộng pixel thật của tệp, không phải breakpoint. sizes mô tả ảnh dự kiến rộng bao nhiêu trong bố cục hiện tại. Mã dùng vùng 800 pixel khi viewport từ 832 pixel CSS; nhỏ hơn thì trừ hai lề khỏi chiều rộng viewport.

CSS đi kèm là một phần ví dụ. Nếu thiết kế chuyển ảnh vào nửa chiều rộng lưới, cập nhật sizes theo lưới đó. Giữ giá trị toàn chiều rộng cũ có thể khiến trình duyệt chọn tệp dư lớn. Thuộc tính đúng là mô tả đúng bố cục, không phải danh sách màn hình phổ biến.

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

Dự đoán ứng viên rồi kiểm tra lựa chọn thật

Viewport 392 tại DPR 2 có vùng 360 pixel CSS và mục tiêu 720 pixel nguồn. Trong các tệp đã cấp,800w là lựa chọn dự kiến hợp lý. Màn hình rộng tại DPR 2 có mục tiêu 1600. Phép tính giải thích đầu vào, không bảo đảm trình duyệt tải đúng ứng viên đó.

Trình duyệt có thể cân nhắc yếu tố khác và giữ tệp lớn đã tải khi cửa sổ thu nhỏ. Thử sạch bằng ngữ cảnh trang mới hoặc tải lại sau khi chọn thiết bị; kiểm tra URL ảnh và bytes truyền trong công cụ phát triển. Chỉ resize trang đã có cache dễ gây hiểu nhầm.

Tạo các tệp 400, 800 và 1600 pixel thật, xem chất lượng và kiểm tra từng URL trả ảnh. Đổi tên một tệp 1600 pixel thành nhiều bản rồi gắn w khác nhau không tạo độ phân giải đáp ứng.

  • Đo chiều rộng render của phần tử, đừng mặc định bằng viewport.
  • So URL currentSrc với phản hồi ảnh ở bảngNetwork.
  • Xem kích thước tệp, loại phản hồi, cache và bytes truyền.
  • Lặp ở viewport hẹp và rộng, tại DPR 1 và DPR 2.
  • Kiểm tra tràn ngang và dịch chuyển bố cục trước, sau khi ảnh tới.

Chọn mô tảx cho ảnh thật sự cố định

Logo nhỏ cố định chiều rộng có thể dùng mô tả mật độ. Ảnh hiển thị 120 pixel CSS dùng tệp 120 pixel làm 1x và 240 pixel làm 2x. Đây là các độ phân giải cho cùng kích thước hiển thị. Không trộn x với w trong một srcset.

Cắt ảnh khác nhau là bài toán thiết kế riêng. Nếu di động cần cận mặt còn máy tính cần cảnh rộng, dùng picture với điều kiện media phù hợp. Đó là art direction; ví dụ chính chỉ đổi độ phân giải của cùng bố cục ảnh. Văn bản thay thế cần mô tả nội dung có ý nghĩa.

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

Tính cả tỷ lệ và cách tải

width và height cho phép giữ chỗ theo tỷ lệ trước khi ảnh đến, không buộc ảnh đáp ứng giữ nguyên kích thước CSS khi style đổi. Với 4:3, rộng 800 cho cao 600; rộng 360 cho cao 270 pixel. Giữ chỗ đúng giúp hạn chế chuyển động bất ngờ.

Lazy loading hợp với ảnh phía dưới trang dài, nhưng không nên trì hoãn máy móc ảnh quan trọng nhìn thấy ngay. Chọn ứng viên giảm pixel dư; nén, định dạng và thời điểm yêu cầu xử lý các phần chi phí tải khác nhau.

Bộ nhớ ảnh đã giải mã khác kích thước tệp mạng. WebP nén nhỏ có thể trở thành buffer pixel lớn. Dùng công cụ bộ nhớ cho kích thước giải mã rồi đo tệp nén thật; số pixel không tự xác định được bytes của tệp.

Kiểm tra hợp đồng thành phần trước phát hành

Đặt quy tắc bố cục và quy tắc tạo ảnh cùng nhau: chiều rộng ứng viên, crop, tỷ lệ, chất lượng và sizes. Đổi giới hạn từ 800 sang 1000 cần xem lại ứng viên. Nhờ đó lần thay thiết kế sau không để sót mô tả tài nguyên lỗi thời.

Kiểm tra src dự phòng, mọi URL srcset, alt có nghĩa và vùng giữ chỗ. Dùng công cụ CSS sang pixel thiết bị để tính lại bảng với slot và DPR của bạn, cùng công cụ tỷ lệ cho chiều cao. Kết quả hữu ích là tệp và bố cục khớp trên thiết bị thực.

Câu hỏi thường gặp

sizes có đổi chiều rộng CSS của ảnh không?

Không. Nó mô tả vùng dự kiến để chọn tài nguyên với mô tảw. CSS quyết định bố cục render, nên hai mô tả cần khớp.

Tại sao ảnh lớn vẫn còn sau khi thu cửa sổ?

Trình duyệt có thể dùng lại ảnh đã tải. Thử tải mới với viewport và DPR mong muốn rồi xem tài nguyên cùng network transfer, không chỉ resize liên tiếp.

Ảnh 2x luôn có kích thước tệp gấp đôi sao?

Không. Gấp đôi cả hai chiều tạo số pixel gấp bốn, nhưng bytes còn phụ thuộc nội dung, định dạng và chất lượng nén. Hãy đo tệp đã tạo.

Nguồn & định nghĩa

Ngày kiểm tra phương pháp: