Wyświetlaj elastyczne obrazy

Katie Hempenius

Wyświetlanie obrazów o rozmiarze na komputerze na urządzeniach mobilnych może zużywać 2–4 razy więcej danych niż niezbędną. Postępuj zgodnie ze wskazówkami na tej stronie, aby poprawić wrażenia użytkowników przez wyświetlania na różnych urządzeniach obrazów o różnych rozmiarach.

Obrazy elastyczne i podstawowe wskaźniki internetowe

Gdy wyświetlasz elastyczne obrazy, strona ocenia możliwości wyświetlania urządzenia użytkownika i wybierając jeden z proponowanych obrazów, optymalne dla reklam displayowych zgodnie z tymi kryteriami. Dzięki temu zaoszczędzisz dane użytkowników, głównie przez wyświetlanie mniejszych obrazów na urządzeniach z mniejszymi ekranami.

Efekty szybszego wczytywania obrazów mogą również dotyczyć Największe wyrenderowanie treści (LCP). Na przykład, jeśli strona Element LCP to obraz, który wyświetla się elastycznie może skrócić czas wczytywania zasobów.

Krótszy czas wczytywania zasobów skraca czas wczytywania obrazu LCP, wskaźnik LCP strony. Niższy LCP oznacza, że użytkownicy będą widzieć Twoją witrynę jako szybciej ładowaną, zwłaszcza w celu szybszego wczytywania najważniejszych treści (elementu LCP). Wyświetlanie elastycznych obrazów może też ograniczyć rywalizację o przepustowość innych zasobów na stronie, które mogą ogólnie przyspieszyć wczytywanie strony.

Zmień rozmiar obrazów

Dwa najpopularniejsze narzędzia do zmiany rozmiaru obrazu to pakiet npm sharp. i narzędzie wiersza poleceń ImageMagick.

Ostry pakiet jest dobrym rozwiązaniem do automatycznej zmiany rozmiaru obrazu (np. generowanie różnych rozmiarów miniatur dla wszystkich filmów w witrynie). it jest szybka i dobrze integruje się ze skryptami i narzędziami do tworzenia kompilacji. ImageMagick to coś więcej Jest to wygodne rozwiązanie w przypadku jednorazowej zmiany rozmiaru obrazu, ponieważ uruchamia się w całości polecenie .

ostry

Aby użyć Sharp jako skryptu Node, zapisz ten kod jako oddzielny skrypt w 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% pierwotnego rozmiaru, uruchom następujące polecenie w terminal:

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

Aby zmienić rozmiar obrazu w celu dopasowania go do szerokości 300 piks. i wysokości 200 piks., 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 jednego „prawidłowego” odpowiedzi na to pytanie. Często jednak wyświetlać 3–5 różnych rozmiarów obrazu. Wyświetlanie większej liczby rozmiarów obrazów jest korzystniejsze dla ale zajmuje więcej miejsca na serwerach i wymaga zapisu trochę więcej kodu HTML.

Inne opcje

Usługi graficzne takie jak Thumbor (open source) i Cloudinary też warto wypróbować. Oba prostych sposobów tworzenia elastycznych obrazów, które również zawierają obrazy do manipulacji na żądanie. Aby skonfigurować aplikację Thumbor, zainstaluj ją na swoim serwerze. Chmury zajmie się wszystkimi szczegółami i nie wymaga konfigurowania serwera.

Wyświetlanie wielu wersji obrazu

W przypadku podania wielu wersji obrazu przeglądarka wybiera najlepszą użyj:

Tag <img> src, srcset, i sizes aby osiągnąć taki efekt, wpływają one na siebie.

Atrybut „src” atrybut

Atrybut src sprawia, że kod działa w przypadku przeglądarek, które nie obsługują srcset i sizes . Przeglądarki te wracają do wczytywania zasobu określonego w parametrze src.

Parametr „srcset” atrybut

Atrybut srcset to rozdzielana przecinkami lista nazw plików graficznych i ich nazw. deskryptory szerokości lub gęstości.

W tym przykładzie użyto deskryptory szerokości, które informują przeglądarkę, jak szeroki jest obraz, więc nie musi pobierać . 480w to deskryptor szerokości, który informuje przeglądarkę, flower-small.jpg ma szerokość 480 pikseli. 1080w to deskryptor szerokości, przeglądarka flower-large.jpg ma szerokość 1080 pikseli.

Dodatkowe środki: Aby wyświetlać obrazy o różnych rozmiarach, nie musisz znać deskryptorów gęstości. Jeśli jednak chcesz wiedzieć, jak działają deskryptory gęstości, przeczytaj Rozwiązywanie problemów z przełączaniem kodu (w języku angielskim). Deskryptory gęstości służą do wyświetlania różnych obrazów na podstawie gęstość pikseli.

„Rozmiary” atrybut

Atrybut rozmiary informuje przeglądarkę, jak szeroki będzie obraz, gdy zostanie nie ma wpływu na wyświetlane rozmiary obrazów, więc nadal musisz usługi porównywania cen.

Przeglądarka korzysta z tych informacji oraz tego, co wie o urządzenia (w tym jego wymiarów i gęstości pikseli), aby określić, który obraz strony.

Jeśli przeglądarka nie rozpoznaje „sizes” , przybiera on wartość wczytuję obraz określony przez „src” . (sizes i srcset zostały wprowadzone w tym samym czasie, więc każda przeglądarka obsługuje atrybutów lub nie).

Dodatkowe środki: Jeśli chcesz, możesz też użyć atrybutu rozmiarów, aby określić, do różnych rozmiarów boksów reklamowych. W przypadku witryn o różnych układach o różnych rozmiarach widocznego obszaru. Zapoznaj się z przykładowym kodem dla wielu przedziałów jak to zrobić.

(Jeszcze więcej) Dodatkowe informacje

Oprócz wszystkich wymienionych już środków (obrazy są skomplikowane!) ale też używać tych samych koncepcji do kierunek graficzny. Kierunek w grach to sposób wyświetlania zupełnie innych obrazów (zamiast różnych wersji tego samego obrazu) do różnych widocznych obszarów. Ty Więcej dowiesz się z tego modułu.

Zweryfikuj

Po zaimplementowaniu obrazów elastycznych możesz użyć narzędzia Lighthouse, aby sprawdzić, nie pominął żadnych obrazów. Przeprowadzenie audytu wydajności Lighthouse (Lighthouse > Opcje > Skuteczność) i poszukaj wyników Audyt prawidłowego rozmiaru obrazów. Te wyniki zawierają listę obrazów, które musisz wykonać zmienić rozmiar.