Optymalizacja obrazów za pomocą sieci CDN z obrazami

Jeremy Wagner

Katie Hempenius

Barry Pollard

Dlaczego warto korzystać z sieci CDN z obrazami?

Sieci dostarczania treści graficznych (CDN) doskonale nadają się do optymalizacji obrazów. Przejście na CDN z obrazami może przynieść 40–80% oszczędności w rozmiarze pliku obrazu. Teoretycznie da się osiągnąć te same wyniki, używając tylko skryptów kompilacji, ale w praktyce jest to rzadkie.

Czym jest sieć CDN z obrazami?

Sieci CDN obrazów specjalizują się w przekształcaniu, optymalizacji i przesyłaniu obrazów. Możesz też traktować je jak interfejsy API służące do uzyskiwania dostępu do obrazów używanych w Twojej witrynie i manipulowania nimi. W przypadku obrazów wczytywanych z sieci CDN na temat obrazów adres URL obrazu wskazuje nie tylko, który obraz ma zostać załadowany, ale także parametry takie jak rozmiar, format i jakość. Dzięki temu z łatwością możesz tworzyć różne wersje obrazu do różnych zastosowań.

Sieci CDN obrazów różnią się od skryptów optymalizacji obrazów w czasie kompilacji tym, że w razie potrzeby tworzą nowe wersje obrazów. W rezultacie sieci CDN zwykle lepiej nadają się do tworzenia obrazów, które są mocno dostosowane do każdego klienta niż skrypty kompilacji.

Jak sieci CDN z obrazami wykorzystują adresy URL do wskazania opcji optymalizacji

Adresy URL obrazów używane przez sieci CDN na potrzeby obrazów przekazują ważne informacje o obrazie oraz o przekształceniach i optymalizacji, które należy do niego zastosować. Formaty adresów URL różnią się w zależności od CDN obrazów, ale ogólnie rzecz biorąc, wszystkie mają podobne funkcje. Przyjrzyjmy się kilku najpopularniejszym funkcjom.

Punkt początkowy

Sieć CDN z obrazami może znajdować się w Twojej domenie lub w domenie swojej grafiki CDN. Sieci CDN z obrazami innych firm zwykle oferują możliwość korzystania z domeny niestandardowej za opłatą. Używanie własnej domeny ułatwia później zmianę graficznych sieci CDN, ponieważ nie trzeba zmieniać adresu URL.

W przykładzie powyżej użyto domeny CDN dotyczącej obrazów („example-cdn.com”) ze spersonalizowaną subdomeną, a nie domeną niestandardową.

Obraz

Sieci CDN obrazów można zwykle skonfigurować tak, aby w razie potrzeby automatycznie pobierały obrazy z istniejących lokalizacji. Często jest to możliwe przez umieszczenie pełnego adresu URL istniejącego obrazuw adresie URL obrazu wygenerowanego przez CDN obrazów. Możesz zobaczyć np. taki URL: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. Ten adres URL spowoduje pobranie i zoptymalizowanie obrazu znajdującego się pod adresem https://flowers.com/daisy.jpg.

Innym powszechnie obsługiwanym sposobem przesyłania obrazów do sieci CDN z obrazami jest wysyłanie ich za pomocą żądania HTTP POST do interfejsu API CDN obrazów.

klucz bezpieczeństwa,

Klucz bezpieczeństwa uniemożliwia innym osobom tworzenie nowych wersji Twoich obrazów. Jeśli ta funkcja jest włączona, każda nowa wersja obrazu wymaga unikalnego klucza bezpieczeństwa. Jeśli ktoś spróbuje zmienić parametry adresu URL obrazu, ale nie poda prawidłowego klucza bezpieczeństwa, nie będzie mógł utworzyć nowej wersji. Sieć CDN z obrazami zajmie się generowaniem i śledzeniem kluczy bezpieczeństwa.

Transformacje

Sieci CDN z obrazami oferują dziesiątki, a czasem nawet setki różnych przekształceń obrazów. Te przekształcenia są określane za pomocą ciągu z adresem URL i nie ma żadnych ograniczeń dotyczących używania wielu przekształceń jednocześnie. W kontekście wydajności w internecie najważniejsze przekształcenia obrazu to rozmiar, gęstość pikseli, format i kompresja. To właśnie te przekształcenia często powodują znaczne zmniejszenie rozmiaru obrazu.

Takie ustawienia są zwykle najlepszym ustawieniem dla przekształceń wydajności, więc niektóre sieci CDN na potrzeby obrazów obsługują tryb „automatyczny”. Na przykład zamiast określać, że obrazy mają być przekształcane do formatu WebP, możesz zezwolić sieci CDN na automatyczne wybieranie i wyświetlanie optymalnego formatu. Sygnały, na podstawie których sieć CDN dotycząca obrazów może określać najlepszy sposób przekształcenia obrazu, to m.in.:

• Wskazówki dotyczące klienta (np. szerokość widocznego obszaru, DPR i szerokość obrazu)
• Nagłówek Save-Data
• Nagłówek żądania User-Agent
• przy użyciu interfejsu Network Information API.

Na przykład sieć CDN obrazów może udostępniać pliki AVIF w przeglądarce Chrome, WebP do przeglądarki Edge i JPEG w bardzo starej przeglądarce. Ustawienia automatyczne są popularne, ponieważ pozwalają korzystać z dużej wiedzy sieci CDN na temat obrazów w zakresie optymalizacji obrazów bez konieczności wprowadzania zmian w kodzie w celu wdrożenia nowych technologii, gdy są one obsługiwane przez CDN z obrazami.

Typy sieci CDN z obrazami

Sieci CDN z obrazami można podzielić na 2 kategorie: zarządzane samodzielnie i przez firmy zewnętrzne.

Samodzielnie zarządzane sieci CDN z obrazami

Samodzielnie zarządzane sieci CDN mogą być dobrym rozwiązaniem dla witryn z inżynierami, którzy potrafią obsługiwać własną infrastrukturę.

• Thumbor to najpopularniejsza sieć CDN z samodzielnie zarządzanymi obrazami. Chociaż jest to oprogramowanie typu open source i bezpłatne, ma on mniej funkcji niż większość komercyjnych sieci CDN, a jego dokumentacja jest w pewnym stopniu ograniczona. Wikipedia, Square i 99designs to trzy witryny, które korzystają z Thumbor. Instrukcje konfigurowania znajdziesz w poście Jak zainstalować CDN z obrazem Thumbor.
• Wyobraźnia
• Imagor

Obrazowe sieci CDN innych firm

Sieci CDN z obrazami innych firm udostępniają obrazowe sieci CDN. Dostawcy usług w chmurze odpłatnie udostępniają serwery i inną infrastrukturę – sieci CDN dotyczące obrazów zapewniają optymalizację i dostarczanie obrazów za opłatą. Ze względu na to, że sieci CDN na potrzeby obrazów innych firm obsługują tę technologię, rozpoczęcie korzystania z usługi jest proste i zwykle zajmuje 10–15 minut, choć w przypadku dużej witryny przeprowadzenie pełnej migracji może potrwać znacznie dłużej. Obrazy CDN innych firm są zwykle wyceniane na podstawie kategorii użycia. Większość graficznych sieci CDN oferuje poziomy bezpłatny lub bezpłatny okres próbny, aby umożliwić użytkownikom wypróbowanie ich usług.

Wybieranie sieci CDN na potrzeby obrazów

Istnieje wiele dobrych opcji dla obrazów CDN. Niektóre mają więcej funkcji niż inne, ale wszystkie prawdopodobnie pomogą Ci zaoszczędzić bajty na obrazach i w konsekwencji szybciej wczytywać strony. Przy wyborze sieci CDN na potrzeby obrazów warto też brać pod uwagę nie tylko zestaw funkcji, koszt, obsługę, dokumentację oraz łatwość konfiguracji lub migracji.

Pomocne może być też przetestowanie ich przed podjęciem decyzji. Poniżej znajdziesz ćwiczenia z programowania oraz instrukcje, jak szybko zacząć korzystać z kilku obrazów CDN.

Wpływ na największe wyrenderowanie treści (LCP)

Obrazy są istotną częścią doświadczenia użytkownika na wielu stronach, dlatego mają wpływ na to, jak strona radzi sobie z największym wyrenderowaniem treści. Jeśli zdecydujesz się korzystać z sieci CDN z obrazami, pamiętaj o tych kwestiach:

1. Obrazy wyświetlane z sieci CDN mogą pochodzić z serwera z innej domeny, co wymaga dodatkowego czasu na skonfigurowanie połączenia. W miarę możliwości staraj się używać sieci CDN na potrzeby obrazów, która łączy się z serwerem proxy przez główny punkt początkowy. Dzięki temu nie dodajesz kolejnych źródeł, z którymi przeglądarka będzie się łączyć. Ma to taki sam efekt jak obrazy hostowane w głównym źródle.
2. Rozważ użycie wartości atrybutu fetchpriority o wartości "high" elementu graficznego LCP, aby przeglądarka jak najszybciej zaczęła ładować ten obraz.
3. Jeśli obraz nie jest od razu wykrywalny w początkowym kodzie HTML, rozważ użycie podpowiedzi rel=preload dla obrazu kandydującego do LCP. Pozwoli to przeglądarce na załadowanie go z wyprzedzeniem.
4. Jeśli przekierowanie z innego źródła jest niemożliwe, a dokładny obraz, który zostanie wczytany, będzie widoczny dopiero później podczas wczytywania strony, jak najszybciej skonfiguruj połączenie z siecią CDN na potrzeby obrazów z innej domeny, aby skrócić fazę wczytywania zasobów obrazu kandydującego do sprawdzenia w parametrze LCP strony.

Sieci CDN obrazów to niezbędne narzędzia, które eliminują konieczność ręcznej optymalizacji obrazów. Warto je rozważyć. Istnieją jednak pewne kompromisy, które warto wziąć pod uwagę. Obserwowanie obrazów kandydujących do LCP w witrynie i dodawanie odpowiednich wskazówek może zniwelować dodatkowy czas oczekiwania na te kluczowe żądania.