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, postępuj zgodnie z wytycznymi na tej stronie, aby wyświetlać obrazy o różnych rozmiarach 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.
Ostry pakiet to dobry wybór w przypadku automatyzacji zmiany rozmiaru obrazu (np. generowania miniatur o różnych rozmiarach dla wszystkich filmów w witrynie). Jest szybki i dobrze integruje się ze skryptami i narzędziami kompilacji. ImageMagick jest wygodniejszym rozwiązaniem w przypadku jednorazowej zmiany rozmiaru obrazu, ponieważ działa w całości z poziomu 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 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ę obrazu 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 src, srcset i sizes tagu <img> współdziałają ze sobą, aby osiągnąć taki efekt.
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 rozdzielona przecinkami lista nazw plików graficznych i ich deskryptorów szerokości lub gęstości.
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 deskryptor szerokości,
który informuje przeglądarkę, że flower-large.jpg ma szerokość 1080 pikseli.
Dodatkowe informacje: aby wyświetlać obrazy o różnych rozmiarach, nie musisz wiedzieć o deskryptorach gęstości. Jeśli jednak chcesz wiedzieć, jak działają deskryptory gęstości, zajrzyj do laboratorium dotyczącego przełączania rozdzielczości. Deskryptory gęstości służą do wyświetlania różnych obrazów w zależności od gęstości pikseli na urządzeniu.
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 rozpozna atrybutu „sizes”, użyje obrazu określonego w atrybucie „src”. Atrybuty sizes i srcset zostały wprowadzone jednocześnie, więc każda przeglądarka obsługuje oba atrybuty lub żaden 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 przypadku różnych rozmiarów widocznego obszaru. Aby dowiedzieć się, jak to zrobić, zapoznaj się z przykładem kodu dla wielu slotów.
(Jeszcze więcej) Dodatkowe informacje
Poza wszystkimi dodatkowymi wpłatami, które zostały już wymienione (grafiki są bardzo złożone), możesz też użyć tych samych koncepcji w przypadku kierunku sztucznego. 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 zaimplementowaniu obrazów elastycznych możesz użyć narzędzia Lighthouse, aby mieć pewność, że nie przegapisz żadnych obrazów. Przeprowadź kontrolę wydajności Lighthouse (Lighthouse > Opcje > Wydajność) i sprawdź wyniki kontroli Właściwe rozmiary obrazów. W wynikach znajdziesz obrazy, których rozmiar musisz jeszcze zmienić.