Przewodnik po optymalizacji obrazów pod kątem urządzeń mobilnych

( To jest artykuł sponsorowany. ) Wiesz, jak ważne jest budowanie stron internetowych, które szybko się ładują. Wystarczy, że strona ładuje się o sekundę za długo, aby zaczęła tracić odwiedzających i sprzedaż. Dodatkowo, teraz, gdy Google ustawiło indeksowanie zorientowane na urządzenia mobilne jako domyślne, naprawdę nie możesz pozwolić, aby jakiekolwiek optymalizacje wydajności zostały zmarnowane, co z tym, jak trudne może być uzyskanie Twojej witryny mobilnej tak szybkiej, jak na komputerze.

Google bierze pod uwagę wiele czynników przy ustalaniu rankingu witryny, a odwiedzający mogą wziąć pod uwagę kilka czynników, decydując się na eksplorację witryny. Na przecięciu tych dwóch jest szybkość strony .

Nie powinno dziwić, że obrazy powodują wiele problemów z szybkością stron internetowych. I chociaż zawsze można było po prostu przyciąć tłuszcz i zbudować bardziej minimalistycznie zaprojektowane i zorientowane na treść witryny, po co iść na kompromis?

Obrazy to potężna siła w sieci.

Dobrze dobrane obrazy nie tylko poprawiają estetykę witryny, ale także ułatwiają odwiedzającym korzystanie z treści. Oczywiście obrazy mają również zalety SEO.

Tak więc dzisiaj skupmy się na tym, jak nadal możesz projektować z taką liczbą obrazów, jak chcesz, bez spowalniania witryny. Będzie to wymagało aktualizacji strategii optymalizacji obrazu i przyjęcia narzędzia o nazwie ImageKit, ale wdrożenie nowego systemu nie powinno wymagać wiele pracy.

Konieczność strategii optymalizacji obrazu dla urządzeń mobilnych

Według archiwum HTTP:

• Mediana rozmiaru witryny na komputery w 2019 r. wynosi 1939,5 KB .
• Mediana rozmiaru witryny mobilnej w 2019 r. wynosi 1745,0 KB .

Jeśli nie zapanujemy nad tym wzrostem, nie będzie możliwe spełnienie wymagań konsumentów i Google w zakresie dostarczania szybkich stron internetowych. Albo będziemy musieli być naprawdę dobrzy w optymalizacji pod kątem szybkości.

Mówiąc o szybkości, zobaczmy, co Archiwum HTTP ma do powiedzenia na temat wagi obrazu.

W obecnej formie:

• Mediana rozmiaru obrazów na pulpicie wynosi 980,3 KB z łącznej liczby 1939,5 KB.
• Mediana rozmiaru obrazów na urządzeniach mobilnych wynosi 891,7 KB z łącznej liczby 1745,0 KB.

Konkluzja: obrazy dodają dużo wagi stronom internetowym i zużywają dużo przepustowości. I chociaż te dane pokazują, że mediana rozmiaru obrazów na urządzeniach mobilnych jest mniejsza niż ich odpowiedników na komputerach stacjonarnych, proporcja obrazów w witrynach jest nieco większa.

To powiedziawszy, jeśli masz odpowiednią strategię optymalizacji obrazu, możesz łatwo temu zaradzić.

Oto, na czym powinna polegać ta strategia:

1. Prawidłowy rozmiar obrazów

Istnieje wiele żmudnych zadań, które trzeba wykonać bez odpowiedniej automatyzacji. Jak zmiana rozmiaru obrazów.

Ale musisz to zrobić, prawda?

Załóżmy, że używasz Unsplash do pozyskiwania wielu obrazów dla witryny, nad którą pracujesz.

W przeciwieństwie do repozytoriów akcji premium, w których możesz wybrać rozmiar lub format pliku, w którym pobierasz plik, tutaj nie masz wyboru.

Tak więc pobierasz obraz i wszystkie inne, których potrzebujesz. Następnie możesz użyć obrazu bez zmian lub ręcznie zmienić jego rozmiar. Po przyjrzeniu się rozmiarowi pliku i wymiarom obrazu, zdajesz sobie sprawę, że dobrym pomysłem będzie zmiana jego rozmiaru.

Ten konkretny obraz został wyeksportowany jako plik 3,6 MB i obraz o wymiarach 5591 × 3145 pikseli. To o wiele za duże na jakąkolwiek stronę internetową.

Nie ma powodu, aby przesyłać obrazy większe niż 1 MB — a to nawet popycha. A co do wymiarów? Cóż, to zależy od szerokości twojej witryny, ale myślę, że gdzieś pomiędzy 1200 a 2000 px powinno być twoim max.

Będziesz musiał przejść przez ten sam proces, niezależnie od tego, czy obrazy pochodzą ze strony internetowej, czy z czyjejś lustrzanki cyfrowej. Chodzi o to, że żaden obraz źródłowy nigdy nie będzie miał „właściwego” rozmiaru dla Twojej witryny, co oznacza, że ​​​​w pewnym momencie musi nastąpić zmiana rozmiaru.

Co więcej, responsywne strony internetowe wyświetlają obrazy w różnych rozmiarach w zależności od urządzenia lub przeglądarki, w której są przeglądane. Są też różne przypadki użycia — na przykład obraz w pełnym rozmiarze vs. miniatura lub zdjęcie produktu w pełnym rozmiarze vs. polecany obraz.

Tak więc jest więcej zmian rozmiaru, które należy wykonać, nawet po przejściu przez kłopoty z ręczną zmianą ich rozmiaru.

Oto, czego nie powinieneś robić:

• Zmień rozmiar obrazów jeden po drugim na własną rękę. Jest to czasochłonne i nieefektywne.
• Polegaj na zmianie rozmiaru przeglądarki, aby wyświetlać obrazy w sposób responsywny, ponieważ może to powodować problemy.

Zamiast tego możesz zintegrować istniejący serwer obrazów (na swoim hoście internetowym) lub zewnętrzną usługę pamięci masowej (np. S3) z ImageKit. Możesz też użyć Biblioteki multimediów ImageKit do przechowywania plików.

Jak widać, ImageKit zaakceptował przesłanie tego zdjęcia Unsplash w oryginalnych wymiarach i rozmiarach. To samo dotyczy miejsca, z którego pochodzą twoje pliki.

Jednak po zintegrowaniu obrazów lub przechowywania obrazów z ImageKit narzędzie przejmie kontrolę nad rozmiarem obrazu. Tutaj możesz zobaczyć, jak to się robi:

Pozwól, że krótko wyjaśnię, na co patrzysz powyżej:

• Preferencje pochodzenia obrazu mówią ImageKit, gdzie obrazy muszą zostać zoptymalizowane. W tym przypadku jest to biblioteka multimediów ImageKit i będą one udostępniane na mojej stronie internetowej.
• Adres URL starego obrazu przypomina, gdzie na serwerze znajdowały się nasze obrazy.
• Adresy URL nowych obrazów wyjaśniają, gdzie Twoje obrazy zostaną zoptymalizowane za pomocą ImageKit.

Formuła jest dość prosta. Bierzesz oryginalny adres URL obrazu i przekształcasz go za pomocą nowego adresu URL ImageKit.

Sam adres URL ImageKit natychmiast zmniejszy rozmiar plików graficznych. Jeśli jednak chcesz zmienić rozmiar swojego obrazu, gdy jesteś na tym, możesz użyć parametrów transformacji, aby to zrobić.

Na przykład jest to zdjęcie Unsplash widziane z biblioteki multimediów mojej witryny. Żyje na moich własnych serwerach, dlatego adres pokazuje mój własny URL:

Aby zobaczyć, jak to wygląda po przekształceniu go przez ImageKit, zamieniam nazwę mojej domeny na punkt końcowy dostarczony przez ImageKit. Następnie dodaję parametry zmiany rozmiaru obrazu (pozwalają one na więcej niż tylko zmianę rozmiaru) i ponownie dołączam pozostałą część adresu URL, który wskazuje na moje miejsce do przechowywania obrazów.

Oto, co się dzieje, gdy używam ImageKit do automatycznej zmiany rozmiaru obrazu do 1000 × 560 pikseli:

Aby utworzyć ten obraz o zmienionym rozmiarze, przekształciłem adres URL ImageKit w następujący sposób:

https://imagekit.io/vq1l4ywcv/ tr:w-1000,h-560/…

To parametry szerokości (w-) i wysokości (h-) zmniejszyły wymiary pliku.

Teraz, jak widać, nie jest to tak perfekcyjne jak w przypadku oryginalnego obrazu, ale to dlatego, że do pliku zastosowano dość dużą kompresję (80%). Omówię, jak to działa poniżej.

W międzyczasie skupmy się na tym, jak świetnie wygląda obraz, a także na przyrostach prędkości, które wkrótce osiągniemy.

Wcześniej był to plik o wielkości 3,6 MB dla obrazu 5591×3145 pikseli. Teraz jest to plik o rozmiarze 128 KB dla obrazu o wymiarach 1000 × 560 pikseli.

Aby jeszcze bardziej osłodzić umowę, ImageKit ułatwia zmianę rozmiaru obrazów w ten sposób za pomocą transformacji obrazu opartej na adresie URL. Zasadniczo działa to tak:

• Zapisujesz jeden obraz wzorcowy w bibliotece multimediów ImageKit lub na preferowanym serwerze.
• ImageKit automatycznie wykorzystuje wiele technik, aby znacząco zmniejszyć rozmiar obrazu.
• Następnie możesz użyć parametrów zmiany rozmiaru i przycinania ImageKit, aby zmodyfikować każdy obraz, aby dostosować go do różnych rozdzielczości i rozmiarów urządzenia.

Kiedy 91mobiles skorzystało z tej formy optymalizacji obrazu, co miesiąc oszczędzało swojej witrynie 3,5 TB przepustowości. I nie musieli nic robić poza integracją z platformą. Nie było potrzeby przenoszenia ich obrazów do ImageKit lub innej usługi przechowywania danych innej firmy. Wszystko to odbywało się w ich starszej infrastrukturze.

2. Użyj szybciej ładujących się formatów obrazu

Nie tylko rozmiar obrazów ogranicza przestrzeń dyskową i przepustowość. Typy plików, których używasz, również mają wpływ.

Ogólnie rzecz biorąc, pliki PNG są używane do tworzenia logo, obrazów zawierających tekst i innych bardzo drobnych obrazów z przezroczystym tłem. Chociaż możesz ich używać do zapisywania zdjęć, zwykle tworzą one największe rozmiary. Nawet po zastosowaniu kompresji bezstratnej pliki PNG nadal mają większy rozmiar niż inne typy plików.

Pliki GIF są animowanym odpowiednikiem plików PNG i wykorzystują również kompresję bezstratną.

Z drugiej strony pliki JPG najlepiej nadają się do kolorowych obrazów i zdjęć. Są mniejsze i kurczą się przy stratnej kompresji. Możliwe jest skompresowanie plików JPG na tyle, aby uzyskać rozsądny rozmiar, ale trzeba być ostrożnym, ponieważ kompresja stratna obniża ogólną jakość pliku i nie ma odwrotu, gdy zostanie zrobione.

WebPs zyskują na popularności, odkąd Google wprowadził je na początku 2010 roku. Według badania Google WebP mogą być od 25% do 34% mniejsze niż JPG. Co więcej, możesz użyć zarówno stratnej, jak i bezstratnej kompresji w WebP, aby zmniejszyć je do jeszcze mniejszych rozmiarów.

Należy pamiętać o WebP, że nie są one powszechnie akceptowane. W chwili pisania tego tekstu WebP nie są akceptowane przez urządzenia z systemem iOS. Jednak najnowsze wersje wszystkich innych przeglądarek, Google lub innych, chętnie je wyświetlą.

Jeśli chodzi o to, jak ImageKit pomaga w tym, to naprawdę jest proste:

Po skonfigurowaniu tego ustawienia ImageKit automatycznie określa najlepszy format pliku do dostarczenia każdego z plików. Bierze pod uwagę oryginalny format obrazu i zawartość oraz to, czy urządzenie odwiedzającego go obsługuje.

Pliki JPG, PNG i GIF zostaną w miarę możliwości przekonwertowane na WebP — powiedzmy, jeśli odwiedzający odwiedzi go z przeglądarki Chrome (która je akceptuje). Jeśli nie jest to możliwe — powiedzmy, jeśli odwiedzający odwiedza Safari (która ich nie akceptuje) — ImageKit przekonwertuje do najlepszego (tj. najmniejszego) formatu ze zdefiniowanymi przekształceniami. Może to być plik PNG lub JPG.

Nykaa była w stanie wykorzystać tę strategię optymalizacji obrazu z ImageKit. Mimo że ich witryna została już zaprojektowana przy użyciu mieszanki JPG i PNG i była przechowywana w wielu miejscach w Internecie, ImageKit zadbał o automatyzację formatów obrazów bezpośrednio z oryginalnych adresów URL.

3. Kompresuj obrazy

Następnie musimy porozmawiać o kompresji obrazu. Odwoływałem się już do tego kilka razy, ale dzieli się na dwa typy:

Bezstratny

Ta forma kompresji jest używana w plikach PNG i GIF. Aby skompresować plik, metadane są usuwane. W ten sposób integralność obrazu pozostaje nienaruszona, ale skurcz pliku nie jest tak znaczny, jak w przypadku kompresji stratnej.

Stratna

Ta forma kompresji jest stosowana do JPG i WebP. Aby skompresować plik, niektóre części obrazu są „gubione”, co może nadać niektórym punktom bardziej ziarnisty wygląd niż oryginalny obraz. W większości przypadków jest to ledwo zauważalne, chyba że przyjrzysz się uważnie obok obu obrazów. Ale dla odwiedzających łatwo jest przeoczyć degradację, ponieważ nie ma oryginału, z którym można by porównać.

Dzięki kompresji stratnej możesz kontrolować, jaki procent pliku ulega degradacji. Bezpieczny zakres to od 70% do 80%. ImageKit domyślnie ustawia swoją optymalizację na 80% i szacuje, że dzięki temu możesz zaoszczędzić co najmniej 20% do 25% rozmiaru pliku. W rzeczywistości jednak jest to prawdopodobnie więcej (patrzymy na 40%, jak w powyższym przykładzie obrazu Unsplash):

Możesz to zmienić na dowolną wartość domyślną, która według Ciebie utrzyma jakość, zapewniając jednocześnie rozmiary obrazów, które pomogą w szybkim wczytywaniu witryny.

Niezależnie od tego, czy używasz domyślnych, czy własnych ustawień optymalizacji, pamiętaj, aby włączyć dodatkowe ustawienia kompresji dostępne w zakładce Zaawansowane.

W szczególności te trzy ustawienia pozwolą Ci wykonać jak najwięcej kompresji i tak bezpiecznie, jak to możliwe.

Na przykład pierwsze ustawienie „Zapisz kopię” zachowuje oryginalne obrazy na serwerze ImageKit. W ten sposób masz kopię wstępnej kompresji obrazu bez konieczności zarządzania jej obciążeniem na własnym serwerze.

Drugie ustawienie „Zachowaj metadane obrazu” umożliwia zastosowanie kompresji bezstratnej, gdy jest to możliwe.

A ostatnie ustawienie „Tryb kompresji obrazu PNG” pozwala zdecydować, jakiego poziomu bezstratnej optymalizacji chcesz użyć w plikach PNG: maksymalny, minimalny lub żaden.

Po zakończeniu otrzymasz wyniki takie jak to porównanie obok siebie:

To jest JPG z Unsplash. Czy możesz powiedzieć, która jest oryginalna, a która skompresowana i zmieniona wersja z ImageKit?

Ten po lewej z czarnym wykończeniem to:

• 1500×1005 pikseli
• 266 KB
• Skompresowany w 95%

Ten po prawej z białym wykończeniem to:

• 5444×3649 pikseli
• 2,5 MB
• Oryginalny

Od Ciebie zależy, które z ustawień kompresji i optymalizacji ImageKit są dla Ciebie najwygodniejsze, a następnie odpowiednio je skonfiguruj.

4. Zapisz i pobierz obrazy z zewnętrznego serwera

Istnieją dwa sposoby uruchamiania obrazów przez ImageKit.

Pierwszym z nich jest przesłanie obrazów bezpośrednio do Biblioteki multimediów:

Drugi to integracja z Twoją witryną lub zewnętrzną usługą przechowywania. Właściwie już widzieliśmy tę część ImageKit. To stąd otrzymujesz punkty końcowe adresu URL, dzięki czemu możesz zdefiniować parametry obrazu:

Nawet przy wszystkich powyższych optymalizacjach nadal możesz mieć trudności z przechowywaniem i konserwacją obrazów — albo ze względu na to, jak wpływają one na twoją prędkość, albo z tego, ile miejsca musisz na nie przechowywać.

Na przykład, jeśli przechowujesz obrazy na swoim serwerze, w końcu będziesz ograniczony do miejsca (chyba że masz konto hostingowe wielkości potwora).

Kiedy budujesz ogromne sklepy e-commerce lub witryny biznesowe z tysiącami, a nawet milionami obrazów i odpowiadającymi im rozmiarami, nie możesz sobie pozwolić na samodzielne hostowanie tych obrazów. To prawda, że ​​istnieje sposób na szybsze serwowanie ich odwiedzającym (co wyjaśnię w następnym punkcie), ale po co brać na siebie ciężar i koszt dodatkowego miejsca do przechowywania, jeśli nie musisz?

5. Dodaj CDN

CDN to kolejne niezbędne narzędzie do optymalizacji dużych repozytoriów obrazów. Pomyśl o tym jak o drugim serwerze, tylko ten buforuje (kopiuje) Twoją witrynę i obsługuje ją przez centra danych znajdujące się znacznie bliżej odwiedzających na całym świecie.

W rezultacie czas potrzebny na wysłanie Twojej witryny i tysięcy zdjęć produktów z Nowego Jorku do Bangladeszu w Indiach jest niesamowicie szybki.

Dzięki ImageKit możesz cieszyć się przywilejem udostępniania swoich obrazów nie tylko za pośrednictwem podstawowych serwerów przetwarzania, ale także za pośrednictwem AWS CloudFront CDN (zawartego we wszystkich planach), który ma ponad 150 lokalizacji na całym świecie.

Sintra, klient ImageKit, zauważył duży skok wydajności po przejściu na ImageKit. Dzięki ImageKit Image CDN (który ma węzły dostarczania na całym świecie) odnotował 18% spadek czasu ładowania strony.

Zawijanie

To, co jest szczególnie miłe w ImageKit, to to, że nie jest to tylko środek zapobiegawczy przed spowolnieniami spowodowanymi przez obrazy. Możesz go użyć do naprawienia i ulepszenia witryn mobilnych i PWA z mocą wsteczną, nawet jeśli mają już na nich miliony obrazów. Co więcej, centrum wydajności ułatwia śledzenie obrazów w witrynie i identyfikowanie możliwości zwiększenia szybkości.

Dodatkowo, jak widać z powyższych wskazówek, ImageKit uprościł wiele pracy, którą musiałbyś wykonać w innym przypadku, niezależnie od tego, czy miałbyś ją obsługiwać ręcznie, czy konfigurować za pomocą wtyczki.

Ponieważ konsumenci i Google z dnia na dzień stają się coraz bardziej wybredni w kwestii szybkości ładowania stron internetowych na urządzeniach mobilnych, jest to rodzaj strategii optymalizacji obrazu, której potrzebujesz. Zmniejszy to obciążenie, zapewniając jednocześnie, że wszystkie obrazy dodane przed lub po ImageKit są w pełni zoptymalizowane. Co więcej, Twoi klienci będą czerpać korzyści z większej liczby leadów i większej konwersji.