Hình ảnh thích ứng

Văn bản trên web sẽ tự động xuống dòng ở cạnh màn hình để không bị tràn. Mặt khác, hình ảnh có kích thước vốn có. Nếu hình ảnh rộng hơn màn hình, thì hình ảnh sẽ tràn ra ngoài và người dùng phải cuộn theo chiều ngang để xem toàn bộ hình ảnh.

Rất may là CSS cung cấp cho bạn các công cụ để ngăn chặn điều này xảy ra.

Giới hạn hình ảnh

Trong biểu định kiểu, bạn có thể dùng max-inline-size để khai báo rằng hình ảnh không bao giờ được hiển thị ở kích thước rộng hơn phần tử chứa của chúng.

img {
  max-inline-size: 100%;
  block-size: auto;
}

Bạn cũng có thể áp dụng quy tắc tương tự cho các loại nội dung được nhúng khác, chẳng hạn như video và iframe.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

Khi quy tắc này có hiệu lực, trình duyệt sẽ tự động giảm tỷ lệ hình ảnh cho vừa với màn hình.

Việc thêm giá trị block-size là auto có nghĩa là trình duyệt sẽ giữ nguyên tỷ lệ khung hình của hình ảnh khi đổi kích thước.

Đôi khi, kích thước của hình ảnh được đặt bởi một hệ thống quản lý nội dung (CMS) hoặc hệ thống phân phối nội dung khác. Nếu thiết kế của bạn yêu cầu một tỷ lệ khung hình khác với tỷ lệ mặc định của CMS, bạn có thể sử dụng thuộc tính aspect-ratio để giữ nguyên thiết kế của trang web:

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

Rất tiếc, điều này thường có nghĩa là trình duyệt phải nén hoặc kéo giãn hình ảnh để vừa với không gian dự kiến.

Để ngăn tình trạng bị bóp và kéo giãn, hãy sử dụng thuộc tính object-fit.

Giá trị object-fit là contain sẽ cho trình duyệt biết rằng bạn muốn giữ nguyên tỷ lệ khung hình của hình ảnh, để lại khoảng trống xung quanh hình ảnh nếu cần.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

Giá trị object-fit là cover sẽ cho trình duyệt biết cần giữ nguyên tỷ lệ khung hình của hình ảnh, cắt hình ảnh nếu cần.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

Bạn có thể thay đổi vị trí của phần cắt hình ảnh bằng cách sử dụng thuộc tính object-position. Thao tác này sẽ điều chỉnh tiêu điểm của phần cắt, nhờ đó bạn có thể đảm bảo phần quan trọng nhất của hình ảnh vẫn xuất hiện.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

Phân phối hình ảnh

Các quy tắc CSS đó cho trình duyệt biết cách bạn muốn hình ảnh được hiển thị. Bạn cũng có thể cung cấp gợi ý trong HTML về cách trình duyệt nên xử lý những hình ảnh đó.

Gợi ý về kích thước

Nếu biết kích thước hình ảnh, hãy luôn thêm thuộc tính width và height. Ngay cả khi hình ảnh được hiển thị ở một kích thước khác do quy tắc max-inline-size của bạn, trình duyệt vẫn biết tỷ lệ chiều rộng trên chiều cao và có thể dành ra lượng không gian phù hợp. Điều này giúp ngăn nội dung khác của bạn bị nhảy lung tung khi hình ảnh tải.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

Gợi ý khi tải

Sử dụng thuộc tính loading để cho trình duyệt biết có nên trì hoãn việc tải hình ảnh cho đến khi hình ảnh đó nằm trong hoặc gần khung hiển thị hay không. Đối với những hình ảnh nằm dưới màn hình đầu tiên, hãy sử dụng giá trị lazy. Trình duyệt sẽ không tải hình ảnh tải từng phần cho đến khi người dùng cuộn xuống đủ xa để hình ảnh sắp xuất hiện. Nếu người dùng không bao giờ di chuyển, hình ảnh sẽ không bao giờ tải.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

Đối với hình ảnh chính trong màn hình đầu tiên, đừng sử dụng loading. Nếu trang web của bạn tự động áp dụng thuộc tính loading="lazy", bạn thường có thể đặt loading thành giá trị mặc định là eager để ngăn hình ảnh được tải từng phần:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Mức độ ưu tiên tìm nạp

Đối với những hình ảnh quan trọng (chẳng hạn như hình ảnh LCP), bạn có thể ưu tiên thêm việc tải bằng cách sử dụng Mức độ ưu tiên tìm nạp bằng cách đặt thuộc tính fetchpriority thành high:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

Thao tác này yêu cầu trình duyệt tìm nạp hình ảnh ngay lập tức và ở mức độ ưu tiên cao, thay vì đợi cho đến khi trình duyệt hoàn tất bố cục và sẽ tìm nạp hình ảnh như bình thường.

Tuy nhiên, khi bạn yêu cầu trình duyệt ưu tiên tải một tài nguyên xuống (chẳng hạn như hình ảnh), trình duyệt phải giảm mức độ ưu tiên của một tài nguyên khác (chẳng hạn như tập lệnh hoặc tệp phông chữ). Chỉ đặt fetchpriority="high" trên hình ảnh nếu thực sự cần thiết.

Gợi ý về việc tải trước

Tốt nhất là bạn nên tránh tải trước bất cứ khi nào có thể bằng cách đưa tất cả hình ảnh vào tệp HTML ban đầu. Tuy nhiên, một số hình ảnh có thể không có sẵn, chẳng hạn như hình ảnh do JavaScript hoặc hình nền CSS thêm vào.

Bạn có thể sử dụng tính năng tải trước để yêu cầu trình duyệt tìm nạp những hình ảnh quan trọng này trước thời gian. Đối với những hình ảnh thực sự quan trọng, bạn có thể kết hợp việc tải trước này với thuộc tính fetchpriority:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Một lần nữa, hãy sử dụng các thuộc tính này một cách tiết kiệm để tránh ghi đè quá thường xuyên các phương pháp phỏng đoán ưu tiên của trình duyệt. Việc sử dụng quá nhiều có thể làm giảm hiệu suất.

Một số trình duyệt hỗ trợ tải trước hình ảnh thích ứng dựa trên srcset, bằng cách sử dụng các thuộc tính imagesrcset và imagesizes. Ví dụ:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

Bằng cách loại trừ phương án dự phòng href, bạn có thể đảm bảo rằng những trình duyệt không hỗ trợ srcset vẫn tải trước hình ảnh chính xác.

Bạn không thể tải trước hình ảnh ở nhiều định dạng dựa trên khả năng hỗ trợ của trình duyệt đối với một số định dạng nhất định. Việc cố gắng thực hiện điều này có thể dẫn đến việc tải xuống thêm, gây lãng phí dữ liệu của người dùng.

Hình ảnh thích ứng có srcset

Nhờ khai báo max-inline-size: 100% đó, hình ảnh của bạn sẽ không thể thoát ra khỏi vùng chứa. Tuy nhiên, nếu người dùng có màn hình nhỏ và mạng có băng thông thấp, thì việc khiến họ tải xuống hình ảnh có cùng kích thước với người dùng có màn hình lớn hơn sẽ lãng phí dữ liệu.

Để khắc phục vấn đề này, hãy thêm nhiều phiên bản của cùng một hình ảnh ở các kích thước khác nhau và sử dụng thuộc tính srcset để cho trình duyệt biết những kích thước này tồn tại và thời điểm sử dụng chúng.

Nội dung mô tả chiều rộng

Bạn có thể xác định srcset bằng danh sách các giá trị được phân tách bằng dấu phẩy. Mỗi giá trị là URL của một hình ảnh, theo sau là một khoảng trắng, theo sau là một số siêu dữ liệu về hình ảnh, được gọi là nội dung mô tả.

Trong ví dụ này, siêu dữ liệu mô tả chiều rộng của từng hình ảnh bằng đơn vị w. Một w là chiều rộng của một pixel.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

Thuộc tính srcset bổ sung cho thuộc tính src thay vì thay thế thuộc tính này. Bạn vẫn cần phải có thuộc tính src hợp lệ, nhưng trình duyệt có thể thay thế giá trị của thuộc tính này bằng một trong các lựa chọn được liệt kê trong srcset. Để tiết kiệm băng thông, trình duyệt chỉ tải hình ảnh lớn hơn xuống nếu cần.

Kích thước

Nếu đang sử dụng bộ mô tả chiều rộng, bạn cũng phải sử dụng thuộc tính sizes để cung cấp thêm thông tin cho trình duyệt. Điều này cho trình duyệt biết kích thước mà bạn muốn hình ảnh hiển thị trong các điều kiện khác nhau. Những điều kiện đó được chỉ định trong một truy vấn phương tiện.

Thuộc tính sizes lấy danh sách truy vấn nội dung nghe nhìn và chiều rộng hình ảnh được phân tách bằng dấu phẩy.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

Trong ví dụ này, bạn đang cho trình duyệt biết rằng trong một khung hiển thị có chiều rộng lớn hơn 66em, trình duyệt sẽ hiển thị hình ảnh không rộng hơn một phần ba màn hình (ví dụ: trong bố cục gồm 3 cột).

Đối với chiều rộng khung hiển thị từ 44em đến 66em, hãy hiển thị hình ảnh ở một nửa chiều rộng màn hình (như trong bố cục hai cột).

Đối với mọi thứ có chiều rộng nhỏ hơn 44em, hãy hiển thị hình ảnh ở chiều rộng tối đa của màn hình.

Điều này có nghĩa là hình ảnh lớn nhất không nhất thiết được dùng cho màn hình rộng nhất. Cửa sổ trình duyệt có kích thước lớn có thể hiển thị bố cục nhiều cột sẽ sử dụng một hình ảnh vừa với một cột. Hình ảnh này có thể nhỏ hơn hình ảnh được dùng cho bố cục một cột trên màn hình hẹp hơn.

Mô tả mật độ pixel

Bạn cũng có thể sử dụng các giá trị mô tả để cung cấp phiên bản thay thế của hình ảnh để hiển thị trên màn hình có mật độ cao, nhằm giữ cho hình ảnh trông sắc nét ở độ phân giải cao hơn mà màn hình cung cấp.

Sử dụng bộ mô tả mật độ để mô tả mật độ điểm ảnh của hình ảnh so với hình ảnh trong thuộc tính src. Trình mô tả mật độ là một số theo sau là chữ x, chẳng hạn như 1x hoặc 2x.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

Nếu small-image.png có kích thước 300x200 pixel và medium-image.png có kích thước 600x400 pixel, thì medium-image.png có thể có 2x sau nó trong danh sách srcset.

Bạn không bắt buộc phải sử dụng số nguyên. Nếu một phiên bản khác của hình ảnh có kích thước 450 x 300 pixel, bạn có thể mô tả phiên bản đó bằng 1.5x.

Hình ảnh trình bày

Hình ảnh trong HTML là nội dung. Đó là lý do bạn thêm thuộc tính alt kèm theo nội dung mô tả hình ảnh cho trình đọc màn hình và công cụ tìm kiếm.

Nếu nhúng một hình ảnh mang tính trang trí mà không có nội dung nào có ý nghĩa, bạn có thể sử dụng thuộc tính alt trống.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

Bạn phải luôn thêm thuộc tính alt, ngay cả khi thuộc tính này trống. Thuộc tính alt trống cho trình đọc màn hình biết rằng hình ảnh đó mang tính trình bày. Thuộc tính alt bị thiếu sẽ không cung cấp thông tin đó.

Lý tưởng nhất là bạn nên đưa hình ảnh trình bày hoặc trang trí vào CSS thay vì HTML. HTML dùng để tạo cấu trúc. CSS dùng để trình bày.

Hình nền

Dùng thuộc tính background-image trong CSS để tải hình ảnh trình bày.

element {
  background-image: url(flourish.png);
}

Bạn có thể chỉ định nhiều đề xuất hình ảnh bằng cách sử dụng hàm image-set cho background-image.

Hàm image-set trong CSS hoạt động tương tự như thuộc tính srcset trong HTML. Cung cấp danh sách hình ảnh có nội dung mô tả mật độ điểm ảnh cho từng hình ảnh.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

Trình duyệt sẽ chọn hình ảnh phù hợp nhất với mật độ pixel của thiết bị.

Có nhiều yếu tố cần cân nhắc khi bạn thêm hình ảnh vào trang web của mình, bao gồm:

• Dành không gian phù hợp cho từng hình ảnh.
• Xác định số lượng kích thước bạn cần.
• Quyết định xem hình ảnh đó là nội dung hay chỉ mang tính trang trí.

Bạn nên dành thời gian để điều chỉnh hình ảnh cho phù hợp. Chiến lược hình ảnh kém hiệu quả có thể gây khó chịu và bực bội cho người dùng. Một chiến lược hình ảnh hiệu quả sẽ giúp trang web của bạn có cảm giác nhanh nhạy và sắc nét, bất kể thiết bị hoặc kết nối mạng của người dùng.

Có thêm một phần tử HTML trong bộ công cụ của bạn để giúp bạn kiểm soát hình ảnh nhiều hơn: phần tử picture.

Kiểm tra kiến thức của bạn

Kiểm tra kiến thức của bạn về hình ảnh.