Optymalizacja zdjęć WordPress – instrukcja

Jak wykonać optymalizację (minifikację, zmniejszenie rozmiaru) zdjęć i grafik na WordPressie? Polecane wtyczki i instrukcja krok po kroku

Udostępnij

Twittnij

Udostępnij

11 min. czytania

Optymalizacja obrazów na strony internetowe jest wskazana ze względu na ogromne znaczenie dla szybkości ich ładowania. Zapoznaj się z instrukcją, która przeprowadzi Cię przez ten proces krok po kroku.

Optymalizacja obrazów, zdjęć, zrzutów ekranu oraz innych plików graficznych trafiających na witryny internetowe jest bardzo ważna. Pozwala na ich szybsze ładowanie, co poprawia wydajność strony WWW. Dzięki temu z kolei zwartość jest szybciej wyświetlana w przeglądarce użytkownika końcowego, bez znaczącej utraty jakości. Buduje to pozytywny wizerunek marki, nie zniechęca potencjalnych odbiorców i działa na korzyść e-biznesu. Z tego artykułu dowiesz się, w jaki sposób zadbać o kompresję obrazów przez internet, bez zbędnych problemów.

Instrukcja optymalizacji obrazów krok po kroku w przeglądarce internetowej

Optymalizacja obrazów, które mają trafić na strony internetowe, jest możliwa do przeprowadzenia z poziomu przeglądarki internetowej. Nie potrzeba do tego żadnego specjalistycznego programu graficznego, które musiałbyś pobierać na swoje urządzenie. Jesteś w stanie poprawić doświadczenia użytkownika i zwiększyć szybkość ładowania strony internetowej w zaledwie kilka minut. Poniżej instrukcja wyjaśniająca, jak zrobić to krok po kroku.

1. Znajdź narzędzie pozwalające optymalizować obrazy

Najważniejszą kwestią jest znalezienie serwisu oferującego optymalizację obrazów online, z poziomu przeglądarki, na dogodnych warunkach. Ogromne znaczenie ma to, by pozwalał on na jak najbardziej rozbudowane zarządzanie kompresją. Powinien przy tym cechować się bezpieczeństwem i zachowywać pożądaną jakość obrazu, a także wybór odpowiedniego formatu zapisu.

Pod tym względem jednym z czołowych serwisów jest ShortPixel Image Optimizer. Jest to narzędzie online, którego twórcy w profesjonalny sposób zajmują się poprawą wydajności stron internetowych i optymalizacją doświadczeń użytkowników w sieci. Wobec tego to właśnie ich narzędziem posłużę się w tej instrukcji. Jeśli Ty wybrałeś inne rozwiązanie, nie musisz się przejmować – wszystkie działają na bardzo podobnych zasadach i na pewno sobie poradzisz.

2. Skorzystaj z ShortPixel Image Optimizer online

Aby rozpocząć optymalizację obrazów w WordPressie, wejdź na oficjalną stronę internetową shortpixel.com.

Z tego poziomu możesz rozpocząć prace nad kompresją obrazów. Nie wymaga to zakładania konta w serwisie czy ponoszenia opłat. Możesz zrobić to na dwa sposoby:

• naciskając przycisk „Upload Image” – pozwala automatycznie przejść do segmentu dodawania pliku graficznego prosto z dysku urządzenia;
• naciskając przycisk „Check your website” – pozwala przeanalizować istniejącą już witrynę WWW. Narzędzie poszuka na niej samodzielnie zdjęć, których optymalizacja poprawi szybkość ładowania strony i jej wydajność.

ShortPixel to serwis odpowiadający nie tylko za optymalizację obrazów. Możesz zatem zapoznać się z jego pozostałymi usługami, a następnie przejść do sekcji ściśle odpowiadającej za kompresję plików graficznych.

3. Przejdź do zakładki odpowiadającej za kompresję obrazów

Aby otworzyć podstronę poświęconą ściśle optymalizacji obrazów, naciśnij „Compress„. Przycisk znajdziesz w górnym menu.

W tym miejscu umieszczono wszystkie informacje związane z przeprowadzeniem kompresji. Jak widzisz, jest tu też rozbudowana sekcja umożliwiająca skorzystanie z tych samych dwóch opcji, które były na stronie głównej.

4. Dodaj zdjęcie lub sprawdź, czy na swojej stronie internetowej masz materiały wymagające optymalizacji grafik

Rozwiązanie pozwalające na bezpośrednie wgranie pliku znajduje się w sekcji „Pictures” (otwarta automatycznie po przejściu do podstrony).

Po naciśnięciu sekcji „Website” możesz zlecić ShortPixel analizę swojej witryny. Po wprowadzeniu adresu i naciśnięciu czerwonej strzałki narzędzie sprawdzi, co może zrobić dla Twojej strony. Szczególny nacisk kładzie w takim przypadku na:

• zmianę rozmiaru plików znajdujących się w witrynie,
• kompresję i wyświetlanie obrazów z CDN.

Ja skupię się w tej instrukcji na pierwszym z wymienionych rozwiązań. Zakładam, że pliki, które zamierzasz umieścić na swojej stronie internetowej, masz na dysku urządzenia, na którym uruchomiony został serwis przeglądarkowy.

5. Wybierz rodzaj kompresji

W pierwszej kolejności wybierz, jaki rodzaj kompresji Cię interesuje. Decyzja ta ma wpływ na zmiany, które będzie mogło wprowadzić w Twoim obrazie narzędzie. Do wyboru masz trzy opcje opisane poniżej.

Kompresja stratna

Kompresja stratna jest rozwiązaniem najczęściej wybieranym przez większość użytkowników. Jak nietrudno się domyślić, w jej przypadku nacisk położony jest na jak najintensywniejszą optymalizację obrazów. Polega on na nieodwracalnym usuwaniu danych, które uważane są za najmniej istotne dla ludzkiego oka.

Ten rodzaj kompresji pozwala na maksymalną optymalizację grafik, ale kosztem ich jakości. Może prowadzić do utraty jakości obrazu (choć często niezauważalnej). Mimo to jakość pliku nadal pozwala korzystać z niego w większości zastosowań.

Kompresja bezstratna

Bezstratna kompresja pozwala na optymalizację obrazu w taki sposób, by jego pełne odtworzenie do pierwotnej postaci pozostawało możliwe. Odbywa się to bez utraty jakości i wszelkich danych z pliku graficznego. W związku z tym nie jest aż tak wydajne, jak kompresja stratna. Grafika jednak aż tak się nie „zmniejsza”, a więc nie sprzyja to w tak dużym stopniu ładowaniu strony.

Rozwiązanie to jest wybierane w przypadku plików graficznych, w których istotne są szczegóły. Taka optymalizacja obrazów może być używana np. przy pracy z logotypami, profesjonalnymi zdjęciami czy ikonami.

Kompresja glossy

Kompresja opisana przez twórców jako „glossy” jest rozwiązaniem pośrednim między kompresją bezstratną a stratną. Nie jest dostępna w każdym serwisie oferującym tego typu usługi. Pozostaje natomiast warta rozważenia w różnych sytuacjach. Uznać ją można za kompromis między dobrą jakością a szybkością ładowania obrazów w witrynie WordPress.

Decydując się na kompresję glossy, możesz liczyć na lepszą jakość pliku końcowego niż w przypadku kompresji stratnej. Z drugiej strony jednak nie uzyskasz aż takiej optymalizacji obrazów. Nadal będzie ona jednak intensywniejsza niż w przypadku kompresji bezstratnej.

6. Określ parametry kompresji i odpowiedni format

Ja na potrzeby tej instrukcji wybrałem kompresję stratną, by doszło do jak najmocniejszej optymalizacji obrazu. Jeszcze przed dodaniem pliku możesz określić szczegółowe ustawienia przygotowywanego procesu. Aby to zrobić, naciśnij przycisk „Settings„. Znajdziesz go po prawej stronie ekranu.

W tym miejscu masz możliwość:

• zmiany wymiarów obrazu,
• wygenerowania formatu WebP,
• wygenerowania Avif,
• wygenerowania Exif,
• konwersji CMYK na RGB,
• usunąć tło,
• zmienić kolor tła.

7. Dodaj zdjęcie

Po ustawieniu wszystkich parametrów optymalizacji obrazu przejdź do ostatniego kroku. Dodawanie zdjęcia w ShortPixel nie jest skomplikowane. Za jednym razem dodać możesz maksymalnie 50 plików. Zrobisz to na dwa sposoby:

• przeciągając pliki z folderu na swoim urządzeniu bezpośrednio na zaznaczone niebieskie pole w witrynie,
• naciskając niebieskie pole, a następnie wybierając w nowym oknie pożądane pliki i zatwierdzając ich wybór.

Ja w przykładzie posłużę się screenem strony głównej mojego serwisu, czyli Hostingwordpress.pl. Jest to plik JPEG o wielkości 203 KB i wymiarach 1126 × 722.

Po dodaniu plików do serwisu powinny być widoczne w niebieskim polu, jak na przykładzie poniżej. Na miniaturze zobaczysz od razu podstawowe dane dotyczące przewidywanej optymalizacji zdjęcia. W moim przypadku serwis zaoferował kompresję na poziomie 15,72 proc. W praktyce oznacza to zmniejszenie pliku z początkowych 203 KB do 171 KB.

Przed pobraniem pliku na dysk po zakończeniu kompleksowej optymalizacji możesz dodatkowo przyjrzeć się grafice. Aby to zrobić, naciśnij ikonę oka, widoczną pod miniaturą, obok procentowego wyniku zakończonego procesu.

Na ekranie pojawi się Twój obraz podzielony na dwie strefy: oryginalną i po konwersji. Możesz poruszać suwakiem i porównywać efekty przeprowadzonego zabiegu. W moim przypadku oba pola nie mają żadnych różnic, które byłbym w stanie dostrzec gołym okiem.

8. Zapisz obraz na dysku

Po zakończeniu optymalizacji zdjęcia możesz je pobrać na swoje urządzenie. Stamtąd trafi natomiast prosto na Twoją stronę internetową. Aby je ściągnąć, naciśnij niebieską ikonę strzałki skierowanej w dół. Znajdziesz ją pod miniaturą pliku, obok wyniku procentowego. Po kliknięciu w nią na ekranie zobaczysz nowe okno. Określ w nim miejsce zapisu nowego pliku. Wtedy też nadasz mu nową nazwę (warto to zrobić, bo dzięki temu nie pomylisz go z oryginałem).

9. Dodaj zdjęcie na swoją stronę internetową

Ostatnim krokiem prowadzącym do zwiększenia szybkości ładowania strony WWW jest dodanie na nią zoptymalizowanego zdjęcia. W zależności od sytuacji może ono zastąpić aktualne (cięższe) lub będzie stanowić zupełnie nowy element (np. przy tworzeniu nowej witryny).

Aby dodać zoptymalizowany obraz, musisz zalogować się na swoje konto w WordPressie. Następnie przejdź do zakładki „Media” – znajdziesz ją w bocznym menu po lewej stronie.

Tam znajduje się przycisk „Dodaj plik mediów”. Alternatywnie możesz też kliknąć go bezpośrednio w menu bocznym (o ile będzie widoczny).

Po naciśnięciu przycisku na ekranie zobaczysz pole pozwalające na dodanie plików JPEG, w formacie WebP i Avif, PNG i innych. Dodawanie ich jest możliwe na dwa sposoby:

• przeciągając plik bezpośrednio z dysku na puste pole,
• naciskając „Wybierz plik” i wybierając go w nowym oknie.

Po dodaniu zdjęcia pojawi się ono w bazie Twojego WordPressa. Oznacza to, że plik został pomyślnie umieszczony na serwerze. Od tego momentu możesz z niego swobodnie korzystać i umieszczać go w witrynie. Mowa tu zarówno o stronie głównej, jak i wszystkich podstronach czy wpisach.

Niepotrzebne obrazy warto też regularnie usuwać z WordPressa – co też może wpłynąć na szybkość ładowania strony internetowej. W takim przypadku możesz nacisnąć „Zaznaczanie wielu”, wybrać dany plik i kliknąć „Usuń”.

Alternatywnie, po naciśnięciu miniatury danego pliku, opcję „Usuń” znajdziesz po prawej stronie nowego okna.

Instrukcja optymalizacji obrazów w WordPressie przy pomocy wtyczki WP

Nie chcesz korzystać z serwisu przeglądarkowego, optymalizując obrazy? Drugą opcją jest sięgnięcie po dedykowane WordPressowi wtyczki. To narzędzia, z których możesz korzystać bezpośrednio z poziomu kokpitu administratora.

Opisywany serwis ShortPixel dysponuje darmową wtyczką przygotowaną specjalnie z myślą o użytkownikach WordPressa. Możesz wykorzystać ją do poprawy szybkości ładowania strony WWW bez opuszczania kokpitu. Aby dodać to rozwiązanie, przejdź do sekcji „Wtyczki” na swoim koncie, na którym masz zapisane pliki do optymalizacji. Następnie naciśnij przycisk „Dodaj wtyczkę„. Znajdziesz go na samej górze zakładki.

1. Instalacja wtyczki WordPress

W pustym okienku wpisz nazwę pluginu: „ShortPixel Image Optimizer – Optimize Images, Convert WebP & AVIF„.

Pierwszy wynik z lewej strony ekranu to interesujące nas rozwiązanie. Kliknij przycisk „Zainstaluj„, a następnie „Włącz„.

W odróżnieniu od wersji przeglądarkowej skorzystanie z wtyczki wymaga utworzenia konta użytkownika. Jeśli już je masz, wystarczy tylko podać klucz API. W innym przypadku możesz za darmo otrzymać dostęp poprzez podanie swojego adresu e-mail. Po wybraniu jednej z tych opcji naciśnij przycisk „Continue„.

2. Określenie sposobu optymalizacji obrazów

Po założeniu konta możesz rozpocząć proces optymalizacji grafik, by poprawić wydajność strony WWW. W ShortPixel warto na początku rozważyć dwa działania:

• ustawienie automatycznej optymalizacji wszystkich nowych obrazów, dodawanych do serwisu,
• przeprowadzenie optymalizacji wszystkich obrazów znajdujących się w danym momencie na serwerze.

3. Automatyczna optymalizacja nowych obrazów

W pierwszym przypadku zasady działania automatycznej optymalizacji każdego nowego obrazu możesz określić z poziomu widoku „Overview”. Wystarczy nacisnąć „Flx now” w sekcji „Optimize new Images”.

4. Optymalizacja obrazów na serwerze

Optymalizacja obrazów aktualnie znajdujących się na serwerze odbywa się z poziomu zakładki „Image Optimization„. Po przejściu do niej określ wszystkie parametry optymalizacji.

5. Zainicjowanie procesu optymalizacji

Następnie naciśnij „Save and Go To Bulk Process„, aby zapisać wprowadzone ustawienia oraz rozpocząć optymalizację. W nowym oknie kliknij „Start Optimization”. To rozpocznie 4-stopniowy proces optymalizacji wszystkich Twoich zdjęć w witrynie i na serwerze. Realizowane będzie to oczywiście zgodnie z wprowadzonymi wcześniej ustawieniami.

6. Wybór zdjęć

Na tym etapie możesz wybrać pliki, które mają zostać zoptymalizowane przez wtyczkę. Nie odbywa się to ręcznie (co byłoby męczące w przypadku większej liczby plików na serwerze). Grafiki „typowane” są na podstawie ogólnych wytycznych, które samodzielnie określasz. Po wyborze zakresu działania pluginu naciśnij przycisk „Calculate” na samym dole strony.

7. Podsumowanie

W tym kroku wtyczka w zwięzłej formie prezentuje najważniejsze dane dotyczące podejmowanej optymalizacji. Widać tu również, ile darmowych „kredytów” masz do wykorzystania i ile jest potrzebnych do przeprowadzenia zleconego przez Ciebie działania. W razie potrzeby z tego poziomu możesz je dokupić, naciskając przycisk „Buy inlimited credits”. Jeśli wszystko się zgadza, to wystarczy, że naciśniesz „Start Bulk Optimization„.

8. Optymalizacja masowa

Na tym etapie możesz obserwować realizowanie zleconego procesu. System na żywo prezentuje Ci pliki, które są w danym momencie aktualizowane. To, jak długo zajmie ten etap, zależy w głównej mierze od ilości materiałów, które muszą przejść kompresję. Działa to natomiast stale, bez konieczności pozostawania w tej karcie. Możesz więc w oczekiwaniu na zakończenie, zająć się wykonywaniem innych obowiązków.

9. Zakończenie

Gdy proces optymalizacji dobiegnie końca, na ekranie zobaczysz podsumowanie. Wtyczka poinformuje Cię, ile obrazów przeszło optymalizację (w moim przypadku 4) i czy w trakcie procesu doszło do błędów. Ponadto w górnej części okna pojawi się procentowe przedstawienie stopnia kompresji (w moim przypadku było to 25 proc. – na screenie widoczne w tym miejscu N/A).

Alternatywy dla ShortPixel

Na potrzeby tej instrukcji skorzystałem z serwisu internetowego oraz pluginu WordPress ShortPixel. Warto podkreślić natomiast, że nie jest to jedyne oprogramowanie, które pozwoli Ci na skuteczną i szybką kompresję obrazów. Niemalże za pomocą jednego kliknięcia zrobisz to także na wielu innych stronach i przy pomocy rozmaitych wtyczek.

W przypadku serwisów działających w przeglądarkach internetowych przykładami alternatywnych rozwiązań są m.in.:

• Optimizilla (Imagecompressor.com),
• ResizePixel,
• Website Planet,
• ImageRecycle,
• OptiPic,
• TinyPNG,
• ImageOptim.

Jeśli zależy Ci na narzędziu działającym od razu w WordPressie lub nawet bezpośrednio na serwerze, to do wyboru masz takie oprogramowania, jak m.in.:

• EWWW Image Optimizer,
• LiteSpeed Cache,
• WP Smush,
• Kraken Image Optimizer,
• Optimole,
• Imagify.

Optymalizacja obrazów w WordPress? Wszystko załatwisz online w kilka sekund!

Przyśpieszenie procesu ładowania strony WWW ma kluczowe znaczenie dla pozytywnego doświadczenia użytkownika. Ponadto jest to bardzo ważne z punktu widzenia SEO. Budowa wizerunku marki składa się z wielu pozornie drobnych elementów, o które warto zadbać. W tym natomiast pomóc Ci może wydajna kompresja – wygodna w obsłudze i niegenerująca dodatkowych opłat.

Na rynku znajdziesz wiele narzędzi optymalizacyjnych, prowadzących do znacznego skrócenia czasu ładowania strony WWW. Część pozwala zachować jakość obrazu, inne oferują kompresje stratne lub inne, pośrednie rozwiązania. Wybierz to, które będzie dla Ciebie najodpowiedniejsze i twórz swoje własne miejsce w sieci, które będzie przyciągało odbiorców.