Ograniczenie tworzenia różnych wersji grafiki przesłanej do biblioteki mediów w WordPress

Do tego tematu szykowałem się dość długo, jednak nadszedł czas i poruszania tej kwestii. Osoby, które posiadają dość dużo treści na stronie lub sklepie internetowym opartym o CMS WordPress (a co za tym idzie również grafik), zauważyły na pewno, że z czasem bardzo szybko rośnie wykorzystane miejsce na serwerze, które zajmuje nasza strona lub sklep internetowy.

Dlaczego się tak dzieje? W dużej mierze dlatego, że nasz system CMS tworzy wiele wersji rozmiarowych każdego pliku graficznego – który wgraliśmy do biblioteki mediów. Brzmi bardzo skomplikowanie? Po prostu chodzi o to, że jak wgramy plik A, to Wordpress (ale i nie tylko, dojdziemy do tego), tworzy nasz plik A w różnych wersjach – czy tego potrzebujemy czy nie. Jeżeli posiadamy prostą stronę i mamy wszystkich grafik 20 sztuk, to nie dzieje się nic złego. Ale w przypadku sklepu internetowego, gdzie jest większa ilość produktów, to ilość stworzonych różnych wersji plików graficznych może być bardzo duża. Żeby było tego mało, nie tylko Wordpress tworzy swoje miniatury, ale użytkowane przez nas rozbudowane szablony również maczają tutaj palce. Przykładowo, prosta strona na Wordpress z szablonem Divi tworzy około 14 wersji pliku graficznego + plik oryginalny. To ogromne wartości w efekcie dużej skali, pytanie czy możemy coś z tym zrobić?

Sprawdzamy ile kopii pliku graficznego tworzy WordPress.

WordPress domyślnie generuje kilka wersji każdego przesłanego pliku graficznego, aby zapewnić optymalne wyświetlanie na różnych urządzeniach. Ilość i rodzaje generowanych kopii zależą od ustawień WordPressa oraz aktywnego motywu oraz wtyczek. Standardowo, WordPress tworzy trzy dodatkowe rozmiary: miniaturkę, średni rozmiar oraz duży rozmiar. Możliwe jest jednak, że liczba ta będzie większa w zależności od konfiguracji motywu lub dodatkowych wtyczek, które mogą dodawać własne rozmiary.

Aby sprawdzić, ile dokładnie kopii pliku graficznego jest tworzonych, można przejść do sekcji Ustawienia > Media w panelu administracyjnym WordPressa i zobaczyć predefiniowane rozmiary obrazów. Dodatkowo, rozszerzenia takie jak motyw Divi mogą wprowadzać własne rozmiary, których nie zobaczymy w tym miejscu, dopóki nie zmusimy do tego naszego CMS’a.

Rola szablonów w tworzeniu miniatur

Jak już w poprzednim akapicie sobie kilka razy wspomnieliśmy, nie tylko sam WordPress odpowiada za generowanie dodatkowych wersji grafik. Szablony, szczególnie te bardziej rozbudowane, również mogą dodawać własne rozmiary obrazów. Motywy takie jak Divi czy Avada często wprowadzają specyficzne dla siebie rozmiary miniatur, aby lepiej dopasować obrazy do własnych modułów i komponentów.

Zarządzanie tymi rozmiarami wymaga zrozumienia ustawień motywu oraz potencjalnie modyfikacji pliku functions.php lub użycia dedykowanych wtyczek do kontroli mediów. W przypadku dodatkowych wtyczek, zdecydowanie polecam zainstalowanie modułu “Simple Image Sizes”, który wyświetli nam wszystkie generowane rozmiary obrazów:

Jak widzicie na powyższym screenie, moduł ujawnił sporo dodatkowych wersji plików graficznych, które dla nas były ukryte w pierwotnej wersji.

Ograniczamy tworzenie kopii plików graficznych w panelu WordPress

W odpowiedzi na to pytanie, wielu użytkowników zaczyna szukać sposobów na ograniczenie liczby tworzonych kopii.

Wiele z tych dodatkowych wersji plików ma na celu zapewnienie, że strona wygląda dobrze na różnych urządzeniach z różnymi rozdzielczościami ekranu. To świetne rozwiązanie z punktu widzenia responsywności i szybkości ładowania, jednak w przypadku dużych witryn może okazać się nadmiernym obciążeniem.

Pierwszym krokiem jest przeprowadzenie analizy ustawień mediów w panelu administracyjnym WordPressa. W sekcji Media, jak już wiemy znajdują się wszystkie wersje generowanych grafik, jeżeli jesteśmy świadomi z których korzystamy, a z których nie – możemy przejść do oczyszczenia nieco atmosfery.

Zmniejszenie wartości lub ustawienie ich na zero może zapobiec tworzeniu niektórych rozmiarów. Należy jednak pamiętać, że każda zmiana w tych ustawieniach wpłynie tylko na nowo przesłane obrazy, a nie na te, które już znajdują się w bibliotece mediów.

Ograniczamy tworzenie kopii plików graficznych w pliku function.php

Jeżeli wspomniany sposób w poprzednim rozdziale nie zdał miejsca, możemy przystąpić do ograniczenia ilości generowanych z plików funkcyjnych naszego szablonu graficznego. Ale uwaga, przed przystąpieniem do zmian, zalecam wykonanie kopii zapasowej. A druga kwestia, zmiany te możemy wprowadzać jedynie w motywie potomnym naszego szablonu – czyli w child. To jak stworzyć taki motyw, omówiliśmy sobie w tym artykule: https://www.s90.pl/jak-stworzyc-motyw-potomny-child-themes-w-wordpress/

A przechodząc do meritum, poniżej zamieszczam kod to ograniczenia tworzenia domyślnych rozmiarów grafik w Wordpress:

function disable_image_sizes($sizes) {
// Usuwa standardowe rozmiary obrazów
unset($sizes['thumbnail']); // Miniaturka
unset($sizes['medium']); // Średni rozmiar
unset($sizes['large']); // Duży rozmiar
unset($sizes['medium_large']); // Średni-duży rozmiar
return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'disable_image_sizes');

// Opcjonalnie, wyłącza generowanie obrazów o różnych rozdzielczościach (srcset)
add_filter('wp_calculate_image_srcset_meta', '__return_null' );

// Wyłącza skalowanie dużych obrazów (wprowadzone w WordPress 5.3)
add_filter('big_image_size_threshold', '__return_false');

Jednak motyw na przykład Divi, może generować własne rozmiary obrazów, co już omówiliśmy. Niestety powyższy kod nie wpływa na tworzenie dodatkowych miniatur przez nasz szablon. Aby zarządzać tymi rozmiarami, należy skorzystać z wcześniej zainstalowanej wtyczki „Simple Image Sizes”. Moduł umożliwi odczytanie jakie grafiki są generowane, a ich nazwy możemy wykorzystać w poniższym kodzie – do wyłączenia ich:

function custom_disable_image_sizes($sizes) {
// Usuwa standardowe rozmiary obrazów
unset($sizes['thumbnail']); // Miniaturka
unset($sizes['medium']); // Średni rozmiar
unset($sizes['large']); // Duży rozmiar
unset($sizes['medium_large']); // Średni-duży rozmiar
return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'custom_disable_image_sizes');

// Wyłącza generowanie obrazów o różnych rozdzielczościach (srcset)
add_filter('wp_calculate_image_srcset_meta', '__return_null' );

// Wyłącza skalowanie dużych obrazów (wprowadzone w WordPress 5.3)
add_filter('big_image_size_threshold', '__return_false');

function remove_divi_image_sizes() {
foreach ( get_intermediate_image_sizes() as $size ) {
// Usuwa rozmiary specyficzne dla Divi
if ( in_array( $size, array( 'et-pb-post-main-image', 'et-pb-post-main-image-fullwidth', 'et-pb-gallery-module-image-portrait' ) ) ) {
remove_image_size( $size );
}
}
}
add_action( 'after_setup_theme', 'remove_divi_image_sizes', 11 );

Dajcie znać czy wam działa 🙂

Podsumowanie

WordPress tworzy dodatkowe wersje każdego przesłanego obrazu, aby poprawić responsywność i szybkość ładowania strony. Standardowo są to miniaturka, średni i duży rozmiar, ale motywy i wtyczki mogą dodać więcej rozmiarów. Aby zarządzać tymi kopiami i optymalizować miejsce na serwerze, można użyć specjalnych wtyczek lub zmodyfikować plik function.php naszego szablonu.

Jeżeli macie inne pytania odnośnie tworzenia stron internetowych, administracji stron internetowych lub pozycjonowaniem stron śmiało piszcie do nas.