1. Định nghĩa và cách sử dụng

Thẻ <picture> giúp các nhà phát triển web linh hoạt hơn trong việc chỉ định tài nguyên hình ảnh

Việc sử dụng phổ biến nhất của thẻ <picture> sẽ dành cho hướng nghệ thuật trong các thiết kế đáp ứng. Thay vì có một hình ảnh được tăng hoặc giảm tỷ lệ dựa trên chiều rộng khung nhìn, nhiều hình ảnh có thể được thiết kế để lấp đầy khung nhìn của trình duyệt một cách độc đáo hơn

Thẻ <picture> chứa hai thẻ: một hoặc nhiều thẻ <source> và một thẻ <img>.

Trình duyệt sẽ tìm kiếm thẻ <source> đầu tiên nơi truy vấn phương tiện phù hợp với chiều rộng khung nhìn hiện tại, sau đó nó sẽ hiển thị hình ảnh thích hợp (được chỉ định trong thuộc tính srcset). Thẻ <img> được yêu cầu làm phần tử con cuối cùng của thẻ <picture>, như một tùy chọn dự phòng nếu không có thẻ nguồn nào phù hợp.

Mẹo: Thẻ <picture> hoạt động “tương tự” với <video> và <audio>. Bạn thiết lập các nguồn khác nhau và nguồn đầu tiên phù hợp với sở thích là nguồn đang được sử dụng

2. Ví dụ về <picture>

3. Các  trình duyệt hỗ trợ

Phần tử
<picture>	38.0	13.0	38.0	9.1	25.0