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
Trong trường hợp thuộc tính srcset
cung cấp ________ cho trình duyệt, phần tử <picture>
cung cấp ________.
Phần tử <picture>
có một số chức năng như sau: