Przesyłanie obrazów w rozmiarze przeznaczonym na komputery na urządzenia mobilne może zużywać 2–4 razy więcej danych niż to potrzebne. Aby poprawić wrażenia użytkowników, wyświetlaj różne rozmiary obrazów na różnych urządzeniach.
Obrazy elastyczne i podstawowe wskaźniki internetowe
Gdy serwujesz obrazy elastyczne, Twoja strona ocenia możliwości wyświetlania urządzenia użytkownika i wybiera jeden z zestawu obrazów, które są optymalne do wyświetlenia na podstawie tych kryteriów. Pozwala to oszczędzać dane użytkowników, głównie dzięki wyświetlaniu mniejszych obrazów na urządzeniach z mniejszymi ekranami.
Szybsze wczytywanie obrazów może też wpłynąć na największe wyrenderowanie treści (LCP) na stronie. Jeśli na przykład element LCP na stronie to obraz, wyświetlenie go w wersji responsywnej może skrócić czas ładowania zasobów.
Krótsze czasy wczytywania zasobów skracają czas wczytywania obrazu LCP, co poprawia wynik LCP strony. Mniejszy czas LCP oznacza, że użytkownicy będą postrzegać Twoją witrynę jako szybciej wczytującą się, a zwłaszcza szybciej wczytujące najważniejsze treści (element LCP). Wyświetlanie obrazów elastycznych może też zmniejszyć współzawodnictwo o przepustowość w przypadku innych zasobów na stronie, co może ogólnie przyspieszyć wczytywanie strony.
Zmienianie rozmiaru obrazów
Do najpopularniejszych narzędzi do zmiany rozmiaru obrazu należą pakiet npm sharp i narzędzie wiersza poleceń ImageMagick.
Pakiet sharp to dobry wybór, jeśli chcesz zautomatyzować zmianę rozmiaru obrazu (np. generowanie miniatur w różnych rozmiarach dla wszystkich filmów w witrynie). Jest szybki i dobrze integruje się ze skryptami i narzędziami kompilacji. ImageMagick jest wygodniejszy do jednorazowego zmiany rozmiaru obrazu, ponieważ działa całkowicie z wiersza poleceń.
ostry
Aby użyć biblioteki sharp jako skryptu Node, zapisz ten kod jako osobny skrypt w projekcie, a następnie uruchom go, aby przekonwertować obrazy:
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 do 33% jego pierwotnego rozmiaru, uruchom w terminalu to polecenie:
convert -resize 33% flower.jpg flower-small.jpg
Aby zmienić rozmiar obrazu tak, aby mieścił się w obszarze o szerokości 300 pikseli i wysokości 200 pikseli, uruchom to 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 „właściwej” odpowiedzi na to pytanie. Jednak często udostępnia się 3–5 różnych rozmiarów obrazu. Wyświetlanie większej liczby rozmiarów obrazu poprawia wydajność, ale zajmuje więcej miejsca na serwerach i wymaga napisania nieco więcej kodu HTML.
Inne opcje
Warto też sprawdzić usługi dotyczące obrazów, takie jak Thumbor (open source) i Cloudinary. Oba te rozwiązania umożliwiają tworzenie elastycznych obrazów, które umożliwiają też edycję obrazów na żądanie. Aby skonfigurować Thumbor, zainstaluj go na serwerze. Cloudinary zadba o szczegóły za Ciebie i nie wymaga konfiguracji serwera.
Udostępnianie wielu wersji obrazu
Jeśli określisz kilka wersji obrazu, przeglądarka wybierze najlepszą do użycia:
| Przed | Po |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw"> |
Atrybuty tagu <img> src, srcset i sizes współpracują ze sobą, aby osiągnąć ten końcowy wynik.
Atrybut „src”
Atrybut src sprawia, że kod działa w przypadku przeglądarek, które nie obsługują atrybutów srcset i sizes. W takich przypadkach przeglądarki wczytują zasób określony w atrybucie src.
Atrybut „srcset”
Atrybut srcset to lista nazw plików obrazów i ich opisów szerokości lub gęstości rozdzielczości, rozdzielona przecinkami.
Ten przykład używa deskryptorów szerokości, które informują przeglądarkę o szerokości obrazu, dzięki czemu nie musi ona pobierać obrazu, aby się tego dowiedzieć. 480w to opis szerokości, który informuje przeglądarkę, że element flower-small.jpg ma szerokość 480 pikseli. 1080w to opis szerokości, który informuje przeglądarkę, że flower-large.jpg ma szerokość 1080 pikseli.
Dodatkowe informacje: aby wyświetlać różne rozmiary obrazów, nie musisz znać deskryptorów gęstości. Jeśli jednak chcesz dowiedzieć się więcej o tym, jak działają opisy gęstości, zapoznaj się z laboratorium kodu dotyczącego przełączania rozdzielczości. Deskryptory gęstości służą do wyświetlania różnych obrazów na podstawie gęstości pikseli urządzenia.
Atrybut „sizes”
Atrybut sizes informuje przeglądarkę, jak szeroki ma być obraz podczas wyświetlania, ale nie wpływa na jego rozmiar wyświetlania, więc nadal musisz użyć do tego celu atrybutu CSS.
Aby określić, który obraz ma wczytać, przeglądarka używa tych informacji oraz informacji o urządzeniu użytkownika (w tym o jego wymiarach i gęstości pikseli).
Jeśli przeglądarka nie rozpoznaje atrybutu „sizes”, wczyta obraz określony przez atrybut „src”. (sizes i srcset zostały wprowadzone w tym samym czasie, więc każda przeglądarka obsługuje albo oba atrybuty, albo żadnego z nich).
Dodatkowe informacje: jeśli chcesz, możesz użyć atrybutu sizes, aby określić kilka rozmiarów slotów. Umożliwia to wyświetlanie witryn, które używają różnych układów w zależności od rozmiaru widocznego obszaru. Aby dowiedzieć się, jak to zrobić, zapoznaj się z przykładem kodu dla wielu slotów.
(Jeszcze więcej) dodatkowych punktów
Oprócz wszystkich wymienionych już dodatkowych zasobów (obrazy są złożone) możesz też stosować te same zagadnienia w kierowaniu artystycznym. Kierowanie artystyczne to praktyka wyświetlania zupełnie różnych obrazów (zamiast różnych wersji tego samego obrazu) w różnych widokach. Więcej informacji znajdziesz w laboratorium kodu Art Direction.
Zweryfikuj
Po wdrożeniu obrazów dostosowanych do urządzenia możesz użyć Lighthouse, aby sprawdzić, czy nie pominięto żadnego obrazu. Przeprowadź kontrolę wydajności Lighthouse (Lighthouse > Opcje > Wydajność) i sprawdź wyniki kontroli Właściwe rozmiary obrazów. Te wyniki zawierają listę obrazów, które nadal wymagają zmiany rozmiaru.