HTML5 <picture>Thẻ sẽ giúp bạn giải quyết nguồn hình ảnh phù hợp tùy thuộc vào độ rộng màn hình
Rõ ràng hành vi của trình duyệt đã không thay đổi nhiều trong 5 năm qua và nhiều người vẫn sẽ tải xuống các hình ảnh ẩn, ngay cả khi có một thuộc display: nonetính được đặt trên chúng.
Mặc dù có một cách giải quyết truy vấn phương tiện , nó chỉ có thể hữu ích khi hình ảnh được đặt làm nền trong CSS.
Trong khi tôi đang nghĩ rằng chỉ có một giải pháp JS cho vấn đề ( tải chậm , tải hình ảnh , v.v.), thì có vẻ như có một giải pháp HTML thuần túy tuyệt vời đi kèm với HTML5.
Và đó là <picture>thẻ.
Dưới đây là cách MDN mô tả nó:
Phần tử HTML<picture> là một thùng chứa được sử dụng để chỉ định nhiều <source>phần tử cho một phần cụ thể <img>có trong nó. Trình duyệt sẽ chọn nguồn phù hợp nhất theo bố cục hiện tại của trang (các ràng buộc của hộp hình ảnh sẽ xuất hiện) và thiết bị sẽ được hiển thị trên (ví dụ: thiết bị bình thường hoặc hiDPI.)
Và đây là cách sử dụng nó:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
Logic đằng sau
Trình duyệt sẽ tải nguồn của imgthẻ, chỉ khi không áp dụng quy tắc truyền thông nào. Khi <picture>phần tử không được trình duyệt hỗ trợ, nó sẽ lại dự phòng hiển thị imgthẻ.
Thông thường, bạn sẽ đặt hình ảnh nhỏ nhất làm nguồn của <img>và do đó không tải hình ảnh nặng cho màn hình lớn hơn. Ngược lại, nếu áp dụng quy tắc truyền thông, nguồn của <img>sẽ không được tải xuống, thay vào đó, nó sẽ tải xuống nội dung của url của <source>thẻ tương ứng .
Điều đáng tiếc ở đây là nếu phần tử không được trình duyệt hỗ trợ, nó sẽ chỉ tải hình ảnh nhỏ. Mặt khác vào năm 2017, chúng ta nên suy nghĩ và viết mã theo cách tiếp cận di động đầu tiên .
Và trước khi ai đó quá thoát, đây là hỗ trợ trình duyệt hiện tại cho <picture>:
Trình duyệt máy tính để bàn
Trình duyệt di động
Tìm hiểu thêm về hỗ trợ trình duyệt bạn có thể tìm thấy trên Tôi có thể sử dụng không .
Điều tốt là câu của html5please là sử dụng nó với một dự phòng . Và cá nhân tôi có ý định đưa lời khuyên của họ.
Thông tin thêm về thẻ bạn có thể tìm thấy trong thông số kỹ thuật của W3C . Có một sự từ chối ở đó, mà tôi thấy quan trọng cần đề cập:
Các pictureyếu tố có phần khác biệt so với tương tự tìm videovà audioyếu tố. Mặc dù tất cả chúng đều chứa sourcecác phần tử, srcthuộc tính của phần tử nguồn không có ý nghĩa khi phần tử được lồng trong một picturephần tử và thuật toán chọn tài nguyên là khác nhau. Đồng thời, picturephần tử này không hiển thị bất cứ thứ gì; nó chỉ cung cấp một bối cảnh cho thành imgphần có trong nó cho phép nó chọn từ nhiều URL.
Vì vậy, những gì nó nói là nó chỉ giúp bạn cải thiện hiệu suất khi tải một hình ảnh, bằng cách cung cấp một số bối cảnh cho nó.
Và bạn vẫn có thể sử dụng một số phép thuật CSS để ẩn hình ảnh trên các thiết bị nhỏ:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
Do đó, trình duyệt sẽ không hiển thị hình ảnh thực tế và sẽ chỉ tải xuống 1x1hình ảnh pixel (có thể được lưu trong bộ nhớ cache nếu bạn sử dụng nó nhiều lần). Tuy nhiên, hãy lưu ý rằng nếu <picture>thẻ không được trình duyệt hỗ trợ, ngay cả trên màn hình descktop, hình ảnh thực tế sẽ không được hiển thị (vì vậy bạn chắc chắn sẽ cần một bản sao lưu polyfill ở đó).
