Thẻ picture trong HTML
Bùi Tấn Lực - 955
- 29/09/2025
Chức năng của Thẻ picture trong HTML
Thẻ picture trong HTML dùng để sử dụng nhiều hình ảnh khác nhau ở các khoảng chiều rộng của trình duyệt khác nhau, thẻ bao gồm thẻ img và các thẻ source.
Code Thẻ picture trong HTML
<p>Kéo trình duyệt nhỏ lại để xem hình ảnh thay đổi, chổ min-width bạn thay đổi khi làm thực tế</p>
<picture>
<!--Từ 650px trở lên sử dụng hình này-->
<source media="(min-width:650px)" srcset="https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg">
<!--Từ 465px đến dưới 650px trở lên sử dụng hình này-->
<source media="(min-width:465px)" srcset="https://webmoi.vn/thumuc/sach-lam-chu-van-menh-cua-ban.jpg">
<!--Dưới 465px sử dụng hình này-->
<img src="https://webmoi.vn/upload/tinblog/the-picture-trong-html.jpg" alt="Thẻ picture trong HTML" style="width:100%;height:auto">
</picture>
Khi nào nên sử dụng thẻ picture trong HTML?
Thẻ picture phù hợp trong những tình huống cần kiểm soát cách hình ảnh được hiển thị trên nhiều thiết bị hoặc trình duyệt khác nhau. Thay vì chỉ tải một tệp ảnh cố định, phần tử này cho phép trình duyệt tự lựa chọn phiên bản phù hợp dựa trên điều kiện được khai báo, từ đó cải thiện trải nghiệm người dùng và tối ưu hiệu suất tải trang.
Sử dụng khi cần hiển thị hình ảnh theo kích thước màn hình
Đây là trường hợp phổ biến nhất khi sử dụng picture. Bạn có thể chuẩn bị nhiều phiên bản của cùng một hình ảnh với kích thước hoặc bố cục khác nhau để phù hợp với điện thoại, máy tính bảng và máy tính.
- Giảm dung lượng ảnh trên thiết bị có màn hình nhỏ.
- Hiển thị đúng tỷ lệ và bố cục trên từng loại màn hình.
- Hạn chế việc tải ảnh có độ phân giải lớn không cần thiết.
- Nâng cao tốc độ tải trang và trải nghiệm người dùng.
Sử dụng để hỗ trợ nhiều định dạng ảnh hiện đại
Nếu website muốn tận dụng các định dạng ảnh mới như WebP hoặc AVIF nhưng vẫn đảm bảo khả năng tương thích với trình duyệt cũ, picture là giải pháp phù hợp. Trình duyệt sẽ tự ưu tiên định dạng được hỗ trợ trước khi sử dụng ảnh dự phòng.
- Tiết kiệm băng thông nhờ ảnh có dung lượng nhỏ hơn.
- Duy trì khả năng hiển thị trên nhiều trình duyệt.
- Không cần thay đổi nội dung hoặc giao diện của trang web.
Những trường hợp không nên dùng thẻ picture
Không phải mọi hình ảnh đều cần đặt trong picture. Với các ảnh thông thường không yêu cầu thay đổi theo thiết bị hoặc định dạng, việc sử dụng thẻ img sẽ đơn giản và dễ bảo trì hơn.
- Ảnh chỉ có một phiên bản duy nhất.
- Không cần thay đổi theo kích thước màn hình.
- Không có nhu cầu cung cấp nhiều định dạng ảnh.
- Website ưu tiên cấu trúc HTML đơn giản và dễ quản lý.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ picture trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
