Kilka dni temu postanowiłem zrobić porządek z obrazkami na blogu. Zawsze staram się, by moje strony były tak szybkie, jak to tylko możliwe. Bo nikt nie lubi wolnych stron i takich, które ważą 4 MB, mimo że to samo może ważyć 1-2 MB.

Dla sporej części z nich po prostu brakuje optymalizacji, więc w tym wpisie pokażę Ci jak krok po kroku zadbać o odpowiednie zdjęcia na Twoim blogu.

“Firmy hostingowe go nienawidzą!”

I rzeczywiście tak może się stać, bo gdy usuniesz wszystkie niepotrzebne obrazki na serwerze i zmniejszysz ich rozmiar, nagle okazuje się, że w zupełności wystarczy Ci 2 razy mniejszy pakiet hostingu.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Co się dzieje, gdy wrzucasz obrazek?

W momencie gdy wrzucasz jakiś obrazek na stronę, WordPress na podstawie ustawień Twojego motywu generuje odpowiednie miniaturki.

Dzięki temu duży obrazek (np. o rozmiarach 800x350px), który służy jako miniaturka Twojego wpisu, zostanie również przeskalowany do rozmiarów 150x150px, 300x300px, 1024x1024px (domyślnie) i innych, które możesz ustalić w swoim motywie lub korzystając z odpowiednich wtyczek.

Wtedy ten sam obrazek, który wcześniej miał duże rozmiary, będzie mógł automatycznie zostać użyty np. w sidebarze. Korzystając z odpowiedniego widgetu możesz pokazać listę najnowszych wpisów, a obok zdjęcie o rozmiarach 150x150px, czyli kilkukrotnie mniejsze niż oryginał.

Wszystko to dzieje się automatycznie i pozwala zaoszczędzić transfer, jednak w momencie gdy eksperymentujesz ze zdjęciami i miniaturkami, czy nawet zmieniasz motyw na nowy, pojawiają się problemy.

 

Problem 1: wszystkie miniaturki cały czas tu są

Zmieniając ustawienia miniaturek na blogu – z aktualnymi obrazkami nie dzieje się nic. WordPress niestety nie przerobi wszystkich zdjęć automatycznie, bo robi to tylko raz podczas wrzucania zdjęcia.

Więc mimo tego, że teraz używasz tylko 4 rozmiarów, pozostałe cały czas zajmują miejsce:

duze-zdjecie.jpg
duze-zdjecie-72×72.jpg
duze-zdjecie-150×150.jpg
duze-zdjecie-250×350.jpg
duze-zdjecie-300×300.jpg
duze-zdjecie-400×400.jpg
duze-zdjecie-800×450.jpg
duze-zdjecie-1024×1024.jpg

drugie-duze-zdjecie.jpg
drugie-duze-zdjecie-72×72.jpg
drugie-duze-zdjecie-150×150.jpg
drugie-duze-zdjecie-250×350.jpg
drugie-duze-zdjecie-300×300.jpg
drugie-duze-zdjecie-400×400.jpg
drugie-duze-zdjecie-800×450.jpg
drugie-duze-zdjecie-1024×1024.jpg

Oznacza to tyle, że nowe ustawienia miniaturek zostaną zaaplikowane tylko do nowo wrzuconych zdjęć, a stare, niepotrzebne miniaturki i tak zostają.

Przy małym blogu to nie problem, ale gdy masz 100-200 wpisów i masę niepotrzebnych obrazków…

Rozwiązanie

Mam nadzieję, że nie pomyślałeś teraz o tym, by wrzucać wszystkie zdjęcia jeszcze raz na nowo. To bez sensu, bo są 2 wtyczki, które bardzo ułatwiają rozwiązanie tego problemu.

Regenerate Thumbnails – wtyczka, która na podstawie aktualnych rozmiarów miniaturek “przerobi” wszystkie wrzucone obrazki, ale… nie usuwa tych wszystkich, które są już niepotrzebne.

Dlatego lepszym rozwiązaniem jest Force Regenerate Thumbnails, która najpierw usuwa wszystkie stare miniaturki, a potem na podstawie oryginalnego obrazka buduje nowe.

Warto wiedzieć, że możesz całkowicie zablokować tworzenie zdjęć w “wordpressowych rozmiarach” wchodząc do Ustawienia -> Media. Jeśli jakiś rozmiar nie jest Ci potrzebny, ustaw szerokość i wysokość na 0.

Tym sposobem problem niepotrzebnych zdjęć został rozwiązany.

duze-zdjecie.jpg
duze-zdjecie-150×150.jpg
duze-zdjecie-250×350.jpg
duze-zdjecie-800×450.jpg

drugie-duze-zdjecie.jpg
drugie-duze-zdjecie-150×150.jpg
drugie-duze-zdjecie-250×350.jpg
drugie-duze-zdjecie-800×450.jpg

Ale to jeszcze nie wszystko…

 

Problem 2: brak wiedzy i wrzucanie WIELKICH, niezoptymalizowanych zdjęć

Nie raz widziałem na stronach zdjęcia, które były wstawione np. jako zdjęcie autora w rozmiarze 250x350px, a tak naprawdę były tylko przeskalowane, bo w rzeczywistości przekraczały rozmiary 3000x3000px.

Czyli zdjęcie prosto od fotografa :), które przy okazji zajmuje więcej miejsca niż cała strona.

Rozwiązanie

By poradzić sobie z optymalizacją i wielkimi zdjęciami, możesz skorzystać z wtyczki WP Smush, która działa w bardzo prosty sposób.

Zazwyczaj każde zdjęcie to nie tylko zdjęcie, ale również sporo ukrytych w nim informacji (tagi EXIF), które mogą nawet zagrażać prywatności:

  • Data i czas zrobienia fotografii
  • Ustawienia i nazwa aparatu
  • Dane autora
  • Miniaturka obrazka (która cały czas pozostaje bez zmian, nawet gdy… zmodyfikujesz zdjęcie)
  • Współrzędne GPS miejsca, w którym wykonano zdjęcie

Więcej pisał o tym Niebezpiecznik: “Zanim wgrasz wakacyjne zdjęcia do sieci…”.

Wszystkie te informacje nie są potrzebne, gdy wrzucasz obrazek do jakiegoś wpisu, więc warto je usunąć i zaoszczędzić trochę transferu.

 

Ustawienia WP Smush

Gdy WP Smush jest aktywny, obrazki będą optymalizowane automatycznie po wrzuceniu.

Optymalizacja WP Smush

Warto zajrzeć jeszcze do opcji.

Upewnij się, że wszystkie Twoje miniaturki są zaznaczone do optymalizacji (i jest ona włączona przyciskiem po prawej stronie)

WP Smush miniaturki

i dodatkowo wszystkie wrzucone zdjęcia są zmniejszane do konkretnych rozmiarów.

WP Smush maksymalna rozdzielczość obrazka

Jeśli wiesz, że na Twoim blogu największy obrazek ma rozmiary np. 2048x2048px, to pozwól, by WP Smush automatycznie zmniejszał wszystkie większe obrazki. Większych rozmiarów pewnie nie potrzebujesz.

Opcjonalnie włącz zachowywanie informacji EXIF, jeżeli jesteś fotografem. W innym przypadku takie dane będą zbędne.

 

Jeśli do tej pory nie dbałeś o swoje zdjęcia, te kilka wskazówek wystarczy, byś zobaczył ile tak naprawdę miejsca na serwerze jest Ci potrzebne. Przy okazji zwiększysz prędkość swojej strony, bo od tej pory obrazki będą zoptymalizowane i w odpowiednich rozmiarach.

Uwaga: zanim zaczniesz zabawę z tymi wtyczkami, zawsze rób kopie zapasowe swoich plików. Jest kilka wtyczek WordPress, które Ci to umożliwią.

Podziel się w komentarzu wnioskami z optymalizacji swojego bloga. Możesz sprawdzić wydajność swojej strony przed i po – używając Pingdom Tools.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

>