HTML Picture
HTML Picture là một phần tử trong HTML, nó cho phép bạn hiển thị các hình ảnh khác nhau trên các thiết bị khác nhau hoặc kích thước màn hình khác nhau.
Thẻ <picture> được dùng cho trường hợp bạn muốn hiển thị các ảnh khác nhau cho các giao diện màn hình khác nhau hoặc trên các thiết bị khác nhau.Ví dụ như một banner trên trang web nếu ở màn hình máy tính nó sẽ hiện là ảnh về thời trang với kích thước phù hợp với kích thước của màn hình máy tính, nhưng nếu ở màn hình điện thoại nó sẽ hiện ảnh khác về đồ ăn và kích thước ảnh này vừa với màn hình của điện thoại.Nó có nghĩa là cùng một banner nhưng nó có thể hiện nhiều loại ảnh khác nhau ở các thiết bị khác nhau.
Cách sử dụng HTML Picture
Thông thường HTML Picture được dùng với 2 mục đích sau:
- Thứ nhất là sử dụng <picture> để cho hình ảnh phù hợp đúng dung lượng và băng thông của ảnh.
Sử dụng phần tử <source> trong phần tử <picture> để load hiển thị ảnh phù hợp với từng kích thước màn hình to nhỏ nhằm tiết kiệm dung lượng và băng thông.
- Thứ 2 là sử dụng để hỗ trợ hiển thị các định dạng ảnh.
Một số trình duyệt hoặc thiết bị không hỗ trợ được tất cả các định dạng hình ảnh, với việc sử dụng phần tử <picture> bạn có thể tùy chỉnh để hiển thị tất cả các định dạng ảnh trong các trình duyệt.
Ví dụ sử dụng phần tử <picture> để hiển thị ảnh như sau:
Ví dụ
<html>
<head>
<title> HTML Picture Elements </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2> Cách tạo HTML Pricture </h2>
</body>
</html>
Bạn thay đổi kích thước trình duyệt để xem các ảnh khác nhau ở các kích thước khung nhìn khác nhau.