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.
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.