Kompresja obrazu

Dlaczego warto optymalizować obrazy na stronie?

No właśnie. Po co nam cała zabawa z optymalizacją zdjęć. Przecież jeśli wrzucam obraz na stronę, to zależy mi na tym, żeby wyglądał możliwie dobrze i zawierał tyle szczegółów ile tylko jest to możliwe.

Takie twierdzenie może być słuszne z punktu widzenia fotografika, który tworzy swoje potrfolio on line ale słuszne jest tylko pozornie…

Wyobraź sobie stronę, na której jest kilka, kilkadziesiąt zdjęć (na stronie głównej, nie na całej 🙂 Każde z nich waży choćby 2 MB (nie wierzysz, że są takie strony? Gwarantuję ci, że są.) Na górze strony znajduje się się dodatkowo slider, który przewija kilka zdjęć, oczywiście pełnowymiarowych, na całym ekranie (takie motywy stają się dziś bardzo popularne.)

Ty jesteś odwiedzającym i bardzo zależy ci na tym, żeby zobaczyć jej zawartość. Czekasz więc cierpliwie na to, aż każdy element graficzny w pełni się załaduje. Jeśli coś się „przytnie” odświeżysz stronę i poczekasz dodatkowych kilkadziesiąt sekund. Przecież ci zależy…. a co jeśli ci nie zależy?

Co jeśli jesteś niecierpliwy (jak większość internautów) i widzisz, że strona ładuje się bardzo wolno?

Powiem ci co wtedy. Wtedy robisz to co zrobi większość czyli klikniesz w magiczny przycisk „cofnij” (jeśli szukałeś czegoś za pomocą wyszukiwarki),  przejdziesz do kolejnego linku, który znajduje się niżej w wynikach wyszukiwania. Taka jest gorzka prawda i w tym przypadku nawet super atrakcyjny „content” nie wiele pomoże, bo internauta nawet do niego nie dotrze. Wcześniej opuści stronę…. Szczególnie, jeśli sytuacja dotyczy urządzeń mobilnych.

Wtedy Ty jako admin strony widzisz w Analityce Google, że współczynnik odrzuceń sięga np. 90%, a współczynnik Strony/Sesje jest na poziomie np. 1, że o czasie spędzonym w witrynie nie wspomnę, bo jest on krótszy niż 10 sekund…

To nie jest miłe uczucie. Miałem tak kiedyś więc wiem jak to boli… Aktualnie nie posiadam pod opieką strony, która ma tak masakryczne rezultaty, więc do zilustrowania powyższego posłużę się screenem jednej ze stron o gorszych współczynnikach:

Oczywiście nie zawsze wszystkie problemy z szybkością ładowania strony są wynikiem nie zoptymalizowanych obrazków. Jest to jednak jeden z głównych czynników, bo faktycznie może nam zepsuć postrzeganie nawet ciekawego serwisu.

Szybkość ładowania strony.

Doszliśmy już do wniosku, że obrazy mogą zepsuć szybkość ładowania strony. Nasuwa się więc pytanie, jak to ustalić?

Najprostszym sposobem jest sprawdzenie jak duże pliki znajdują się w bibliotece na Twojej stronie. Jeśli działasz na WordPressie, to masz w panelu zakładkę „media” w której sprawdzisz wagę i rozmiar swoich plików. W innych CMS-ach będzie podobnie. Jeśli Twoja strona to zwykły html na ten przykład, to właściwości obrazków odkryjesz np. przy pomocy klienta FTP, którym wejdziesz do katalogu zawierającego obrazy na Twojej stronie (ten sposób działa oczywiście również w przypadku CMS-ów 😉

Jeśli chcesz natomiast sprawdzić jakimś automatem które obrazy sprawiają największe problemy, możesz wykorzystać do tego narzędzie on-line. Ja osobiście często korzystam z GTMetrix i myślę, że dla Ciebie też może okazać się przydatne. Ono analizuje nie tylko obrazy ale również inne składowe Twojej strony.

Generalnie optymalizacja obrazów jest tylko jednym z wielu kroków, które powinniśmy zrobić, żeby poprawić parametry naszych stron. O tym jednak traktuje inny artykuł.

Poniżej screeny  GTMetrix dla przykładowej strony:

Jak widzisz „kondycja” strony pozostawia wiele do życzenia. Trzeba na niej trochę posprzątać oraz kilka rzeczy zoptymalizować – o czym będą traktować kolejne artykuły. Dzisiejszy skupia się na obrazach, listę których (tych nie zoptymalizowanych) znajdziesz rozwijając zakładkę „Optimize images”.

Obrazy nie zoptymalizowane:

Przejdźmy więc do sedna niniejszego artykułu i postarajmy się odkryć metodę na optymalizowanie obrazów.

Jak optymalizować obrazy na stronie?

Gdy mamy już ustalone co sprawia nam problem w kwestii zbyt dużej wagi, wchodzimy na nasz serwer FTP za pomocą jakiegos klineta ftp. Następnie lokalizujemy dres kłopotliwego pliku – na podstawie ścieżki widocznej w raporcie z GTmetrix i kopiujemy ten problematyczny plik na nasz komputer.

Ta opisywana teraz procedura jest w 100% ręczna. Jeśli nie zamierzasz „ręcznie” przeprowadzać optymalizacji, a korzystasz z WoprdPressa, możesz ten rozdział pominąć.

Pobieramy przez FTP

Po pobraniu plików przeprowadzimy ich optymalizacje, a następnie wyślemy nasz poprawiony plik w miejsce, z którego go pobraliśmy. Pamiętajmy, żeby po optymalizacji obrazka odświeżyć listę plików w lewym okienku klienta FTP. Wtedy pojawi nam się przy pliku nowy jego rozmiar i dzięki temu będziemy wiedzieli o ile zmniejsza się jego rozmiar (porównując z rozmiarem pliku oryginalnego widocznym w prawym oknie klienta).

Wysyłanie – podmienianie

Nadpisanie

Zanim jednak będziemy mogli podmienić plik oryginalny na ten zoptymalizowany, musimy przejść przez proces kompresowania obrazu na potrzeby strony www.

Powyższa procedura (nadpisywanie plików) ma oczywiście zastosowanie w przypadku optymalizacji istniejącej już strony. Jeśli będziesz wgrywać nowe pliki na serwer, to o nadpisywaniu rzecz jasna nie będzie mowy.

Jednym z podstawowych pytań jakie sobie musimy zadać jest to dotyczące formatu plików wykorzystywanych w internecie. Generalnie najczęściej spotkamy się z plikami jpg, png lub ewentualnie gif. W naszym przykładzie pominę te ostatnie, które najczęściej wykorzystywane są na potrzeby „ruchomych obrazków”. Skupmy się na obrazach statycznych, które wykorzystujemy przecież znacznie częściej.

Jaki format wybrać dla obrazów na stronę www?

Oczywiście JPG lub PNG. Jedyny pewnik w tej sytuacji jest taki, że jeśli obraz zawiera przezroczystości, to sugeruję format PNG, z oczywistych względów 🙂

Jaki rozmiar obrazów ustawić?

Z rozmiarem to różnie bywa… jeśli masz stronę statyczną, to raczej twórz taki rozmiar jak przewidywał jej autor dla danej lokalizacji obrazu w konkretnym miejscu. Jeśli masz stronę zbudowaną w oparciu o CMS, to dodajesz jeden rozmiar główny, a wszelkie miniatury skrypt tworzy automatycznie podczas dodawania zdjęcia. W przypadku WordPressa (większość stron, którymi się opiekuję jest zbudowana własnie na nim), używam obrazów głównych (np. takich, które będą wyświetlane w sliderach czy staną się obrazami wyróżniającymi danego wpisu)  o szerokości 1920 pixeli.

Dzięki temu w większości przypadków wyświetlają się one poprawnie we wszystkich motywach, a jednocześnie są na tyle duże, że ich powiększenie na ekranie nie powoduje mieszanych emocji 🙂

To oczywiście jest subiektywny wybór. Możesz używać innych szerokości. Możesz kierować się też przydatnością obrazu na potrzeby Facebooka. Gdy będziesz udostępniać wpis i chcesz mieć obraz dostosowany do FB (żeby dobrze wyglądał). Wtedy załóż sobie, że minimalne rozmiary to 1200 x 900 px. Jak widzisz FB promuje proporcje obrazu 4:3 i takie z reguły wykorzystuję.

W przypadku obrazów, które nie będą pełniły funkcji obrazów wyróżniających, ich rozmiar zależy od Ciebie, z tym, że tu mała uwaga. Jeśli potrzebujesz obrazka 300 x 200, np w tekście, to nie dodawaj ze swojej biblioteki czegoś 1920 szerokiego, a potem przeskalowanego „parametrami”. Takie obrazki „przeskalowane” są traktowane jak niedoskonałości strony (no i niepotrzebnie zużywają przestrzeń i transfer). Jeśli potrzebujesz małego obrazka – stwórz sobie taki.

No właśnie. Wreszcie przechodzimy do tego, jak zoptymalizować obrazy na potrzeby strony internetowej.

Istnieje wiele metod. Ja przedstawię ci kilka takich z których sam korzystam na co dzień. Pragnę jednak zwrócić Twoją uwagę na fakt, że pewnie nie są one idealne i być może znasz inne…

Ręczna optymalizacja obrazów.

Zacznijmy w sposób najmniej zautomatyzowany ale dający najpełniejszą kontrolę nad efektem końcowym. Zoptymalizujmy obrazy za pomocą dwóch różnych programów. Pierwszym z nich będzie Photoshop, a drugim Gimp. Do tego celu jak najbardziej nada się zarówno pierwszy jak i drugi.

Optymalizacja obrazu Photoshop

Rzecz jasna najpierw otwieramy nasz plik.

Następnie musimy go przeskalować do interesującego nas rozmiaru (jeśli tworzymy nowy obraz dla strony). Jeśli podmieniamy istniejące już obrazy, to zapewne są one w odpowiednich rozmiarach i możemy od razu przejść do etapu kompresowania grafiki.

W tym celu z zakładki „plik” wybieramy „eksportuj”, a następnie „zapisz dla internetu”.

Otworzy nam się okienko opcji zapisu do internetu i w nim właśnie określamy interesujące nas parametry zdjęcia.

Ustawiamy sobie JPEG (no chyba, że podmieniamy jakiś PNG, wtedy nie zmieniamy rozszerzenia), zaznaczamy „Zoptymalizowany” oraz „Konwertuj na sRGB (wszak obraz idzie do internetu, a nie do druku).

Możemy zmienić rozmiar (jeśli nie uczyniliśmy tego wcześniej, a istnieje taka konieczność) i przechodzimy do okienka „Jakość”, gdzie po kliknięciu w strzałeczkę otworzy się suwak, na którym ustawimy stopień kompresji.

Powinniśmy mieć ustawiony widok na „2 na ekranie”, żeby móc monitorować wielkość i jakość naszego pliku docelowego.

Po wszystkim klikamy zapisz i gotowe. Możemy teraz dodać obraz do strony lub podmienić istniejący (w tym przypadku pamiętajmy, żeby nazwy pliku nie zmieniać 🙂

Optymalizacja obrazów Gimp

W przypadku Gimpa sytuacja wygląda bardzo podobnie, choć oczywiście interface programu znacznie się różni.

Otwieramy modyfikowany plik i ewentualnie skalujemy go (zakładka „obraz”). Następnie klikamy „Plik” wybieramy „Wyeksportuj jako…” i przechodzimy do okna eksportu. Jeśli podmieniamy plik zostawiamy naszą domyślną nazwę i klikamy „Wyeksportuj”.

W tym przypadku pracujemy na pliku jpeg, więc otwiera nam się okienko kompresji takie jak na screenie poniżej. Suwakiem wybieramy poziom jakości (nie przesadzajmy z jej obniżaniem, bo jakość obrazka będzie pozostawiała wiele do życzenia).

Możemy zaznaczyć okienko „Podgląd…” i w widoku warstw pokaże nam się nowa warstwa. Jednocześnie widzimy wielkość finalnego pliku (pod suwakiem). Gdy ta wartość będzie dla nas zadowalająca – klikamy „Wyeksportuj”.

Export

Nadpisanie

Ustawienie kompresji

Optymalizacja obrazów Online.

Można posłużyć się narzędziami dostępnymi online. Jest ich przynajmniej kilka zarówno w wersjach darmowych jak i płatnych. Na nasze potrzeby wykorzystamy narzędzie dostępne pod adresem http://compressjpeg.com/pl/ dzięki któremu przeprowadzimy szybką kompresję naszych obrazów.

Obsługa tego kompresora jest banalnie prosta, więc nie będę opisywał szczegółowo tych dwóch kliknięć, które zoptymalizują dla Ciebie obrazek.

Optymalizacja obrazów GTmetrix?

Wspomniałem już o GTmetrix jako narzędziu do sprawdzania „kondycji” i stopnia optymalizacji naszej strony. Teraz wspomnę o funkcjonalności związanej z optymalizacją obrazków. Funkcjonalności, która nie jest aż tak oczywista.

Podczas generowania raportu obrazów do poprawki pojawia się przy każdym link do „podglądu” tego, jak wyglądałoby nasze zdjęcie po optymalizacji. Możemy kliknąć w ten link. W nowej karcie przeglądarki otworzy się nasz obraz w zoptymalizowanej wersji. Wtedy wystarczy tylko zapisać go na dysku, nadać nazwę taką jak oryginał i podmienić na serwerze za pomocą klienta FTP.

Gdzie jest link do „optymalizatora”:

Porównanie stopnia kompresji w przypadku narzędzi online.

Wypróbowaliśmy dwa narzędzia. Zobaczmy jakie efekty dały nam kompresje obrazów przeprowadzone za ich pomocą:

Co znaczą cyferki:

1. Oryginał
2. Obraz po operacji w GTmetrix
3. Optymalizacja narzędziem on line z wcześniejszego linku.

Jak widzimy o wiele większy stopień kompresji daje nam narzędzie wspomniane wcześniej. Nie będę wchodził w szczegóły i sprawdzał który obrazek jest bardziej zniekształcony (wszak każda kompresja wyciska na obrazie swoje piętno). Pomijając ten aspekt widzimy, że obraz po kompresji jest (może być) kilka razy lżejszy niż oryginał (bez zmiany wielkości w pixelach). Wyobraź sobie, że masz na stronie kilkaset obrazów i każdy zoptymalizujesz w ten sposób? Widzisz różnicę, prawda?

No właśnie… mam na stronie kilkaset obrazów i czy jest jakiś sposób na przeprowadzenie ich optymalizacji bez konieczności pobierania ich na komputer oraz późniejszego (po kompresji) podmieniania ich na serwerze?

Znam kilka takich sposobów. Skupię się na tym, jak to zrobić w WordPressie, bo tego dotyczy tematyka tej strony.

Automatyczna optymalizacja obrazów w WordPressie

Już pewnie wiesz, że WorPress wtyczkami stoi i to one w głównej mierze odpowiadają za jego rozbudowane możliwości.

Podobnie sytuacja wygląda w przypadku wtyczek służących optymalizacji obrazów. Wystarczy, że w wyszukiwarkę wtyczek wpiszesz interesującą cię frazę, a w wynikach znajdziesz kilka (przynajmniej) proponowanych rozwiązań. Nie udało mi się nigdy przetestować wszystkich. Skupiłem się na tych, które miały „dobre recenzje”.

Jeszcze taka mała uwaga w kwestii bezpieczeństwa.

Zanim zaczniesz przeprowadzać automatyczną optymalizację, zrób sobie na wszelki wypadek przynajmniej kopie zapasową bazy danych. Najlepiej pełną kopię zapasową, włącznie z plikami. Gdyby okazało się, że coś poszło nie tak jak powinno…

Wtyczka WP Smush – Smush Image Compression and Optimization

Ta wtyczka jest jedną z najbardziej przyjaznych zarówno w obsłudze jak i konfiguracji. Właściwie, to w wersji podstawowej czyli darmowej, konfiguracji praktycznie nie posiada. Stopień kompresji jest też oczywiście mniejszy niż w jej płatnej wersji ale i tak jest jednym z ciekawszych rozwiązań.

Wyszukiwanie i instalacja wtyczki.

Po instalacji pamiętajmy, żeby ją oczywiście włączyć. Bez tego nawet najlepsza pod słońcem wtyczka okaże się bezużyteczna 😉

Gdy już ją aktywujemy naszym oczom ukaże się dodatkowa zakładka znajdująca się w panelu admina WordPressa w sekcji Media. Wystarczy tam wejść i możemy przystąpić do optymalizacji naszych obrazów.

Zanim zaczniemy optymalizację, musimy przeskanować naszą galerię w poszukiwaniu plików, które można kompresować. do tego służy przycisk skanowania.

Wspomnę jeszcze tylko o pewnych ograniczeniach wersji podstawowej WP Smush:

• Obsługuje tylko obrazy znajdujące się w galerii WordPressa (nie przeprowadzisz optymalizacji obrazów z innych galerii np. NextGen Gallery)
• Jeśli plik jest cięższy niż 1 MB – zostaje pominięty. Takie pliki można kompresować tylko w wersji płatnej.
• Jednorazowo możesz optymalizować 50 obrazów. Po kompresji ostatniego z tej pięćdziesiątki ponownie musisz kliknąć w „Bulk Smush Now”

Teraz kilka rzeczy, które mi się podobają w WP Smush:

• Czytelny interface. Widzisz ile obrazków jest zoptymalizowanych, ile pozostało, ile MB zaoszczędziłeś na kompresji.
• Jednorazowo możesz zoptymalizować 50 obrazów… Dobrze widzisz. Ta sama funkcjonalność jest zarówno wadą jak i zaletą. Wada polega na narzuceniu ograniczenia. zaleta natomiast na bezpieczeństwie. Zastanawiasz się dlaczego? Otóż dlatego, że w przypadku jednorazowego optymalizowania całej biblioteki mediów mogą wyniknąć pewne problemy. Miałem taki przypadek’ gdy optymalizowałem około 1500 obrazów jednocześnie (za pomocą innej wtyczki, tej z kolejnego akapitu) i cały proces utknął mniej więcej w 80% paska postępu. Co gorsza, był widocznie tak intensywny, że strona zaczęła sypać błędami i… padła. Musiałem przywracać bazę danych i wrócić do metody „po 50 na raz”. Tak na wszelki wypadek 🙂
• Wtyczka po aktywacji przejmuje kontrolę nad nowo dodawanymi obrazami i każdy optymalizuje już w trakcie dodawania go do galerii. Fakt, że rzez to obrazki dodają się nieco wolniej ale już od razu zoptymalizowane (zarówno obraz główny jak i wszystkie jego warianty tworzone przez skrypt na potrzeby miniatur itp).

Tu widzisz jak przebiega proces kompresji wraz z komunikatami o tym, że obrazu nie można optymalizować (w tej wersji wtyczki) ze względu na jego wielkość przekraczającą 1 MB

Wtyczka EWWW Image Optimizer

To druga wtyczka do WordPressa, o której chciałbym wspomnieć. Ta posiada naprawdę spore mozliwości konfiguracji i co najważniejsze pozbawiona jest limitu 50 zdjęć w jednym ciągu.

Gdyby zająć się wszystkimi możliwościami konfiguracji jakie ona posiada, musiałbym napisać jeszcze raz tak długi tekst (a ten teraz ma już około 2500 słów). Skupię się tylko na uruchomieniu i użyciu na wartościach domyślnych, jakie są ustawione po aktywacji wtyczki.

Po pobraniu i instalacji pluginu w zakładce „media” pojawi się link „Masowa optymalizacja”.

Instalacja

Dodatkowo w zakładce „Ustawienia” w panelu głównym WordPressa zobaczysz link do ustawień wtyczki (nazwa linku zgodna z nazwą wtyczki, więc znajdziesz bez problemu).

Ustawienia

Po wejściu w ustawienia będziesz mieć możliwość konfiguracji praktycznie każdego aspektu procesu kompresji zarówno w stopniu podstawowym jak i zaawansowanym. W naszym przykładzie pozostajemy na ustawieniach domyślnych.

Start

Optymalizację przeprowadzasz za pomocą zakładki „masowa optymalizacja” w panelu ‚media”. Po wejściu tam, wtyczka automatycznie przeskanuje całą zawartość Twojej strony i określi ile obrazków można zoptymalizować. Tobie pozostaje jedynie kliknąć w przycisk „Rozpocznij optymalizację” i uzbroić się w cierpliwość gdyż proces może potrwać dłuższą chwilę…

Skan

Podczas samego procesu będziesz obserwować pasek postępu, a okno komunikatów będzie ci wypluwało informacje o tym, które pliki i w jakim stopniu zostały zoptymalizowne (lub nie zostały i dlaczego).

Proces

Gdy wtyczka poradzi sobie już ze wszystkimi obrazami, zobaczysz komunikat zakończono, wraz z bardzo długą listą komunikatów dotyczących poszczególnych plików.

Finał

Zakładając, że proces przebiegł pomyślnie, że wszystkie obrazy zostały zoptymalizowane (być może cześć musisz kompresować ręcznie), możesz teraz przejść do etapu podsumowującego Twoje starania.

Wyniki przed i po optymalizacji obrazów.

Gdy cały proces dobiegł końca, poddajemy naszą stronę analizie za pomocą GTmetrix, żeby zobaczyć ile punktów zyskaliśmy.

poniższe screeny pokazują w jak znacznym stopniu polepszyliśmy parametry strony w kwestii zoptymalizowanych obrazów. W tym konkretnym przypadku większość obrazów zostało zoptymalizowana wtyczką EWWW Image Optimizer. Kilka ręcznie Photoshopem.

Przed optymalizacją

Po optymalizacji

Podsumowanie

Czy zatem optymalizacja obrazów jest istotna?

odpowiem, że tak. Jest istotna. Często dzieje się tak, że pisząc jakiś tekst dodajemy obrazki bez przywiązywania jakiejkolwiek wagi do ich przygotowania na potrzeby strony. Jesteśmy w ferworze tworzenia treści i obrazy traktujemy jako jedynie uzupełnienie dla niej.

Nawet jeśli tak jest faktycznie, to miejmy na uwadze fakt, ze to „uzupełnienie” może zepsuć nam ocenę strony (zarówno w oczach odwiedzających jak i oczach Googla). Jeśli obrazy będą zbyt duże/ciężkie, to najprawdopodobniej wpłynie to na komfort użytkowania strony i czas jej ładowania, a to finalnie zawsze przekłada się na ruch…

…..

Na zakończenie wspomne tylko o konieczności wyczyszczenia cache strony, jeśli wykorzystujesz na niej tego typu rozwiązania.

 

Komentuj na Facebooku

opublikowane