Dodatkowe rozmiary zdjęć w WordPress

Chcesz dodać dodatkowe / niestandardowe rozmiary zdjęć w WordPress? To jesteś we właściwym miejscu. Oto poradnik, z którego dowiesz się jak w prosty sposób stworzyć w WordPress dodatkowe rozmiary obrazów oraz zmienić istniejące rozmiary.

Jakie są domyślne rozmiary obrazów WordPress?

Domyślnie każda instalacja WordPress ma trzy niestandardowe rozmiary obrazów.

• Miniatura / Thumbnail – 150×150
• Średni rozmiar / Medium – 300×300
• Duży rozmiar / Large – 1024×1024

Oznacza to, że kiedy wgrywasz obraz do swojej witryny, WordPress automatycznie utworzy kopie w tych rozmiarach. W większości przypadków te wymiary nie są tymi, których potrzebujesz w swojej witrynie.

Zmień domyślny rozmiar obrazów WordPress

Domyślny rozmiar obrazów w WordPress to uniwersalny rozmiar. Niestety w czasach dzisiejszych te rozmiary nie są praktyczne. Prawdopodobnie również Twoja strona potrzebuje innych rozmiarów obrazów. Jeżeli tak faktycznie jest, koniecznie stwórz niestandardowe rozmiary obrazów.

Jak zmienić domyślny rozmiar obrazów w WordPress?

Aby zmienić rozmiar obrazów przejdź do panelu administratora WordPress. Następnie zakładka Ustawienia > Media. Tam możesz zmienić wymiary 3 domyślnych obrazów.

Wprowadź rozmiary obrazów, które chcesz używać na swojej stronie WordPress. Załóżmy, że chcesz zmienić obrazy o średnim rozmiarze na 650px * 650px. Po prostu wprowadź nowe wartości w odpowiednim polu, a następnie kliknij przycisk Zapisz zmiany.

Jak widzisz, masz do dyspozycji przy każdym rozmiarze obrazu dwie wartości:

• maksymalna szerokość
• maksymalna wysokość

W zależności od potrzeb możesz wprowadzić tylko jedną wartość. Z praktycznego punktu widzenia nowoczesnych motywów dla WordPress oraz zastosowań interesuje Cię najbardziej maksymalna szerokość.

Na przykład na motywie Blocksy standardowe wartości , które najlepiej sprawdzają się w praktyce to:

Z prostego zastosowania: Strony na motywie Blocksy standardowo mają szerokość 1290px, a blog posty są narrow, czyli zawężona szerokość do 750px. Dzięki tym rozmiarom obrazów zdjęcia będa najlepiej zoptymalizowane. W postach będziesz używać zdjęcia średni rozmiar o szerokości 750px, a na stronach zdjęcia duży rozmiar o szerokości 1290px.

Po zmianie rozmiaru obrazków, rozważ ponowne wygenerowanie miniatur. Oczywiście upewnij się, że masz kopię zapasową strony WordPress. Przy użyciu Force Regenerate Thumbnails poprzednie wymiary zdjęć zostaną usunięte. Może to spowodować, że strony i posty na blogu, w których były użyte standardowe rozmiary postów, przestaną się wyświetlać. Jeżeli nie zależy Tobie na oszczędności miejsca na hostingu, to możesz użyć zwykłej wtyczki Regenerate Thumbnails, która ma opcję, aby pozostawić stare rozmiary obrazów.

Jak dodać niestandardowe rozmiary obrazu w WordPress?

A co w przypadku, kiedy chcesz wykorzystać w pełni WordPress i chcesz użyć dodatkowych rozmiarów zdjęć? Jest na to rozwiązanie. Wspomniałem o nim podczas sesji live Dzień z życia Webmastera 4.

Możesz dodać niestandardowe / dodatkowe rozmiary obrazu za pomocą małego kodu i wtyczki Code Snippets. Oto instrukcja jak to zrobić:

1. Zainstaluj i aktywuj wtyczkę Code Snippets
2. Dodaj i zmodyfikuj snippet z kodem dodatkowych rozmiarów obrazów.

Aby zainstalować wtyczkę Code Snippets i dowiedzieć się jak ona działa i jak dodaje się kod do strony WordPress przeczytaj dodatkowy artykuł Jak dodać kod do WordPress.

Następnie kod do dodania:

add_action( 'init', function() {
add_image_size( 'piersze-zdjecie', 500, 200 ); // 500 maks. szerokość, 200 maks. wysokość
add_image_size( 'drugie-zdjecie', 950 ); // 950 maks. szerokość
} );

Ten kod modyfikujesz jak tylko chcesz. Pamiętaj aby zachować składnię i dodawać kolejne rozmiary obrazów od nowego wiersza.

add_action( 'init', function() to początek kodu, następnie pomiędzy klamrami { } dodajesz od nowego wiersza dodatkowe rozmiary zdjęć:

Przykładowo jeżeli chcesz dodać rozmiar zdjęć o szerokości 1100px to wstawiasz linijkę kodu add_image_size( 'extra-post-image', 1100 );

Fragment 'extra-post-image' możesz zmienić na coś innego, własnego. Pamiętaj, aby nie używać polskich znaków ani spacji. Jeżeli chcesz mieć dodatkowy rozmiar ograniczony wysokością (np 600px) to po wartości szerokości 1100 dodaj , 600. Wtedy Twoja linijka kodu powinna wyglądać tak add_image_size( 'extra-post-image', 1100, 600 );

Kod zakończ znakami );

Polecam również uzupełnić ten kod o kolejną funkcję, dzięki której nazwiesz swoje zdjęcia w przyjaznym formacie.

Pod kodem dodania rozmiarów zdjęcia dodaj kolejny kod:

function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
		'pierwsze-zdjecie' => __( 'Zdjecie 500*200' ),
        'drugie-zdjecie' => __( 'Zdjecie 950px' ),
    ) );
}

Teraz, Twoje zdjęcia będą miały przyjazne nazwy. Oczywiście możesz dodać w tym kodzie własne zmienne, w zależności jak nazwałeś zmienne w kodzie add_image_size

Regenerowanie miniatur w WordPress

Jeżeli chcesz, aby dotychczas dodane obrazy w WordPress były dostępne w nowych rozmiarach musisz wygenerować miniatury. Są dwa sposoby:

1. Regenerowanie miniatur i usuwanie starych rozmiarów obrazów
2. Regenerowanie miniatur bez usuwania starych rozmiarów

Metoda 1. Dbając o miejsce na hostingu polecam metodę pierwszą. W tym celu zainstaluj i aktywuj wtyczkę Force Regenerate Thumbnails. Następnie przejdź do zakładki Narzędzia > Force Regenerate Thumbnails. Po czym uruchom proces. Proces ten może potrwać bardzo długo, w zależności od Twojego hostingu i ilości obrazów.

Metoda 2. Jeżeli nie chcesz usuwać starych rozmiarów obrazów w WordPress to polecam wtyczkę Regenerate Thumbnails. Zainstaluj, aktywuj. Uruchom wtyczkę z zakładki Narzędzia > Regenerate Thumbnail. Upewnij się, że opcja delete thumbnail file jest wyłączona.

Usuwanie domyślnych rozmiarów obrazów w WordPress

Widziałem tysiące stron WordPress i sposobów zarządzania rozmiarami obrazów w WordPress. Stąd też, wspominam o kolejnej opcji, czyli usuwanie domyślnych rozmiarów obrazów. Nie wiem, czy ma to sens, ale jeżeli chcesz pozbyć się miniatur w WordPress i nie tworzyć dodatkowych rozmiarów, to w zakładce Ustawienia > Media wypełnij zerami (0) wszystkie wartości. Tak jak na obrazku poniżej:

Kiedyś to miało sens, dzisiaj, gdy zależy Tobie na optymalizacji i Core Web Vitals, to nie polecam tej metody.

Mam nadzieję, że wiesz już wszystko o dodatkowych i domyślnych rozmiarach obrazów w WordPress. Ciekaw jestem, czy używasz niestandardowych rozmiarów obrazów, a może pierwszy raz o tym czytasz? Czekam na Twój komentarz, nawet jeżeli chcesz tylko się przywitać i napisać słowo podziękowania za poradnik.