Sieci dostarczania treści (CDN) doskonale optymalizują obrazy na potrzeby internetu. Przejście na CDN obrazów może przynieść oszczędności na poziomie 40–80% w przypadku rozmiaru pliku obrazu. W większości przypadków CDN może lepiej zoptymalizować obrazy niż skrypt optymalizacji obrazu w czasie kompilacji.
Co to jest sieć CDN dla obrazów?
Sieci CDN obrazów specjalizują się w przekształcaniu, optymalizowaniu i przesyłaniu obrazów. Można je też traktować jako interfejsy API do uzyskiwania dostępu do obrazów używanych w Twojej witrynie i ich modyfikowania. W przypadku obrazów wczytywanych z CDN adres URL obrazu wskazuje nie tylko, który obraz ma zostać wczytany, ale też parametry takie jak rozmiar, format i jakość. Dzięki temu możesz tworzyć różne wersje obrazu na potrzeby różnych zastosowań.
Sieci CDN obrazów różnią się od skryptów optymalizacji obrazów na etapie kompilacji tym, że tworzą nowe wersje obrazów w miarę potrzeby. W rezultacie sieci CDN są zazwyczaj bardziej przydatne do tworzenia obrazów, które są mocno dostosowane do potrzeb poszczególnych klientów, niż skrypty kompilacji.
Jak sieci CDN obrazów używają adresów URL do wskazywania opcji optymalizacji
Adresy URL obrazów używane przez sieci CDN obrazów przekazują ważne informacje o obrazie oraz przekształcenia i optymalizacje, które należy do niego zastosować. Formaty adresów URL różnią się w zależności od używanego CDN obrazów, ale ogólnie rzecz biorąc mają podobne funkcje. Oto kilka najczęstszych funkcji.
Punkt początkowy
Sieć CDN obrazów może działać w Twojej domenie lub domenie Twojej sieci CDN obrazów. Firmy zewnętrzne oferujące CDN obrazów zazwyczaj umożliwiają korzystanie z domeny niestandardowej za opłatą. Korzystanie z własnej domeny ułatwia późniejszą zmianę sieci CDN obrazów, ponieważ nie trzeba będzie zmieniać adresów URL.
W poprzednim przykładzie zamiast domeny niestandardowej użyto domeny CDN obrazu („example-cdn.com”) z spersonalizowaną subdomeną.
Obraz
Sieci CDN obrazów można zwykle skonfigurować tak, aby automatycznie pobierały obrazy z ich bieżących lokalizacji, gdy są potrzebne. Ta funkcja jest często realizowana przez uwzględnienie pełnego adresu URL istniejącego obrazu w adresie URL obrazu wygenerowanego przez sieć CDN. Możesz na przykład zobaczyć adres URL o takiej postaci: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Ten adres URL pobiera i optymalizuje obraz znajdujący się pod adresem https://flowers.com/daisy.jpg.
Żądany format pliku (w tym przykładzie JPG) może nie być taki sam jak zwrócony format pliku obrazu (w tym przykładzie WebP). Nagłówek HTTP content-type informuje przeglądarkę, w jakim formacie jest adres URL, aby mogła go odpowiednio przetworzyć. Może to spowodować zamieszanie, jeśli plik jest zapisany na dysku i używany przez inny program, który oczekuje, że format będzie zgodny z rozszerzeniem pliku.
Innym powszechnie obsługiwanym sposobem przesyłania obrazów do CDN obrazów jest wysyłanie ich w żądaniu HTTP POST do interfejsu API CDN obrazów.
Klucz bezpieczeństwa
Klucz bezpieczeństwa uniemożliwia innym osobom tworzenie nowych wersji Twoich obrazów. Gdy 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 obrazów zajmuje się szczegółami generowania i śledzenia kluczy bezpieczeństwa.
Transformacje
Sieci CDN obrazów oferują dziesiątki, a czasami setki różnych przekształceń obrazów. Te przekształcenia są określone w ciągu adresu URL. Nie ma ograniczeń dotyczących jednoczesnego stosowania wielu przekształceń. W przypadku wydajności w internecie najważniejsze przekształcenia obrazu to rozmiar, gęstość pikseli, format i kompresja. Te przekształcenia są powodem, dla którego przejście na CDN obrazów zwykle powoduje zmniejszenie rozmiaru plików obrazów w witrynie.
Ponieważ zwykle istnieje obiektywnie najlepsze ustawienie wydajności przekształceń, niektóre CDN obrazów obsługują tryb „auto” dla tych przekształceń. Zamiast określać, że obrazy mają być przekształcane do formatu WebP, możesz pozwolić CDN na automatyczne wybieranie i wyświetlanie optymalnego formatu. CDN obrazów może określić najlepszy sposób przekształcenia obrazu, korzystając m.in. z tych sygnałów:
- Wskazówki klienta (np. szerokość widocznego obszaru, DPR i szerokość obrazu).
- Nagłówek
Save-Data - Nagłówek żądania User-Agent
- Network Information API
Na przykład CDN obrazów może wyświetlić format AVIF w przeglądarce Chrome, WebP w przeglądarce Edge, a JPEG w bardzo starej przeglądarce. Ustawienia automatyczne są popularne, ponieważ umożliwiają korzystanie z doświadczenia CDN obrazów w optymalizowaniu obrazów bez konieczności zmiany kodu w celu przyjęcia nowych technologii, gdy CDN obrazów zacznie je obsługiwać.
Typy CDN obrazów
Istnieją 2 główne kategorie CDN-ów obrazów: zarządzane przez siebie i zarządzane przez strony trzecie.
Samodzielnie zarządzane sieci CDN obrazów
Platformy CDN zarządzane samodzielnie mogą być dobrym rozwiązaniem w przypadku witryn, których zespół inżynierski potrafi samodzielnie zarządzać infrastrukturą.
- Thumbor to najpopularniejsza usługa CDN obrazów zarządzana samodzielnie. Jest to rozwiązanie typu open source, które można używać bezpłatnie, ale ma mniej funkcji niż większość komercyjnych CDN-ów, a jego dokumentacja jest nieco ograniczona. Do witryn, które korzystają z thumbor, należą Wikipedia, Square i 99designs. Instrukcje konfiguracji znajdziesz w artykule Jak zainstalować CDN obrazów Thumbor.
- Wyobraźnia
- Imagor
CDN obrazów firm zewnętrznych
Usługi CDN obrazów innych firm są świadczone jako usługa. Podobnie jak dostawcy usług w chmurze udostępniają serwery i inne elementy infrastruktury za opłatą, dostawcy CDN obrazów zapewniają optymalizację i dostarczanie obrazów za opłatą. Ponieważ zewnętrzne sieci CDN obsługują podstawową technologię, zazwyczaj możesz zacząć korzystać z jednej z nich dość szybko, choć pełna migracja dużej witryny może potrwać dłużej. Usługi CDN obrazów innych firm są zwykle płatne w zależności od poziomu wykorzystania. Większość usług CDN obrazów udostępnia bezpłatny poziom lub bezpłatną wersję próbną, aby umożliwić wypróbowanie produktu.
Wybieranie usługi CDN obrazów
Dostępnych jest wiele dobrych sieci CDN obrazów. Niektóre z nich mają więcej funkcji niż inne, ale wszystkie mogą pomóc Ci zaoszczędzić bajty na obrazach, a tym samym przyspieszyć wczytywanie stron. Oprócz zestawów funkcji podczas wybierania sieci CDN na potrzeby obrazów należy wziąć pod uwagę także koszty, obsługę, dokumentację i łatwość konfiguracji lub migracji.
Wpływ na największe wyrenderowanie treści (LCP)
Obrazy są bardzo ważną częścią wrażeń użytkowników w wielu witrynach, dlatego stanowią istotny czynnik w największym pomiarze Largest Contentful Paint. Jeśli zdecydujesz się korzystać z CDN obrazów, pamiętaj o tych kwestiach:
- Obrazy dostarczane przez sieci CDN mogą pochodzić z serwera między domenami, co może wydłużyć czas konfiguracji połączenia witryny. W miarę możliwości użyj CDN obrazów, który działa jako serwer proxy dla pierwotnego źródła, aby nie dodawać dodatkowych źródeł, z którymi przeglądarka ma się łączyć. Ma to taki sam efekt jak hostowanie obrazów na serwerze źródłowym.
- Rozważ użycie wartości atrybutu
fetchpriorityrównej"high"dla elementu obrazu LCP, aby przeglądarka mogła jak najszybciej rozpocząć wczytywanie tego obrazu. - Jeśli obraz nie jest od razu widoczny w pierwotnym kodzie HTML, rozważ użycie
rel=preloadpodpowiedzi dla obrazu kandydującego do LCP, aby przeglądarka mogła go wcześniej załadować. - Jeśli nie możesz użyć serwera proxy w początkowej domenie i przeglądarka nie wie, które zdjęcie ma wczytać, dopóki nie załaduje się strona, jak najszybciej skonfiguruj połączenie z CDN obrazów w wielu domenach, aby skrócić fazę wczytywania zasobów w przypadku potencjalnych obrazów kandydujących do LCP.