Phần tử hình ảnh

Mô-đun trước đã minh hoạ cách thuộc tính srcset cho phép bạn cung cấp các phiên bản có kích thước khác nhau của cùng một hình ảnh. Sau đó, trình duyệt có thể quyết định phiên bản nào phù hợp để sử dụng. Nếu muốn thay đổi hoàn toàn hình ảnh, bạn sẽ cần đến phần tử picture.

Tương tự như cách srcset dựa trên thuộc tính src, phần tử picture cũng dựa trên phần tử img. Phần tử picture bao quanh phần tử img.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

Nếu không có phần tử img nào được lồng bên trong phần tử picture, thì phần tử picture sẽ không hoạt động.

Giống như thuộc tính srcset, phần tử picture sẽ cập nhật giá trị của thuộc tính src trong phần tử img đó. Điểm khác biệt là thuộc tính srcset đưa ra đề xuất cho trình duyệt, còn phần tử picture đưa ra các lệnh. Điều này giúp bạn kiểm soát.

source

Bạn có thể chỉ định nhiều phần tử source bên trong một phần tử picture, mỗi phần tử có thuộc tính srcset riêng. Sau đó, trình duyệt sẽ thực thi yêu cầu đầu tiên mà trình duyệt có thể thực hiện.

Định dạng hình ảnh

Trong ví dụ này, có 3 hình ảnh ở 3 định dạng khác nhau:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image."
    width="300" height="200">
</picture>

Phần tử source đầu tiên trỏ đến một hình ảnh ở định dạng AVIF mới. Nếu trình duyệt có thể hiển thị hình ảnh AVIF, thì đó là tệp hình ảnh mà trình duyệt chọn. Nếu không, nó sẽ chuyển sang phần tử source tiếp theo.

Phần tử source thứ hai trỏ đến một hình ảnh ở định dạng WebP. Nếu có khả năng hiển thị hình ảnh WebP, trình duyệt sẽ sử dụng tệp hình ảnh đó.

Nếu không, trình duyệt sẽ quay lại tệp hình ảnh trong thuộc tính src của phần tử img. Hình ảnh đó là một tệp JPEG.

Điều này có nghĩa là bạn có thể bắt đầu sử dụng các định dạng hình ảnh mới mà không ảnh hưởng đến khả năng tương thích ngược.

Trong ví dụ đó, thuộc tính type cho trình duyệt biết loại định dạng hình ảnh được chỉ định.

Kích thước hình ảnh

Ngoài việc chuyển đổi giữa các định dạng hình ảnh, bạn cũng có thể chuyển đổi giữa các kích thước hình ảnh. Sử dụng thuộc tính media để cho trình duyệt biết chiều rộng của hình ảnh sẽ hiển thị. Đặt một truy vấn về nội dung nghe nhìn bên trong thuộc tính media.

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image."
    width="300" height="200">
</picture>

Ở đây, bạn đang cho trình duyệt biết rằng nếu chiều rộng khung hiển thị lớn hơn 75em, thì trình duyệt phải sử dụng hình ảnh lớn. Trong khoảng từ 40em đến 75em, trình duyệt phải sử dụng hình ảnh cỡ trung. Bên dưới 40em, trình duyệt phải sử dụng hình ảnh nhỏ.

Điều này khác với việc sử dụng các thuộc tính srcset và sizes trên phần tử img. Trong trường hợp đó, bạn đang cung cấp các đề xuất cho trình duyệt. Phần tử source giống một lệnh hơn là một đề xuất.

Bạn cũng có thể dùng bộ mô tả mật độ điểm ảnh bên trong thuộc tính srcset của một phần tử source.

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

Trong ví dụ đó, bạn vẫn đang cho trình duyệt biết phải làm gì ở các điểm ngắt khác nhau, nhưng giờ đây, trình duyệt có thể chọn hình ảnh phù hợp nhất với mật độ pixel của thiết bị.

Cắt

Nếu bạn chỉ cần phân phát các phiên bản có kích thước khác nhau của cùng một hình ảnh, thì srcset là lựa chọn tốt nhất. Nhưng nếu một hình ảnh trông không đẹp ở kích thước nhỏ hơn, bạn có thể thử tạo một phiên bản cắt của hình ảnh đó.

Các hình ảnh có thể có tỷ lệ chiều rộng và chiều cao khác nhau để phù hợp hơn với bối cảnh của chúng. Ví dụ: trên trình duyệt di động, bạn có thể muốn phân phát một phần cắt hẹp và cao, trong khi trên trình duyệt máy tính, bạn có thể muốn phân phát một phần cắt rộng và ngắn.

Sau đây là ví dụ về một hình ảnh chính thay đổi nội dung và hình dạng dựa trên chiều rộng khung hiển thị. Thêm thuộc tính width và height vào mỗi phần tử source.

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" fetchpriority="high">
</picture>

Xin lưu ý rằng bạn không thể thay đổi thuộc tính alt tuỳ thuộc vào nguồn hình ảnh. Bạn cần viết một thuộc tính alt mô tả cả hình ảnh có kích thước đầy đủ và hình ảnh bị cắt.

Có lẽ bạn sẽ không cần sử dụng phần tử picture cho hầu hết hình ảnh thích ứng của mình – các thuộc tính srcset và sizes trên phần tử img bao gồm nhiều trường hợp sử dụng. Nhưng trong những trường hợp bạn cần kiểm soát chi tiết hơn, phần tử picture là một công cụ mạnh mẽ.

Có một loại hình ảnh mà bạn có thể không cần dùng đến cả hai giải pháp này: biểu tượng. Đó là bước tiếp theo.

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

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