Optymalizacja obrazów w WordPressie – przyspiesz swojego WordPressa
Optymalizacja obrazów w WordPressie – przyspiesz swojego WordPressa
Zdjęcia oraz grafiki są nieodłącznym elementem większości stron internetowych. Jeśli są dobrej jakości i odpowiednio dobrane to z całą pewnością znacząco podnoszą walory estetyczne witryny. Ładne i ciekawe zdjęcia niewątpliwie mogą przykuć uwagę użytkowników, dzięki czemu dłużej zostaną na naszej stronie. Poza tym jest jeszcze jedna ważna sprawa ściśle związana z SEO. Odpowiednio opisane grafiki pod kątem wybranych słów kluczowych ułatwiają nam pozycjonowanie strony internetowej. Niestety jest też druga strona medalu. Jeśli zdjęcia nie zostaną zoptymalizowane z uwagi na rozmiar oraz wagę, a także odpowiedni format, w znaczący sposób przyczynią się do spowolnienia naszej strony. To oczywiście będzie miało niekorzystny wpływ na uzyskanie wyższej pozycji w Google. Poza tym wolno działająca strona zniechęci użytkowników do jej odwiedzenia. Na szczęście bardzo łatwo można naprawić ten problem. Optymalizacja obrazów w WordPressie – sprawdź jak ją wykonać, zwiększ szybkość swojej strony i zyskaj wyższą pozycję w Google.
Przetestuj prędkość swojej strony
Od dłuższego czasu Google premiuje szybsze strony wyższą pozycją w wynikach wyszukiwania. Za pomocą narzędzia PageSpeed Insights lub GTMetrix sprawdzisz szybkość swojej strony.
Po wykonaniu audytu wróć uwagę na sekcję dotyczącą grafik. Jeśli Twoja strona nie zaliczyła jednego z poniższych testów, to znak, że musisz popracować nad optymalizacją obrazków:
- Zmień rozmiar obrazów.
- Odłóż ładowanie obrazów poza ekranem.
- Wyświetlaj obrazy w formatach nowej generacji.
- Użyj efektywnego kodowania obrazów.
Na szczęście naprawa powyższych problemów nie jest zbyt trudna, a znacząco przyspieszy Twojego WordPressa.
Optymalizacja obrazów w WordPressie – zmień rozmiar obrazów
Zdjęcie, które zbyt dużą rozdzielczość, z pewnością ma lepszą jakość. Jednak w przypadku stron internetowych nie można przesadzić z rozmiarem pliku. Zbyt duży rozmiar idzie w parze z większą wagą zdjęcia. Niestety zbyt ciężkie grafiki negatywnie wpływają na prędkość naszej witryny.
WordPress posiada wbudowany mechanizm, który jest odpowiedzialny za skalowanie grafik. Ustawienia możemy zmienić w zakładce: Ustawienia -> Media:
Jednak może się zdarzyć, zwłaszcza podczas tworzenia strony, że będziesz musiała/musiał zastosować grafikę o niestandardowych wymiarach. W takiej sytuacji trzeba ręcznie zmniejszyć rozmiar.
W pierwszej kolejności sprawdź, czy zdjęcie, które chcesz przesłać na serwer, ma zbliżone wymiary do miejsca w którym będzie się docelowo wyświetlać. Użyj wbudowanych w przeglądarkę narzędzi deweloperskich. Kliknij prawym przyciskiem myszy na daną grafikę i wybierz opcję Zbadaj. Na poniższym przykładzie widać, że miejsce na grafikę ma wymiary 668 x 384 px.
W związku z tym nie ma sensu dodawać obrazka, który ma większe wymiary. Oczywiście są pewne wyjątki. Warto dodać większą grafikę w przypadku galerii lub portfolio, gdzie głównym elementem na stronie są właśnie zdjęcia. Jednak tu także nie należy przesadzić z rozmiarem.
Teraz zastanówmy się nad tym, w jaki sposób zmniejszyć rozmiar grafiki. W tym celu możesz użyć specjalnych programów lub narzędzi online.
Zmiana rozmiaru zdjęcia w programie GIMP
Do obróbki zdjęć polecam bezpłatny program GIMP. Jest to darmowa alternatywa dla Photoshopa. Oczywiście program ten nie jest aż tak rozbudowany, jednak w zupełności wystarcza do podstawowych czynności.
Po zainstalowaniu programu, otwórz wybraną grafikę w GIMPie. Następnie z górnego menu wybierz Obraz -> Skaluj obraz…
W kolejnym kroku wpisz pożądane wymiary i kliknij przycisk Skaluj.
Zmiana rozmiaru grafiki za pomocą iLoveIMG
W przypadku tego narzędzia nic nie musimy instalować na komputerze. Wystarczy przejść na stronę iloveimg.com, a następnie załadować dany obrazek.
Kliknij przycisk ZMIEŃ ROZMIAR i wpisz odpowiednie wymiary dla grafiki. Następnie zatwierdź zmiany przyciskiem ZASTOSUJ.
Możesz już pobrać zmniejszoną grafikę.
Zmiana rozmiarów bezpośrednio w bibliotece mediów WordPressa
Co, jeśli już wgraliśmy zbyt duży obrazek do biblioteki mediów? Na szczęście w panelu WordPressa jest opcja zmiany rozmiarów. Otwórz daną grafikę i przejdź do jej edycji:
W prawym górnym rogu znajduje się opcja przeskalowania obrazka.
Zadbaj o odpowiedni format grafiki
Podczas zapisywania grafiki możesz mieć dylemat, jaki wybrać format. Jeśli jest to fotografia (np. krajobraz, zdjęcie portretowe lub produktowe, itp.) wtedy najlepszym formatem będzie JPG. Natomiast jeśli są to ikonki, grafiki z przezroczystością, zrzuty ekranu, logo, wykresy, to wtedy trzeba wybrać PNG. Dzięki temu zachowamy przezroczystość, natomiast obrazy będą mieć nieco lepszą jakość.
Optymalizacja obrazów w WordPressie – wybierz odpowiednią jakość
Podczas zapisywania zdjęcia w programie graficznym zazwyczaj jest opcja dostosowania jakości. Jeśli lekko ją obniżymy (zwłaszcza w przypadku zdjęć w formacie JPG), będzie to praktycznie niezauważalne. Jednak w znaczący sposób obniżymy wagę pliku. Optymalną wartością dla jakości będzie 70-80%. Pamiętaj jednak, żeby nigdy nie ustawiać jej na 100%.
Optymalizacja obrazów w WordPressie za pomocą wtyczki
W repozytorium WordPressa dostępnych jest wiele bezpłatnych wtyczek pozwalających na optymalizację obrazów. Za pomocą tych dodatków zoptymalizujemy nie tylko nowo wgrywane zdjęcia, ale także te, które znajdują się na serwerze. Polecam wtyczkę Smush. Plugin ten występuje zarówno w bezpłatnej i płatnej wersji. Jednak ta pierwsza jest w zupełności wystarczająca.
Przy użyciu wtyczki Smush dokonasz masowej kompresji zdjęć, które już się znajdują w bibliotece mediów, a także włączysz lazy load (funkcjonalność tą omawiam w kolejnym punkcie). Ponadto jest opcja usuwania danych EXIF. Są to metadane, które są zbędne w przypadku grafik używanych na stronach internetowych. Metadane te niepotrzebnie zwiększają rozmiar plików.
Odłóż ładowanie obrazów poza ekranem
Lazy load (eng. leniwe ładowanie) jest to mechanizm, dzięki któremu po wejściu na stronę ładowane są tylko te grafiki, które są aktualnie widoczne dla użytkownika. Pozostałe obrazy są wczytywane dopiero po przewinięciu strony w dół. Lazy load znacząco przyspiesza stronę, ponieważ wczytywane są tylko grafiki, które są w danej chwili potrzebne.
Jeśli w badaniu prędkości strony otrzymałaś/eś zalecenie, żeby odłożyć ładowanie obrazów poza ekranem, oznacza to, że musisz wdrożyć na stronie leniwe ładowanie grafik.
Na szczęście nie jest to trudne zadanie. Jeśli masz zainstalowaną wtyczkę Smush, przejdź do zakładki Smush -> Lazy load. Następnie kliknij przycisk Activate.
I to wszystko Od teraz na Twojej stronie będą ładowane tylko grafiki, które są widoczne na ekranie.
Stosuj CDN
CDN czyli Content Delivery Network, jest to rozproszona sieć serwerów dostarczających treści. Serwery CDN pełnią rolę pośrednika w dostarczaniu żądanych zasobów. Na serwerach CDN możemy umieścić także grafikę. Jeśli dany użytkownik otworzy naszą stronę, to zostanie mu dostarczona grafika przez najbliższy serwer. Takie rozwiązanie w znaczący sposób pozytywnie wpływa na szybkość naszej strony.
Wadą CDN jest to, że musisz opłacać dodatkową usługę. Jednak może to przynieść spore korzyści.
Wyświetlaj obrazy w formatach nowej generacji
WebP jest formatem nowej generacji pozwalającym na kompresję obrazów rastrowych. Pliki zachowują wysoką jakość pomimo obniżenia wagi. Format ten zaprezentowano w 2010 roku i jest rozwijany przez Google. Warto wspomnieć o tym, że najpopularniejsza wyszukiwarka Giganta z Mountain View dużą wagę przywiązuje do tego, czy strona korzysta z WebP. Jeśli dana witryna serwuje obrazki w formacie nowej generacji, to automatycznie szybciej się wczytuje, a co za tym idzie może osiągnąć wyższą pozycję w Google. Tak więc warto wykonać tę optymalizację.
Na szczęście w repozytorium WordPressa znajdziemy bezpłatne wtyczki, za pomocą których łatwo i szybko przekonwertujemy grafiki do formatu WebP.
Polecam dodatek Converter for Media – Optimize images autorstwa matt plugins.
Po zainstalowaniu wtyczki przejdź do jej ustawień: Ustawienia -> Converter for media. W zakładce Ustawienia podstawowe:
1 – Zmienisz strategię konwertowania. Zalecam jednak pozostać przy domyślnych ustawieniach.
2 – W tym miejscu możesz wybrać foldery, w których zostaną przekonwertowane wszystkie pliki graficzne.
3 – Po zaznaczeniu tej opcji nowo przesłane pliki graficzne zostaną automatycznie przekonwertowane.
Następnie po zapisaniu zmian kliknij przycisk Uruchom optymalizację zbiorczą, żeby włączyć konwertowanie grafik do formatu WebP.
Optymalizacja obrazów w WordPressie – przyspiesz swojego WordPressa – podsumowanie
Odpowiednia optymalizacja obrazów jest kluczowa, jeśli zależy nam na poprawieniu prędkości naszej strony. Podsumowując, optymalizacja obejmuje działania takie jak:
- dobór odpowiedniego rozmiaru,
- zastosowanie odpowiedniej jakości kompresji (na poziomie 70-80%),
- wybór odpowiedniego formatu pliku,
- serwowanie grafik w formacie WebP,
- dostarczanie treści wykorzystując CDN,
- wdrożenie mechanizmu lazy loading.
Część działań możemy zautomatyzować za pomocą dostępnych wtyczek. Jednak część czynności możemy wykonać jeszcze przed wgraniem grafik na serwer.
Z całą pewnością nie należy wgrywać zdjęć od razu ze smartfona, czy aparatu. Takie zdjęcia będą mieć zbyt duży rozmiar, a co za tym idzie zbyt dużą wagę. Uwaga ta odnosi się także do świeżo pobranych stockowych zdjęć. Owszem, rozmiar można potem skorygować w bibliotece mediów. Jednak wgrywając zbyt ciężkie grafiki, niepotrzebnie zajmujemy miejsce na serwerze.