Wyświetlaj elastyczne obrazy

Katie Hempenius
Katie Hempenius

Wyświetlanie na urządzeniach mobilnych obrazów w rozmiarach na komputery może zużywać 2–4 razy więcej danych, niż jest to konieczne. Zamiast „uniwersalnego” podejścia do obrazów wyświetlaj różne rozmiary obrazów na różnych urządzeniach.

Obrazy elastyczne i podstawowe wskaźniki internetowe

Gdy wyświetlasz obrazy elastyczne, oceniasz możliwości wyświetlania urządzenia użytkownika i wybierasz jeden z zestawów obrazów, które na podstawie tych kryteriów będą optymalne do wyświetlania. W rezultacie, tak jak wspomnieliśmy wcześniej, zamiast przesyłać zbyt dużo danych graficznych do urządzeń, które z nich nie mogą korzystać, wyświetla się obraz w odpowiednim rozmiarze. W przypadku mniejszych urządzeń, takich jak telefony i tablety, oznacza to mniejsze wykorzystanie danych w porównaniu z urządzeniami z większymi ekranami, takimi jak laptopy.

Szybsze wczytywanie obrazów może też wpłynąć na największe wyrenderowanie treści (LCP) na Twojej stronie. Jeśli na przykład element LCP strony to obraz, skracasz czas wczytywania zasobu kandydata LCP.

Krótszy czas wczytywania zasobów skraca czas wczytywania obrazu LCP, co poprawia wynik LCP strony. Niższy LCP oznacza, że użytkownicy zobaczą, że witryna wczytuje się szybciej, a zwłaszcza największy fragment treści widoczny w widocznym obszarze podczas wczytywania strony. Wyświetlanie elastycznych obrazów może też zmniejszyć rywalizację o przepustowość innych zasobów strony, co może poprawić szybkość wczytywania strony.

Zmiana rozmiaru obrazów

Dwa najpopularniejsze narzędzia do zmiany rozmiaru obrazów to sharp npmpackage i ImageMagick CLI.

Ostry oprawa to dobry wybór do automatyzacji zmiany rozmiaru obrazu (np. przez generowanie różnych rozmiarów miniatur dla wszystkich filmów na stronie). Można ją szybko i łatwo zintegrować ze skryptami kompilacji i narzędziami. Natomiast ImageMagick to wygodny sposób na jednorazowe zmienianie rozmiaru obrazu, ponieważ jest używany w całości z poziomu wiersza poleceń.

ostry

Aby użyć programu Sharp jako skryptu węzła, zapisz ten kod jako oddzielny skrypt w projekcie, a następnie uruchom go w celu przekonwertowania obrazów:

const sharp = require('sharp');
const fs = require('fs');
const directory = './images';

fs.readdirSync(directory).forEach(file => {
  sharp(`${directory}/${file}`)
    .resize(200, 100) // width, height
    .toFile(`${directory}/${file}-small.jpg`);
  });

ImageMagick

Aby zmienić rozmiar obrazu na 33% jego pierwotnego rozmiaru, uruchom w terminalu to polecenie:

convert -resize 33% flower.jpg flower-small.jpg

Aby zmienić rozmiar obrazu, tak aby pasował do szerokości 300 pikseli na wysokość 200 pikseli, uruchom następujące polecenie:

# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg

# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg

Ile wersji obrazu należy utworzyć?

Nie ma jednej „prawidłowej” odpowiedzi na to pytanie. Zazwyczaj jest to 3–5 różnych rozmiarów obrazu. Jeśli ustawisz obrazy w większej liczbie rozmiarów, będzie to mieć lepszą wydajność, ale zajmą więcej miejsca na Twoich serwerach i będą wymagały napisania nieco więcej kodu HTML.

Więcej opcji

Warto też zapoznać się z usługami związanymi z obrazami, takimi jak Thumbor (open source) i Cloudinary. Usługi graficzne udostępniają obrazy elastyczne (i manipulują nimi) na żądanie. Konfiguracja Thumbor polega na zainstalowaniu jej na serwerze. Cloudinary zajmuje się tymi kwestiami za Ciebie i nie wymaga konfigurowania serwera. Oba pozwalają łatwo tworzyć elastyczne obrazy.

Wyświetlanie wielu wersji obrazu

Podaj wiele wersji obrazu, a przeglądarka wybierze najlepszą:

Przed Po
<img src="duży-kwiat.jpg"> <img src="flower-large.jpg" srcset="flower-small.jpg 480w, Flower-large.jpg 1080w" size="50vw">

Atrybuty src, srcset i sizes tagu <img> współdziałają, aby osiągnąć ten efekt końcowy.

Atrybut „src”

Atrybut src umożliwia działanie tego kodu w przeglądarkach, które nie obsługują atrybutów srcset i sizes. Jeśli przeglądarka nie obsługuje tych atrybutów, zostanie załadowana zasób określony w atrybucie src.

Atrybut „srcset”

Atrybut srcset to rozdzielona przecinkami lista nazw plików obrazów oraz ich deskryptorów szerokości lub gęstości.

W tym przykładzie używane są deskryptory szerokości. 480w to deskryptor szerokości informujący przeglądarkę, że szerokość flower-small.jpg to 480 pikseli, a 1080w to deskryptor szerokości, który informuje przeglądarkę, że szerokość flower-large.jpg to 1080 pikseli.

„Deskryptor szerokości” brzmi elegancko, ale jest tylko sposobem na określenie szerokości obrazu. Dzięki temu przeglądarka nie musi pobierać obrazu w celu określenia jego rozmiaru.

Dodatkowy udział: Nie musisz znać deskryptorów gęstości, aby wyświetlać obrazy o różnych rozmiarach. Jeśli jednak chcesz się dowiedzieć, jak działają deskryptory gęstości, zajrzyj do laboratorium na temat zmiany rozdzielczości. Deskryptory gęstości służą do wyświetlania różnych obrazów na podstawie gęstości pikseli na urządzeniu.

Atrybut „rozmiary”

Atrybut rozmiaru informuje przeglądarkę, jak szeroki będzie obraz po wyświetleniu. Jednak atrybut rozmiarów nie ma wpływu na rozmiar wyświetlacza – nadal potrzebujesz do tego CSS.

Na podstawie tych informacji oraz dostępnych danych o urządzeniu użytkownika (czyli wymiary i gęstość pikseli) przeglądarka określa, który obraz ma wczytać.

Jeśli przeglądarka nie rozpozna atrybutu „sizes”, przełączy się na wczytanie obrazu określonego przez atrybut „src”. Przeglądarki udostępniały obsługę atrybutów „sizes” i „srcset” w tym samym czasie, więc przeglądarka będzie obsługiwać oba te atrybuty lub nie będzie obsługiwać żadnego z nich.

Dodatkowy udział: jeśli chcesz, możesz też użyć atrybutu rozmiarów, aby określić wiele rozmiarów boksów. Dzięki temu działają witryny używające różnych układów na potrzeby różnych rozmiarów widocznego obszaru. Aby dowiedzieć się, jak to zrobić, zapoznaj się z przykładowym kodem z wieloma przedziałami.

(Jeszcze więcej) Dodatkowy kredyt

Oprócz wymienionego już dodatkowego materiału (obrazy są złożone), możesz też wykorzystać te same koncepcje w przypadku kierunku sztuki. Kierunek grafiki polega na wyświetlaniu zupełnie różnych obrazów (a nie różnych wersji tego samego obrazu) w różnych widocznych obszarach. Więcej informacji znajdziesz w laboratorium kodu Art Direction.

Zweryfikuj

Po zaimplementowaniu elastycznych obrazów możesz użyć narzędzia Lighthouse, aby sprawdzić, czy nie pominiesz żadnych obrazów. Przeprowadź audyt wydajności Lighthouse (Lighthouse > Opcje > Wydajność) i poszukaj wyników kontroli Obrazy o odpowiednim rozmiarze. Zostaną wyświetlone obrazy, których rozmiar należy zmienić.