Optymalizacja zdjęć WordPress. Skuteczne wtyczki i techniki

Potrzeby i preferencje użytkowników cały czas się zmieniają, to samo dotyczy wymagań stawianych przez wyszukiwarki internetowe. W przypadku WordPress znaczenie mają nie tylko treści, trzeba zadbać również o dobranie właściwych grafik. Kolejną kwestią jest to, aby zdjęcia zostały zoptymalizowane. Wymaga to zautomatyzowania procesów na witrynie, które dotyczą przede wszystkim edytowania obrazów i ich konwersji. Należy zadbać o dopasowanie właściwego rozmiaru grafik. Istotne są również jakość kompresji, kadrowanie, skalowalność, kolorystyka i profile ICC. Optymalizacja zdjęć WordPress dotyczy również działań związanych ze sposobem ich dostarczania i SEO.

Optymalizacja zdjęć WordPress – jak ją wykonać?

Jest wiele sposobów na zoptymalizowanie zdjęć w WordPress. Bardzo ważne będzie zadbanie o odpowiedni format plików z wgrywanymi zdjęciami. W przypadku zwykłych grafik, logo czy zrzutów ekranu najlepiej sprawdzi się format png. Warto go zastosować również w przypadku potrzeby zachowania bezbarwnego tła. Z kolei przy wstawianiu na stronę fotografii, różnych gradientów, zdecydowanie lepszym wyborem będzie jpg.

Znaczenie ma to, aby przy wyborze formatu zawsze kierować się tym, aby zaoszczędzić jak najwięcej miejsca. Nie ma sensu konwertować grafik, jeśli znajdują się one już w formacie jpg. Zrezygnować należy również z formatu gif, jeżeli na stronie nie mają pojawiać się animowane gify. Kolejną kwestią będzie odpowiedni rozmiar i rozdzielczość grafiki. Wraz ze wzrostem rozdzielczości rośnie niestety rozmiar pliku. Optymalizacja służy temu, aby zmniejszyć zużycie transferu. Należy jak najlepiej dostosować rozdzielczość, bez zmniejszania i powiększania obrazów. Wyjątkiem będą duże zdjęcia, które mają rozdzielczość ponad 4K. W ich przypadku najlepszym rozwiązaniem jest przekonwertowanie ich. Pomniejszanie zdjęć pozwoli zaoszczędzić przestrzeń na serwerze.

Techniki służące optymalizacji zdjęć w WordPress

Jedną z technik optymalizacyjnych WordPress jest regeneracja zdjęć, aby wprowadzone zmiany dotyczące modyfikacji rozmiarów zostały zastosowane do wszystkich grafik (zarówno nowych, jak i już istniejących na stronie). Można zrobić to ręcznie lub skorzystać z gotowego narzędzia w postaci wtyczki typu Regenerate Thumbnails. Jako że jakość wizualna zdjęć na WordPress ma spore znaczenie, to można ją podnieść bez konieczności tracenia większej ilości miejsca pamięci, dzięki zmianie stopnia kompresji jpeg.

Funkcje add_filter('jpeg_quality', function($arg){return 80;}); pozwalają zmodyfikować domyślną wartość w taki sposób, aby uzyskać więcej wolnej przestrzeni na serwerze. Użycie efektywnego kodowania obrazów przełoży się na ich szybsze ładowanie. Zmniejszy się również zużycie transmisji danych.

Godną polecenia techniką jest kadrowanie zdjęć, czyli ich przycinanie. Należy to zrobić jeszcze przed załadowaniem pliku. Służy do tego szereg programów przeznaczonych do obróbki grafiki. Przyspieszy to proces wgrywania zdjęć i zaoszczędzi sporo miejsca ze względu na nieobciążanie WordPressa nieobrobionymi grafikami. Do kadrowanie obrazu służy funkcja add_image_size();.

Co pomoże zoptymalizować zdjęcia w WordPress?

Jeśli ktoś chce uniknąć częstego problemu z zniekształconymi kolorami na skutek przetwarzania plików przy użyciu tradycyjnych technik skalowania i kadrowania, to powinien zapisać zdjęcia w trybie zgodności z WEB. W ten sposób będą one lepiej odwzorowane, czyli bez utraty na jakości. Bardzo ważne jest również to, aby zadbać o responsywność obrazów. Mają się one prawidłowo wyświetlać na różnych urządzeniach mobilnych.

Znaczenie ma to, aby ładowane były zdjęcia wysokiej rozdzielczości, o dużych rozmiarach, dzięki czemu WordPress będzie w stanie utworzyć wyraźne miniatury na wyświetlaczach o różnej przekątnej. Najlepsze efekty uzyskuje się przy ładowaniu zdjęcia o minimalnej szerokości 1920px. Można jednak śmiało postawić na znacznie większą szerokość, a mianowicie 3840 PX. Pamiętać należy o tym, aby zaznaczyć możliwość użycia dodatkowych rozmiarów w atrybucie srcset. Nie zaleca się z kolei wstawienia samodzielnie utworzonych tagów Img src w treści HTML. Nie sprawdzą się również następujące funkcje wp_get_attachment_image_src(); oraz the_post_thumbnail_url();. Należy zastąpić je funkcją wp_get_attachment_image(); i the_post_thumbnail();.

O czym warto pamiętać przy optymalizowaniu grafik?

Niezwykle pomocny w optymalizowanie zdjęć w WordPress jest zastosowanie formatu grafiki najnowszej generacji, czyli WEBP. Można ją włączyć za pomocą specjalnej wtyczki. Wyświetlanie obrazów w formatach nowej generacji przekłada się na lepszą kompresję, czyli szybsze pobieranie i mniejsze wykorzystywanie danych. Sposobem na przyspieszenie działania witryny jest również zintegrowanie bibliotek zdjęć z magazynem plików statycznych i CDN. Ma to szczególne znaczenie przy sporym zbiorze grafik. Do dyspozycji jest zarówno serwer plików, jaki usługa chmurowa do ich przechowywania. Odciąża to serwer HTTP. Kolejną kwestią będzie skorzystanie z mechanizmu lazy-loadingu zdjęć, czyli opóźnionego ładowania zdjęć i obrazów poza ekranem. Należy zastosować również efektywne zasady pamięci podręcznej dla zasobów statycznych.

Do optymalizacji zdjęć w WordPress warto wykorzystać następujące wtyczki: Smush, EWW IO, Imagify, ShortPixel, Compress JPEG & PNG Images czy Optimus.