Najważniejsze wskazówki dotyczące wydajności witryny

Użyj srcset, aby automatycznie wybrać odpowiedni rozmiar obrazu.

Sam Dutton

Według HTTP Archive typowa strona internetowa na urządzeniu mobilnym waży ponad 2, 6 MB, a ponad dwie trzecie tej wagi to obrazy. To świetna okazja do optymalizacji.

Podsumowanie

• Nie zapisuj obrazów większych niż rozmiar, w jakim są wyświetlane.
• Zapisz każdy obraz w kilku rozmiarach i użyj atrybutu srcset , aby umożliwić przeglądarce wybór najmniejszego rozmiaru. Wartość w informuje przeglądarkę o szerokości każdej wersji:

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

Zapisywanie obrazów o odpowiednim rozmiarze

Możesz przyspieszyć działanie witryny i zmniejszyć zużycie danych, używając obrazów o wymiarach dopasowanych do rozmiaru wyświetlacza. Innymi słowy, podczas zapisywania obrazów nadaj im odpowiednią szerokość i wysokość.

Przyjrzyj się obrazom poniżej.

Wyglądają niemal identycznie, ale rozmiar jednego z nich jest ponad 10 razy większy od drugiego.

Pierwszy obraz ma znacznie większy rozmiar pliku, ponieważ jest zapisany w rozdzielczości znacznie większej niż rozmiar wyświetlania. Oba obrazy są wyświetlane ze stałą szerokością 300 pikseli, więc warto użyć obrazu zapisanego w tym samym rozmiarze.

W przypadku stałych szerokości używaj obrazów zapisanych w rozmiarach odpowiadających rozmiarowi wyświetlania.

Ale co, jeśli rozmiar wyświetlacza jest różny?

W świecie wielu urządzeń obrazy nie zawsze są wyświetlane w jednym stałym rozmiarze.

Elementy obrazu mogą mieć szerokość podaną w procentach lub być częścią elastycznych układów, w których rozmiary wyświetlania obrazu zmieniają się w zależności od rozmiaru ekranu.

…a co z urządzeniami wymagającymi dużej liczby pikseli, takimi jak wyświetlacze Retina?

Pomaganie przeglądarce w wyborze odpowiedniego rozmiaru obrazu

Świetnie byłoby udostępniać każdy obraz w różnych rozmiarach, a następnie pozwalać przeglądarce wybrać najlepszy rozmiar dla danego urządzenia i rozmiaru wyświetlacza. Niestety, w przypadku określania, który obraz jest najlepszy, występuje catch-22. Przeglądarka powinna używać najmniejszego możliwego obrazu, ale nie może znać jego szerokości bez pobrania go w celu sprawdzenia.

W takich sytuacjach przydaje się srcset. Zapisujesz obrazy w różnych rozmiarach, a potem informujesz przeglądarkę o szerokości każdej wersji:

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="…">

Wartości w pokazują szerokość każdego obrazu w pikselach. Na przykład kod small.jpg 500w informuje przeglądarkę, że plik small.jpg ma szerokość 500 pikseli. Dzięki temu przeglądarka może wybrać najmniejszy możliwy obraz w zależności od typu ekranu i rozmiaru obszaru wyświetlania bez konieczności pobierania obrazów w celu sprawdzenia ich rozmiaru.

Możesz zobaczyć, jak działa srcset na poniższym obrazie. Jeśli korzystasz z laptopa lub komputera stacjonarnego, zmień rozmiar okna przeglądarki i otwórz ponownie tę stronę. Następnie użyj panelu Sieć w narzędziach przeglądarki, aby sprawdzić, którego obrazu użyto. (Musisz to zrobić w oknie incognito lub prywatnym, w przeciwnym razie oryginalny plik obrazu zostanie zapisany w pamięci podręcznej).

Jak mogę utworzyć obrazy w różnych rozmiarach?

Musisz udostępnić wiele rozmiarów każdego obrazu, którego chcesz używać w srcset.

W przypadku pojedynczych obrazów, takich jak banery powitalne, możesz ręcznie zapisywać różne rozmiary. Jeśli masz dużo obrazów, np. zdjęć produktów, musisz zautomatyzować ten proces. Można to zrobić na 2 sposoby.

Włączanie przetwarzania obrazu do procesu kompilacji

W ramach procesu tworzenia możesz dodać kroki, które pozwolą utworzyć wersje obrazów o różnych rozmiarach. Więcej informacji znajdziesz w artykule „Kompresowanie obrazów za pomocą Imagemin”.

Korzystanie z usługi obrazów

Tworzenie i dostarczanie obrazów można zautomatyzować za pomocą usługi komercyjnej, takiej jak Cloudinary, lub jej odpowiednika o otwartym kodzie źródłowym, np. Thumbor, który możesz zainstalować i uruchomić samodzielnie.

Przesyłasz obrazy w wysokiej rozdzielczości, a usługa obrazów automatycznie tworzy i dostarcza różne formaty i rozmiary obrazów 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 obrazów mają też bardziej zaawansowane funkcje, takie jak możliwość automatyzacji „inteligentnego przycinania” w przypadku różnych rozmiarów obrazów i automatycznego dostarczania obrazów w formacie WebP do przeglądarek obsługujących ten format zamiast plików JPEG bez zmiany rozszerzenia pliku.

Co zrobić, jeśli obraz nie wygląda dobrze w różnych rozmiarach?

W takim przypadku musisz użyć elementu <picture> do „kierowania artystycznego”: podaj inny obraz lub jego wycinek w różnych rozmiarach. Więcej informacji znajdziesz w ćwiczeniu z programowania „Art direction”.

A co z gęstością pikseli?

Urządzenia z wyższej półki mają mniejsze (gęstsze) piksele fizyczne. Na przykład wysokiej klasy telefon może mieć 2–3 razy więcej pikseli w każdym wierszu pikseli niż tańsze urządzenie.

Może to wpłynąć na rozmiar, w jakim musisz zapisać obrazy. Nie będziemy tu wchodzić w szczegóły, ale więcej informacji znajdziesz w samouczku „Używanie deskryptorów gęstości”.

A co z rozmiarem wyświetlanego obrazu?

Możesz użyć sizes, aby srcset działało jeszcze lepiej.

Bez niego przeglądarka używa pełnej szerokości widocznego obszaru podczas wybierania obrazu z srcset. Atrybut sizes informuje przeglądarkę o szerokości, z jaką będzie wyświetlany element obrazu, dzięki czemu przeglądarka może wybrać najmniejszy możliwy plik obrazu – zanim wykona jakiekolwiek obliczenia układu.

W poniższym przykładzie sizes="50vw" informuje przeglądarkę, że obraz będzie wyświetlany w 50% szerokości obszaru wyświetlania.

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

Możesz zobaczyć to w działaniu na stronie simpl.info/sizes oraz w samouczku „Określanie wielu szerokości slotów”.

A obsługa przeglądarek?

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, użyje tylko atrybutu src.

Dzięki temu srcset i sizes są świetnymi ulepszeniami progresywnymi.

Więcej informacji

Więcej informacji o optymalizacji obrazów znajdziesz w sekcji „Optymalizacja obrazów” na stronie web.dev. Jeśli chcesz uzyskać więcej wskazówek, wypróbuj bezpłatny kurs „Obrazy responsywne” oferowany przez Udacity.