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. Postępuj zgodnie ze wskazówkami na tej stronie, aby poprawić wygodę użytkowników, wyświetlając obrazy w różnych rozmiarach na różnych urządzeniach.
Obrazy elastyczne i podstawowe wskaźniki internetowe
Gdy wyświetlasz obrazy elastyczne, strona ocenia możliwości wyświetlania urządzenia użytkownika i wybiera jeden z zestawów obrazów, które na podstawie tych kryteriów będą optymalne do wyświetlenia. Dzięki temu oszczędzasz dane użytkowników, głównie dzięki wyświetlaniu mniejszych obrazów na urządzeniach z mniejszymi ekranami.
Szybsze wczytywanie obrazu może też wpłynąć na największe wyrenderowanie treści (LCP) na Twojej stronie. Jeśli na przykład elementem LCP strony jest obraz, responsywne wyświetlanie go może skrócić czas wczytywania zasobów.
Krótszy czas wczytywania zasobów skraca czas wczytywania obrazu LCP, poprawiając wynik LCP strony. Niższy LCP oznacza, że Twoja witryna będzie ładowała się szybciej, a najważniejsze treści (element LCP) będą szybciej się wczytywać. Wyświetlanie elastycznych obrazów może też zmniejszać rywalizację o przepustowość innych zasobów strony, co może poprawić szybkość wczytywania strony.
Zmiana rozmiaru obrazów
Dwa z najpopularniejszych narzędzi do zmiany rozmiaru obrazów to sharp npm pakiet i narzędzie interfejsu wiersza poleceń ImageMagick.
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). Jest szybki i dobrze integruje się ze skryptami i narzędziami do tworzenia kompilacji. Obraz Magic jest wygodniejszy w przypadku jednorazowej zmiany rozmiaru obrazu, ponieważ jest uruchamiany wyłącznie z 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
Jeśli chcesz zmienić rozmiar obrazu, aby zmieścił się w przestrzeni o szerokości 300 i 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. Większe rozmiary obrazów zapewniają lepszą wydajność, ale zajmują więcej miejsca na serwerach i wymagają 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. Oba te sposoby są prostym sposobem tworzenia elastycznych obrazów, które umożliwiają też edytowanie obrazów na żądanie. Aby skonfigurować Thumbor, zainstaluj ją na swoim serwerze. Cloudinary zajmuje się wszystkimi szczegółami i nie wymaga konfigurowania serwera.
Wyświetlanie wielu wersji obrazu
Gdy określisz wiele wersji obrazu, przeglądarka wybiera 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. Te przeglądarki wracają do ładowania zasobu określonego 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 korzystamy z deskryptorów szerokości, które informują przeglądarkę o szerokości obrazu, dzięki czemu nie trzeba pobierać obrazu w celu sprawdzenia. 480w to deskryptor szerokości, który informuje przeglądarkę, że 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.
Dodatkowy udział: aby wyświetlać obrazy o różnych rozmiarach, nie musisz znać deskryptorów gęstości. 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 rozmiarów informuje przeglądarkę o szerokości obrazu po wyświetleniu, ale nie wpływa na jego rozmiar, dlatego i tak potrzebny jest CSS.
Na podstawie tych informacji i informacji o urządzeniu użytkownika (w tym wymiarów i gęstości pikseli) przeglądarka określa, który obraz ma zostać wczytany.
Jeśli przeglądarka nie rozpozna atrybutu „sizes”, przełącza się na wczytywanie obrazu określonego przez atrybut „src”. (sizes i srcset zostały wprowadzone w tym samym czasie, więc każda przeglądarka obsługuje oba atrybuty lub nie obsługuje ż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) Dodatkowe środki
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 odmiennych obrazów (zamiast 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 upewnić się, że nie przeoczysz żadnych obrazów. Przeprowadź audyt wydajności Lighthouse (Lighthouse > Opcje > Wydajność) i poszukaj wyników kontroli Obrazy o odpowiednim rozmiarze. Wyniki zawierają listę obrazów, które musisz zmienić.