Optymalizacja obrazów w WordPress – co musisz wiedzieć

Dawno minęły czasy, gdy strony internetowe składały się głównie z bloków tekstu z dodatkiem kilku prostych grafik. Wraz ze wzrostem prędkości i dostępności łącz szerokopasmowych rośnie również ilość dodawanych do stron ciężkich plików multimedialnych. Właśnie dlatego optymalizacja obrazu jest w dzisiejszych czasach ważna –przeładowanie strony plikami multimedialnymi zawsze negatywnie wpłynie na jej szybkość ładowania witryny i może potencjalnie zniechęcić użytkowników do ponownych odwiedzin.
W poniższym artykule chcemy skupić się konkretnie na optymalizacji obrazów na stronach oparty o WordPress. Dlaczego? WordPress jako najpopularniejszy kreator witryn na świecie, zapewnia swoim użytkownikom dedykowane narzędzia do optymalizacji obrazów. Czytaj dalej, aby dowiedzieć się o nich więcej.

Co to jest optymalizacja obrazów na WordPress?

W dużym skrócie jest to proces zmniejszania rozmiaru plików obrazów przy utrzymaniu ich jak najwyższej możliwej jakości. Głównym celem optymalizacji obrazów jest skrócenie czasu ładowania i upewnienie się, że przesłane treści wizualne są idealnie dopasowane do strony.

Istnieje kilka sposobów optymalizacji obrazów w WordPressie i za chwilę omówimy je bardziej szczegółowo. Ale zanim do tego przejdziemy, warto sprawdzić, czy witryna w ogóle wymaga takiej optymalizacji. Dzięki narzędziom takim jak PageSpeed Insights, od Google, możesz zweryfikować szybkość działania witryny oraz wskazać główne powody jej obniżonej responsywności. Pomiary PageSpeed Insights opierają się na wskaźnikach Core Web Vitals i zawierają szczegółowe zalecenia dotyczące zwiększenia wydajności witryny. Podobne informacje można również uzyskać za pomocą narzędzi takich jak GTMetrix i Pingdom.

Jak zoptymalizować obrazy dla WordPressa?

Odpowiedź brzmi – najszybciej, jak to możliwe. Większość działań związanych z optymalizacją obrazów na WP powinna odbyć się jeszcze przed przesłaniem ich na działającą witrynę. Wiemy jednak, że nie zawsze jest to możliwe. Ale, dzięki wielu dostępnym narzędziom, tak naprawdę nigdy nie jest za późno, aby przeprowadzić optymalizację obrazów i skrócić czas ładowania strony.

Wybierz odpowiedni format pliku graficznego

Istnieją dziesiątki różnych formatów plików graficznych, ale tylko pięć z nich jest powszechnie używanych na stronach internetowych. Każdy ma swoją własną charakterystykę i nadaje się do innych zastosowań:

• JPEG – zdecydowanie najpopularniejszy format fotograficzny w sieci; umożliwia wyświetlanie milionów kolorów na raz, używany głównie do zdjęć i wielokolorowej grafiki. JPEG to stratny format pliku, co oznacza, że szczegóły obrazu zmniejszają się, gdy plik jest kompresowany. Ustawienie poziomu kompresji na 70% zapewnia optymalną równowagę między jakością obrazu, a rozmiarem pliku.
• PNG – bezstratny format; obrazy zapisane jako PNG są zwykle większe, ale w przeciwieństwie do JPEG’ów zachowują wszystkie szczegóły po kompresji. Pliki PNG najlepiej nadają się do prostych grafik, logo, zrzutów ekranu i transparentnych obrazów.
• GIF – bezstratny format, który obsługuje tylko 256 kolorów. Nie nadaje się do zdjęć i szczegółowej grafiki, ale pozostaje najpopularniejszym wyborem dla animowanych banerów, reklam i ikon.
• SVG – bezstratny, wektorowy format obrazu; jest skalowalny i nie traci jakości nawet po zbliżeniu. Dobry wybór dla wykresów, ikon i infografik 2D. Domyślnie SVG nie jest obsługiwane przez WordPress, ale można to naprawić za pomocą dedykowanej wtyczki.
• WebP – stosunkowo nowy format obrazu wprowadzony przez Google. Obsługuje zarówno kompresję bezstratną, jak i stratną. WebP oferuje znacznie lepszy współczynnik kompresji niż JPEG i tworzy pliki mniejsze o 26% w porównaniu do PNG, zachowując ten sam poziom szczegółowości i przejrzystości. Pomimo wyraźnej przewagi technicznej, na razie format ten nie jest uznawany za oczywisty wybór. Tylko 4,3% wszystkich witryn korzysta z WebP, a format nie jest obsługiwany przez starsze wersje popularnych przeglądarek.

Wybór odpowiedniego formatu powinien być zawsze pierwszym krokiem w kierunku efektywnej optymalizacji obrazów na WordPress. Nie ma czegoś takiego jak format idealny do wszystkiego, lepiej po prostu je mieszać i dopasowywać. W przypadku galerii zdjęć możesz użyć plików JPEG; animowane banery i ikony są naturalnym środowiskiem GIF-ów, podczas gdy wszystko inne wygląda najlepiej, wyświetlane jako PNG. Jeśli Twoja strona internetowa zawiera dużo infografik i wykresów, powinieneś rozważyć również SVG, a Ci, którzy dążą do maksymalnej wydajności, powinni sprawdzić WebP z imponującymi współczynnikami kompresji. Ale warto pamiętać, że niektórzy użytkownicy w ogóle nie będą mogli przeglądać obrazów WebP z powodu problemów ze zgodnością przeglądarki.

Zmień rozmiar lub przytnij swój obraz

Mniejszy rozmiar obrazu to zawsze mniejszy rozmiar pliku, niezależnie od formatu. Przykładowo, zdjęcia importowane bezpośrednio z aparatu, świetnie nadają się do wydrukowania na papierze, ale w oryginalnym rozmiarze są zbyt duże na strony internetowe. Typowy obraz o pełnej szerokości, który obejmuje cały ekran komputera od lewej do prawej, miałby nie więcej niż 2400 × 1600 pikseli. Zwykły aparat w telefonie komórkowym jest w stanie zrobić zdjęcie co najmniej 4 razy większe. Rezultat? Pojedynczy obraz może ładować się całe wieki. Zmiana rozmiaru obrazu w celu dopasowania go do wymiarów odpowiednich dla strony internetowej, może zmniejszyć rozmiar pliku JPEG nawet o 95%.

Przycinanie obrazu jest również praktyczną opcją, często wykorzystywaną do optymalizacji obrazów na WordPress. Jeśli chcesz zaprezentować odbiorcom pojedynczy szczegół, a reszta treści zdjęcia jest nieistotna, nie musisz umieszczać pełnego obrazu na stronie.

Czy wiesz,
że możesz odmienić
swój biznes?

Zacznijmy już teraz

POROZMAWIAJMY

Kompresja obrazów

Po zmianie rozmiaru obrazów, bądź po ich przycięciu, możesz dodatkowo zmniejszyć rozmiar plików graficznych, kompresując je. Praktycznie wszystkie aplikacje do edycji zdjęć umożliwiają kompresję obrazów na różnych poziomach. Kompresja może być bezstratna lub stratna – ta pierwsza zachowuje wszystkie szczegóły w nienaruszonym stanie, druga pozwala na znacznie skuteczniejsze zmniejszenie rozmiaru pliku. Przy kompresji stratnej lepiej jednak nie schodzić poniżej 60-70% oryginalnej jakości. Poniżej tego progu utrata szczegółów zwykle staje się zauważalna. Warto też pamiętać, że aplikacje korzystają z algorytmów kompresji o różnej skuteczności. Niektóre z nich umożliwiają doskonałe zachowanie szczegółów nawet przy współczynniku kompresji wynoszącym 50%.
Programy i wtyczki zalecane do optymalizacji obrazów na WordPress, omówimy w ostatnim akapicie tego artykułu.

Korzystaj z opóźnionego ładowania obrazów (lazy loading)

Omówiliśmy już techniki optymalizacji obrazu WordPress, które można zastosować jeszcze przed przesłaniem plików na serwer. Lazy loading pozwala natomiast bezpośrednio zoptymalizować sposób, w jaki obrazy są prezentowane użytkownikom Twojej strony internetowej. Założenie jest proste – przy włączonym leniwym ładowaniu, witryna traktuje priorytetowo obrazy widoczne u góry strony. Są one ładowane jako pierwsze, a te umieszczone poniżej są ładowane dopiero wtedy, gdy użytkownik przewinie stronę. Przy odpowiednio przyciętych i skompresowanych plikach graficznych, leniwe ładowanie może znacznie zwiększyć szybkość ładowania Twojej witryny co czyni je kluczową metodą optymalizacji obrazów na WordPress.

Skorzystaj z sieci dostarczania zawartości (CDN)

Dzięki CDN (ang. Content Delivery Network), możesz przechowywać swoje obrazy (oraz inne pliki statyczne, np. JavaScript lub CSS) na wielu serwerach na całym świecie. To oznacza, że użytkownicy odwiedzający Twoją witrynę są obsługiwani bezpośrednio z najbliższego im geograficznie centrum danych. Dane są więc przesyłane na krótsze odległości, a zasoby są znacznie szybciej dostarczane do przeglądarki. Niektórzy dostawcy CDN oferują również kompresję obrazu i zmianę rozmiaru obrazu “w locie”. Ta ostatnia opcja pozwala nawet na wykorzystanie różnych rozmiarów obrazu w zależności od typu urządzenia (mobilnego lub stacjonarnego), z którego korzysta odwiedzający.

Optymalizacja obrazów na WordPress – zalecane oprogramowanie i wtyczki

Jak wspomnieliśmy wcześniej, dużą część procesu optymalizacji obrazu można wykonać przed przesłaniem obrazów na serwer. Korzystanie z zewnętrznego oprogramowania do edycji obrazów (płatnego lub bezpłatnego) może być więc przydatne, zwłaszcza dla perfekcjonistów, którzy wolą ręcznie wybierać i edytować każdy obraz. W przypadku prostych zadań zmiany rozmiaru i kompresji, tak naprawdę każda przeglądarka obrazów poradzi sobie dobrze, ale w celu uzyskania lepszych efektów możesz rozważyć wykorzystanie:

• Adobe Photoshop – największy gracz na rynku komercyjnego oprogramowania do edycji obrazów. Program oferuje doskonałą jakość kompresji i wygodny sposób zapisywania obrazów, automatycznie zoptymalizowanych do celów internetowych. Wysoka cena Photoshopa odstraszają większość użytkowników zainteresowanych tylko podstawowymi funkcjami, ale dla grafików i innych profesjonalistów, nie ma lepszego wyboru niż flagowa propozycja od Adobe.
• GIMP –oprogramowanie typu open-source, uważane za darmową alternatywę dla komercyjnego Photoshopa. Jego interfejs jest nieco mniej przyjazny dla użytkownika, ale sam program oferuje wiele opcji edycji obrazu i bardzo wydajną kompresję.
• JPEG Mini – komercyjna aplikacja desktopowa z darmową wersją sieciową; oferuje niezwykle skuteczną kompresję bezstratną i umożliwia użytkownikom porównywanie jakości oryginalnych i skompresowanych obrazów w czasie rzeczywistym.
• TinyPNG – aplikacja internetowa, świetna zwłaszcza dla zwykłych użytkowników. Pozwala za darmo skompresować do 20 obrazów za jednym razem, płatna wersja PRO usuwa to ograniczenie. TinyPNG oferuje dodatkową integrację z Photoshopem i prosty interfejs typu drag & drop.

Kompleksową optymalizację obrazów na WordPress można wykonać również za pomocą dedykowanych wtyczek. Plusem jest fakt, że wtyczki pozwalają użytkownikom WordPressa na pełną automatyzację procesu optymalizacji obrazu. Można więc zaoszczędzić dużo czasu w porównaniu z ręczną edycją obrazu. Minusem jest jednak to, że każda dodatkowa wtyczka zajmuje cenne miejsce na serwerze WP, a wydajność kompresji nie zawsze jest na takim poziomie jak kompresja oferowana przez oprogramowanie zewnętrzne:

• Smush – to kompletne narzędzie do optymalizacji obrazu WordPress, pozwala na zmianę rozmiaru i kompresję plików. Posiada również funkcję leniwego ładowania i wykrywanie nieprawidłowego rozmiaru obrazu. Jego płatna wersja (Pro) dodaje obsługę formatu obrazu WebP.
• ShortPixel Image Optimizer – kolejna bardzo popularna wtyczka o podobnej funkcjonalności do Smush. Posiada własny algorytm kompresji JPEG dedykowany fotografom. Wtyczka jest darmowa, dopóki, dopóty nie planujesz optymalizować więcej niż 100 zdjęć miesięcznie.
• Optimole – nieco mniej popularna wtyczka niż dwie poprzednie, ale niemal jednogłośnie oceniana przez użytkowników na 5 gwiazdek. Optymalizacja jest oparta na chmurze, a wtyczka obsługuje leniwe ładowanie i format WebP bez dodatkowych opłat. Darmowa wersja jest w pełni funkcjonalna i możesz z niej korzystać, jeśli Twoją witrynę odwiedza do 5000 użytkowników miesięcznie.

Podsumowanie

Optymalizacja obrazu może mieć ogromne znaczenie, jeśli chodzi o zwiększenie responsywności Twojej witryny WordPress.. Bardzo często to właśnie obrazy są główną przyczyną wydłużonego ładowania. A nikt przecież nie lubi powolnych stron internetowych – ani odwiedzający, ani Google. Wyszukiwarki promują szybko ładujące się witryny, a niezoptymalizowane obrazy mogą negatywnie wpłynąć na ranking SERP, zwiększyć współczynniki odrzuceń i obniżyć współczynniki konwersji.