Sieci dostarczania treści graficznych (CDN) doskonale radzą sobie z optymalizacją obrazów dla w sieci. Przełączenie witryny na obrazową sieć CDN może przynieść Oszczędność 40–80% na zdjęciach i w większości przypadków mogą optymalizować obrazy lepiej niż skrypt optymalizacji obrazów w czasie kompilacji.
Czym jest sieć CDN na potrzeby obrazów?
Sieci CDN obrazów specjalizują się w przekształcaniu, optymalizacji i wyświetlaniu obrazów. Ty mogą być również interfejsami API służącymi do uzyskiwania dostępu do obrazów i manipulowania nimi. w Twojej witrynie. W przypadku obrazów wczytywanych z graficznej sieci CDN adres URL obrazu wskazuje, że nie tylko wybrać obraz do wczytania, ale też określić rozmiar, format i jakość. Dzięki temu możesz tworzyć odmiany obrazu do różnych zastosowań.
Sieci CDN z obrazami różnią się od skryptów optymalizacji obrazów w czasie kompilacji tym, że i w razie potrzeby tworzyć nowe wersje obrazów. W związku z tym sieci CDN są zwykle lepiej nadaje się do tworzenia obrazów, które są mocno dostosowane do indywidualnych potrzeb niż skrypt kompilacji.
Jak sieci CDN obrazów wykorzystują adresy URL do wskazywania opcji optymalizacji
Adresy URL obrazów używane przez sieci CDN związane z obrazami 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żywanej sieci CDN na potrzeby obrazów, ale ogólnie rzecz biorąc, wszystkie podobne funkcje. Poniżej przedstawiamy niektóre z najczęściej używanych funkcji.
Punkt początkowy
Graficzna sieć CDN może znajdować się w Twojej domenie lub w domenie Twojej sieci CDN z obrazami. Sieci CDN innych firm oferują zwykle możliwość użycia domeny niestandardowej opłaty. Korzystanie z własnej domeny ułatwia późniejsze przełączanie sieci CDN z obrazami, ponieważ nie trzeba będzie wprowadzać żadnych zmian w adresie URL.
W poprzednim przykładzie użyto domeny CDN obrazu („example-cdn.com”) z atrybutem spersonalizowaną subdomenę zamiast domeny niestandardowej.
Obraz
Sieci CDN obrazów można zwykle skonfigurować tak, aby automatycznie pobierały obrazy ze swoich
w istniejących lokalizacjach, gdy są potrzebne. Wykorzystanie tej funkcji jest często możliwe
łącznie z pełnym adresem URL istniejącego obrazu w adresie URL obrazu.
generowanych przez CDN obrazu. Możesz na przykład zobaczyć adres URL, który wygląda tak:
ten tekst: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Ten adres URL pozwoliłby pobrać i zoptymalizować 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
format pliku graficznego (w tym przykładzie WebP). Protokół HTTP content-type
informuje przeglądarkę, w jakim formacie jest adres URL, by mogła go przetworzyć
w odpowiedni sposób. Może to powodować dezorientację, jeśli plik jest zapisany na dysku i jest używany przez
innego programu, który oczekuje, że format będzie zgodny z rozszerzeniem pliku.
Innym powszechnie obsługiwanym sposobem przesyłania obrazów do sieci CDN związanej z obrazami jest wysyłanie ich w żądaniu HTTP POST do interfejsu API CDN obrazu.
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 niepowtarzalnego klucz bezpieczeństwa.
Jeśli ktoś próbuje zmienić parametry adresu URL obrazu, ale nie poda prawidłowego klucza bezpieczeństwa, nie będzie mógł utworzyć nowego wersji. Sieć CDN obrazu dba o szczegóły generowania i śledzenia kluczy bezpieczeństwa.
Transformacje
Sieci CDN obrazów oferują dziesiątki, a czasem nawet setki obrazów przekształcenia danych. Te przekształcenia są określone w ciągu adresu URL, nie ma ograniczeń dotyczących używania wielu przekształceń jednocześnie. Z punktu widzenia wydajności witryny najważniejsze przekształcenia obrazu to rozmiar, piksel gęstości, formatu i kompresji. Dzięki tym przekształceniom przejście na sieć CDN z obrazami zazwyczaj zmniejsza pliki graficzne w witrynie.
Ponieważ zwykle istnieje obiektywne najlepsze ustawienie skuteczności przekształcenia, niektóre sieci CDN związane z obrazami obsługują „automatyczne” tryb dla tych przekształcenia danych. Na przykład zamiast określać, że obrazy mają zostać przekształcone na format WebP, możesz pozwolić sieci CDN na automatyczne wybieranie i wyświetlanie optymalny format. Sieć CDN na potrzeby obrazów może określić najlepszy sposób przekształcenia obrazu na podstawie m.in. tych sygnałów:
- Wskazówki dla klientów (na przykład szerokość widocznego obszaru, DPR i szerokość obrazu).
Save-Datanagłówek- Klient użytkownika nagłówek żądania
- Network Information API
Na przykład sieć CDN obrazu może udostępniać treści AVIF w przeglądarce Chrome, a WebP – do Edge i plik JPEG do bardzo starej wersji. Ustawienia automatyczne są popularne, ponieważ pozwalają wykorzystać obrazowe sieci CDN w optymalizacji obrazów musisz zmienić kod, aby wdrożyć nowe technologie po uruchomieniu sieci CDN z obrazami. którzy je wspierają.
Typy sieci CDN na potrzeby obrazów
Sieci CDN z obrazami dzielą się na 2 główne kategorie: samodzielnie zarządzane zarządzane przez osoby trzecie.
Sieci CDN z obrazami zarządzanymi samodzielnie
Samodzielnie zarządzane sieci CDN mogą być dobrym rozwiązaniem dla witryn z personelem technicznym, a także radzą sobie z zarządzaniem własną infrastrukturą.
- Thumbor to najpopularniejsza aplikacja do samodzielnego zarządzania CDN obrazu. Jest to usługa typu open source i bezpłatna, ale ma mniej funkcji niż z większości komercyjnych sieci CDN, a jej dokumentacja jest nieco ograniczona. Witryny, które używają miniatur, to m.in. Wikipedia, Kwadrat, i 99designs. Zobacz, jak zainstalować CDN na obraz z aplikacji Thumbor w przypadku witryny jak go skonfigurować.
- Wyobraźnia
- Obraz
Sieci CDN innych firm z obrazami
Sieci CDN innych firm z obrazami oferują usługi CDN związane z obrazami. Podobnie jak dostawcy usług w chmurze dostarczają za opłatą serwery i inną infrastrukturę, sieci CDN związane z obrazami optymalizację i dostarczanie obrazów za opłatą. Ponieważ obrazy zewnętrzne Sieci CDN utrzymują dotychczasową technologię. Zwykle możesz zacząć od jednej dość szybko, chociaż pełna migracja w przypadku dużej witryny dłuższą. Sieci CDN dla obrazów innych firm są zwykle wyceniane na podstawie poziomów wykorzystania, większość sieci CDN z obrazami oferującymi poziom bezpłatny lub bezpłatny okres próbny i produktu.
Wybierz graficzne CDN
Istnieje wiele dobrych opcji związanych z graficznymi sieciami CDN. Niektóre mają więcej funkcji niż inne, ale każdy z nich pozwala na zaoszczędzenie bajtów na zdjęciach i w efekcie wczytywania strony. Oprócz zestawów cech, inne czynniki, które należy wziąć pod uwagę przy wyborze obraz CDN obejmuje koszty, pomoc, dokumentację oraz łatwość konfiguracji lub migracji.
Wpływ na największe wyrenderowanie treści (LCP)
Obrazy są istotną częścią wielu stron internetowych, dlatego mają jest ważnym elementem największego wyrenderowania treści w witrynie. Oto jeśli zdecydujesz się korzystać z graficznej sieci CDN, pamiętaj o kilku kwestiach:
- Obrazy wyświetlane z sieci CDN mogą pochodzić z serwera z innej domeny, który może wydłuż czas konfiguracji połączenia z witryną. W miarę możliwości spróbuj użyć obrazu CDN, które pośredniczy w pierwotnym punkcie początkowym, więc nie dodajesz kolejnych punktów początkowych który ma się połączyć. Efekt jest taki sam jak w przypadku obrazów hostowanych samodzielnie względem pierwotnego pochodzenia.
- Rozważ użycie wartości atrybutu
fetchpriorityo wartości"high"w elemencie obrazu LCP, aby przeglądarka mogła jak najszybciej zacząć ładować ten obraz jak to tylko możliwe. - Jeśli obrazu nie można od razu znaleźć w początkowym kodzie HTML, rozważ użycie
rel=preloadwskazówkę dotyczącą obrazu kandydata LCP, by przeglądarka mogła wczytać go przed obecnie się znajdujesz. - Jeśli nie możesz połączyć się przez serwer proxy z serwera proxy, a przeglądarka nie ustali, który obraz do późniejszego wczytania strony, jak najszybciej skonfiguruj połączenie z siecią CDN dla obrazu z innej domeny aby skrócić fazę wczytywania zasobów potencjalnych obrazów kandydujących do LCP.