Optymalizacja zdjęć WordPress – teoria i praktyka

Optymalizacja zdjęć to kluczowa czynność jeżeli zależy nam na wysokiej jakości i wydajności strony. WordPress jako CMS z każdą aktualizacją udostępnia wiele przydatnych mechanizmów, które pozwalają dostosować jakość obrazów i ich optymalizację SEO. Za pomocą dodatkowych wtyczek i własnych rozszerzeń, możemy zoptymalizować zdjęcia do perfekcji uwzględniając możliwości nowoczesnych przeglądarek. Elastyczność WordPressa umożliwia również stosować dodatkowe mechanizmy przydatne na stronach o dużej skali, które przechowują spore zbiory zdjęć, grafik i filmów — ten temat też zostanie poruszony w tym artykule.

Zagadnienia optymalizacji zdjęć a nawet ich dostosowania do SEO był już poruszany w dość wyczerpującym (i nie ukrywam popularnym) artykule: Optymalizacja zdjęć i grafik na stronę internetową. Opisałem tam dosłownie wszystkie aspekty dostosowania zdjęć przeznaczonych na strony internetowe, jednak artykuł nie skupia się na konkretnym CMS. Jest tam dużo więcej teorii niż praktycznych instrukcji. W tym artykule opiszę wszystkie konieczne prace, które pozwolą idealnie zoptymalizować zdjęcia w ramach ekosystemu WordPress.

Na czym polega optymalizacja zdjęć w WordPress?

Optymalizacja zdjęć, grafik i obrazów w WordPress polega na zautomatyzowaniu procesów, związanych z dostosowaniem źródłowych zdjęć do medium jakim jest Internet oraz odpowiedniego umieszczenia ich na stronie internetowej. Działanie te mogą polegać na edycji i automatycznej konwersji samych grafik co polega najczęściej na:

• dostosowaniu ich rozmiaru,
• zastosowaniu efektywnego formatu pliku,
• dostrojeniu jakości kompresji,
• skalowaniu zdjęć do pożądanej wielkości,
• kadrowaniu,
• zarządzaniu kolorami i profilami ICC.

Druga klasa działań optymalizacyjnych dotyczy sposobów ich dostarczania:

• serwowanie w wielu alternatywnych formatach,
• wykorzystanie CDN,
• „dylemat” img czy background-image,
• lazy-loading.

Pozostały jeszcze kwestie ściśle związane z SEO

• konwencje nazewnictwa plików,
• ścieżka URL mediów,
• opisy alt,
• opisy title,
• opisy caption.

Aby móc skutecznie i prawidłowo optymalizować zdjęcia w WordPressie, niezbędne jest poznanie odpowiedzi na poniższe pytania:

1. W jaki sposób można optymalizować zdjęcia na stronach internetowych?
2. Jakie mechanizmy są wykorzystywane w WordPressie do obsługi zdjęć w postach i szablonach?
3. Jak mogę wpływać na bibliotekę mediów oraz sposoby ich umieszczania na stronie WordPress?

Dopiero potem możemy w praktyce wykorzystać zdobytą wiedzę i dokonać pełnej optymalizacji w ramach tego konkretnego CMSa. Trzeba zrozumieć kluczową kwestię, że oryginalne zdjęcie które wysyłamy do biblioteki mediów prawie nigdy nie jest wykorzystywane w treści strony internetowej. Jeżeli nie zmieniono domyślnych ustawień, system WordPress umieszcza na stronie pliki pochodne, które system ten sam generuje podczas automatycznej konwersji.

Jak WordPress utrzymuje i zarządza zdjęciami?

WordPress posiada wbudowany system do zarządzania grafikami i innego rodzaju załącznikami. W bibliotece mediów – bo o niej mowa – znajdują się pliki multimedialne (obrazy, filmy, pliki muzyczne, dokumenty PDF). System ten jest odpowiedzialny za przesyłanie, zarządzanie, edytowanie i usuwanie plików w obrębie naszej strony WordPress.

Z architektonicznego punktu widzenia, obiekt zdjęcia jest równoważny logicznie z wpisem lub elementem menu ponieważ, wpis o zdjęciu przechowywany jest w tabeli wp_posts. W polu guid przechowywany jest jego adres URL. To stamtąd Biblioteka Mediów pobiera obiekty i ich nazwy aby zaprezentować je nam na specjalnej stronie Media:

Przy wysyłaniu każdego kolejnego obrazka do biblioteki, oryginalny plik jest przetwarzany i powstaje kilka wersji identycznego zdjęcia różniące się rozmiarami. Oryginalny plik wraz z mniejszymi jego wersjami ląduje w folderze wp-content/uploads a szczegółowe informacje o mniejszych kopiach dopisywane są do tabeli wp_postmeta.

To dlatego wysłanie pliku za pomocą FTP nie spowoduje, że pojawi się ono w bibliotece. To samo dotyczy usuwania czy prób nadpisywania. W bibliotece widzimy jeden z automatycznie generowanych rozmiarów a nie oryginał.

Zarządzanie i edycja zdjęć w bibliotece mediów WordPress

Biblioteka pozwala też na edycję opisów alt i tytułu. Przycisk „Edytuj obrazek” pozwala wykonać podstawowe przekształcenia takie jak kadrowanie, obrót, odbicie a nawet skalowanie oryginalnego obrazka.

To, jakie rozmiary są generowane podczas automatycznego przetwarzania zdjęć zależy od ustawień mediów. Zaś to jaki wariant zostanie użyty we wpisie zależy od opcji wybranej podczas dodawania zdjęcia:

Jako twórcy motywów możemy dodawać także własne rozmiary a następnie wykorzystywać je podczas projektowania szablonów. Porady dla programistów dotyczących funkcji add_image_size() oraz wp_get_attachment_image() znajdują się w Dodatku 1 tego artykułu.

Techniki optymalizacji zdjęć w WordPress

Prowadzenie strony oraz jej obsługa techniczna pozwala optymalizować zdjęcia pod wieloma względami. W tym rozdziale zajmiemy się szczegółowym opisem wraz z praktycznymi wskazówkami jak je zastosować na swojej stronie.

1. Format pliku

Wybór odpowiedniego formatu pliku zdjęcia jest elementem optymalizacji, której nie sposób zautomatyzować. Następuje to już w momencie przygotowywania materiałów i musi być wykonany z pewnym wyczuciem. WordPress na ten moment obsługuje klasyczne formaty graficzne takie jak PNG i JPEG.

PNG stosujemy w grafikach i prostych kompozycjach np. zrzuty ekranu, dokumenty, logo wykresy na jednolitym tle. PNG jest też przydatny w każdej sytuacji, w której z jakiegoś powodu chcemy zachować przezroczystość tła.

JPEG to format idealny dla fotografii, gradientów i wszystkich sytuacji, dla których nie pasuje PNG. Można zrobić też bardzo prosty test zapisując cokolwiek zarówno do PNG i JPEG. Wybieramy wówczas ten format, którego plik zajmuje mniej miejsca. Przykładowo, takie znaki ABCD na białym tle:

wygenerowane w programie Paint o rozmiarze 1024×512 w formacie PNG zajmuje 10,9 KB ,a w JPEG ten sam obrazek zajmuje 32,7 KB. Dodatkowo, otrzymujemy lepszą jakość (ostre krawędzie) w formacie PNG. Odwrotny rezultat otrzymamy w przypadku, kiedy taki napis byłby umieszczony na gradientowym tle lub zapisywalibyśmy fotografię rzeczywistych przedmiotów lub renderów 3D.

Z tej prostej zasady i eksperymentu wynika oczywista zależność konwersji formatów. Nigdy nie opłaca się grafik oryginalnie zapisanych w JPEG konwertować na PNG natomiast czasem może się opłacać przekonwertować obraz do formatu JPEG.

Format GIF interesuje nas tylko w przypadku animowanych gifów. W każdej innej sytuacji nie ma sensu z niego korzystać. Na tym etapie w ogóle nie interesuje nas format WebP, ładowanie do biblioteki plików w tym formacie mija się z celem – zajmiemy się tym formatem w dalszych punktach.

2. Rozmiar i rozdzielczość

W przeciwieństwie do grafiki drukowanej, która ma rozmiar w jednostkach znanych z życia codziennego np. centymetr i rozdzielczość DPI (ang. dots per inch), która określa ilość plamek na cal, grafika przeznaczona do wyświetlana na ekranie ma tylko rozdzielczość, która automatycznie determinuje wielkość obrazka. Im większa rozdzielczość czyli rozmiar obrazka (ang. image size) tym większy rozmiar pliku (ang. file size). Ponieważ na stronie internetowej dbamy o to aby zasoby nie marnowały transferu, rolą optymalizacji rozmiaru obrazka jest stosowanie dokładnie takich rozdzielczości jakie są w danym momencie potrzebne.

Zakładając, że maksymalną szerokość treści czyli tzw. container skonfigurowano na 1200 pikseli CSS, użytkownik, który nie ma włączonego skalowania (np. trybu HiDPI dla monitorów powyżej Full HD) chcąc wyświetlić duże zdjęcie w artykule blogowym powinien patrzeć i ściągać grafikę w dokładnie takim rozmiarze. Kwestię PPI, HiDPI i tzw. responsywnych zdjęć omówimy w dalszych punktach. Poprawnie zoptymalizowane zdjęcie zajmuje ten sam obszar ekranu zarówno kiedy patrzymy na nie na stronie oraz kiedy pobierzemy je za pomocą funkcji „Zapisz obraz jako…” i otworzymy w ulubionym programie graficznym – oczywiście bez żadnego powiększania czy pomniejszania.

Tak jak wspominano wcześniej, WordPress sam dobiera rozmiar grafiki i dokonuje automatycznej konwersji na poszczególne rozmiary. Nie ma najmniejszego sensu zmniejszanie lub w jakikolwiek sposób optymalizowanie grafik w programach graficznych przed załadowaniem do biblioteki WordPressa. Jest to strata czasu i w ten sposób możemy jedynie niepotrzebnie obniżyć jakość generowanych zdjęć.

Jest tylko jeden przypadek kiedy warto zmniejszyć zdjęcia – kiedy dysponujemy zdjęciami w bardzo dużych rozmiarach znacznie przekraczających rozdzielczość 4K np. wprost z aparatu lub od fotografa. Wtedy można nieco zmniejszyć zdjęcie aby nie marnować przestrzeni na serwerze. Pamiętajmy, że WordPress zawsze zachowuje kopie plików bezpośrednio przesyłanych do biblioteki. Podsumowując wątek rozmiaru i rozdzielczości, jedyne o co musimy się martwić, aby zdjęcia były odpowiednio duże i WordPress mógł wygenerować ostre, ładne zdjęcia także w największych rozmiarach.

Rozmiary poszczególnych wersji (miniatura/średni/duży) dostosowujemy na specjalnej stronie „Ustawienia multimediów”, której zrzut zamieściłem powyżej. Możemy też stworzyć własne wielkości nadając im własne oznaczenia za pomocą funkcji add_image_size();

add_image_size( 'full-hd', 1920, 1080 );

Dodając tę instrukcję to pliku functions.php dobrą praktyką jest umieszczenie jej w akcji after_setup_theme:

add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
    add_image_size( 'full-hd', 1920, 1080 );
}

Od tej pory możemy się posługiwać oznaczeniem full-hd zupełnie tak jakby był to standardowy rozmiar obrazka w WordPress. Mam tutaj na myśli drukowanie zdjęć w polach obrazu i galeriach z ACF czy za każdym razem kiedy korzystamy w szablonach z funkcji:

echo wp_get_attachment_image(get_the_ID(), "full-hd", "", array("class" => "img-fluid"));

lub podobnych np. wp_get_attachment_image_src().

Kod z funkcją add_image_size() może się znajdować w pliku functions.php lub we własnej wtyczce. Funkcja ta przyjmuje argumenty o których powiemy sobie w następnych rozdziałach.

Regeneracja zdjęć w WordPress

Należy teraz zrozumieć szalenie istotną rzecz: zmiany związane z rozmiarami i dodawaniem własnych rozmiarów wprowadzone w tym miejscu mają zastosowanie dla nowych zdjęć czyli dla zdjęć, które są wysyłane do biblioteki po edycji tych ustawień. Aby zastosować zmiany dla istniejących zdjęć trzeba dokonać regeneracji obrazów. Regeneracja jest możliwa za pomocą WP-CLI:

wp media regenerate

Alternatywnym i przyjaźniejszym dla początkujących użytkowników rozwiązaniem jest skorzystanie z wtyczek np. popularnej Regenerate Thumbnails czy też wielu innych, które mają tę funkcjonalność.

Pamiętaj proszę, że każde kolejne wersje są zapisywane na serwerze a stare nie są usuwane – chyba że wybierzesz opcję z usuwaniem nieaktualnych rozmiarów. Dopasowywanie rozmiarów zdjęć metodą prób i błędów nie jest najlepszą techniką optymalizacji zdjęć.

Zaliczyliśmy kolejną rekomendację w PageSpeed dotyczącą zdjęć, ponieważ nie marnują transferu.

3. Stopień kompresji JPEG

Skoro WordPress dokonuje skalowania formatu JPEG (a pamiętamy, że JPEG jest formatem stratnym) robi to z pewną dokładnością. Można oszczędzać miejsce lekko pogarszając jakość wizualną zdjęcia lub odwrotnie: można zwiększyć jakość wizualną miniaturek kosztem dodatkowego miejsca w pamięci gdzie przechowywane są zdjęcia. Służy do tego funkcja

add_filter('jpeg_quality', function($arg){return 80;});

Domyślną wartością na ten moment jest 82. Jakość JPEG na tym poziomie uznawana za złoty środek pomiędzy jakością a ilością zajmowanego miejsca. Jeżeli jednak zależy nam na wyższej jakości zdjęć a zdjęcia są często pełne żywych kolorów (vivid) będą musiały mieć ten parametr nieco wyższy aby pozbyć się ze zdjęć charakterystycznych „ziarnistości krawędzi”. Wartości niższe ustawiamy jeżeli z jakichś powodów chcemy oszczędzać jeszcze więcej miejsca. Praktyczne przykłady wykorzystania to przykładowo skany, archiwizacja dokumentów. Po tej operacji też należy zregenerować zdjęcia.

Zarówno rozmiar, format, jakość kodowania jak i format nowej generacji może znacząco obniżyć metrykę LCP wchodzącą w podstawowe wskaźniki internetowe – o ile LCP stanowi grafika.

4. Kadrowanie, obrót i odbicie

Kadrowanie (czyli przycinanie zdjęcia) można wykonać przed załadowaniem pliku w ulubionym programie do obróbki grafiki. Taka obróbka będzie wykonana szybciej a WordPress nie będzie zaśmiecany niepotrzebnymi grafikami przed obróbką. Jeżeli zdjęcie jest już załadowane można wykorzystać prosty edytor zdjęć dostępny bezpośrednio w panelu WordPressa.

W tym edytorze mamy też możliwość obrotu zdjęcia oraz odbicia zarówno w poziomie jak i w pionie. Zastosować zmiany można:

• dla wszystkich rozmiarów obrazka,
• tylko dla miniaturki,
• wszystkich rozmiarów poza miniaturką.

Poza ręcznym kadrowaniem możemy też wykonać automatyczne kadrowanie w wybranym rozmiarze obrazka. Służy do tego dodatkowy parametr we wspomnianej już funkcji add_image_size();

W przykładzie gdzie zmniejszaliśmy zdjęcie do formatu Full HD, końcowy rozmiar zdjęcia zależy od jego dłuższej krawędzi w stosunku do ustalonej proporcji w drugim argumencie. Dzieje się tak aby żadna krawędź nie przekroczyła podanego rozmiaru i jednocześnie zachować poprawne proporcje i nie tworzyć „pustego” (np. czarnego) pola w grafice.

 add_image_size('full-hd', 1920, 1080, true);

Trzeci argument true instruuje algorytm aby ten przy skalowaniu wykadrował zdjęcie do środka. Możemy też wpływać na punkt środka za pomocą takiej tablicy:

add_image_size('full-hd', 1920, 1080, array('left', 'top'));

Instrukcja ta spowoduje, że dla tego konkretnego rozmiaru kadrowanie będzie miało miejsce u góry jeżeli mamy do czynienia ze zdjęciem wyższym od wynikowego lub po lewej stronie jeżeli zdjęcie źródłowe będzie szersze.

W tablicy dla ostatniego argumentu możemy użyć dowolnej kombinacji z przestrzeni left, center, right oraz top, center i bottom.

5. ICC i zapis dla Web

Algorytmy i użyte biblioteki do przetwarzania zdjęć w WordPressie odpowiedzialne za poruszane tutaj skalowanie i kadrowanie mogą nie być kompatybilne z niestandardowymi ustawieniami zdjęcia np. z profilami ICC. Przetwarzanie pliku zdjęcia z niestandardową przestrzenią kolorów może doprowadzić do zniekształcenia kolorów, najczęściej w takich sytuacjach zdjęcie wydaje się wyblakłe i mniej żywe.

Jeżeli jesteśmy fotografem lub tworzymy portfolio gdzie zdjęcia pełnią bardzo istotną rolę, przed załadowaniem do biblioteki WordPressa należy zapisać zdjęcie w trybie zgodności z Web.

To zminimalizuje „straty” i zdjęcia widoczne na stronie wraz z miniaturkami będą wierniej odwzorowywać oryginał.

6. Obrazy responsywne (ang. responsive images)

Jeżeli żylibyśmy w czasach przed 2012 rokiem w punkcie drugim wyczerpalibyśmy temat rozdzielczości zdjęć i już nie wracalibyśmy do niego. Obecnie jednak mamy erę stron responsywnych i ta same treści muszą się dobrze prezentować zarówno na dużym ekranie 4K, mniejszym laptopie FullHD i na telefonie – co prawda dużo mniejszym ale coraz częściej też 4K. Dla ekranów o dużej gęstości pikseli system operacyjny a nawet same przeglądarki automatycznie skalują (czyli powiększają obraz) aby korzystanie z nich, np. oglądanie stron było bardziej komfortowe.

Jak pogodzić chęć wyświetlenia wyraźnego zdjęcia na monitorze 28 calowym, 13 calowym i na małym smartfonie? Odpowiedzią jest mechanizm responsywnych zdjęć. WordPress od bardzo dawna nie korzysta z klasycznego tagu img z pojedynczym atrybutem src:

<img width="486" height="300" src="https://mansfeld.pl/wp-content/uploads/obrazek.jpg">

Zamiast tego od wersji 4.4 serwuje kilka ścieżek na raz a przeglądarka pobiera dokładnie ten plik, który zapewni najlepsze wrażenia wizualne bez marnowania transferu. Dobór odpowiedniej wielkości dzieje się automatycznie.

<img width="486" height="300" src="https://mansfeld.pl/wp-content/uploads/obrazek-486x300.jpg" loading="lazy" srcset="https://mansfeld.pl/wp-content/uploads/obrazek-486x300.jpg 486w, https://mansfeld.pl/wp-content/uploads/obrazek-809x500.jpg 809w, https://mansfeld.pl/wp-content/uploads/obrazek-971x600.jpg 971w, https://mansfeld.pl/wp-content/uploads/obrazek-1110x686.jpg 1110w" sizes="(max-width: 486px) 100vw, 486px">

To dlatego przy ładowaniu musimy ładować duże zdjęcia wysokiej rozdzielczości aby WordPress mógł wygenerować wyraźne miniatury w różnych rozmiarach. Zauważ, że ta sama grafika na różnych urządzeniach przyjmuje różny rozmiar i pamiętaj, że użytkownicy mogą mieć różne ustawienia skalowania na swoich urządzeniach.

Współczesne smartfony wyświetlają na szerokość ok. 360 lub 390 pikseli CSS na ekranie. Mają do tego celu w dyspozycji aż 1080 lub 1170 pikseli fizycznych. Należy też pamiętać, że grafiki które zazwyczaj są ułożone w kolumnach na urządzeniu mobilnym zajmują całą szerokość viewportu.

Doszliśmy w ten sposób do wyjaśnienia nieintuicyjnej zasady, wręcz paradoksu, który polega na tym, że często zdjęcia w większym rozmiarze mogą być wykorzystywane na mniejszych ekranach a te mniejsze mogą być wykorzystywane na znacznie większych.

Aby to lepiej zrozumieć należy też sobie uzmysłowić prosty fakt, że na ekran telefonu patrzymy w mniejszej odległości. Łatwiej wtedy dostrzec artefakty lub tzw. pikselozę, która w połączeniu z automatyczną interpolacją wykonywaną w przeglądarce wygląda mało atrakcyjnie. Tekst (na ilustracji poniżej) jest wyraźny w obu połówkach ale grafika jest wyraźna tylko po prawej.

Można wykonać jeszcze jeden eksperyment: zrobić zrzut ekranu strony wyświetlonej na komórce a potem porównać to zdjęcie na ekranie z otwartą stroną internetową w przeglądarce komputera. Ja osobiście nie korzystam ze skalowania na komputerze bo cenię duże pole robocze ale nie mogę docinać obrazków tylko „według siebie” ponieważ internauci mają różne ustawienia skalowania, wielkości ekranów, rozdzielczość i każdy z nas ma różną wadę wzroku 😉

Jak wykorzystać w pełni potencjał responsive images? Technika jest bardzo prosta, ładować duże zdjęcia o szerokości co najmniej 1920px a nawet 3840px i dodać dodatkowe rozmiary, które mogą być użyte w atrybucie srcset.

Aby wykorzystać wbudowany w WordPress mechanizm elastycznych zdjęć, należy unikać wstawiania własnych tagów img src w treści HTML oraz korzystania funkcji:

• wp_get_attachment_image_src();
• the_post_thumbnail_url();

w których arbitralnie i „sztywno” wybieramy konkretny rozmiar grafiki. Zamiast tego warto stosować:

• wp_get_attachment_image();
• the_post_thumbnail();

Biorąc pod uwagę parametry popularnych urządzeń, zalecam utworzyć następujące rozmiary (cały czas mówimy o szerokości):

• 320px
• 640px
• 1280px
• 1600px
• 1920px
• 2240px
• 2560px
• 3840px

Oczywiście, należy też się kierować rozsądkiem i konkretnymi danymi. Jeżeli wiemy, że użytkownicy korzystający z ekranów HiDPI/Retina to mały odsetek, na kilka najbliższych lat można sobie podarować rozmiary ponad Full HD. Informację o tym jakiej rozdzielczości ekranów wykorzystują nasi użytkownicy, możemy zaczerpnąć z Analytics:

Jeżeli nie dysponujemy własną próbką danych, można wykorzystać wiele stron ze statystykami, które agregują tego typu zestawienia dla ogółu Internetu lub np. badają rozdzielczość w najpopularniejszym sprzęcie.

• https://screensiz.es/phone

Konkretne rozmiary obrazka można później wyliczyć w zależności od tego czy zajmują cały ekran czy jego część za każdym razem odejmując wszystkie marginesy. Atrybut srcset działa tak, że użytkownikowi z włączonym trybem HiDPI lub Retina pobierze się automatycznie większe zdjęcie aby zniwelować skalowanie i uzyskać wysoką szczegółowość na większym polu ekranu o wysokim PPI. Działanie tego mechanizmu widać też na smartfonie, kiedy zmieniamy orientację z pionowej na poziomą.

7. WebP w WordPress

Firma Google opracowała format grafiki nowej generacji WebP, który lepiej koduje zdjęcia i rokuje większą jakość wizualną w porównaniu do PNG i JPEG. Jak to działa i jak szerokie wsparcie ma ten format, można przeczytać w podlinkowanym artykule.

W wersji 5.8 WordPress wspiera format WebP. W przypadku starszych wersji jesteśmy zdani na własne rozwiązania lub wykorzystywanie wtyczek. Nie będę w tym momencie dobijał implementacją obrazków WebP za pomocą własnej wtyczki a skupimy się na wtyczce, która dość dobrze rozwiązuje ten problem i jest kompatybilna ze wszystkimi technikami optymalizacji zdjęć, które wykorzystuje się na profesjonalnych stronach. Mowa o wtyczce EWWW Image Optimizer.

Ze wszystkich dostępnych wtyczek do optymalizacji, EWWW posiada kombinację cech, która pozwala wykorzystać format WebP w najbardziej właściwy i profesjonalny sposób. Potrafi między innymi:

• dokonać konwersji ładowanych obrazów w standardowych formatach do formatu WebP,
• dokonać regeneracji i konwersji do WebP wcześniej załadowanych grafik,
• przekonwertować obrazki z JPG na PNG i PNG na JPG,
• implementuje filtry as3cf_attachment_file_paths oraz as3cf_object_meta co zapewnia kompatybilność z wtyczką WP Offload Media,
• potrafi dokonać przepisywania dla Apache w pliku .htaccess aby na poziomie serwera serwować obrazki jpg na jpg.webp i png na png.webp,
• potrafi dokonać tego samego w NGINX o ile posiadamy dostęp do pliku konfiguracyjnego,
• potrafi przepisać obrazki na postać tagu picture, który pozwala przeglądarce zdecydować, który plik będzie wykorzystywany.

Ponadto, na każdym kroku może dostosować stopień kompresji, automatycznie pokolorować tło w obrazkach PNG jak i zregenerować całą galerię z użyciem zaawansowanych ustawień.

Włączenie WebP w WordPress za pomocą wtyczki

Włączenie konwersji WebP ogranicza się do zaznaczenia kilku checkboxów. Podobnie wygląda to także w mniej dopracowanych rozwiązaniach:

Od tej pory każde zdjęcie JPG i PNG będzie tworzyć kolejną wersję w formacie WebP z końcówką jpg.webp lub png.webp.

Najlepiej aktywować zarówno przepisywanie po stronie serwera:

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{HTTP_ACCEPT} image/webp
 RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$
 RewriteCond %{REQUEST_FILENAME}.webp -f
 RewriteRule (.+).(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]
 </IfModule>
 <IfModule mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
 </IfModule>
 AddType image/webp .webp

jak i z wykorzystaniem tagu picture. Serwowanie różnych formatów za pomocą HTML jest bardziej przyjazne dla SEO i kompatybilne z CDN a przepisywanie na poziomie serwera wyratuje nas w sytuacji, kiedy grafika jest tłem lub zasobem w stylach CSS. O tym że przepisywanie WebP działa informuje nas obrazek testowy. Powyższy kod do .htaccess należy dodać tylko wtedy, jeżeli wtyczka EWWW Optimizer nie potrafi tego zrobić samodzielnie.

Możemy też łatwo zweryfikować czy przepisywanie działa na dowolnej stronie, ściągając zdjęcie ze strony za pomocą techniki „Zapisz obrazek jako…” lub przeciągając zdjęcie na pulpit – grafika pobrana z przeglądarki powinna mieć format WebP.

Jeżeli chcemy dokonać konwersji istniejących obrazków na format WebP przechodzimy do Biblioteki i regenerujemy zdjęcia:

Tym sposobem zaliczyliśmy kolejną rekomendację dotyczącą obrazów w formatach nowej generacji:

8. Integracja biblioteki zdjęć z magazynem plików statycznych i CDN

Jeżeli posiadamy duży zbiór zdjęć i zależy nam na szybkim działaniu strony warto zainteresować się integracją WordPressa z serwerem plików lub wybraną usługą chmurową do przechowywania obiektów statycznych.

Poprawne wdrożenie tego rozwiązania powoduje, że pliki są ładowane na osobną domenę a serwowaniem zdjęć nie zajmuje się nasz serwer HTTP za pomocą którego zarządzamy stroną a zewnętrzna usługa, którą wybraliśmy.

Ma to same zalety zarówno jeśli chodzi o performance strony jak i zarządzanie, migrację i prace serwisowe. Czytaj więcej o integracji WordPress z Google Cloud Storage i CDN. Jeżeli preferujesz chmurę Amazona odpowiednie poradniki znajdziesz w linkach:

• integracja z AWS S3 (tylko krok 1),
• Cloudfront z własną sub-domeną i SSL

9. Lazy-Loading zdjęć

Dochodzimy do tematu, w którym ostatnio wiele się pozmieniało – ale na lepsze. Najnowsze wersje WordPress od 5.4 korzystają z natywnego dla przeglądarek i najbardziej przyjaznego dla SEO mechanizmu lazy – loadingu realizowanego za pomocą atrybutu w kodzie HTML loading=lazy.

Mechanizm lazy-loadingu zdjęć powoduje, że grafiki położone w niższych sekcjach strony są ładowane z opóźnieniem aby góra strony załadowała się szybciej i niejako z większym priorytetem. Lazy-loading przez wiele lat realizowano za pomocą wymyślnych technik – niestety mało przyjaznych dla SEO. Atrybut src tagu img specjalnie był psuty aby w odpowiednim momencie naprawić go na postać, która może załadować zdjęcie. Obrazków takich nie widziały roboty wyszukiwarek, chyba, że korzystano z jeszcze bardziej wymyślnych tagów <noscript> w myśl zasady graceful degradation.

Porady dotyczące realizowania lazy-loadingu za pomocą Autoptimize lub innych wtyczek można włożyć w zbiory artykułów dotyczące historii web-designu. Obecnie, wystarczy „nie przeszkadzać” WordPressowi i zajmie się lazy-loadingiem za nas. Oczywiście, o ile mamy aktualną wersję i nowoczesny – stworzony zgodnie z najlepszymi praktykami deweloperskimi motyw WordPress.

Aktualizacja WordPressa do najnowszej wersji pozwoliła nam wypracować kolejne punkty w PageSpeed:

10. Pamięć podręczna i konfiguracja serwera

Pamięć podręczna HTTP powoduje, że raz pobrane zdjęcie może być przechowywane na urządzeniu użytkownika i za każdym razem, kiedy będziemy chcieli wyświetlić obrazek (nawet na innej podstronie) nie będzie ono pobierane ponownie tylko zostanie wczytane z lokalnej pamięci.

Jeżeli mamy serwer Apache a nasz hosting obsługuje .htaccess, to wystarczy dodać do niego kod:

ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"

W ręcznej konfiguracji może nas także wyręczyć gotowy moduł PageSpeed, który zainstalujemy na naszym serwerze VPS.

Optymalizacja zdjęć w WordPress pod kątem SEO

Zdjęcia – tak jak każdą inną treść na stronie WordPress – można optymalizować pod kątem SEO. Szybkość, którą poruszyliśmy powyżej wpływa na SEO ale mamy do wykorzystania dodatkowe atrybuty, które zwiększą semantyczność naszych graficznych załączników.

Atrybut alt

Stosowanie atrybutów alt jest pomocne pod kątem dostępności ale też korzystne pod kątem SEO. Za pomocą atrybutów alt, które możemy edytować w bibliotece, informujemy wyszukiwarkę o czym jest konkretne zdjęcie i pomogą osobom z niepełnosprawnością zrozumieć treść strony jeżeli z jakiegoś powodu obrazki są dla nich niemożliwe do odczytania.

Należy przy tym unikać upychania słów kluczowych co może zdemaskować chęć manipulacji wynikami lub automatycznego dodawania tytułów lub powtarzania nazwy pliku co umożliwiają liczne wtyczki. Jeżeli nie masz czasu na ręczne opisywanie zdjęć, zleć to komuś lub zajmij się czymś innym ale proszę, nie używaj do tego gotowych wtyczek 🙂

Tytuł zdjęcia (title)

Mówiliśmy o tym, że zdjęcia są zapisywane tak samo jak niezależne posty. Tytuł w przypadku zdjęć WordPress ma typowo wewnętrzne zastosowanie do filtrowania i organizowania zdjęć. Można go zwrócić na front-endzie w postaci atrybutu title.

Opis zdjęcia (description)

Opis zdjęcia wykorzystywany jest na osobnych stronach z załącznikami jakie WordPress generuje dla każdego z nich. Jeżeli nie prowadzimy archiwum załączników można to pole spokojnie zignorować.

Etykieta (caption)

To napis jaki jest widoczny pod zdjęciem kiedy umieszczamy go w różnego rodzaju galeriach. To ten napis widać w lightboxie.

Adres URL

Na adres URL obrazków w WordPress możemy wpływać w dwojaki sposób:

• nazywając plik przed załadowanie do biblioteki,
• zmiana ustawień mediów

Porządkowanie w folderach z numerami miesięcy i lat warto robić na stronach dużych, które wiadomo że będą rosnąć i pliki będę cały czas dodawane. W przypadku kiedy z góry wiadomo że strona nie będzie obszerna, można odznaczyć tę opcję.

W nazwie pliku warto unikać polskich znaków a spacje i podkreślenia zamieniać na myślniki. Nazwy plików nie powinny mieć więcej niż kilka słów. W nazewnictwie plików ze zdjęciami obowiązują te samy zasady dotyczące adresów URL jak w przypadku zwykłych stron.

Pamiętaj, że zmiana adresów URL istniejących zasobów stron (a także samych stron) nie ma najmniejszego sensu i jest to zadanie, które można wykonywać podczas tworzenia nowej strony lub dodawania nowych zasobów. Czytaj więcej adresy URL – jak je optymalizować pod SEO.

Obraz, który zoptymalizowano z wykorzystaniem wszystkich poruszonych w tym artykule technik ma mniej-więcej taką postać:

<picture>
     <source srcset="https://cdn.mansfeld.pl/wp-content/uploads/obrazek-480x300.jpg.webp 480w,
         https://cdn.mansfeld.pl/wp-content/uploads/obrazek-800x500.jpg.webp 800w, 
         https://cdn.mansfeld.pl/wp-content/uploads/obrazek-1200x600.jpg.webp 1200w, 
         https://cdn.mansfeld.pl/wp-content/uploads/obrazek-1920x686.jpg.webp 1920w" 
     sizes="(max-width: 480px) 100vw, 480px" type="image/webp">
     <img width="480" height="300" 
     src="https://cdn.mansfeld.pl/wp-content/uploads/obrazek-480x300.jpg" class="wp-post-image" alt="Opis obrazka" loading="lazy" 
     srcset="https://cdn.mansfeld.pl/wp-content/uploads/obrazek-480x300.jpg 480w, 
         https://cdn.mansfeld.pl/wp-content/uploads/obrazek-800x500.jpg 800w, 
         https://cdn.mansfeld.pl/wp-content/uploads/obrazek-1200x600.jpg 1200w, 
         https://cdn.mansfeld.pl/wp-content/uploads/obrazek-1920x686.jpg 1920w" 
     sizes="(max-width: 480px) 100vw, 480px" data-eio="p">
 </picture>

UX, relewantność i spójność wizualna

Nie można zapominać o oczywistej kwestii – wygodzie użytkowników. Jeżeli zdjęć będzie zbyt dużo, lub będą niezwiązane z tematem – mogą się przyczynić do wcześniejszych wyjść lub utrudnianiu spełnienia celu biznesowego strony. Miejmy świadomość o wpływie zdjęć na prędkość ładowania. W miarę możliwości, zachowujmy powściągliwość w dodawaniu ich zbyt dużo w tzw. above the fold.

Przy tych wszystkich technicznych aspektach optymalizacji, pamiętajmy, że zdjęcia i inne obrazki na stronie mają duży wpływ na wrażenia wizualne / estetyczne jakich doświadcza użytkownik. Należy zadbać o harmonijny dobór kolorów, przyjemne dla oka proporcje i kadrowanie, które zwraca uwagę na najważniejszy element kompozycji.

Dodatek 1: Umieszczanie zdjęć WordPress we własnych szablonach

Jeżeli jesteśmy deweloperami, do umieszczania zdjęć we własnych szablonach WordPress warto wykorzystać funkcję

<?php echo wp_get_attachment_image( get_the_ID(), array('1920', '1080'), "", array( "class" => "img-fluid" ) ); ?>

• pierwszy argument funkcji to ID obrazka, które jest widoczne w bibliotece,
• drugi argument to rozmiar, może być to konkretna szerokość i wysokość w postaci tablicy lub nazwa rozmiaru np. „thumbnail”,
• trzeci parametr to wartość boolowska, którą ustawiamy na true jeżeli obrazek pełni rolę ikony – dodaje typ MIME dla ikony, rzadko wykorzystywane przy zwykłych obrazkach,
• czwarty parametr to tablica z atrybutami.

W ostatnim, czwartym parametrze można dodawać własne klasy, id, a także zmienić domyślną wartość atrybutu loading.

ID obrazków można najszybciej odczytać w adresach URL w trakcie ich edycji. Teraz już wiesz dlaczego wtyczka ACF, pozwala wybrać opcję ID obok adresów URL i tablicy obrazów.

Stosowanie funkcji, które generują cały kod HTML potrzebny do załadowania obrazka ma jeszcze jedną zaletę. W tagu img umieszczane są atrybuty width i height, których stosowanie rezerwuje miejsce na stronie i zapobiega „skakaniu” strony przy ładowaniu. Może to obniżyć zawyżony wskaźnik CLS w podstawowych wskaźnikach internetowych.

Dodatek 2: Najczęstsze problemy z optymalizowaniem zdjęć w systemie WordPress

• wyblakłe, mało kolorowe i mniej nasycone zdjęcia – czytaj więcej w punkcie o profilach ICC,
• nie działa automatyczne przepisywanie adresów w .htaccess – wyposaż się w hosting spełniający wymagania WordPressa i jego ekosystemu (Apache lub NGINX) które są wymienione w dokumentacji – czytaj w osobnym artykule czym się różni prawdziwy hosting WordPress od zwykłego hostingu,
• wtyczki do konwersji plików nie działają – prawdopodobnie serwer blokuje możliwość użycia funkcji eval() lub brak rozszerzeń PHP GD/ImageMagick – wyposaż się w hosting lepszej jakości,
• dodatkowy tag picture psuje „rozsypuje” stronę – motyw niskiej jakości, napisany w „starym” stylu z mało zoptymalizowanymi i zbyt złożonymi selektorami CSS,
• zdjęcia są mało wyraźne – to zasługa „wtyczek do automatycznej optymalizacji” lub źle dobranych wielkości w ustawieniach mediów,
• mimo wysłania wielu rozmiarów, i ustawieniu wielkości, strona i tak ładuje oryginał lub niepotrzebnie wielki rozmiar – źle napisany szablon,
• zdjęcia mają dziwny adres np. „cdn.shortpixel.ai” – to zasługa kolejnej wtyczki, która dokonuje tego typu zmian automatycznie.

Dodatek 3: Rozmiary zdjęć dla WooCommerce

Dodatkowe rozmiary zdjęć dla funkcjonalności WooCommerce mogą być definiowane podczas deklaracji add_theme_support, np:

 add_theme_support( 'woocommerce', array(
 'thumbnail_image_width' => 200,
 'gallery_thumbnail_image_width' => 100,
 'single_image_width' => 500,
 ) );

Wartości te należy dopasować do aktualnego motywu. Podczas korzystania obrazków w funkcji wp_get_attachment_image nalezy się posługiwać wymienionymi rozmiarami czyli:

• woocommerce_thumbnail,
• woocommerce_single,
• woocommerce_gallery_thumbnail

Oczywiście, można korzystać także z własnych rozmiarów. Wtyczka WooCommerce automatycznie dodaje kilka opcji w Wygląd >> Dostosuj. Jedną z zakładek jest zmiana rozmiarów dla obrazków dotyczących produktów:

Podsumowanie

Jak widać optymalizacja zdjęć w WordPress to złożone zagadnienie. Zrozumienie kluczowych mechanizmów w obszarze optymalizacji zdjęć pozwoli wybrać najlepsze działania naprawcze, uniknąć popularnych błędów i tworzyć treść w taki sposób aby można było optymalizować obrazki w przyszłości, np. kiedy zmienimy motyw witryny.

Mam nadzieję, że artykuł uzmysłowi jak ważna jest świadoma optymalizacja zdjęć, ładowanie grafik wysokiej jakości i zwróci uwagę na niuanse wydajności oraz SEO. Poprawa w tych obszarach – jak zresztą każda inna poprawa wprowadzana do strony na stałe – powinna długofalowo i stale poprawiać zarówno UX jak i pozycjonowanie naszej strony WordPress.

Źródła

• https://developer.wordpress.org/reference/functions/add_image_size/,
• https://developer.wordpress.org/reference/functions/wp_get_attachment_image/,
• https://deliciousbrains.com/webp-wp-offload-media-ewww/,
• https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel