Zoptymalizuj swoje obrazy i nie marnuj więcej czasu

Według HTTPArchive średni rozmiar strony internetowej prawie się podwoił w ciągu 5 lat, z 1 MB w 2014 r. do 2 MB w 2019 r. Oczywiście dostęp do Internetu jest szybszy niż kiedykolwiek, ale dlaczego strony internetowe są teraz tak duże? Odpowiedź częściowo leży w zasobach multimedialnych w ogóle, aw szczególności w obrazach.

Minęło dużo czasu, odkąd strony internetowe nie są już prostymi stronami tekstowymi. Są teraz dynamiczne, pełne obrazów, filmów, GIF-ów… i chcemy, aby wszystkie te zasoby wyglądały ładnie i rześko na ekranach o ogromnych rozdzielczościach.

Jeśli Twoja witryna ładuje się bardzo wolno i nigdy nie optymalizowałeś swoich obrazów, mam dobrą wiadomość: dzisiaj dowiesz się, co możesz zrobić, aby przyspieszyć działanie WordPressa. Zobaczmy narzędzia, których możesz użyć, aby poprawić wydajność swojej witryny i zapobiec, by obrazy utrudniały użytkownikom korzystanie z niej.

Dlaczego optymalizacja obrazu jest ważna

Zanim wyjaśnię różne dostępne metody optymalizacji zasobów graficznych i przyspieszenia witryny, chciałbym poświęcić kilka minut, aby przekonać Cię o znaczeniu tego działania.

Obrazy mają ogromny wpływ na ogólny rozmiar strony internetowej

Jak powiedziałem na początku, waga obrazów na stronie internetowej stanowi istotny procent całości. Rozważmy na przykład ten wpis na blogu: DevTips – Jak powstrzymać WordPress przed odgadywaniem adresów URL. Jest to dość krótki post, zawierający mniej niż 400 słów, który oferuje szybkie rozwiązanie jasnego problemu.

Według GTMetrix, ładowanie tego posta wykorzystuje 850 KB danych. Ale dlaczego tak krótki post wykorzystuje tak dużo danych? Cóż, zdjęcia są częściowo odpowiedzialne za ten problem: sam prezentowany obraz w poście waży ponad 200 KB, co stanowi 25% całości.

Ruch mobilny

Według danych znalezionych w statcounter, 52% ruchu w sieci pochodzi z urządzeń mobilnych, a 45% z komputerów stacjonarnych. Dlatego dziś tak duży nacisk kładzie się na stosowanie responsywnych projektów, które dobrze sprawdzają się na małych ekranach.

Jak na pewno sam się przekonałeś, połączenie internetowe na komórce nie zawsze jest dobre (zwłaszcza jeśli dojeżdżasz do pracy lub w metrze). Według Statistii w 2019 r. średnia prędkość wynosi około 14 Mb/s. Dlatego, jeśli chcemy przyspieszyć działanie naszych stron internetowych na urządzeniach mobilnych, musimy maksymalnie zmniejszyć ich wagę, w tym również ich obrazy.

Koszty przechowywania i transferu danych

Innym powodem, dla którego powinieneś martwić się używaniem obrazów o odpowiednich wymiarach, są pieniądze. Kryteria, według których dostawcy usług hostingowych oferują swoje plany, obejmują ilość miejsca na dysku, z którego korzysta Twoja witryna oraz ilość danych, które wysyłasz z ich serwerów do odwiedzających. Im więcej zajętego miejsca na dysku i im więcej przesłanych danych, tym więcej płacisz.

Zmniejszając rozmiar obrazów, zmniejszysz oba te czynniki i zaoszczędzisz trochę pieniędzy każdego miesiąca ?

Działania związane z optymalizacją obrazu

Teraz, gdy już wiesz, dlaczego powinieneś się martwić o optymalizację swoich obrazów, zobaczmy, co możesz zrobić, aby przyspieszyć działanie witryny WordPress.

#1 Prześlij odpowiednio przeskalowane obrazy

Ilość osób, które przesyłają zdjęcia wyjęte bezpośrednio z ich nowego aparatu DSLR, jest zaskakująca. Problem w tym, że każde zdjęcie zrobione lustrzanką cyfrową jest prawdopodobnie zbyt duże i ciężkie dla strony internetowej.

Pierwszą rzeczą, którą musisz zrobić, to zmniejszyć obrazy do rozsądnego rozmiaru przed przesłaniem ich do swojej witryny. Na przykład na naszej stronie największe obrazy, które zwykle przesyłamy, to polecane obrazy naszych postów. Zdecydowaliśmy, że ograniczymy te obrazy do 1200x800px. W tym innym poście wyjaśniłem metodę szybkiego skalowania i kompresji obrazów przed ich przesłaniem.

#2 Dostosuj swój motyw, aby wygenerować odpowiednie miniatury

Gdy przesyłasz obraz do WordPressa, WordPress generuje kilka miniatur. Te miniatury są definiowane przez Twój motyw, ponieważ to Twój motyw wie, kiedy potrzebuje większej lub mniejszej wersji obrazu.

Na przykład nasze polecane obrazy mają wymiary 1200 x 800 pikseli. Te wymiary świetnie sprawdzają się podczas przeglądania samego posta:

co jest zdecydowanie za dużo na coś takiego:

Dlatego w tym konkretnym przypadku nasz motyw rejestruje nowy rozmiar miniatury, który ma tylko 480x320px i jest używany na ekranie listy postów.

Jeśli uważasz, że Twój motyw nie generuje odpowiednich miniatur, polecam zapoznanie się z dokumentacją WordPress, aby dowiedzieć się, jak zdefiniować rozmiar miniatury za pomocą set_post_thumbnail_size lub nawet jak zdefiniować dodatkowe miniatury za pomocą add_image_size .

I jak zawsze, jeśli potrzebujesz w tym pomocy, daj mi znać w komentarzach poniżej, a chętnie pomogę (lub nawet napiszę o tym post ?)

#3 Sprytnie używaj rozmiarów obrazu

WordPress generuje wiele miniatur obrazów, które masz w bibliotece multimediów, aby Twój motyw mógł używać najlepszego obrazu w każdym możliwym scenariuszu. Ale tutaj pojawia się interesująca część: ty również możesz używać miniatur podczas wstawiania obrazów na swoich stronach i postach.

Wstawiając obraz do posta, spójrz na pasek boczny i wybierz rozmiar, który najlepiej odpowiada Twoim potrzebom:

Na przykład, jeśli zamierzasz umieścić taki wąski i mały obrazek, to mały obrazek (300x200px) może być idealny:

ale użycie tej samej miniatury dla większego obrazu daje okropne wyniki:

Lepiej użyć wersji o większej rozdzielczości:

#4 Użyj odpowiedniego formatu obrazu

Istnieją różne formaty obrazów, z których każdy ma swoje mocne i słabe strony do kompresji obrazów. Najczęściej używane formaty to:

• PNG. Świetny format obrazu do udostępniania zrzutów ekranu, na których nie ma żadnych zdjęć, takich jak na przykład zrzut ekranu edytora WordPress.
• JPG. Jeden z najbardziej rozpowszechnionych formatów na świecie. Bardzo dobrze sprawdza się przy praktycznie każdym rodzaju fotografii, pozwalając na bardzo wysokie współczynniki kompresji. Nie jest to jednak idealne: jeśli zdjęcie ma bardzo ostre krawędzie (na przykład tekst lub rysunki), będziesz musiał użyć niższych współczynników kompresji lub ryzykować, że obraz będzie miał brzydkie artefakty.
• GIF. Król Internetu (i platform społecznościowych). Jest to typ formatu, który umożliwia animacje. Szczerze mówiąc, uważam, że wszystkie używane przez nas „GIF-y” są w rzeczywistości (krótkimi) filmami, które oferują lepsze współczynniki kompresji i wyższą jakość…

#5 Usuń nieużywane obrazy

W miarę upływu czasu łatwo jest przechowywać w witrynie WordPress wiele starszych obrazów, których nikt nigdzie nie używa. Jeśli chcesz je szybko usunąć, w tym poście Toni wyjaśnia, jak to zrobić.

#6 Włącz leniwe ładowanie

Czyli obrazy spowalniają Twoje witryny, prawda? Dlaczego po prostu nie powiemy stronom internetowym, aby nie ładowały obrazów, chyba że jest to absolutnie konieczne? To przyspieszyłoby sprawę, prawda? Wprowadź leniwe ładowanie.

Lazy Loading to całkiem prosty pomysł: obraz nie zostanie załadowany, dopóki nie powinien być widoczny w przeglądarce odwiedzającego. Na przykład, jeśli nasza strona internetowa ma w stopce określony obrazek, dlaczego musimy zawracać sobie głowę ładowaniem go, zanim użytkownik dotrze do końca naszej witryny? Poczekaj, aż dotrą na miejsce, a gdy już to zrobią, załaduj obraz (a jeśli nie, zapisz ładowanie obrazu!)

Istnieje wiele wtyczek Lazy Loading dla WordPress. Niektórzy dostawcy hostingu, tacy jak wydarzenie SiteGround, zawierają tę opcję w swoich instalacjach. Po prostu poszukaj opcji na pulpicie nawigacyjnym i włącz ją.

Mam nadzieję, że dzisiejszy post pomoże ci nieco poprawić szybkość ładowania sieci. Niewiele jest rzeczy, które są tak łatwe do naprawienia i dają tak dobre wyniki. Pozdrawiam i powodzenia!

Wyróżniony obraz zespołu Icons8 na Unsplash.