Być może znasz już podstawową koncepcję sieci dostarczania treści (CDN), czyli sieci rozproszonych, ale połączonych ze sobą serwerów, które szybko i sprawnie dostarczają zasoby użytkownikom. Po przesłaniu pliku do dostawcy CDN powstanie jego duplikat w innych węzłach sieci CDN na całym świecie. Gdy użytkownik wysyła żądanie pliku, dane są wysyłane przez węzeł geograficznie najbliżej tego użytkownika, co skraca czas oczekiwania. Rozproszona natura sieci CDN zapewnia również nadmiarowość w przypadku przerw w działaniu sieci lub awarii sprzętu, a także równoważenie obciążenia w celu łagodzenia gwałtownych skoków natężenia ruchu.
sieci CDN na potrzeby obrazów zapewnia wszystkie te korzyści, z jedną zasadniczą różnicą: możliwość przekształcania i optymalizowania zawartości obrazu na podstawie ciągów znaków, za pomocą których adres URL uzyskiwał do niego dostęp.
Użytkownik przesyła do dostawcy kanoniczny obraz w wysokiej rozdzielczości, co spowoduje wygenerowanie adresu URL umożliwiającego dostęp do niego:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Choć dokładna składnia jest różna w zależności od dostawcy, to co najmniej wszystkie sieci CDN dotyczące obrazów umożliwiają zmianę wymiarów, kodowania i kompresji obrazu źródłowego. Zachmurzenie – na przykład dynamiczne zmiany rozmiaru przesłanego obrazu przebiegają w ten sposób: h_, po którym następuje wysokość liczbowa w pikselach, w_, szerokość, oraz wartość c_, która pozwala określić szczegółowe informacje o skalowaniu lub przycinaniu obrazu.
Możesz zastosować dowolną liczbę przekształceń, dodając do adresu URL wartości rozdzielone przecinkami przed nazwą pliku i rozszerzeniem. Dzięki temu w razie potrzeby możesz modyfikować przesłany obraz w elemencie src elementu img, który go żąda.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
Przy pierwszym otwarciu adresu URL zawierającego te przekształcenia przez użytkownika generowana jest i wysyłana jest nowa wersja obrazu przeskalowana proporcjonalnie do szerokości 400 pikseli (w_400). Ten nowo utworzony plik jest przechowywany w pamięci podręcznej w sieci CDN, dzięki czemu można go wysłać każdemu użytkownikowi, który prosi o ten sam adres URL, zamiast odtwarzać go na żądanie.
Chociaż dostawcy obrazów CDN często udostępniają pakiety do tworzenia oprogramowania, które ułatwiają zaawansowane wykorzystanie i integrację z różnymi stosami technologicznymi, to już ten przewidywalny wzorzec adresu URL pozwala nam łatwo przekształcić pojedynczy przesłany plik w funkcjonalny atrybut srcset bez potrzeby korzystania z innych narzędzi programistycznych:
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
Możemy ręcznie określić żądany poziom kompresji, używając znanej nam składni: q_ (skrót od „jakości”) i liczbowy skrót oznaczający poziom kompresji:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Rzadko jednak trzeba podawać te informacje ręcznie dzięki zestawowi niezwykle zaawansowanych funkcji dostępnych w większości sieci CDN przedstawiających obrazy: w pełni automatycznej kompresji, kodowania i negocjowania treści.
Automatyczna kompresja
Sieci CDN z obrazami obliczeniowymi mają do dyspozycji niezwykle zaawansowaną funkcję: analizowanie zawartości obrazu w celu określenia idealnego poziomu kompresji i ustawień kodowania za pomocą algorytmów.
Algorytmy te automatyzują decyzje w zakresie równoważenia rozmiaru pliku i jakości percepcyjnej, analizując zawartość obrazów pod kątem wymiernych oznak degradacji i odpowiednio dostosowując ustawienia kompresji. Często oznacza to znaczne zmniejszenie rozmiaru plików w porównaniu z uniwersalnym, ręcznym podejściem do ustawień kompresji.
Choć ten proces może wydawać się skomplikowany, implementacja nie może być prostsza. W przypadku Cloudinary dodanie q_auto w adresie URL obrazu umożliwia korzystanie z tej funkcji:
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
Automatyczne kodowanie i negocjowanie treści
Po otrzymaniu żądania obrazu sieci CDN na potrzeby obrazów określają najnowocześniejsze kodowanie obsługiwane przez przeglądarkę za pomocą nagłówków HTTP wysyłanych przez przeglądarkę razem z żądaniami zasobów, a w szczególności z nagłówka Accept. Ten nagłówek wskazuje kodowanie rozpoznawane przez przeglądarkę, korzystając z tych samych typów multimediów, jakich używamy do wypełnienia atrybutu type elementu <source> elementu <picture>.
Na przykład dodanie parametru f_auto do listy przekształceń obrazu w adresie URL zasobu wyraźnie informuje Cloudinary, by dostarczać najbardziej efektywne kodowanie, które przeglądarka może zrozumieć:
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
Następnie serwer generuje wersję obrazu o tym kodowaniu i zapisze wynik w pamięci podręcznej dla wszystkich kolejnych użytkowników przy tym samym poziomie obsługi przeglądarek. Odpowiedź ta zawiera nagłówek Content-Type, który wyraźnie informuje przeglądarkę o kodowaniu pliku, niezależnie od jego rozszerzenia. Mimo że użytkownik korzystający z nowoczesnej przeglądarki wysyła żądanie do pliku z końcówką .jpg, żądanie otrzymuje nagłówek z informacją, że format AVIF jest obsługiwany. Serwer wysyła plik zakodowany w formacie AVIF z jawną instrukcją traktowania go jako pliku AVIF.
W efekcie nie tylko nie musisz tworzyć naprzemiennych kodowanych plików i ręcznie dostosowywać ustawień kompresji (lub utrzymywać system, który wykonuje te zadania za Ciebie), ale nie musisz używać atrybutów <picture> i type do skutecznego dostarczania plików użytkownikom. Dlatego użycie samej składni srcset i sizes może nadal dostarczać użytkownikom obrazy zakodowane w taki sposób, jak np. AVIF, z powrotem do WebP (lub JPEG-2000 w przypadku samej przeglądarki Safari), z powrotem do najbardziej sensownego starszego kodowania.
Wady korzystania z sieci CDN z obrazami są bardziej logistyczne niż techniczne, a główne to koszty. Sieci CDN z obrazami często oferują niezawodne, bezpłatne plany do użytku osobistego, jednak generowanie zasobów graficznych wymaga przepustowości i miejsca na dane na potrzeby przesyłania, przetwarzania na serwerze w celu przekształcenia obrazów oraz dodatkowej przestrzeni na wyniki przekształcania w pamięci podręcznej. Dlatego zaawansowane zastosowania i aplikacje o dużym ruchu mogą wymagać płatnego abonamentu.