Sieci dostarczania treści graficznych

Być może znasz już podstawowe pojęcie sieci dostarczania treści (CDN), czyli rozproszonej, ale połączonej ze sobą sieci. które szybko i sprawnie dostarczają zasoby użytkownikom. Gdy prześlesz plik do dostawcy CDN, zostanie utworzony jego duplikat. w innych węzłach sieci CDN na całym świecie. Gdy użytkownik poprosi o plik, dane zostaną wysłane przez węzeł geograficznie. jak najbliżej użytkownika, co skraca czas oczekiwania. Rozproszony charakter sieci CDN zapewnia też nadmiarowość w przypadku przerw w działaniu sieci lub awarii sprzętu i równoważenia obciążenia w celu łagodzenia gwałtownych skoków natężenia ruchu.

Sieć CDN z obrazami zapewnia wszystkie te korzyści, z jedną kluczową różnicą – możliwości przekształcania optymalizują zawartość obrazu na podstawie ciągów tekstowych użytych do uzyskania dostępu do niego w adresie URL.

Użytkownik prześle do dostawcy kanoniczny obraz w wysokiej rozdzielczości, który wygeneruje adres URL umożliwiający dostęp do niego:

https://res.cloudinary.com/demo/image/upload/sample.jpg

Choć dokładna składnia różni się w zależności od dostawcy, wszystkie sieci CDN związane z obrazami umożliwiają zmianę źródła z wymiarami, kodowaniem i ustawieniami kompresji. Chmurowe, na przykład przeprowadza dynamiczną zmianę rozmiaru elementu przesłany obraz ma taką składnię: h_, po której następuje wysokość liczbowa w pikselach, w_, a następnie szerokość, i c_, która pozwala określić szczegółowe informacje o tym, jak należy skalować lub przyciąć obraz.

Możesz zastosować dowolną liczbę przekształceń, dodając do adresu URL wartości rozdzielone przecinkami przed nazwą pliku i rozszerzeniem. co oznacza, że przesłany obraz można w razie potrzeby manipulować za pomocą funkcji src elementu img, który tego wymaga.

<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">

Przy pierwszym otwarciu przez użytkownika adresu URL zawierającego te przekształcenia nowa wersja obrazu skalowana proporcjonalnie do Wygenerowana i wysłana zostanie szerokość 400 pikseli (w_400). Nowo utworzony plik jest następnie zapisywany w pamięci podręcznej w sieci CDN, dzięki czemu może zostać wysłany. do dowolnego użytkownika, który poprosi o taki sam adres URL, a nie do odtwarzania na żądanie.

Choć nierzadko dostawcy CDN oferują pakiety do tworzenia oprogramowania, który ułatwia zaawansowaną integrację z różnymi stosami technologicznymi. Sam przewidywalny wzorzec adresu URL pozwala nam przekształcić pojedynczy przesłany plik w prawidłowy atrybut srcset bez konieczności używania innych narzędzi dla programistów:

<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ć pożądany poziom kompresji, używając składni, która powinna być znajoma: q_, krótki pod kątem „jakości”, z dopiskiem liczbowym oznaczającym poziom kompresji:

<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg"  alt="…">

Rzadko jednak konieczne jest ręczne dodawanie tych informacji dzięki szeregowi niezwykle przydatnych funkcji jest dostępny przez większość sieci CDN z obrazami: w pełni automatyczną kompresję, kodowanie i negocjowanie treści.

Automatyczna kompresja

Dzięki dostępności obrazów mocy obliczeniowej sieci CDN, które oferują niezwykle zaawansowane funkcje analizy do określania idealnego poziomu kompresji i ustawień kodowania przy użyciu algorytmu, takiego jak ręcznie dostosować kompresję każdego zdjęcia.

Algorytmy te automatyzują decyzje, które pozwalają znaleźć równowagę między rozmiarem pliku a jakością postrzeganą przez widzów, analizując zawartość obrazu zmierzyć oznaki pogorszenia jakości i odpowiednio dostosować ustawienia kompresji. Często przekłada się to na znaczne zmniejszenie w porównaniu z ręcznym podejściem do ustawień kompresji.

Chociaż ten proces może się wydawać skomplikowany, implementacja nie może być znacznie prostsza: w Cloudinary dodanie q_auto w image_URL obrazu włącza tę funkcję:

<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 obrazów określają najnowocześniejsze kodowanie obsługiwane przez przeglądarkę Nagłówki HTTP wysyłane przez przeglądarkę wraz z żądaniami zasobów – w szczególności w nagłówku Accept. Ten nagłówek wskazuje kodowanie, które przeglądarka zrozumie, używając typy mediów, których możemy użyć do wypełniania type. atrybutu <source> elementu <picture>.

Na przykład dodanie parametru f_auto do listy przekształceń obrazów w adresie URL zasobu wyraźnie informuje Cloudinary, zapewnić najbardziej efektywne kodowanie, które przeglądarka potrafi zinterpretować:

<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 zapisuje w pamięci podręcznej wynik dla wszystkich pozostałych użytkowników z tym samym kodowaniem i obsługi przeglądarek. Ta odpowiedź zawiera nagłówek Content-Type jednoznacznie informuje przeglądarkę o kodowaniu pliku, niezależnie od jego rozszerzenia. Mimo że użytkownik korzystający z nowoczesnej przeglądarki żądaniam pliku, którego numer kończy się cyframi .jpg, wraz z nagłówkiem informującym o tym, że format AVIF jest obsługiwany, wyśle plik w formacie AVIF z wyraźną instrukcją, jak potraktować go jako plik AVIF.

Interfejs CDN.

Rezultatem jest proces, który nie tylko eliminuje konieczność tworzenia alternatywnych kodowania plików i ręcznego dostosowywania ustawień kompresji. (lub utrzymuje system, który wykonuje te zadania za Ciebie), ale nie ma potrzeby używania atrybutu <picture> i atrybutu type, aby skutecznie i dostarczać je użytkownikom. Nawet jeśli używasz składni srcset i sizes, użytkownicy mogą nadal wyświetlać obrazy zakodowane w taki sposób, np. AVIF, wracając do formatu WebP (lub JPEG-2000 w przypadku samej przeglądarki Safari) i powracając do najbardziej rozsądnego starszego kodowania.

Wady korzystania z graficznej sieci CDN związane z obrazami są bardziej logistyczne niż techniczne, a główne są związane z kosztami. Choć sieci CDN z obrazami często oferują rozbudowane, bezpłatne abonamenty do użytku osobistego; generowanie zasobów graficznych wymaga przepustowości i miejsca na dane do przesyłania oraz przetwarzania serwer do przekształcania obrazów i dodatkowe miejsce na wyniki przekształceń zapisane w pamięci podręcznej, więc zaawansowane zastosowania i aplikacje z dużą intensywnością użytkowania mogą wymagać płatnego abonamentu.