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śćwinformuje 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.
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.