Optymalizacja grafik na blogu to podstawa

Optymalizacja grafik na blogu

Dzisiaj pokażę na żywym przykładzie (czyli tym blogu) w jaki sposób i dlaczego zoptymalizowałem wielkość grafik na stronie i co mi to dało. Gotów? To lecimy z tematem w ten piękny sobotni poranek.

 

Akurat tutaj rozmiar ma znaczenie 😉

Kiedy ja słyszę o rozmiarze, to automatycznie rozpinam rozpora i wyciągam dwoma rękoma to potężne bydle z dumą pytając „Gdzie masz metrówkę maleńka?” 🙂 Nie chodzi jednak o rozmiar mojej maczugi, a o rozmiar zdjęć na blogu czy jakiejkolwiek innej witryny internetowej. 

Ja wiem, że aby dostrzec piękno zdjęcia, muszą być one w dużej rozdzielczości. Najlepiej w tak dużej, że widać każdy liść na drzewie. Tylko, że im większa rozdzielczość zdjęcia, tym więcej zajmuje miejsca na stronie. Zresztą co tu dużo gadać. Możesz samemu sprawdzić jak to wygląda: Wejdź na https://gtmetrix.com i wpisz adres swojej strony internetowej. Zobaczysz jak zdjęcia potrafią zamulić witrynę na moim przykładzie 😉

 

Sprawdzenie problemu z obrazkami

Nie jest dobrze co? To jeszcze dobijmy się, sprawdzając jak tam wujek Google oceni mojego bloga pod kątem szybkości na urządzeniach mobilnych i komputerach. Sam też możesz to sprawdzić tutaj

prędkość strony na komórkach
Prędkość strony na komórkach
prędkość strony na komputerach
Prędkość strony na komputerach

Podsumuję to słowami, które często wypowiadam patrząc w lustro z rana „Nie jest ku**a dobrze”. Trzeba podwinąć rękawy, wstawić mocną kawkę i zabrać się do optymalizacji zdjęć na blogu.

Jak zoptymalizować zdjęcia na blogu

  • Które zdjęcia wymagają optymalizacji?

zdjęcia wymagające optymalizacji

W pierwszej kolejności sprawdzam „Serve scaled images”, bo to najszybciej można ogarnąć. Zdjęcia są zbyt duże, ale moja praca ogranicza się do skalowania zdjęć. Biorę zdjęcie. Klikam funkcję „skalowanie” w programie graficznym. Wprowadzam jeden parametr (280px szerokości lub 187px wysokości) i dalej to już program sam ogarnia. Naprawdę nie ma tutaj żadnej większej magii i każdy sobie poradzi.

  1. „From 750×500 to 280×187” – Czyli zmniejszamy wielkość tych zdjęć do wskazanych wymiarów, bo tak duże są po prostu nie potrzebne. 
  2. Podmieniasz stare, tłuste pliki graficzne na nowe i zgrabne (Jakby w życiu też to było takie proste, to żona już dawno by mnie odstawiła 😛 ).
  3.  Pamiętaj o porządku! Od razu wywal zdjęcia których już nie używasz, bo zjadają miejsce na hostingu za które płacisz.
  4. Koniec.

Jak optymalizacja tylko 3 zdjęć wpłynęła na szybkość witryny

Wynik po optymalizacji 3 zdjęć
Poprawa z 51% na 69%, czyli szybciej o 18%
 

A co na to wujek Google? Czy on też widzi poprawę?

prędkoś strony na komórkach zdj2
Poprawa prędkości strony na komórkach z 14 na 17 punktów, a więc 3 oczka lepiej niż było
prędkoś strony na komputerach zdj2
Poprawa prędkości strony na komputerach z 81 na 85 punktów, a więc 4 oczka lepiej niż było

Teraz uwaga, bo to były tylko 3 zdjęcia. Ich optymalizacja ograniczała się tylko do zeskalowania na mniejszą rozdzielczość i podmianki. Co z resztą zdjęć? Czy wszystko już ogarnięte i mogę szukać kolejnych rzeczy do poprawienia?

Wchodzimy głębiej w optymalizację zdjęć

reszta zdjęć do optymalizacji
Ja pier***ę. Przecież to tyle roboty ;/

„Nie taki diabeł straszny jak go malują”. Gtmetrix pokazuje Ci jak powinno to zdjęcie wyglądać. Wystarczy kliknąć przy danej pozycji „Optimized verision”–> Pobrać plik –> Podmienić stary plik graficzny na nowy i po problemie. Czas pracy jest zależy od tego jak bogata w pliki graficzne jest twoja witryna. Ja tego na razie nie zrobię, żebyście mogli zweryfikować zamieszczone informacje. 13 grudnia już ogarnę resztę zdjęć i parametry szybkości strony znowu się poprawią.

Myśl! Nikt za ciebie wszystkiego nie zrobi!

Ominąłem w tym artykule sporo ważnych informacji. Dojdziesz do nich samemu, o ile nie będziesz ślepo wykonywał z automatu działań które przeczytałeś. Odkryjesz coś godnego uwagi o czym „niechcący” zapomniałem? Podziel się z resztą czytelników w komentarzu. Wtedy dam znać, czy można to zrobić jeszcze lepiej 😉 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *