<picture>Tag HTML5 pomoże ci znaleźć właściwe źródło obrazu w zależności od szerokości ekranu
Najwyraźniej zachowanie przeglądarek niewiele się zmieniło w ciągu ostatnich 5 lat i wielu nadal pobierałoby ukryte obrazy, nawet gdyby była display: nonena nich ustawiona właściwość.
Mimo że istnieje obejście zapytań o media , może to być przydatne tylko wtedy, gdy obraz został ustawiony jako tło w CSS.
Podczas gdy myślałem, że istnieje tylko rozwiązanie JS problemu ( leniwe ładowanie , wypełnianie obrazów itp.), Okazało się , że istnieje ładne, czyste rozwiązanie HTML, które wychodzi z pudełka z HTML5.
I to jest <picture>tag.
Oto jak MDN to opisuje:
Element HTML<picture> to kontener służący do określania wielu <source>elementów dla określonego <img>w nim zawartego elementu . Przeglądarka wybierze najbardziej odpowiednie źródło zgodnie z bieżącym układem strony (ograniczenia pola, w którym pojawi się obraz) oraz urządzenie, na którym będzie wyświetlane (np. Urządzenie normalne lub hiDPI).
A oto jak go użyć:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
Logika z tyłu
Przeglądarka załaduje źródło imgtagu, tylko jeśli żadna z reguł multimediów nie ma zastosowania. Gdy <picture>element nie jest obsługiwany przez przeglądarkę, ponownie przejdzie do wyświetlania imgtagu.
Zwykle umieszczasz najmniejszy obraz jako źródło, <img>a tym samym nie ładujesz ciężkich obrazów na większe ekrany. Odwrotnie, jeśli obowiązuje reguła medialna, źródło <img>nie zostanie pobrane, zamiast tego pobierze zawartość adresu URL odpowiedniego <source>tagu.
Jedyną pułapką jest to, że jeśli element nie jest obsługiwany przez przeglądarkę, załaduje tylko mały obraz. Z drugiej strony w 2017 r. Powinniśmy pomyśleć i kodować w pierwszym podejściu mobilnym .
I zanim ktoś zostanie zbyt podekscytowany, oto bieżąca obsługa przeglądarki dla <picture>:
Przeglądarki stacjonarne
Przeglądarki mobilne
Więcej informacji na temat obsługi przeglądarki można znaleźć w części Czy mogę używać .
Dobrą rzeczą jest to, że zdaniem html5please jest użycie go z rezerwą . I ja osobiście zamierzam skorzystać z ich rad.
Więcej informacji o znaczniku można znaleźć w specyfikacji W3C . Jest tam zastrzeżenie, które uważam za ważne:
pictureElementem jest nieco różni się od podobnych wyglądające videoi audioelementów. Chociaż wszystkie zawierają sourceelementy, srcatrybut elementu źródłowego nie ma znaczenia, gdy element jest zagnieżdżony w pictureelemencie, a algorytm wyboru zasobów jest inny. Również picturesam element niczego nie wyświetla; zapewnia jedynie kontekst dla zawartego imgelementu, który pozwala mu wybierać spośród wielu adresów URL.
Mówi więc, że pomaga tylko poprawić wydajność podczas ładowania obrazu, zapewniając mu pewien kontekst.
Nadal możesz użyć magii CSS, aby ukryć obraz na małych urządzeniach:
<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>
W ten sposób przeglądarka nie wyświetli rzeczywistego obrazu i pobierze tylko 1x1obraz pikselowy (który można buforować, jeśli użyjesz go więcej niż jeden raz). Należy jednak pamiętać, że jeśli <picture>znacznik nie jest obsługiwany przez przeglądarkę, nawet na ekranach pulpitu rzeczywisty obraz nie będzie wyświetlany (więc na pewno będziesz potrzebować kopii zapasowej wypełniania wielu pól).
