Jak zmniejszyć rozmiar zdjęć w WordPress?
Zdjęcia to obok kodu JavaScript z reguły jedne z “najcięższych” elementów stron internetowych. Niejednokrotnie mogą one wydłużać ładowanie naszej strony internetowe nawet o kilka sekund.
W tym wpisie pokażę jak w prosty sposób się z tym uporać i znacząco zmniejszyć rozmiar zdjęć, zwiększając tym samym prędkość swojej strony internetowej.
Kompresja zdjęć w WordPress
Nigdy nie zapomnę pewnej sytuacji. Po głośnych zapowiedziach aktualizacji Core Web Vitals i zwiększeniu się popularności narzędzi typu Pagespeed, dostałem pytanie od właścicielki strony internetowej, której zawartość wczytywała się, uwaga: ponad 60 sekund!
Wszedłem na stronę i okazało się, że kobieta dodawała tam całe mnóstwo zdjęć w wysokiej rozdzielczości, bez jakiejkolwiek kompresji i każde z nich ważyło średnio około 6 MB. Dla porównania, zdjęcia na mojej stronie ważą średnio jakieś ~100 kB, czyli dobre 60 razy mniej.
Z kompresją zdjęć można poradzić sobie na wiele sposobów. Możecie skorzystać z gotowych CDNów, które będą kompresować, jak i serwować obrazy za Was, a możecie też oszczędzić trochę środków i postawić np. na darmową wtyczkę do WordPress, która automatycznie będzie kompresowała wrzucane przez Was zdjęcia.
Tego rodzaju pluginów do WordPress jest bardzo dużo, więc możecie poszukać czegoś na własną rękę. Z mojego doświadczenia, mogę polecić Wam wtyczkę Resize Image After Upload. Jej konfiguracja jest naprawdę banalna, a co więcej, nie musimy tu za nic płacić (a wierzcie mi lub nie, CDNy potrafią kosztować naprawdę sporo, zwłaszcza jeśli macie stosunkowo małe, bardziej hobbystyczne witryny). Używam jej na kilku moich stronach (w tym na webporady.pl) i o ile nie jest to może najlepsze z możliwych rozwiązań, jest jednym z najprostszych i zapewnia efekty, które powinny zadowolić nawet właścicieli stosunkowo dużych witryn.
Po zainstalowaniu wtyczki wystarczy wejść w Panel administracyjny -> Ustawienia ->Resize Image After Upload i skonfigurować ją według własnych preferencji.
Oto moje ustawienia:
Polecam Wam jednak pokombinować na własną rękę. Te ustawienia sprawują się u mnie, ale dla niektórych jakość może być za słaba, lub rozmiar pliku może być nadal za duży. Możecie według własnego uznania zmniejszać lub zwiększać jakoś oraz rozdzielczość, oraz dostosowywać pozostałe ustawienia.
Zmiana formatów zdjęć w WordPress
Jeżeli kiedykolwiek korzystaliście z wyżej wymienionych narzędzi PageSpeed, prawdopodobnie kojarzycie komunikat pokroju “Wyświetlaj obrazy w formatach nowej generacji”.
I owszem, warto zacząć z nich korzystać.
Dla przykładu wszelkie ikonki i logotypy dobrze jest zastąpić np. SVG, które możemy w łatwy sposób modyfikować i jeszcze lepiej dostosowywać je do poszczególnych rozmiarów.
Same zdjęcia warto wyświetlać w formacie WEBP, który z reguły waży jeszcze mniej od skompresowanych PNG, czy JPG.
Jeżeli oczekujecie topowych efektów, zdecydowanie warto odejść od “tradycyjnych” formatów i zdecydować się na np. WEBP. Możecie użyć do tego chociażby wtyczki Converter for Media – Optimize images | Convert WebP & AVIF.
