Wdrożyliśmy technologię przetwarzania obrazu, która skaluje obrazy do rozmiaru kontenera układu i konwertuje je do formatu nowej generacji - WebP.
Adaptacyjne ładowanie obrazów jest domyślnie aktywne na wszystkich stronach internetowych Tilda, nie trzeba nic robić, aby je włączyć. Testowaliśmy tę technologię przez kilka miesięcy i cieszymy się, że możemy o niej opowiedzieć.
Przyjrzyjmy się wszystkim technologiom wykorzystywanym do optymalizacji ładowania obrazów na stronach Tilda:
Leniwy ładunek
Lazy Load działa na Tildzie już od dłuższego czasu. Obrazy są ładowane stopniowo w miarę przewijania strony, a nie wszystkie naraz.
Obraz jest w pełni załadowany, ponieważ znajduje się na ekranie
Ładowanie rozpoczyna się, gdy obraz zbliży się do ekranu na 700 px
Obraz nie zaczął się jeszcze ładować
1. Obraz jest w pełni załadowany, ponieważ znajduje się na ekranie
2. Ładowanie rozpoczyna się, gdy obraz zbliży się do ekranu na 700 px
3. Obraz nie zaczął się jeszcze ładować.
CDN
CDN, czyli Content Delivery Network, to sieć serwerów rozmieszczonych na całym świecie. Wybiera serwer najbliższy lokalizacji odwiedzającego i pomaga szybciej dostarczać obrazy. Na przykład, jeśli widz znajduje się w Berlinie, otrzyma obraz bezpośrednio z Niemiec, a nie z USA.
NOWY
Obsługa WebP
Tilda automatycznie konwertuje wszystkie obrazy stron internetowych do formatu WebP. Ten format nowej generacji umożliwia kompresję, która zmniejsza rozmiar obrazu nawet o 35% w porównaniu do JPEG bez utraty jakości. Nie musisz przesyłać obrazów do swojej witryny w formacie WebP, Tilda przekonwertuje je za Ciebie.
JPEG — 1680х1120px, 166 KB
WebP - 1680х1120px, 78.6 Kb
8.9 Mb
2.8 Mb
Porównaliśmy różnicę w rozmiarze obrazu przed i po optymalizacji przy użyciu tego szablonu. Całkowity rozmiar obrazów bez Adaptive Image Loading wynosi 8,9 Mb. Całkowity rozmiar obrazów po włączeniu Adaptacyjnego ładowania obrazów wynosi 2,8 Mb
Całkowity rozmiar obrazów zmniejsza się 3-krotnie po optymalizacji
Większość nowoczesnych przeglądarek, takich jak Chrome, Opera, Firefox i inne, obsługuje WebP. Podczas ładowania strony internetowej skrypt sprawdza, czy przeglądarka obsługuje ten format i, jeśli jest obsługiwany, żąda obrazów WebP z serwera. Jeśli nie jest obsługiwany, dostarczy oryginalne obrazy w takiej postaci, w jakiej zostały przesłane, w formacie JPEG lub PNG. Konwersja do AVIF, innego nowego formatu obrazu oferującego jeszcze lepszą redukcję rozmiaru pliku, jest w przygotowaniu.
NOWY
Adaptacyjna zmiana rozmiaru obrazu
Technologia wykrywa wymiary przeglądarki i kontenera układu, a następnie żąda zoptymalizowanych obrazów z serwera.
Wyobraź sobie, że załadowałeś zdjęcie o szerokości 1680 pikseli do bloku z wieloma obrazami. Rozmiar każdego kontenera obrazu wynosi 450 x 300 pikseli. Dlatego odwiedzający nie otrzyma oryginalnego zdjęcia, ale przeskalowane zgodnie z wymiarami kontenera.
Wyobraź sobie, że załadowałeś zdjęcie o szerokości 1680 pikseli do bloku z wieloma obrazami. Rozmiar każdego kontenera obrazu wynosi 450 x 300 pikseli. Dlatego odwiedzający nie otrzyma oryginalnego zdjęcia, ale przeskalowane zgodnie z wymiarami kontenera.
JPEG — 1680x1119px, 252 KB
WebP- 450x300px, 23.5 Kb
Załóżmy, że odwiedzający uzyskuje dostęp do strony internetowej z telefonu. Aby załadować okładkę witryny na tym urządzeniu, skrypt zażąda przyciętego obrazu w prawidłowej rozdzielczości dostosowanej do ekranu.
JPEG — 1680x1120px, 372 KB
WebP — 560x1120px, 103 KB
Inteligentny system stale analizuje ruch na stronie Tilda. Skrypt z wyprzedzeniem przygotowuje obrazy zoptymalizowane pod kątem najczęściej używanych urządzeń i przeglądarek. Ta metoda jest bardziej elastyczna niż zmiana rozmiaru w locie: czasami szybciej jest pobrać oryginalny obraz niż zmienić rozmiar i pobrać zoptymalizowany.
NOWY
Wyświetlacze Retina i wolne połączenie internetowe
Jeśli odwiedzający korzysta z wyświetlacza o zwiększonej gęstości pikseli, skrypt rozpozna to i zażąda obrazu o wysokiej rozdzielczości z serwera. W ten sposób obrazy będą wyraźne na urządzeniach Retina.
Chociaż w przypadku powolnego połączenia (jeśli użytkownik przegląda stronę na przykład na wsi), system zażąda mniejszego obrazu. Zapobiegnie to spowolnieniu prędkości ładowania strony.
Chociaż w przypadku powolnego połączenia (jeśli użytkownik przegląda stronę na przykład na wsi), system zażąda mniejszego obrazu. Zapobiegnie to spowolnieniu prędkości ładowania strony.
W niektórych przypadkach adaptacyjne ładowanie obrazu może nie działać. Może to być spowodowane kilkoma przyczynami:
1
Funkcja Lazy Load została wyłączona w ustawieniach witryny.
2
Wyłączyłeś Lazy Load dla elementu w Zero Block.
3
Zoptymalizowana wersja obrazu nie została jeszcze przygotowana. Dzieje się tak, jeśli właśnie przesłałeś nowy obraz na swoją stronę internetową lub jeśli logujesz się z urządzenia lub przeglądarki po raz pierwszy.
4
Twoja przeglądarka nie obsługuje WebP. Listę przeglądarek obsługujących ten format można znaleźć tutaj.
5
Różnica między oryginalnym rozmiarem obrazu a jego zoptymalizowaną wersją jest nieznaczna; w takim przypadku system nie będzie kompresował ani przycinał obrazu.
Adaptacyjne ładowanie obrazów to jedna z najważniejszych technologii optymalizacyjnych, jakie wdrożyliśmy w Tildzie. Wciąż ciężko pracujemy, aby przyspieszyć strony internetowe tworzone na platformie. Bądź na bieżąco z kolejnymi aktualizacjami na blogu Tilda, koncie osobistym i w sieciach społecznościowych.
