Najważniejsze wskazówki dotyczące skuteczności w internecie

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

Sam Dutton

Według archiwum HTTP typowa strona internetowa na urządzenia mobilne waży ponad 2, 6 MB, a ponad 2/3 tej wagi stanowią obrazy. To świetna okazja do optymalizacji.

Podsumowanie

• Nie zapisuj obrazów większych niż ich rozmiar wyświetlania.
• Zapisz kilka rozmiarów każdego obrazu i użyj atrybutu srcset, aby umożliwić przeglądarce wybranie 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 zredukować ilość zużywanych danych, używając obrazów o wymiarach dopasowanych do rozmiaru wyświetlacza. Innymi słowy, podczas zapisywania zdjęć nadaj im odpowiednią szerokość i wysokość.

Zapoznaj się z grafikami poniżej.

Wyglądają prawie identycznie, ale rozmiar jednego z nich jest ponad 10 razy większy niż rozmiar drugiego.

Pierwszy obraz ma znacznie większy rozmiar pliku, ponieważ jego wymiary są znacznie większe niż rozmiar wyświetlania. Oba obrazy są wyświetlane z ustawioną szerokością 300 pikseli, więc warto użyć obrazu zapisanego w tym samym rozmiarze.

W przypadku szerokości stałej używaj obrazów zapisanych w tych samych wymiarach co rozmiar wyświetlania.

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

W świecie urządzeń mobilnych obrazy nie zawsze wyświetlają się w jednym, stałym rozmiarze.

Elementy obrazu mogą mieć szerokość wyrażoną w procentach lub mogą 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, które wymagają dużej liczby pikseli, takimi jak wyświetlacze Retina?

Pomoc w wybieraniu przez przeglądarkę odpowiedniego rozmiaru obrazu

Nie byłoby wspaniale, gdyby każdy obraz był dostępny w różnych rozmiarach, a przeglądarka wybierała najlepszy rozmiar dla danego urządzenia i rozmiaru ekranu? Niestety w przypadku określania, które zdjęcie jest najlepsze, mamy do czynienia z catch-22. Przeglądarka powinna używać jak najmniejszego obrazu, ale nie może poznać jego szerokości bez pobrania i 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 wskazują szerokość każdego obrazu w pikselach. Na przykład: small.jpg 500w informuje przeglądarkę, że plik small.jpg ma 500 pikseli szerokości. Umożliwia to przeglądarce wybór najmniejszego możliwego obrazu w zależności od typu ekranu i rozmiaru widoku bez konieczności pobierania obrazów w celu sprawdzenia ich rozmiaru.

Na poniższym obrazie możesz zobaczyć, jak działa srcset. Jeśli korzystasz z laptopa lub komputera stacjonarnego, zmień rozmiar okna przeglądarki i ponownie otwórz tę stronę. Następnie w panelu Sieć w narzędziach przeglądarki sprawdź, które zdjęcie zostało użyte. (musisz to zrobić w oknie incognito lub prywatnym, w przeciwnym razie oryginalny plik obrazu zostanie zapisany w pamięci podręcznej).

Jak mogę utworzyć wiele rozmiarów obrazów?

W przypadku każdego obrazu, którego chcesz używać z użyciem srcset, musisz udostępnić wiele rozmiarów.

W przypadku pojedynczych obrazów, takich jak obrazy główne, możesz ręcznie zapisywać różne rozmiary. Jeśli masz dużo obrazów, np. zdjęć produktów, musisz zautomatyzować ten proces. W tym przypadku można zastosować 2 metody.

Włączanie przetwarzania obrazu w procesie kompilacji

W ramach procesu kompilacji możesz dodać kroki, które pozwolą utworzyć wersje obrazu w różnych rozmiarach. Aby dowiedzieć się więcej, przeczytaj artykuł „Kompresowanie obrazów za pomocą Imagemin”.

Korzystanie z usługi obrazowania

Tworzenie i przesyłanie obrazów można zautomatyzować, korzystając z usługi komercyjnej, takiej jak Cloudinary, lub jej odpowiednika open source, np. Thumbor, którą zainstalujesz i uruchomisz samodzielnie.

Przesyłasz obrazy w wysokiej rozdzielczości, a usługa obrazu automatycznie tworzy i dostarcza różne formaty i rozmiary obrazu 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 dotyczące obrazów mają też bardziej zaawansowane funkcje, takie jak możliwość zautomatyzowania „inteligentnego przycinania” w przypadku różnych rozmiarów obrazów i automatycznego przesyłania obrazów WebP do przeglądarek obsługujących ten format zamiast obrazó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”: zapewnij inny obraz lub przycięty obraz w różnych rozmiarach. Aby dowiedzieć się więcej, zapoznaj się z ćwiczeniem z programowania dotyczącym kierowania artystycznego.

A co z gęstością pikseli?

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

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

A jak wygląda sprawa z rozmiarem wyświetlania obrazu?

Aby jeszcze bardziej poprawić działanie srcset, możesz użyć sizes.

Bez niego przeglądarka wybiera obraz z srcset, używając całej szerokości widocznego obszaru. Atrybut sizes informuje przeglądarkę o szerokości, w jakiej ma być wyświetlany element obrazu, dzięki czemu przeglądarka może wybrać najmniejszy możliwy plik obrazu, zanim przeprowadzi jakiekolwiek obliczenia układu.

W przykładzie poniżej sizes="50vw" informuje przeglądarkę, że obraz ma być wyświetlany w 50% szerokości widoku.

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

Możesz to sprawdzić na stronie simpl.info/sizes i w laboratorium kodu „Podawanie wielu szerokości slotów”.

A co z obsługą w przeglądarce?

Atrybuty 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

Aby dowiedzieć się więcej o optymalizacji obrazów, zapoznaj się z sekcją „Optymalizuj obrazy” na stronie web.dev. Aby uzyskać więcej wskazówek, wypróbuj bezpłatny kurs „Responsive Images” oferowany przez Udacity.