Optymalizacja obrazków na stronie www pod Google Speed Test czyli prędkość ma znaczenie

Optymalizacja zdjęć i plików graficznych dodawanych do witryn – naturalnie wszystkich, nie tylko WordPress’owych – powinna być już standardem.

I nie tylko dlatego, że królem internetu już od jakiegoś czasu jest mobile, więc nie chcemy by nasi użytkownicy zbyt długo czekali na wczytanie strony na ekranie swojego telefonu. Również dlatego, że prędkość ładowania witryny jest w tej chwili jednym z czynników rankingowych, mających wpływ na pozycję witryny w Google.

Oczywiście, że optymalizacja zdjęć i grafik, to nie jedyny element brany pod uwagę w speed teście Google czy innym narzędziu sprawdzającym kondycję naszej witryny.

Ale to jeden z tych elementów, o który może samodzielnie zadbać każdy, nawet początkujący użytkownik WordPress’a czy właściciel strony internetowej.

Właściwe rozmiary obrazków

Pierwsza i podstawowa sprawa a jednocześnie najczęściej spotykany na stronach internetowych błąd, to zbyt duże obrazki w stosunku do potrzeb – okien w których są wyświetlane. Często zdjęcia wgrywane do biblioteki mediów a wyświetlane jako miniatury potrafią mieć 3000 – 4000 px; czyli są wgrane na serwer prosto z aparatu czy stocku foto. To absolutnie nie powinno mieć miejsca! Jeżeli na jednej podstronie mamy galerię, składającą się przykładowo z (tylko) 12 zdjęć i każde z nich będzie takim „olbrzymem”, nie ma siły… taka podstrona będzie ładowała się bardzo długo. Każda grafika i każde zdjęcie, przed dodaniem na stronę powinno być pomniejszone do rozmiarów właściwych dla miejsca, gdzie będzie wyświetlane.

Obrazki możemy pomniejszyć wcześniej w programie typu Paint czy Gimp. Możemy również skorzystać z narzędzie on-line, które pozwolą nam masowo pomniejszać zdjęcia. Np. https://www.easy-resize.com/pl/ .

Mamy również możliwość pomniejszenia fotek i grafik w samym WordPress’ie, czyli już po dodaniu ich do biblioteki mediów:

  1. Wybieramy zdjęcie, które chcemy pomniejszyć, klikając w nie;
  2. Wybieramy przycisk EDYTUJ pod zdjęciem;
  3. Korzystamy z narzędzi – w tym przypadku skalowania wielkości;
  4. Zapisujemy zamiany.
optymalizacja wielkości zdjęć pod Google
Zmiana wielkości obrazka w samym WordPressie

Kompresja obrazków w programie graficznym

Photoshop, Gimp czy inny program do obróbki grafiki również umożliwia kompresję obrazków. Czyli przygotowując obrazek do publikacji i pomniejszając rozmiar, przy zapisywaniu zmian, od razu możemy skorzystać z opcji kompresji. W przypadku programu Gimp – podobnie jak w Photoshop – będzie to jedynie przesunięcie suwaka z poziomem jakości. Wadą tego rozwiązania może być właśnie znaczna utrata jakości obrazka, jeżeli za bardzo przesuniemy suwak w lewo.

kompresja obrazków speed test google

Narzędzia do kompresji obrazków

Nadanie obrazkom prawidłowego rozmiaru to nie wszystko. Kolejnym krokiem powinna być ich kompresja, czyli zadbanie o to, by ważyły jak najmniej, przy jednoczesnym zachowaniu dobrej jakości.

Narzędzia do kompresji on-line

Istnieje sporo narzędzi on-line, które pozwalają nam na przeprowadzenie takiej operacji, również masowo. Stanowczo wartym polecenia jest https://tinypng.com/ . Nie tylko działa świetnie, ale co także istotne, nie dokleja do oryginalnego tytułu żadnego własnego „ogonka”, który później musielibyśmy usuwać.

optymalizacja zdjęć online
Zdjęcia wybrane do kompresji możemy przeciągnąć lub wybrać z dysku komputera

Dzięki tym zabiegom, możemy zmniejszyć wagę zdjęć czy plików graficznych nawet o 70%, przy niemal niezauważalnej utracie jakości!

Naturalnie jest to dodatkowa czynność, która zabiera nam czas, ale naprawdę warto, bo efekty są znakomite.

Wtyczki do kompresji obrazków dla stron opartych o WordPress’a

https:// pl.wordpress.org/plugins/ewww-image-optimizer

To tylko przykłady, jest ich oczywiście więcej. Zapewniają nam większą wygodę, bo optymalizują obrazki automatycznie; zarówno te, które już funkcjonują na naszej stronie, jak i te, które właśnie dodajemy do biblioteki mediów. Jednak efekty kompresji nie są tak spektakularne, jak przy używaniu narzędzi on-line; WP Smush w wersji free np. pominie obrazki cięższe niż 1 mega. Ponadto w wersjach bezpłatnych, istnieją pewne ograniczenia. Oprócz przed momentem wspomnianego, może to być np. ograniczona ilości obrazków, które możemy poddać kompresji: albo do konkretnej liczby w ogóle, albo do pewnej ilości, którą możemy przetworzyć jednorazowo.

Warto również pamiętać, że duże zdjęcia w formacie .png ważą więcej niż te w .jpg. Dlatego staramy się stosować .png tylko wtedy, gdy jest to niezbędne, np. do zamieszczenia logo, ikon czy innych niewielkich elementów.

Dzięki optymalizacji obrazków na stronie www jednocześnie ograniczamy również zużycie transferu na serwerze.