Sieci dostarczania treści graficznych (CDN) doskonale nadają się do optymalizacji obrazów pod kątem wyświetlania w internecie. Przekształcenie witryny na sieć CDN z obrazami może przynieść 40–80% oszczędności w rozmiarze pliku obrazu i w większości przypadków pozwala to lepiej zoptymalizować obrazy niż skrypt optymalizacji obrazów w czasie kompilacji.
Czym jest sieć CDN z obrazami?
Sieci CDN z obrazami specjalizują się w przekształcaniu, optymalizacji i wyświetlaniu obrazów. Możesz je też traktować jak interfejsy API do uzyskiwania dostępu do obrazów używanych w witrynie i modyfikowania ich. 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 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 tworzą w razie potrzeby nowe wersje obrazów. W rezultacie sieci CDN zwykle lepiej nadają się do tworzenia obrazów, które są mocno dostosowane do indywidualnych klientów niż skrypty kompilacji.
Jak sieci CDN z obrazami wykorzystują adresy URL do wskazania opcji optymalizacji
Adresy URL obrazów używane przez sieci CDN 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 używanej sieci CDN z obrazami, ale zasadniczo wszystkie mają podobne funkcje. Oto kilka najczęstszych funkcji.
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życie własnej domeny ułatwia późniejsze przełączanie obrazów CDN, ponieważ nie trzeba zmieniać adresu URL.
W poprzednim przykładzie użyto domeny CDN dotyczącej obrazów („example-cdn.com”) ze spersonalizowaną subdomeną zamiast domeny niestandardowej.
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 w adresie URL obrazu wygenerowanego przez CDN obrazów pełnego adresu URL istniejącego obrazu. 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.
Żądany format pliku (w 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 mógł on prawidłowo go przetworzyć. Może to być mylące, jeśli plik został zapisany na dysku i używany przez inny program, który oczekuje, że format pliku jest zgodny z rozszerzeniem pliku.
Innym powszechnie obsługiwanym sposobem przesyłania obrazów do CDN obrazów jest wysłanie ich w żądaniu POST HTTP 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. Obraz CDN odpowiada za generowanie i śledzenie kluczy bezpieczeństwa.
Transformacje
Sieci CDN z obrazami udostępniają dziesiątki, a czasem nawet setki różnych przekształceń obrazów. Te przekształcenia są określone w ciągu adresu URL i nie ma ograniczeń w korzystaniu z wielu przekształceń jednocześnie. Jeśli chodzi o wydajność internetu, najważniejsze przekształcenia obrazu to rozmiar, gęstość pikseli, format i kompresja. To dlatego przejście na CDN z obrazami zwykle zmniejsza rozmiar plików z obrazami w witrynie.
Zwykle istnieje obiektywnie najlepsze ustawienie przekształcania wydajności, dlatego niektóre sieci CDN z obrazami obsługują tryb „auto” w przypadku tych przekształceń. 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. Sieć CDN z obrazami może określić najlepszy sposób przekształcenia obrazu, korzystając m.in. z tych sygnałów:
- 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ć format AVIF w przeglądarce Chrome, WebP w przeglądarce Edge i JPEG w bardzo starej przeglądarce. Ustawienia automatyczne są popularne, ponieważ umożliwiają wykorzystanie doświadczenia sieci CDN z obrazami w zakresie optymalizacji obrazów bez konieczności wprowadzania w kodzie nowych technologii nowych technologii, gdy sieć CDN obrazów zacznie je obsługiwać.
Typy sieci CDN z obrazami
Istnieją 2 główne kategorie obrazów CDN: samodzielnie zarządzane i zarządzane 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 czują się pewnie przy obsłudze własnej infrastruktury.
- Thumbor to najpopularniejsza samodzielnie zarządzana sieć CDN z obrazami. To rozwiązanie typu open source i bezpłatne, ale ma mniej funkcji niż większość komercyjnych sieci CDN, a jego dokumentacja jest nieco ograniczona. kciukami są m.in. Wikipedia, Square i 99designs. Instrukcje konfigurowania znajdziesz w artykule Instalowanie CDN obrazu Thumbor.
- Wyobraźnia
- Imagor
Obrazowe sieci CDN innych firm
Sieci CDN z obrazami innych firm udostępniają obrazowe sieci CDN. Tak samo jak dostawcy usług w chmurze odpłatnie udostępniają serwery i inną infrastrukturę, również sieci CDN na potrzeby obrazów zapewniają optymalizację i dostarczanie obrazów za opłatą. Sieci CDN z obrazami innych firm obsługują podstawową technologię, więc można zacząć z niej korzystać dość szybko, ale w przypadku dużej witryny migracja może potrwać dłużej. Obrazy CDN innych firm są zwykle wyceniane na podstawie kategorii użycia. Większość obrazów CDN udostępnia poziom bezpłatny lub bezpłatny okres próbny, aby można było wypróbować produkty.
Wybierz sieć CDN z obrazami
Istnieje wiele dobrych opcji dla obrazów CDN. Niektóre mają więcej funkcji niż inne, ale każda z nich pomaga zaoszczędzić bajty na obrazach, a tym samym szybciej wczytywać strony. Przy wybieraniu sieci CDN na potrzeby obrazów weź pod uwagę nie tylko zestaw funkcji, koszt, obsługę, dokumentację oraz łatwość konfiguracji lub migracji.
Wpływ na największe wyrenderowanie treści (LCP)
Obrazy odgrywają ważną rolę w korzystaniu z wielu witryn, więc mają duży wpływ na największe wyrenderowanie treści. Jeśli zdecydujesz się korzystać z sieci CDN z obrazami, pamiętaj o tych kwestiach:
- Obrazy wyświetlane z sieci CDN mogą pochodzić z serwera z innej domeny, co może wydłużyć czas konfigurowania połączenia z witryną. W miarę możliwości staraj się używać sieci CDN na potrzeby obrazów, która przesyła serwery proxy przez główne źródło. Dzięki temu nie dodajesz kolejnych źródeł, z którymi przeglądarka może się połączyć. Działa to tak samo jak obrazy hostowane w głównym źródle.
- Rozważ użycie wartości atrybutu
fetchpriorityo wartości"high"elementu graficznego LCP, aby przeglądarka jak najszybciej zaczęła ładować ten obraz. - Jeśli obrazu nie można od razu wykryć w początkowym kodzie HTML, możesz użyć podpowiedzi
rel=preloaddla obrazu kandydującego do LCP, aby przeglądarka mogła go z wyprzedzeniem wczytać. - Jeśli nie możesz połączyć się przez serwer proxy przez punkt początkowy i przeglądarka dowie się, który obraz wczytać, dopiero później podczas wczytywania strony, jak najszybciej skonfiguruj połączenie z siecią CDN z obrazami z innej domeny, aby skrócić fazę wczytywania zasobów dla potencjalnych obrazów kandydujących do LCP.