Użyj atrybutu srcset, aby automatycznie wybrać odpowiedni rozmiar obrazu.
Według archiwum HTTP typowa mobilna strona internetowa waży ponad 2, 6 MB, a ponad dwie trzecie tej wagi stanowią obrazy. To znakomita okazja do optymalizacji!
Podsumowanie
- Nie zapisuj obrazów, które są większe niż ich rozmiar wyświetlany.
- Zapisz wiele rozmiarów dla każdego obrazu i użyj atrybutu
srcset
, aby przeglądarka mogła wybrać najmniejszy. Wartośćw
informuje przeglądarkę o szerokości poszczególnych wersji:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
Zapisuj obrazy w odpowiednim rozmiarze
Możesz przyspieszyć działanie witryny i ograniczyć ilość danych, korzystając z obrazów o wymiarach odpowiadających rozmiarowi wyświetlacza. Innymi słowy, przy zapisywaniu obrazów nadaj im odpowiednią szerokość i wysokość.
Spójrz na poniższe obrazy.
Wyglądają na prawie identyczne, ale rozmiar jednego z nich jest ponad 10 razy większy od drugiego.
![Małe kotki i Lias: dwadziesięciotygodniowe pręgowane kocięta.](https://web.developers.google.cn/static/articles/use-srcset-to-automatically-choose-the-right-image/image/little-puss-lias-ten-w-3c69ee66b6ca5.jpg?authuser=2&hl=pl)
![Małe kotki i Lias: dwadziesięciotygodniowe pręgowane kocięta.](https://web.developers.google.cn/static/articles/use-srcset-to-automatically-choose-the-right-image/image/little-puss-lias-ten-w-1dffb2ed3ac31.jpg?authuser=2&hl=pl)
Pierwszy obraz ma znacznie większy rozmiar, ponieważ zapisano go przy wymiarach znacznie większych niż rozmiar wyświetlanego obrazu. Oba obrazy mają stałą szerokość 300 pikseli, dlatego warto użyć obrazu zapisanego w tym samym rozmiarze.
W przypadku stałej szerokości używaj obrazów zapisanych o tych samych wymiarach co rozmiar wyświetlacza.
Ale co, jeśli rozmiar wyświetlacza się różni?
W świecie, w którym korzystamy z wielu urządzeń, obrazy nie zawsze mają jeden stały rozmiar.
Elementy graficzne mogą mieć szerokość procentową lub być częścią układów elastycznych, w których rozmiar wyświetlanego obrazu zmienia się w zależności od rozmiaru ekranu.
...a co z urządzeniami głodnymi pikselami, takimi jak ekrany Retina?
Pomóż przeglądarce wybrać odpowiedni rozmiar obrazu
Czy nie lepiej byłoby udostępnić każdy obraz w różnych rozmiarach, a potem pozwolić przeglądarce wybrać taki, który najlepiej pasuje do urządzenia i wyświetlacza? Podczas wybierania najlepszego obrazu występuje niestety catch-22. Przeglądarka powinna używać najmniejszego obrazu, ale nie może poznać jego szerokości, dopóki nie pobierzesz go w celu sprawdzenia.
W tym celu może Ci się przydać usługa srcset
. Obrazy zapisywane są w różnych rozmiarach, a potem informujesz przeglądarkę o szerokości poszczególnych wersji:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
Wartości w
wskazują szerokość każdego obrazu w pikselach. Na przykład small.jpg 500w
informuje przeglądarkę, że plik small.jpg ma szerokość 500 pikseli. Dzięki temu przeglądarka może wybrać najmniejszy obraz w zależności od typu ekranu i rozmiaru widocznego obszaru bez konieczności pobierania obrazów, by sprawdzić ich rozmiar.
Poniżej możesz zobaczyć, jak srcset
działa w praktyce. Jeśli używasz laptopa lub komputera, zmień rozmiar okna przeglądarki i otwórz tę stronę ponownie.
Następnie w panelu Network (Sieć) w przeglądarce sprawdź, który obraz został użyty.
Musisz to zrobić w oknie incognito lub prywatnym.
W przeciwnym razie oryginalny plik obrazu zostanie zapisany w pamięci podręcznej.
Jak utworzyć obrazy o różnych rozmiarach?
Dla każdego obrazu, którego chcesz użyć w polu srcset
, musisz udostępnić wiele rozmiarów.
W przypadku obrazów pojedynczych, takich jak baner powitalny, możesz ręcznie zapisać różne rozmiary. Jeśli masz dużo zdjęć, np. zdjęć produktów, musisz je zautomatyzować. Można to zrobić na 2 sposoby.
Włącz przetwarzanie obrazu w proces tworzenia
W trakcie kompilacji możesz dodawać kroki tworzące wersje obrazów o różnych rozmiarach. Więcej informacji znajdziesz w artykule „Korzystanie z programu Imagemin do kompresowania obrazów”.
Użyj usługi graficznej
Tworzenie i wyświetlanie obrazów można zautomatyzować za pomocą usługi komercyjnej, takiej jak Cloudinary, lub jej odpowiednika typu open source, np. Thumbor, który zainstalujesz i uruchomisz samodzielnie.
Gdy przesyłasz obrazy w wysokiej rozdzielczości, usługa obrazów automatycznie tworzy i dostarcza różne formaty i rozmiary w zależności od parametrów adresu URL. Na przykład otwórz ten przykładowy obraz w Cloudinary i spróbuj zmienić wartość w
lub rozszerzenie pliku na pasku adresu URL.
Usługi graficzne mają też bardziej zaawansowane funkcje, takie jak możliwość automatyzacji „inteligentnego przycinania” obrazów o różnych rozmiarach i automatycznego dostarczania obrazów WebP do przeglądarek, które obsługują ten format zamiast JPEG – bez zmiany rozszerzenia pliku.
Co zrobić, jeśli obraz nie wygląda dobrze w różnych rozmiarach?
W takim przypadku musisz w przypadku „kierunku sztuki” użyć elementu <picture>
, by zapewnić różne przycięcia obrazu lub przycięcia obrazu w różnych rozmiarach. Aby dowiedzieć się więcej, zapoznaj się z ćwiczeniami z programowania "Art Kierunek sztuki".
A co z gęstością pikseli?
Zaawansowane urządzenia mają mniejsze (bardziej gęste) piksele. Na przykład tańsze telefony mogą mieć dwa lub trzy razy więcej pikseli w każdym wierszu pikseli niż tańsze telefony.
To może mieć wpływ na rozmiar zdjęć. Nie będziemy tu zagłębiać się w drastyczne szczegóły, ale możesz dowiedzieć się więcej z ćwiczenia z programowania „Używaj deskryptorów gęstości”.
Jaki jest rozmiar wyświetlanego obrazu?
Dzięki sizes
możesz jeszcze bardziej usprawnić działanie usługi srcset
.
Bez niego przeglądarka używa pełnej szerokości widocznego obszaru podczas wybierania obrazu z komponentu srcset
. Atrybut sizes
informuje przeglądarkę o szerokości wyświetlanego elementu graficznego, dzięki czemu może ona wybrać najmniejszy możliwy plik, zanim wykona jakiekolwiek obliczenia układu.
W przykładzie poniżej sizes="50vw"
informuje przeglądarkę, że ten obraz będzie wyświetlany na 50% szerokości widocznego obszaru.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
Możesz się o tym przekonać na stronie simpl.info/sizes i na szkoleniu z programowania „Określanie wielu szerokości przedziałów”.
A co z obsługą przeglądarek?
Przeglądarki srcset
i sizes
są obsługiwane przez ponad 90% przeglądarek na całym świecie.
Jeśli przeglądarka nie obsługuje atrybutów srcset
ani sizes
, zostanie użyta tylko wartość atrybutu src
.
W ten sposób srcset
i sizes
są świetne do progresywnego ulepszania.
Więcej informacji
Zajrzyj do sekcji „Optymalizuj obrazy” na stronie web.dev, by dowiedzieć się więcej o optymalizacji obrazów. Jeśli chcesz skorzystać z przewodnika, możesz wziąć udział w bezpłatnym kursie o „obrazach elastycznych” oferowanym przez Udacity.