Optymalne zarządzanie różnymi wymiarami zdjęć przy budowie szablonu w WordPressie

Obecnie panuje „moda” na publikowanie jak największej liczby fotografii na stronach internetowych. Blogi, a właściwie ich layouty powoli zamieniają się w wielkie katalogi zdjęć. To rozwiązanie jednym się podoba innym trochę mniej, ale najbardziej kluczowym elementem jest fakt wzrostu wagi danej podstrony.

Fot: kpgolfpro,  CC0 Public Domain.

Fot: kpgolfpro, CC0 Public Domain.

Zdjęcia muszą zajmować trochę miejsca (a zwłaszcza te w dużych rozdzielczościach) co powoduje częstą frustrację kiedy strona WWW ładuje się zbyt długo. Jeżeli w witrynie internetowej wykorzystujemy fotografie o tej samej wielkości, a na stronie są one pomniejszane na przykład za pośrednictwem stylów CSS (height, width) to tutaj powinna zapalić nam się czerwona lampka. Takie rozwiązanie jest jednym z najgorszych! Powoduje to olbrzymi wzrost wagi strony WWW oraz czas w jakim się ładuje. Tego typu działanie ma realny wpływ na negatywny odbiór przez internautę danego portalu internetowego. W dzisiejszych czasach wymogiem staje się stosowanie skompresowanych fotografii oraz użycie przeróżnych skryptów do przyspieszenia wczytywania strony internetowej (np. lazy load – wczytywanie obrazków przez AJAX, kiedy ten stanie się widoczny dla internauty). Absolutnym minimum jest używanie fotografii w wymiarach takich w jakich jest ona publikowana na stronie. Inaczej mówiąc, jeśli potrzebujemy wrzucić gdzieś obrazek o wymiarach 100x100px to umieszczamy tam zdjęcie, które fizycznie ma takie wymiary, jeżeli potrzebujemy fotografię 1080x720px to również wkładamy tam zdjęcie, które ma fizycznie takie wymiary.

Różne wymiary zdjęć w motywie WordPressa

Jeśli chodzi o budowę szablonów w WordPressie to tutaj sprawa jest bardzo prosta do rozwiązania. W pliku function.php naszego motywu możemy dodać dowolny rozmiar zdjęć jaki będziemy wykorzystywać bezpośrednio na stronie WWW. Funkcja add_image_size(); powoduje, że przy wyczytywaniu każdego nowego zdjęcia, zostanie utworzone fizycznie nowa kopia fotografii o podanych wymiarach. Obrazek taki, możemy potem użyć w motywie podając zadeklarowaną nazwę dla danego rozmiaru.

Przykład:

Plik function.php:

Teraz przy załadowaniu dowolnego zdjęcia, będziemy mieli utworzoną jego dodatkową kopię o wymiarach 80x40. Możemy jej użyć jak każdego normalnego zdjęcia:

Plik index.php:

I gotowe, mamy wszystko pięknie zoptymalizowane. Tym sposobem, możemy sobie utworzyć dowolną liczbę rozmiarów zdjęć, które będą tworzone przy wgrywaniu fotografii na serwer za pomocą WordPress’a.

Dokumentacja funkcji add_image_size()www.codex.wordpress.org/Function_Reference/add_image_size.

Co ze zdjęciami już wgranymi?

Opisana wyżej metoda, tworzy nam nowe rozmiary zdjęć przy wgrywaniu danego pliku na serwer, fotografie już wgrane nie są więc modyfikowane. Można to oczywiście w prosty sposób zmienić, za pomocą wtyczki Regenerate Thumbnails. Instalacja tego pluginu jak i jego obsługa jest bardzo prosta.

Należy tylko pamiętać, że zanim uruchomicie modyfikacje już wgranych zdjęć (klikniecie przycisk: „Abort Resizing Images”) musicie załadować na serwer plik function.php z dodanymi nowymi rozmiarami przez funkcję add_image_size() – oczywiście nie kasujecie wcześniej dodanych domyślnych wymiarów dla ikon wpisów itd..

Regenerate Thumbnails: www.wordpress.org/plugins/regenerate-thumbnails.

, , , , , ,