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 phù hợp cần 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 bọc quanh một phần tử img.
<picture>
<img src="image.jpg" alt="A description of the image.">
</picture>
Nếu phần tử img không được lồng 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à khi thuộc tính srcset đưa ra đề xuất cho trình duyệt, còn 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 trong một phần tử picture, trong đó mỗi phần tử có thuộc tính srcset riêng. Sau đó, trình duyệt sẽ thực thi lệnh đầu tiên mà nó có thể.
Định dạng hình ảnh
Trong ví dụ này, có ba hình ảnh khác nhau ở ba đị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ó 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, 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. Ảnh đó là định dạng 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 hy sinh 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 nào đượ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. Dùng thuộc tính media để cho trình duyệt biết chiều rộng hiển thị của hình ảnh. Đặt mộ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>
Ở đây, bạn thông báo cho 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. 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ỏ.
Điều này khác với việc sử dụng thuộc tính srcset và sizes trên phần tử img. Trong trường hợp đó, bạn cung cấp đề xuất cho trình duyệt. Phần tử source giống với một lệnh hơn là một đề xuất.
Bạn cũng có thể sử dụng chỉ số 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 cần làm gì 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 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. Tuy nhiên, nếu hình ảnh không đẹp mắt ở kích thước nhỏ hơn, 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 để phù hợp hơn với bối cảnh. Ví dụ: trên trình duyệt dành cho thiết bị di động, bạn có thể muốn phân phát ảnh cắt rộng và ngắn.
Dưới đây là ví dụ về hình ảnh chính thay đổi nội dung và hình dạng của nó dựa trên chiều rộng khung nhìn. Thêm thuộc tính width và height vào từng 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 viế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ó thể bạn sẽ không cần phải 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 trong phần tử img có thể được sử dụng trong nhiều trường hợp. Tuy nhiên, 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à có thể bạn không cần cả hai giải pháp, đó là biểu tượng. Đó là những việc cần làm tiếp theo.
Kiểm tra kiến thức
Kiểm tra kiến thức về phần tử hình ảnh
Trong đó thuộc tính srcset cung cấp ________ cho trình duyệt, còn phần tử <picture> cung cấp ________.
Phần tử <picture> có một số chức năng như sau:
avif hoặc webp nếu có thể.