picture tag trong HTML

Trong bài viết này chúng ta cùng xem thẻ picture trong HTML làm được những gì nhé ^^.

Thẻ picture trong HTML

Thẻ <picture> chứa các thẻ <source> và thẻ <img>, <picture> chứa danh sách các hình ảnh dự phòng với định dạng khác nhau theo thứ tự. Để tối ưu tốc độ cho trang web, chúng ta có thể chọn định dạng hình ảnh phù hợp, hiện tại thì mình đang sử dụng định dạng WebP cho các hình trên trang web.

Tuy nhiên có một vấn đề là với việc sử dụng định dạng WebP, nhiều trình duyệt vẫn chưa hỗ trợ định dạng này. Nếu người dùng sử dụng trình duyệt chưa hỗ trợ WebP, ta có thể sử dụng thẻ picture để tạo danh sách các định dạng hình ảnh dự phòng khi cần thiết 👍. Đây chính là nhiệm vụ của thẻ picture.

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="homiedev.com">
</picture>

Trình duyệt sẽ xem xét từng phần tử trong <picture> và chọn phần tử phù hợp nhất theo thứ tự từ trên xuống. Nếu trình duyệt hỗ trợ WebP nó sẽ sử dụng hình ảnh có định dạng này, nếu không nó sẽ sử dụng hình có định dạng jpg.

Với các màn hình có kích thước nhỏ chúng ta có thể sử dụng <picture> để load hình có kích thước phù hợp nhằm giúp trang load nhanh hơn.

Các bạn có thể thêm vào <picture> các hình ảnh khác nhau hay thay đổi chất lượng hình ảnh, để phù hợp cho kích thước của từng màn hình.

Ví dụ:

<picture>
  <source media="(min-width: 500px)" srcset="image-500.png">
  <source media="(min-width: 800px)" srcset="image-800.png">
  <source media="(min-width: 1000px)" srcset="image-1000.png">
  <img src="image.png" alt="image">
</picture>