Optymalizacja grafiki w sieci

  1. Jak określić, które zdjęcie ma zostać wyświetlone
  2. Złożoność i ilość kodu
  3. Automatyzacja procesów
  4. Od tłumacza

To jest tłumaczenie artykułu. Optymalizacja obrazu autor Estelle Weyl .

Prawdopodobnie każdy programista wie, że jeśli chodzi o wydajność i użyteczność (UX), każdy obraz na stronie ma ogromne znaczenie: to praca z obrazami może przynieść pierwsze rezultaty w optymalizacji stron internetowych. Użycie bezstratnych technik kompresji obrazu zmniejsza całkowity rozmiar strony bez uszczerbku dla doświadczenia użytkownika (UX) podczas pracy z takimi stronami, poprawiając tym samym wydajność i zwiększając konwersję. Istnieje wiele metod określania, które obrazy są obsługiwane, a wszystko, co musisz zrobić, to przygotować „poprawne” obrazy i przekazać je użytkownikowi. Tworzenie optymalnych obrazów dla wszystkich użytkowników na wszystkich typach urządzeń powinno być celem wszystkich programistów (dostępność powinna być kolejnym celem, ale nie o to chodzi teraz).

Jak określić, które zdjęcie ma zostać wyświetlone

Istnieje kilka technik wyświetlania żądanego obrazu, na przykład zapytań o media podczas używania obrazów tła, lub używania elementów <picture> i <source> w połączeniu z srcset.
Używając zapytań @media CSS, możesz wyświetlać różne obrazy tła w zależności od rozmiaru okna podglądu lub gęstości pikseli na urządzeniu użytkownika.

Na przykład możesz wyświetlić obraz lowres.jpg dla starszych laptopów i hires.jpeg dla iPada Pro:

1
2
3
4
5
6
7
8
9
nagłówek {
background-image: url (img / hires_header.jpg);
}

Ekran @media only i (stosunek min-device-pixel: 2) i (min-width: 1024px) {
nagłówek {
background-image: url (img / hires_header.jpg);
}
}

A co ze zwykłymi obrazami na pierwszym planie?

Technika obrazy adaptacyjne od 2013 r. opierał się na fakcie, że SVG ma własną szerokość i wysokość kontenera, a wyrażenia medialne w nich są odpychane od tych wymiarów, a nie od rozmiaru okna przeglądarki (rzutni).
Na szczęście bieżąca obsługa przeglądarek dla tagu <picture> i srcset umożliwia nieużywanie tego hacka.

Głównym problemem w obrazach na pierwszym planie jest to, że przeglądarka ma informacje o rozmiarze ekranu (rzutni) i gęstości pikseli na ekranie, ale nie ma pojęcia o rozmiarze pobieranego obrazu io tym, jak odnosi się do rozmiaru ekranu. Ale deweloper wie i może je wskazać.

Podobnie jak zapytania o media, użycie znaczników <picture, <source> i atrybut srcset, programista może narzucić przeglądarce, które obrazy mają być wyświetlane dla określonego rozmiaru ekranu lub gęstości pikseli.

1
2
3
4
5
6
<obraz>
<source srcset = "small_lowres.jpg, small_highres.jpg 2x" media = "(max-width: 768px)">
<source srcset = "default.jpg, default_highres.jpg 2x">
<source srcset = "large_lowres.jpg, large_highres.jpg 2x" media = "(min-width: 1024px)">
<img src = "default.jpg" alt = "deskryptor obrazu">
</ picture>

Uwaga! Zawsze używaj domyślnego tagu <img> w każdym <picture>, a także atrybutu alt dla tagu.

Możesz po prostu użyć znacznika <img> bez użycia <picture>, aw znaczniku img określ atrybuty srcset za pomocą zestawu obrazów i rozmiarów, aby opisać ich zakres.

1
2
3
4
5
6
7
8
<img src = "default.jpg"
srcset = "large.jpg 1024w,
medium.jpg 768w,
default.jpg 420w ”
sizes = "(min-width: 1024px) 1024px,
(min-width: 768px) 90vw,
100vw ”
alt = "deskryptor obrazu" />

Możemy również wyświetlać różne typy obrazów przy użyciu atrybutu type:

1
2
3
4
5
6
<obraz>
<source srcset = "photo.jxr" type = "image / vnd.ms-photo">
<source srcset = "photo.jp2" type = "image / jp2">
<source srcset = "photo.webp" type = "image / webp">
<img srcset = "photo.jpg" alt = "Moja piękna twarz">
</ picture>

Jeśli powyższy kod Cię zaskoczy, JPEG-XR to stare zdjęcie MIME / vnd.ms dla Windows Media Photo, zastrzeżonego formatu obrazu Microsoftu obsługiwanego przez IE8 i nowsze wersje, w tym Microsoft Edge. jp2 to rozszerzenie JPEG 2000 obsługiwane przez Safari. WebP jest bezstratnym formatem kompresji obrazu i jest obecnie obsługiwany przez przeglądarki Chrome i Opera. Firefox będzie obsługiwał formaty graficzne takie jak PNG-A, SVG, GIF i JPEG (jak w powyższym kodzie).

Chrome - WebP
IE 9+ / Edge - JPEG-XR
Opera - WebP
Safari - JPEG-2000

W przypadku Firefoksa i IE8 musisz podać opcję tworzenia kopii zapasowych w postaci obrazów JPEG lub PNG. I chociaż Safari i Firefox eksperymentują ze wsparciem dla obrazów WebP, nie ma pewności, że takie wsparcie wkrótce się pojawi. W każdym razie możesz sprawdzić wsparcie na stronie. Czy mogę użyć .

Aby uzyskać bardziej szczegółowe informacje o możliwościach, można znaleźć dobre samouczki online wyrażenia medialne , Tag <picture> i srcset .

Złożoność i ilość kodu

Głównym problemem w tym rozwiązaniu (zobacz powyższy kod) jest duża ilość kodu, którego nie można napisać, aby pokryć jak najwięcej rozmiarów ekranu i gęstości pikseli. Z pewnością można ustawić punkty kontrolne dla każdej rozdzielczości, ale jest to trudne i nie chcesz robić tego ręcznie. Na szczęście pisanie takich warunków może i powinno być zautomatyzowane.

Najlepszym rozwiązaniem w tym przypadku jest wygenerowanie kodu po stronie serwera w trzech z czterech głównych kryteriów, takich jak: rozmiar okna (rzutnia), gęstość pikseli, obsługa klienta dla formatu obrazu i stosunek rozmiaru obrazu do rozmiaru ekranu. Dlaczego trzy z czterech? Zawsze możesz wykorzystać wszystkie zalety zrozumienia zestawów źródłowych przeglądarki, ale nie używasz wszystkich kombinacji, ale tylko niektóre z nich.

Jeśli Twój DOM jest generowany w przeglądarce tylko po stronie klienta za pomocą JavaScript, na przykład, jak w aplikacjach React, mając informacje o urządzeniu klienckim, możesz zażądać poprawnego obrazu, ale użytkownicy zobaczą częściowo załadowany ekran przez pewien czas (podczas gdy kod na kliencie).

W przypadku, gdy nie wygenerujesz całego kodu HTML po stronie klienta, zmiana ścieżki do obrazu również nie będzie rozwiązaniem optymalnym, ponieważ podczas przeglądania dokumentu przeglądarka rozpocznie pobieranie oryginalnego obrazu, a następnie, po przetworzeniu kodu JavaScript, przeglądarka rozpocznie pobieranie innego, więcej optymalny dla niego, obraz.

A jeśli jesteś zwolennikiem stopniowej poprawy, powinieneś zrozumieć, że oryginalny obraz i tak zostanie przesłany po przeanalizowaniu dokumentu HTML.

Niestety, monity wysyłane do serwera z informacją o gęstości pikseli ekranu lub obsługi WebP w postaci nagłówków żądań HTTP zostały zaimplementowane tylko w Blink (Chrome i Opera). Gdy masz informacje na temat rozdzielczości i rozmiaru ekranu, możesz automatycznie renderować poprawne obrazy przy użyciu progresywnego ulepszania po stronie serwera. Dzięki tym nagłówkom możemy określić obsługę formatu obrazów WebP (Chrome i Opera obsługują te typy nagłówków), rozdzielczość i rozmiar okna urządzenia klienta. W Instart Logic mamy skrypt o nazwie Nanovisor, który replikuje funkcjonalność nagłówków HTTP dla przeglądarek, które nie obsługują tej technologii, co pozwala nam wysyłać zoptymalizowane obrazy do klienta.

Możesz również przeanalizować wiersz nagłówka UserAgent wraz z dodatkowymi informacjami, aby określić typ plików graficznych obsługiwanych przez konkretnego użytkownika. Wiedząc o tym, możesz zastąpić rozszerzenie pliku lub nadać obrazowi żądany format, ale z „niewłaściwym” rozszerzeniem. Na przykład, jeśli użytkownik zażądał pliku foo.jpg, możemy podać mu żądany typ pliku o tej samej nazwie foo.jpg. W Instart Logic dajemy użytkownikom WebP Chrome i Opera, a JPEG-XR Edge bez zmiany nazwy pliku, po prostu zawsze używamy .jpg na końcu nazwy pliku. Wykorzystujemy fakt, że wszystkie przeglądarki poprawnie wyświetlają obrazy kierowane przez MIME bez zwracania uwagi na rozszerzenie pliku. W ten sposób możemy utworzyć jeden i ten sam znacznik HTML dla różnych przeglądarek, a od strony serwera dać każdej przeglądarce pożądany obraz.

Jeśli zamierzasz generować różne formaty obrazów w oparciu o obsługę przeglądarki, ale z jednym rozszerzeniem pliku, musisz upewnić się, że obrazy (cache) są zapisywane po stronie serwera i jakoś oddzielają obrazy o tej samej nazwie i różnych typach zawartości. Lub musisz wysłać żądania od klienta z niezbędnym rozszerzeniem pliku. Jeśli znasz najlepsze lub inne rozwiązanie, daj mi znać.

Automatyzacja procesów

Wraz z pojawieniem się takiej możliwości w przeglądarkach, możemy dać użytkownikowi dostosowane obrazy. W powyższym przykładzie dowiedzieliśmy się, jak powiedzieć przeglądarce, jakiego obrazu użyć i jakiego rozmiaru. Niemniej jednak nadal musimy generować obrazy o różnych rozmiarach i typach, wybierając jednocześnie najlepszy współczynnik kompresji. Pytanie brzmi teraz, jak utworzyć wszystkie te obrazy.

Proces optymalizacji obrazów, zmiany ich rozmiaru i konwertowania do różnych formatów obsługiwanych przez konkretną przeglądarkę powinien być zautomatyzowany. Podczas konwersji obrazów pożądane jest osiągnięcie najwyższego współczynnika kompresji dla każdego przetwarzanego obrazu.

Proces optymalizacji obrazu może zająć dużo czasu, szczególnie w przypadku witryn z dynamiczną zawartością, gdzie liczba może wynosić tysiące, setki tysięcy, a nawet miliony obrazów o różnych rozmiarach i typach. W tym przypadku pomocne może być na przykład oprogramowanie ImageMagick. ImageMagick pozwala na konwersję obrazów do różnych formatów, takich jak: PNG, JPEG, JPEG-2000, GIF, a nawet WebP. Istnieje również wiele formatów, które można połączyć w pulę, a obrazy można konwertować za pomocą linii poleceń:

1
convert myImg.jpg -quality 78 -define webp: lossless = true myImg.webp

Powyższe polecenie zapisze kopię obrazu myImg.jpg w formacie WebP, podczas gdy konwersja zostanie przeprowadzona bez widocznej utraty do 78% jakości.
Ponadto, za pomocą ImageMagic, możesz zmienić rozmiar obrazu za pomocą flagi -resize

1
convert myImg.jpg -quality 78 -resize 50% myImg.webp

Powyższe polecenie utworzy nowy plik WebP o rozmiarze 50% oryginalnego obrazu (myImg.jpg) i jakości 78%.

Korzystając z linii poleceń, możesz automatycznie tworzyć obrazy w wymaganym rozmiarze i jakości. Trudności mogą jedynie powodować określenie optymalnej jakości obrazu i współczynnika kompresji. I ten krok może być wykonany ręcznie.

Zadanie znalezienia optymalnej jakości dla każdego obrazu potrwa bardzo długo lub wymaga użycia dużej liczby osób. Dlatego większość narzędzi do konwersji obrazów zmniejsza rozmiar pliku z powodu pogorszenia jakości obrazu przy użyciu wspólnego współczynnika kompresji. Na przykład, gdy zoptymalizowałem obrazy dla mojej witryny z kilkoma obrazami, indywidualnie wybrałem dla nich współczynnik kompresji od 35% do 88%. W przypadku galerii i innych projektów z wieloma obrazami użyłem Adobe Fireworks do zautomatyzowania procesu konwersji i zapisałem wszystkie obrazy z jakością 78%. Większość programów automatyki zapisuje obrazy w jakości około 80%. W oparciu o moje doświadczenie zazwyczaj wybieram jakość 78%. Nie ma jednak magicznej uniwersalnej liczby do wyboru jakości obrazu.

Poziom kompresji zależy w dużym stopniu od tego, co pokazano na zdjęciu, i ogólnie zależy od poziomu szczegółowości. W zależności od treści musisz ustawić krok kompresji. Im bardziej szczegółowy obraz, tym niższy powinien być współczynnik kompresji (około 90%), podczas gdy obrazy z mniejszą liczbą szczegółowych obszarów będą wyglądać świetnie nawet przy jakości poniżej 50%.

Nie wyklucza automatycznej regulacji jakości obrazu. W ten sposób platforma Instart Logic wykorzystuje wizję komputerową i uczenie maszynowe do optymalizacji obrazu zależnej od treści. Obrazy są zoptymalizowane pod względem rozmiaru i możliwości przeglądarki, jakości połączenia internetowego i optymalnych współczynników kompresji obrazu bez widocznej utraty jakości. Proces zautomatyzowanej optymalizacji jakości obrazu, który nazywamy „SmartVision”, opiera się na podejściu algorytmicznym i uczeniu maszynowym, aby uzyskać adaptacyjne ustawienia dla każdego obrazu oddzielnie, z najlepszymi kombinacjami jakości obrazu i wagi. Zaawansowane algorytmy widzenia komputerowego pozwalają zwiększyć procent kompresji obrazu bez widocznej utraty jakości. Parvez Ahammad w swoim artykule w 2014 roku opisał te algorytmy .

W ciągu ostatnich 6 lat przeglądarki zaczęły działać szybciej, ale jednocześnie zwiększył się średni czas ładowania witryny. A sprawa jest taka, włączając rozmiar obrazów. Nowoczesne narzędzia mogą częściowo rozwiązać ten problem. Dlatego będzie dobrym tonem, jeśli zaczniesz przydzielać czas na optymalizację obrazów.

Od tłumacza

W 2015 opublikowałem artykuł webp - nadszedł czas? w którym opisał możliwości formatu obrazu WebP, który był wówczas stosunkowo nowy. Po ponad półtora roku tylko Chrome i Opera wciąż mogą pochwalić się obsługą WebP. Ale używając tego formatu w kilku dużych projektach Alterego ugruntował się bardzo pozytywnie. Zmniejszyliśmy zużycie ruchu, ładowanie kanału i szybkość ładowania stron na stronie. Jednocześnie obrazy nie tracą na jakości. Jest to bardzo ważne na przykład w przypadku sklepów internetowych, gdzie sprzedaż może bezpośrednio zależeć od jakości obrazu.

Głównym problemem, który napotkaliśmy podczas korzystania ze zoptymalizowanych obrazów, był problem wydajności. Duża ilość plików graficznych (zdjęcie dla produktów) i ciągłe aktualizacje zdjęć nie pozwalały na generowanie. Co więcej, użycie optymalnego rozmiaru obrazu (w zależności od gęstości pikseli ekranu i rozmiaru rzutni) spowodowało konieczność generowania obrazu „na żądanie”. To znaczy w locie. Rozwiązanie zaproponowane w moim artykule za pomocą php i biblioteki Imagick do zmiany rozmiaru i formatowania obrazów okazało się bezużyteczne. Czas generowania obrazu był zbyt długi i zwiększył się jeszcze bardziej wraz ze wzrostem liczby żądań. Problem został rozwiązany za pomocą modułu PageSpeed dla Nginx oraz organizowanie buforowania i zapisywania wygenerowanych obrazów na dysku. Udało nam się osiągnąć maksymalny czas generowania obrazu w obszarze 500 ms ze średnim czasem powtarzanego powrotu obrazu w 25-30 ms. Ale to jest temat na osobny artykuł.

Dlaczego trzy z czterech?