Przewodnik dla początkujących dotyczący rozmiarów obrazów w WordPress (+ najlepsze praktyki)

Odkryj podstawy określania rozmiaru obrazów w WordPress w tym łatwym do zrozumienia przewodniku dla początkujących. Dowiedz się, jak WordPress automatycznie tworzy wersje miniaturek, średnich i dużych obrazów, dlaczego te rozmiary mają znaczenie dla wyglądu i wydajności Twojej strony oraz jak WP Media Folder może pomóc Ci zachować porządek.

 Ten przewodnik wyjaśnia domyślne rozmiary obrazów WordPress (miniatura, średni, duży), dlaczego istnieją i jak dostosować je do Twojego motywu. Będziemy również mogli zobaczyć, jak wtyczka WP Media Folder może pomóc w zarządzaniu Twoimi obrazami. Jeśli nie jesteś techniczny, nadal będzie to łatwe do zrozumienia. Ale dowiesz się dokładnie, jak WordPress obsługuje rozmiary obrazów i jak je dostosować.

Przegląd domyślnych rozmiarów obrazów w WordPress

Gdy przesyłasz obraz do WordPress, automatycznie tworzy on kilka wersji tego obrazu, aby służyć w różnych miejscach witryny. Domyślnie WordPress generuje:

• Miniatura: kwadratowa wersja o rozmiarze 150 × 150 pikseli. Często używana w podglądach wpisów na blogu, widgetach i galeriach.
• Średni: wersja przeskalowana tak, aby najdłuższy bok miał 300 pikseli. Jeśli Twój obraz jest wyższy niż szerszy, może mieć wysokość 300 i mniejszą szerokość lub odwrotnie.
• Duży: wersja, w której najdłuższy bok ma 1024 piksele. Dobry dla obrazów na pełną szerokość lub nagłówków wpisów na blogu.
• Full: the exact file you uploaded, unmodified.

WordPress wybiera optymalny rozmiar do dostarczenia w zależności od tego, gdzie obraz jest wyświetlany. Mały obrazek w liście postów jest dostarczany w rozmiarze 150 × 150; baner z wyróżnionym obrazem może używać maksymalnego rozmiaru 1024px. System ten optymalizuje szybkość ładowania, zużycie przepustowości i wygląd na różnych urządzeniach i rozmiarach ekranów.

Dlaczego WordPress generuje te rozmiary automatycznie

• Aby upewnić się, że obrazy pasują do odpowiednich obszarów projektu (np. nie są przeskalowane lub rozmyte).
• Aby zmniejszyć rozmiar pliku i poprawić wydajność ładowania strony, szczególnie na urządzeniach mobilnych
• Aby uprościć workflow dla twórców treści — bez potrzeby ręcznego zmiany rozmiaru.

Jeśli przesłany obraz jest mniejszy niż rozmiar generowany przez WordPress (na przykład zdjęcie o szerokości 800 pikseli), WordPress utworzy tylko rozmiary do wymiarów, które obraz obsługuje — tak więc duży rozmiar nie przekroczy oryginalnego rozmiaru.

Najlepsze praktyki dotyczące używania domyślnych rozmiarów obrazów

Oto kilka typowych przypadków użycia dla każdego domyślnego rozmiaru:

Miniatury

Użyj dla siatek galerii, podglądów wpisów na blogu, widżetów lub list pasków bocznych. Nie używaj rozmiaru miniatury dla dużego obszaru wyświetlania; będzie ona pikselowana.

W tym przykładzie użyliśmy galerii utworzonej za pomocą WP Media folder.

Średni

Idealne do obrazów wbudowanych w treści postów na blogu lub mniejszych banerów. Osiągają one dobry balans między klarownością a rozmiarem pliku.

Duży rozmiar

Użyj do obrazów na pełną szerokość, polecane nagłówki, slajdy lub sekcje na pełnym ekranie. Unikaj używania pełnowymiarowych oryginałów, chyba że jest to absolutnie konieczne (na przykład wysokiej jakości zdjęcia), ponieważ mogą być one nieporęczne i spowalniać ładowanie strony.

Przesyłanie bardzo dużych oryginalnych plików (na przykład tysięcy pikseli szerokości lub obrazów TIFF lub PNG o wysokiej rozdzielczości) nie jest zalecane. Zajmują one więcej miejsca na dane i mogą spowolnić działanie witryny lub serwera przetwarzania multimediów. Najlepiej przesyłać obrazy przeskalowane do maksymalnej szerokości wyświetlania motywu (na przykład 1200px szerokości, jeśli obszar treści ma 1200px).

Jak dostosować wymiary obrazu dla twojego motywu

Domyślnie WordPress używa rozmiarów w Ustawienia > Media, ale możesz chcieć dostosować te rozmiary lub dodać nowe dla wymagań twojego motywu.

Zmiana domyślnych wymiarów za pomocą ekranów administracyjnych

Przejdź do kokpitu WordPress > Ustawienia > Media. Tutaj możesz zmienić wymiary pikseli dla Miniatury, Średniej i Dużej. Po wprowadzeniu zmian zapisz. Przyszłe przesyłane pliki będą używać nowych ustawień.

Jednak istniejące obrazy już przesłane nie zostaną automatycznie zregenerowane, będziesz musiał użyć pluginu do regeneracji miniaturek, jeśli później zmienisz rozmiary.

Dodawanie niestandardowych rozmiarów obrazów w kodzie motywu

WAŻNA UWAGA: Nie należy stosować żadnego niestandardowego kodu bez uprzedniego utworzenia kopii zapasowej.

Aby zarejestrować nowe rozmiary obrazów poza thumbnail/medium/large, możesz dodać kod w pliku functions.php swojego motywu lub we wtyczce niestandardowej. Przykład:

add_image_size( 'custom-feature', 800, 600, true ); 

Rejestruje nowy rozmiar o nazwie 'custom-feature', o szerokości 800px, wysokości 600px i włączonym przycinaniu.

Następnie możesz wywołać to w plikach twojego motywu:

the_post_thumbnail( 'custom-feature' ); 

Lub w Gutenberg możesz zobaczyć nowy rozmiar w rozwijanym menu bloku obrazu, jeśli Twój motyw go obsługuje.

Możesz dodać wiele niestandardowych rozmiarów. Po ich zarejestrowaniu odtwórz miniatury dla istniejących obrazów, aby WordPress utworzył nowe wersje.

Najlepsze praktyki przy wyborze niestandardowych rozmiarów

• Dopasuj wymiary do układu Twojego motywu. Na przykład rozmiar banera nagłówka, rozmiar polecanego posta na blogu lub szerokość obrazu w artykule.
• Unikaj zmiany rozmiaru obrazów na rozmiary znacznie większe niż kontenery — marnotrawią one miejsce na dysku i spowalniają ładowanie.
• Użyj przycinania, gdy chcesz zachować spójny współczynnik proporcji obrazu, np. 16:9 lub 4:3. Ustaw przycinanie na true lub false w zależności od tego, czy preferowane jest przycinanie, czy proporcjonalne skalowanie.
• Przetestuj wstawione obrazy po dodaniu niestandardowych rozmiarów, aby upewnić się, że wyświetlają się poprawnie na komputerze i urządzeniu mobilnym.

Regenerowanie miniaturek

Jeśli zmienisz domyślne rozmiary lub dodasz nowe rozmiary, stare obrazy nie będą automatycznie miały nowych rozmiarów. Użyj wtyczki takiej jak „Regenerate Thumbnails” lub podobnej, aby odtworzyć wszystkie rozmiary obrazów dla poprzednich przesyłek. Zapewnia to, że Twoja biblioteka multimediów ma odpowiednie rozmiary, które WordPress może obsłużyć w różnych kontekstach.

Podsumowanie najlepszych praktyk

• Prześlij obrazy o rozmiarach zbliżonych do maksymalnej szerokości wyświetlania Twojego motywu (np. 1200 pikseli szerokości). Pozwól WordPressowi utworzyć mniejsze rozmiary.
• Zachowaj domyślne rozmiary na poziomie 150px (miniatura), 300px (średni) i 1024px (duży), chyba że Twój motyw wymaga innych wartości. Zmień ustawienia w sekcji Ustawienia > Media.
• Dodaj niestandardowe rozmiary za pomocą funkcji add_image_size() w kodzie motywu lub wtyczki dla unikalnych obszarów wyświetlania (np. banery hero, wyróżnione bloki).
• Po dostosowaniu rozmiarów lub dodaniu nowych, zregeneruj miniatury, aby WordPress utworzył te rozmiary dla starych plików.
• Użyj kadrowania, gdy wymagany jest stały współczynnik proporcji, lub proporcjonalnego skalowania, gdy wolisz zachować oryginalne proporcje.

Dodatkowa wskazówka: zwróć uwagę na WP Media Folder jeśli potrzebujesz organizacji opartej na folderach, ulepszonego wyszukiwania/filtrów multimediów, łatwiejszego tworzenia galerii, zastępowania multimediów i innych usprawnień przepływu pracy. Działa bezproblemowo z Twoim ustawieniem rozmiaru obrazu.

Podsumowanie: Opanuj rozmiary obrazów w WordPress dla szybkich i pięknych stron

Zrozumienie rozmiarów obrazów w WordPress pomaga dostarczyć odpowiedni obraz we właściwym miejscu. Miniatura, średni i duży są zaprojektowane tak, aby zrównoważyć jakość i wydajność. Możesz dostosować te rozmiary lub dodać nowe, aby dopasować je do układu motywu.WP Media Folder wprowadza strukturę folderów, zaawansowane zarządzanie, narzędzia do zastępowania, znak wodny i narzędzia do galerii na bazie domyślnego systemu multimedialnego WordPress.

Nawet jeśli nie uważasz się za osobę techniczną, te kroki są proste: dostosuj ustawienia w sekcji Media, zainstaluj wtyczkę do regeneracji po zmianach, opcjonalnie zarejestruj niestandardowe rozmiary w swoim motywie i użyj WP Media Folder , aby bardziej efektywnie uporządkować bibliotekę multimediów. W ten sposób Twoje obrazy wyglądają świetnie, ładują się szybko i są łatwe w zarządzaniu.