Wyjaśnienie rozmiarów obrazu WordPress

Rozmiary obrazów WordPress mogą czasami być trochę tajemnicą! Czy kiedykolwiek widziałeś tę stronę Ustawienia mediów w swoim obszarze administracyjnym i zastanawiałeś się, co to jest?

W tym artykule omówimy rozmiary obrazów WordPress, o co w nich chodzi i jak może to wpłynąć na takie rzeczy, jak czas przesyłania. Ponadto przyjrzymy się również, w jaki sposób WordPress wykorzystuje te różne rozmiary obrazów w układach witryn. Na koniec przyjrzymy się, jak usunąć niepotrzebne rozmiary obrazów lub dodać własny niestandardowy rozmiar.

Jaka jest rola rozmiarów obrazu w WordPressie?

To naprawdę ważne, aby obrazy na Twojej stronie wyglądały ładnie, wyraziście i wysokiej jakości. Jest kilka elementów, które to dyktują, w tym fizyczny rozmiar obrazu (zarówno wymiary, jak i rozmiar pliku) oraz rozdzielczość obrazu. Jeśli obraz jest zbyt duży (na przykład szerokość 10 000 pikseli) i rozmiar pliku jest zbyt duży (tj. przekracza 1 MB), zaczniesz zwalniać prędkość ładowania witryny. I odwrotnie, jeśli rozmiar obrazu jest zbyt mały, prawdopodobnie zobaczysz pogorszenie jakości obrazu… innymi słowy, może zacząć wyglądać na rozmyte lub ziarniste.

Hostuj swoją stronę internetową z Pressidium

60- DNIOWA GWARANCJA ZWROTU PIENIĘDZY

ZOBACZ NASZE PLANY

WordPress stara się znaleźć równowagę, dostarczając optymalny rozmiar obrazu w zależności od lokalizacji obrazu. Robi to, tworząc 3 różne rozmiary obrazów za każdym razem, gdy przesyłasz obraz do Biblioteki multimediów WordPress. Są to odpowiednio „rozmiar miniatury”, „średni rozmiar” i „duży rozmiar” o wymiarach 150×150 pikseli, 300×300 pikseli (maksymalnie) i 1024×1024 pikseli (maksymalnie). Na koniec zapisze również obraz „Pełnego rozmiaru”, który jest oryginalnym rozmiarem przesłanego obrazu.

Te rozmiary wraz z dodatkowymi rozmiarami, które później przyjrzymy się, są używane przez WordPress w różnych pozycjach w układzie frontendu. Dzieje się tak, aby użyty obraz a) wyglądał dobrze ib) szybko się ładował.

Bardziej szczegółowe badanie rozmiarów obrazów WordPress

Przeanalizujmy przykład, abyś mógł dokładnie zobaczyć, co dzieje się „za kulisami”, gdy przesyłasz obraz do WordPressa. Na potrzeby tego przykładu prześlemy obraz o nazwie „post1-feature-image”. Ma rozmiar 294 KB i mierzy 2089×1175 pikseli. Zrobimy to z aktywnym domyślnym motywem WordPress Twenty Twenty (inne motywy mogą zmieniać sposób obsługi obrazów przez WordPress).

Po przesłaniu tego obrazu za pośrednictwem Biblioteki multimediów WordPress możemy połączyć się z naszą witryną za pomocą klienta FTP, a jeśli przejdziemy do folderu Prześlij, zobaczymy, że utworzono wiele wersji naszych obrazów.

Podświetlone na czerwono zobaczysz nasze domyślne rozmiary obrazów. Miniatura została przycięta, ponieważ jest ustawiona domyślnie w ustawieniach multimediów.

Rozmiary „Średni rozmiar” i „Duży rozmiar” zostały zmienione w taki sposób, aby uniknąć zmiany rzeczywistych proporcji obrazu. Dlatego na przykład „Medium size” to 300×169 zamiast 300×300. Pozostałe wygenerowane obrazy są wynikiem działania niektórych podstawowych plików WordPress i kodu motywu Twenty Twenty.

Pierwsze techniczne!

Jeśli interesuje Cię kod tego, co się dzieje, gdy tworzone są dodatkowe rozmiary obrazów, ta sekcja artykułu jest dla Ciebie. Jeśli nie, przejdź do następnego rozdziału!

WordPress pobiera instrukcje z pliku o nazwie media.php, który znajduje się w folderze wp-includes/. Udaj się do tego, linia 4861, a zobaczysz:

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg jest tworzony w wyniku rozmiaru „medium_large”, który został dodany w wersji WordPress 4.4 dla lepszej responsywnej obsługi obrazów i jest widoczny na różnych urządzeniach przenośnych. Jest zdefiniowany w folderze „wp-admin/includes” w pliku schema.php, wiersz 522

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

i zażądano w plik image.php w linii 86:

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg i post1-feature-image-1980x1114.jpg są generowane z motywu „Dwadzieścia dwadzieścia” w pliku functions.php w wierszu 53:

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

Dzieje się tak, ponieważ motyw Twenty Twenty używa 1200 pikseli jako rozmiaru obrazu dla polecanych obrazów. Jeśli utworzymy testowy post i dodamy wyróżniony obraz, a następnie na stronie frontendowej pojedynczego posta możemy zobaczyć, jak ten rozmiar jest używany, klikając prawym przyciskiem myszy wyróżniony obraz i patrząc w inspektorze przeglądarki.

Wreszcie obraz o rozmiarze 1980 pikseli to rozmiar używany dla polecanego obrazu innych szablonów postów. Możesz to zobaczyć, zmieniając szablon posta testowego na „Szablon okładki”. Następnie w inspektorze CSS elementu HTML obrazu okładki możemy zobaczyć, jak ten rozmiar jest używany:

Zawsze warto upewnić się, że każdy przesłany obraz jest szerszy niż szerokość obrazu polecanego i okładki, aby wyglądał ostro. WordPress może skutecznie zmniejszyć rozmiary obrazu, ale nie może skalować małego obrazu i sprawić, by wyglądał dobrze.

Usuń niepotrzebne rozmiary obrazu WordPress

Jak widzieliśmy, WordPress jest zajęty tworzeniem obrazów o różnych rozmiarach za każdym razem, gdy przesyłamy obraz do naszej Biblioteki multimediów. Ale czy naprawdę potrzebujemy wszystkich tych obrazów? W rzeczywistości nie, nie. Nie tylko spowalnia prędkość, z jaką obrazy są przesyłane, ponieważ WordPress musi pracować w tle, tworząc te różne rozmiary obrazów, ale także zajmuje miejsce, którego nie musimy używać na naszym serwerze. Jak więc powstrzymać WordPress od tworzenia niepotrzebnych rozmiarów obrazów? Czytaj dalej, aby się dowiedzieć!

Uwaga: jeśli nie postępujesz zgodnie z tymi instrukcjami w witrynie demonstracyjnej, zalecamy wprowadzenie zmian opisanych poniżej w pliku functions.php motywu podrzędnego. Zmiany wprowadzone w pliku functions.php w motywie nadrzędnym zostaną wyczyszczone przy następnej aktualizacji motywu.

Usuń domyślne rozmiary obrazów WordPress

Można to łatwo osiągnąć, edytując plik functions.php motywu i dodając następujący kod:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

Aby przetestować, prześlijmy nowy obraz (w naszym przykładzie nazywa się to post2-featured-image) do biblioteki multimediów i odświeżmy widok FTP folderu przesyłania.

Jak widać, mówiąc WordPressowi, aby usunął 4 domyślne rozmiary obrazów za pomocą naszego pliku functions.php, zatrzymaliśmy WordPressa w celu utworzenia ich w naszym folderze multimediów. W przyszłości ta prosta aktualizacja kodu motywu oznacza, że ​​nie będziemy zatykać naszego serwera niepożądanymi rozmiarami obrazów. Pozwoli to zaoszczędzić miejsce i przyspieszy proces przesyłania obrazu.

Usuwanie starych rozmiarów obrazu z biblioteki multimediów

Być może zauważyłeś, że chociaż 4 domyślne rozmiary obrazów nie zostały utworzone dla naszego nowego obrazu, który przesłaliśmy, poprzednio przesłany obraz nadal ma wszystkie 8 wariantów zapisanych w bibliotece multimediów. Najprawdopodobniej, o ile nie jest to zupełnie nowa witryna, prześlesz dziesiątki, jeśli nie setki obrazów, a we wszystkich przypadkach zostaną utworzone te „dodatkowe” rozmiary. Więc co robić?

Pierwszą rzeczą do ustalenia jest to, czy potrzebujesz tych obrazów? Przed przystąpieniem do usuwania obrazów wygenerowanych przez WordPress musisz potwierdzić, że te rozmiary nie są już używane. Sprawdź swoje posty na blogu, polecane obrazy i każdą inną część swojej witryny, aby upewnić się, że żaden ze starych rozmiarów nie jest nadal używany.

Świetnym sposobem radzenia sobie z niechcianymi plikami starych obrazów jest użycie wtyczki Force Regenerate Thumbnail, która przejdzie i automatycznie je usunie. Zainstaluj i aktywuj wtyczkę, a następnie naciśnij przycisk „Regeneruj wszystkie miniatury” z menu wtyczki (Narzędzia->Wymuś ponowne wygenerowanie miniatur).

Odśwież widok folderu multimediów FTP, a zobaczysz, że domyślne obrazy WordPress zniknęły. Miły!

Innym łatwym sposobem na osiągnięcie tego samego wyniku dla domyślnych rozmiarów jest zmiana ich wartości wymiarów na „0” z poziomu Ustawienia> Media w wp-admin. Zobaczysz wtedy coś takiego:

Alternatywną metodą jest zmiana update_option( 'SIZE_w/h', 0 ); wewnątrz functions.php. Pamiętaj, aby zrobić to w pliku podrzędnym functions.php motywu potomnego, aby Twoje zmiany nie zostały utracone podczas późniejszej aktualizacji motywu.

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

Po wprowadzeniu tej aktualizacji zobaczysz, że Które odzwierciedlają wartość wymiarów w ustawieniach Media (z poziomu WP Admin) zostały teraz zaktualizowane do 0.

Usuń dodatkowe rozmiary obrazów motywu

Teraz pomyślnie poradziliśmy sobie z domyślnymi obrazami tworzonymi przez rdzeń WordPressa. Możemy teraz przejść dalej i zająć się obrazami stworzonymi przez temat (w tym przypadku Twenty Twenty). Jeśli, podobnie jak w przypadku naszych domyślnych rozmiarów obrazów, doszedłeś do wniosku, że nie są one konieczne, możesz wprowadzić pewne zmiany w kodzie motywu, aby w przyszłości uniemożliwić WordPressowi tworzenie tych rozmiarów.

Aby to zrobić, użyjemy haka init i podstawowej funkcji remove_image_size. Skopiuj poniższy kod i wklej go do pliku functions.php. Jeśli nie używasz motywu Twenty Twenty, tak jak tutaj, zastąp nazwy „po miniaturze” i „dwadzieścia dwadzieścia pełnoekranowych” nazwą aktywnego motywu.

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

Jeśli prześlemy teraz nowy obraz i sprawdzimy nasz folder przesyłania za pomocą naszego klienta FTP, zobaczymy, że generowane są wszystkie rozmiary z wyjątkiem „po miniaturze” i „dwadzieścia dwudziestego pełnego ekranu”.

Dodaj własny niestandardowy rozmiar obrazu

Teraz, gdy nauczyliśmy się usuwać zbędne rozmiary obrazów w WordPressie, zobaczmy, jak możemy dodać własne niestandardowe rozmiary obrazów zgodnie z potrzebami naszego szablonu.

Jak decydujemy, jakich rozmiarów obrazu potrzebujemy?

Załóżmy, że masz stronę internetową z główną kolumną o szerokości 960px, gdzie obraz funkcji znajduje się na górze, a treść posta poniżej. Pożądany rozmiar obrazu będzie wtedy wynosił 960px. Nie zapomnij również obliczyć dopełnienia CSS, jeśli takie istnieje. Jeśli elementy nadrzędne mają na przykład sumę dopełnienia 20px, odpowiednia szerokość obrazu będzie wynosić 920px. Jest to 960px minus 20px dla lewego dopełnienia minus 20px dla prawego dopełnienia.

Zarejestruj nowe rozmiary obrazów

Jednym z prostych sposobów zarejestrowania nowych rozmiarów jest użycie wbudowanej funkcji add_image_size() dostarczanej przez WordPress. Struktura funkcji to:

 add_image_size( name, width, height, crop )

Większość z tych opcji nie wymaga wyjaśnień. Ostatnia opcja (kadrowanie) dyktuje, czy WordPress respektuje proporcje naszego obrazu podczas zmiany rozmiaru, czy też przycina nasz obraz. Jeśli opcja przycinania jest ustawiona na „prawda”, obraz zostanie przycięty, a proporcje nie będą przestrzegane. Jeśli opcja przycinania zostanie pominięta lub ustawiona na fałsz, nasze proporcje obrazu zostaną zachowane.

Wypróbujmy to w akcji i śledźmy wynik za pomocą obrazu testowego o wymiarach 2089×1175 pikseli.

Najpierw dodajmy ten kod:

 add_image_size( 'new-post-thumb', 220, 180 );

Spowoduje to wygenerowanie post2-feature-image-220x124.jpg zamiast 220×180 w naszym folderze przesyłania, ponieważ kadrowanie nie jest ustawione (fałsz). To samo stanie się, jeśli wstawisz:

 add_image_size( 'new-post-thumb', 220, 180, false );

Jeśli jednak ustawisz przycinanie na true w ten sposób, obraz post2-feature-image-220x180.jpg zostanie zapisany.

 add_image_size( 'new-post-thumb', 220, 180, true );

Na koniec możesz dyktować sposób ułożenia przycięcia. Zamiast „prawda” po prostu użyj opcji „lewo” lub „góra” lub obie:

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

Tablica określa położenie przycięcia. Wartości, których można użyć to:

Dla x_crop_position: „w lewo”, „w środku” lub „w prawo”.
Dla y_crop_position: „góra”, „środek” lub „dół”.

Wynikiem w każdym przypadku będzie inna część oryginalnego obrazu. Oto kilka przykładów:

Alternatywą do robienia tego ręcznie poprzez dodanie kodu do naszego motywu jest użycie wtyczki, takiej jak Simple Image Sizes. Niemniej jednak warto zrozumieć, co dzieje się za kulisami, nawet jeśli używasz takiej wtyczki.

Wniosek

Korzystanie z prawidłowych rozmiarów obrazów w WordPressie jest ważne – nie tylko zapewnia wysoką jakość obsługi, prezentując ostre obrazy w wysokiej rozdzielczości przeglądarce internetowej, ale także znacząco wpływa na czas ładowania i wykorzystanie serwera. Mam nadzieję, że ten artykuł pomógł ci zrozumieć znaczenie rozmiarów obrazów w WordPressie i sposoby zastępowania, usuwania lub rozszerzania rozmiarów obrazów w celu zaspokojenia potrzeb Twojej witryny, a także w jaki sposób możesz potencjalnie zaoszczędzić mnóstwo miejsca na serwerze poprzez zatrzymanie WordPressa generowanie niepotrzebnych rozmiarów każdego przesłanego obrazu.