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 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 cần có phần tử picture.

Tương tự như cách srcset xây dựng dựa trên thuộc tính src, phần tử picture được xây dựng dựa trên phần tử img. Phần tử picture bao quanh một 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.

Tương tự 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, thì phần tử picture sẽ đưa ra lệnh. Việc này cho bạn quyề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 hành động đầu tiên có thể.

Định dạng hình ảnh

Trong ví dụ này, có ba hình ảnh khác nhau ở 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" loading="lazy" decoding="async">
</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ó khả năng kết xuất hình ảnh AVIF thì đó là tệp hình ảnh trình duyệt chọn. Nếu không, thao tác này 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 kết xuất 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 phải từ bỏ 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

Cũng như chuyển đổi giữa các định dạng hình ảnh, bạn 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ẽ được hiển thị. Đặt truy vấn đa phương tiệ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" loading="lazy" decoding="async">
</picture>

Trong ví dụ này, bạn muốn trình duyệt biết rằng nếu chiều rộng khung nhìn rộng 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ó kích thước trung bình. Bên dưới 40em trình duyệt phải sử dụng hình ảnh nhỏ.

Việc 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 đề 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ể sử dụng mã mô tả mật độ pixel bên trong thuộc tính srcset của 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" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

Trong ví dụ đó, bạn vẫn cho trình duyệt biết việc cần làm tại các điểm ngắt khác nhau nhưng giờ đây trình duyệt đã có tuỳ chọn để chọn hình ảnh thích hợp nhất cho 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. Tuy nhiên, nếu kích thước nhỏ hơn thì hình ảnh trông không đẹp, thì bạn có thể thử tạo một phiên bản hình ảnh bị cắt.

Các hình ảnh khác nhau có thể có tỷ lệ chiều rộng và chiều cao khác nhau cho phù hợp với ngữ cảnh hơn. Ví dụ: trên trình duyệt dành cho thiết bị di động, bạn có thể phân phát một loại hình cắt có chiều ngang hẹp và chiều cao, trong khi trên trình duyệt dành cho máy tính, bạn có thể phân phát một loại hình cắt rộng và ngắn.

Sau đây là ví dụ về hình ảnh chính thay đổi nội dung và hình dạng dựa trên chiều rộng của khung nhìn. 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" loading="eager" decoding="sync">
</picture>

Hãy nhớ 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 phải viết một thuộc tính alt mô tả cả hình ảnh ở kích thước đầy đủ và hình ảnh đã bị cắt.

Có thể 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 có thể áp dụng cho nhiều trường hợp sử dụng. Tuy nhiên, trong những trường hợp 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à có thể bạn không cần đến bất kỳ giải pháp nào, đó là biểu tượng. Đó là những việc tiếp theo.

Kiểm tra kiến thức

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