Sieci dostarczania treści (CDN) obrazów doskonale nadają się do optymalizowania obrazów pod kątem internetu. Przejście na sieć CDN obrazów może przynieść 40–80% oszczędności w rozmiarze pliku graficznego, a w większości przypadków może zoptymalizować obrazy lepiej niż skrypt optymalizacji obrazów w czasie kompilacji.
Czym jest sieć CDN obrazów?
Sieci CDN obrazów specjalizują się w przekształcaniu, optymalizowaniu i dostarczaniu obrazów. Możesz je też traktować jako interfejsy API umożliwiające dostęp do obrazów używanych w witrynie i manipulowanie nimi. W przypadku obrazów wczytywanych z sieci 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ć warianty obrazu do różnych zastosowań.
Sieci CDN obrazów różnią się od skryptów optymalizacji obrazów w czasie kompilacji tym, że tworzą nowe wersje obrazów w razie potrzeby. W rezultacie sieci CDN są zwykle lepiej dostosowane do tworzenia obrazów, które są mocno dostosowane do indywidualnych 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 zawierają ważne informacje o obrazie oraz o przekształceniach i optymalizacjach, które należy do niego zastosować. Formaty adresów URL różnią się w zależności od używanej sieci CDN obrazów, ale ogólnie wszystkie mają podobne funkcje. Oto niektóre z najpopularniejszych funkcji.
Punkt początkowy
Sieć CDN obrazów może znajdować się w Twojej domenie lub w domenie sieci CDN obrazów. Zewnętrzne sieci CDN obrazów zwykle oferują opcję korzystania z własnej domeny za opłatą. Używanie 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 użyto domeny sieci CDN obrazów („example-cdn.com”) ze spersonalizowaną subdomeną zamiast własnej domeny.
Obraz
Sieci CDN obrazów można zwykle skonfigurować tak, aby automatycznie pobierały obrazy z ich dotychczasowych lokalizacji, gdy są potrzebne. Można to osiągnąć, umieszczając pełny adres URL istniejącego obrazu w adresie URL obrazu wygenerowanego przez sieć CDN obrazów. Możesz na przykład zobaczyć adres URL, który wygląda tak: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Ten adres URL pobierze i zoptymalizuje obraz, który znajduje 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 przykładzie WebP). Nagłówek HTTP content-type informuje przeglądarkę o formacie adresu URL, dzięki czemu może ona odpowiednio przetworzyć adres URL. Może to powodować nieporozumienia, jeśli plik zostanie zapisany na dysku i będzie 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 sieci CDN jest wysyłanie ich w żądaniu POST HTTP do interfejsu API sieci CDN.
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 zabezpieczeń, 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 w niektórych przypadkach setki różnych przekształceń obrazów. Te przekształcenia są określone w ciągu adresu URL i nie ma żadnych ograniczeń dotyczących używania wielu przekształceń jednocześnie. 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 sieć CDN obrazów zwykle zmniejsza rozmiar plików graficznych w witrynie.
Zwykle istnieje obiektywnie najlepsze ustawienie przekształceń zwiększających wydajność, dlatego niektóre sieci CDN obrazów obsługują tryb „auto” dla tych przekształceń. Zamiast na przykład określać, że obrazy mają być przekształcane do formatu WebP, możesz pozwolić sieci CDN na automatyczne wybieranie i wyświetlanie optymalnego formatu. Sieć CDN obrazów 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
- Network Information API
Na przykład sieć CDN obrazów może wyświetlać AVIF w przeglądarce Chrome, WebP w przeglądarce Edge i JPEG w bardzo starej przeglądarce. Ustawienia automatyczne są popularne, ponieważ pozwalają korzystać z wiedzy specjalistycznej sieci CDN obrazów w zakresie optymalizacji obrazów bez konieczności zmiany kodu w celu dostosowania go do nowych technologii, gdy sieć CDN obrazów zacznie je obsługiwać.
Typy sieci CDN obrazów
Istnieją 2 główne kategorie sieci CDN do obsługi obrazów: zarządzane samodzielnie i zarządzane przez firmę zewnętrzną.
Samodzielnie zarządzane sieci CDN obrazów
Samodzielnie zarządzane sieci CDN mogą być dobrym wyborem w przypadku witryn, których personel techniczny jest w stanie samodzielnie utrzymywać infrastrukturę.
- Thumbor to najpopularniejsza samodzielnie zarządzana sieć CDN do obsługi obrazów. Jest to rozwiązanie open source, z którego można korzystać bezpłatnie, ale ma mniej funkcji niż większość komercyjnych sieci CDN, a jego dokumentacja jest nieco ograniczona. Z usługi thumbor korzystają m.in. Wikipedia, Square i 99designs. Instrukcje konfiguracji znajdziesz w artykule Jak zainstalować sieć CDN obrazów Thumbor.
- Imaginary
- Imagor
Sieci CDN obrazów innych firm
Zewnętrzne sieci CDN obrazów udostępniają sieci CDN obrazów jako usługę. Podobnie jak dostawcy chmury udostępniają serwery i inną infrastrukturę za opłatą, sieci CDN obrazów zapewniają optymalizację i dostarczanie obrazów za opłatą. Sieci CDN obrazów innych firm utrzymują podstawową technologię, więc zwykle można zacząć z nich korzystać dość szybko, chociaż pełna migracja dużej witryny może potrwać dłużej. Sieci CDN obrazów innych firm są zwykle wyceniane na podstawie poziomów wykorzystania, przy czym większość sieci CDN obrazów oferuje poziom bezpłatny lub bezpłatny okres próbny, aby umożliwić wypróbowanie usługi.
Wybieranie sieci CDN obrazów
Istnieje wiele dobrych opcji sieci CDN do obsługi obrazów. Niektóre mają więcej funkcji niż inne, ale wszystkie pomogą Ci zmniejszyć rozmiar obrazów, a tym samym przyspieszyć wczytywanie stron. Oprócz zestawów funkcji przy wyborze sieci CDN obrazów należy wziąć pod uwagę koszt, pomoc, dokumentację oraz łatwość konfiguracji lub migracji.
Wpływ na największe wyrenderowanie treści (LCP)
Obrazy są kluczowym elementem wrażeń użytkowników w wielu witrynach, dlatego mają duży wpływ na największe wyrenderowanie treści. Jeśli zdecydujesz się na korzystanie z sieci CDN do obsługi obrazów, pamiętaj o kilku kwestiach:
- Obrazy wyświetlane z sieci CDN mogą pochodzić z serwera współdzielonego, co może wydłużyć czas konfiguracji połączenia z witryną. Jeśli to możliwe, spróbuj użyć sieci CDN obrazów, która przekazuje dane przez główne źródło, aby nie dodawać dodatkowych źródeł, z którymi przeglądarka musi się połączyć. Ma to taki sam efekt jak samodzielne hostowanie obrazów w głównym źródle.
- Rozważ użycie wartości atrybutu
fetchpriorityo wartości"high"w elemencie obrazu LCP, aby przeglądarka mogła jak najszybciej rozpocząć wczytywanie tego obrazu. - Jeśli obraz nie jest od razu wykrywalny w początkowym kodzie HTML, rozważ użycie wskazówki
rel=preloaddla obrazu kandydującego do LCP, aby przeglądarka mogła go wczytać z wyprzedzeniem. - Jeśli nie możesz użyć serwera proxy przez źródło, a przeglądarka nie będzie wiedzieć, który obraz wczytać, dopóki nie nastąpi wczytanie strony, jak najszybciej skonfiguruj połączenie z siecią CDN obrazów współdzielenia, aby skrócić fazę wczytywania zasobów w przypadku potencjalnych obrazów kandydujących do LCP.