Optymalizacja obrazu jest, według Lighthouse, jednym z najczęstszych problemów związanych ze słabą szybkością i wydajnością witryny.

Możliwe, że niezoptymalizowane obrazy spowalniają ładowanie strony o ponad 9 sekund, a w niektórych przypadkach nawet bardziej.

Wolne strony prowadzą do większego współczynnika odrzuceń i niższego pozycjonowania w SERP, co w zamian oznacza mniejszy ruch i mniej płacących klientów.

Co obejmuje optymalizacja obrazu?

Optymalizacja wszystkich obrazów na Twojej stronie to bardzo złożona praca, która wymaga specjalistycznej wiedzy i kilku godzin, aby zrobić to dobrze.

Wtyczki mogą pomóc zaoszczędzić trochę czasu, ale mogą również uszkodzić całą strukturę witryny i trwale usunąć niektóre multimedia, jeśli nie są prawidłowo obsługiwane.

Aby zobaczyć, dlaczego uważamy to za złożone zadanie, oto 20-punktowa lista kontrolna tego, co Cloudimage uważa za niezbędne do prawidłowej optymalizacji obrazu:

1. Włącz dostawę CDN
2. Zoptymalizuj TTFB
3. Użyj widoku produktu 360 stopni
4. Upewnij się, że Twoje obrazy są responsywne
5. Prawidłowo zmień rozmiar obrazów
6. Użyj odpowiedniego formatu obrazu
7. Kompresuj obrazy
8. Zoptymalizuj atrybuty alt
9. Wyraźnie podpisuj zdjęcia
10. Zadbaj o kąty swoich produktów
11. Dowiedz się, jak mieszać kolory
12. Twórz wizualizacje połączone z emocjami
13. Użyj odpowiedniego tła produktu
14. Zoptymalizuj swoje miniatury
15. Użyj mapy witryny z obrazami
16. Zastosuj podpróbkowanie chromatyczne
17. Obrazy niekrytyczne ładowane z opóźnieniem
18. Wdróż duszki obrazu
19. Rozpocznij buforowanie zasobów graficznych
20. Wstępnie wczytuj krytyczne zasoby graficzne

Z technicznego punktu widzenia najważniejsze punkty z powyższej listy to zmiana rozmiaru, optymalizacja formatu, Lazy load, kompresja obrazu, responsywność i dostarczanie CDN.

Jeśli masz, powiedzmy, 11.000 zdjęć na swojej stronie.

Ile czasu zajmie zakończenie ich optymalizacji?

A teraz wyobraź sobie, że możesz to zrobić automatycznie!

To właśnie robi Cloudimage.

Możesz zbiorczo przesłać wszystkie obrazy za pomocą naszego oprogramowania, a zostaną one automatycznie spieniężone i przesłane do chmury.

Potem przychodzi optymalizacja.

Zmiana rozmiaru obrazu

Serwery zmieniające rozmiar Cloudimage, zlokalizowane w trzech centrach danych na całym świecie (Kanada, Francja i Singapur) pobiorą oryginalny obraz z adresu origin_image_url, przekształcą go w oparciu o parametry operacji i filtrowania, a na koniec wyświetlą go na Twojej stronie internetowej lub aplikacji mobilnej za pomocą rakiety -szybki CDN.

Przykład z oryginalnym obrazem hostowanym na Twoim serwerze internetowym, zasobniku Amazon S3 lub innym magazynie dostępnym przez HTTP.

Gdy określisz zarówno szerokość, jak i wysokość, oryginalne proporcje obrazu mogą zostać zignorowane lub zachowane. Możesz także dodać wypełnienie do obrazu. Cloudimage zapewnia następujące tryby zmiany rozmiaru:

Przyciąć

Zachowuje proporcje obrazu przycinając obraz do określonej szerokości i wysokości.

Pasować

Zmienia rozmiar obrazu, zachowując proporcje, dodając wypełnienie, aby spełnić żądane wymiary.

Oprawiony

Próbuje zmienić rozmiar obrazu, zachowując proporcje. Podobny krój, ale bez wyściółki.

Pokrywa

Zmienia rozmiar obrazu do podanej szerokości i wysokości, ignorując oryginalne proporcje obrazu.

Obracać się

Obraca obraz o określony kąt, przeciwnie do ruchu wskazówek zegara

Przycinać

Usuwa jednokolorową ramkę wokół obrazu.

Kompresja obrazu

Możesz zmienić kompresję (format wyjściowy i jakość) obrazu, używając filtrów kompresji.

Możesz używać filtrów kompresji wraz z operacjami zmiany rozmiaru i filtrami obrazu.

Domyślnie Cloudimage dostarcza obrazy jako WebP. Jeśli format nie jest obsługiwany przez przeglądarkę klienta, wraca do formatu JPEG lub PNG.

Optipress – kompresja obrazu oparta na uczeniu maszynowym

Głównym wyzwaniem związanym z kompresją JPEG jest znalezienie najbardziej optymalnego współczynnika kompresji dla każdego innego obrazu.

Różne obrazy skompresowane z tymi samymi parametrami kompresji mogą skutkować odmienną postrzeganą jakością.

Co więcej, ten sam obraz w różnych rozmiarach może wymagać różnych strategii kompresji, aby osiągnąć maksymalny przyrost rozmiaru bez widocznej utraty jakości.

Aby temu zaradzić, opracowaliśmy algorytm kompresji JPEG Optipress.

Optipress znajduje najlepsze podejście do kompresji JPG, analizując określone cechy obrazu i aktualne parametry kompresji.

Model uczenia maszynowego określa najlepszą strategię kompresji dla tego obrazu.

Jakość jest następnie oceniana w oparciu o model symulacyjny ludzkiego układu wzrokowego, aby osiągnąć optymalną kompresję bez percepcyjnego pogorszenia jakości.

Ustawienia wstępne transformacji

Jeśli chcesz zastosować te same przekształcenia na wielu obrazach, możesz zdefiniować ustawienia wstępne i zastosować przekształcenia tylko przy użyciu nazwy ustawienia wstępnego (X).

p=X

W ustawieniu wstępnym można uwzględnić dowolną transformację zmiany rozmiaru lub filtr obrazu, a także znaki wodne i parametry kompresji obrazu.

Umożliwia to proces optymalizacji zbiorczej, który pozwala zaoszczędzić ponad 50% czasu optymalizacji obrazu i może być łatwo wykonany przez każdego zaangażowanego.

Łatwe responsywne obrazy

Responsywne obrazy dostosowują rozmiar obrazu do rozmiaru ekranu użytkownika końcowego, umożliwiając w ten sposób szybsze ładowanie witryny lub aplikacji mobilnej na różnych rozmiarach ekranu.

Zespół Cloudimage opracował wtyczkę JS, która zautomatyzuje wszystko za Ciebie.

Biblioteka Cloudimage JS automatycznie dostosuje wszystkie Twoje adresy URL i oferuje wbudowane Responsive Design, Lazyloading i wiele innych funkcji, dzięki którym Twoja witryna będzie responsywna, szybka i doda ładne efekty ładowania do Twoich obrazów.

Dzięki Lazy Loading i włączonej pamięci podręcznej możesz mieć pewność, że czas ładowania Twojej witryny poprawi się o co najmniej 40%. Dodaj do tego CDN, a odsetek wzrasta nawet do 60%.

Sieć dostarczania treści

Cloudimage wykorzystuje sieci dostarczania treści, aby przyspieszyć dostarczanie Twoich obrazów na całym świecie. Współpracujemy z wieloma dostawcami CDN, aby zoptymalizować dostarczanie obrazów i zapewnić doskonałą niezawodność.

Oprócz przyspieszenia obrazów, CDN zapewnia ochronę przed atakami DDoS (Distributed Denial of Service), która będzie działać jako osłona dla Twoich serwerów i zapobiegać przestojom.

Sieci CDN zwykle buforują obrazy tak długo, jak żądają ich użytkownicy końcowi.

Wdrożony w kilka minut

To, co sprawia, że ​​Cloudimage jest tak wyjątkowy, to fakt, że jego usługi mogą być wdrażane bardzo szybko.

Jeśli Twoja witryna doświadcza szalonych szczytów ruchu, zawsze możesz sięgnąć do cloudimage, zoptymalizować obrazy i mieć pewność, że te szczyty zostaną wchłonięte natychmiast.

Zapewnia to bezbłędną wydajność i szybkie ładowanie strony na różnych urządzeniach.

Ponadto wdrożenie jest bardzo proste i sprawia, że ​​proces współpracy między zespołami (zespołami odpowiedzialnymi za serwis od produkcji treści po publikację i monitoring) jest prosty i wydajny.

Jest to szczególnie ważne, gdy większość z nas jest zmuszona do korzystania z naszych domowych biur w następnym okresie.
Aby uzyskać więcej informacji na temat działania usług Cloudimage, odwiedź nas na cloudimage.io