Jak łatwo serwować przeskalowane obrazy w WordPress (krok po kroku)

Jeśli przeprowadziłeś test prędkości swojej witryny WordPress, prawdopodobnie zobaczyłeś ostrzeżenie o „serwowaniu przeskalowanych obrazów”. Narzędzia takie jak Google PageSpeed i GTmetrix często je oznaczają, ale nie wyjaśniają tego jasno.

Oznacza to po prostu, że Twoje obrazy są większe niż przestrzeń, w której się pojawiają. Może to spowolnić Twoje strony, zaszkodzić SEO i zirytować użytkowników mobilnych.

Pomogliśmy użytkownikom WordPress rozwiązać ten problem bez ręcznej edycji każdego obrazu lub grzebania w kodzie. Dzięki odpowiedniemu podejściu możesz szybko rozwiązać problem i zapobiec jego ponownemu wystąpieniu.

W tym przewodniku pokażemy Ci krok po kroku, jak serwować przeskalowane obrazy w WordPressie, bez potrzeby posiadania umiejętności technicznych.

Dlaczego serwować przeskalowane obrazy w WordPress?

Na swojej stronie WordPress prawdopodobnie będziesz używać obrazów do wpisów na blogu, miniatur, nagłówków stron, obrazów okładek i nie tylko. Każdy obraz służy celowi, pomagając stworzyć wizualne doświadczenie dla Twoich odwiedzających.

W zależności od Twojego motywu, obrazy te są wyświetlane w określonych wymiarach pikselowych. Na przykład Twój obraz wyróżniony może być wyświetlany w rozdzielczości 680×382 pikseli, podczas gdy miniaturka może mieć 100×100 pikseli.

Ważne jest, aby zapisywać obrazy w dokładnych wymiarach potrzebnych dla Twojej witryny. Na przykład, jeśli przestrzeń na obraz wyróżniony ma wymiary 680 × 382 pikseli, plik obrazu powinien odpowiadać tym wymiarom.

Niewłaściwe skalowanie obrazów może prowadzić do wolniejszego ładowania lub gorszej jakości doświadczenia użytkownika. Oto kilka powodów:

• Pliki większe niż jest to konieczne spowalniają czas ładowania, ponieważ odwiedzający muszą pobrać dodatkowe dane.
• Używanie obrazów z mniejszą liczbą pikseli niż potrzeba może sprawić, że będą wyglądać na rozmazane lub zniekształcone przy większych rozmiarach wyświetlania.
• Twoja witryna musi zmieniać rozmiar obrazów w locie, co wymaga więcej czasu przetwarzania, zanim treść pojawi się użytkownikom.

Wszystko to może prowadzić do mniej satysfakcjonujących wrażeń dla Twoich odwiedzających i może nawet zaszkodzić Twojemu SEO obrazów.

Dlatego, gdy testujesz wydajność swojej witryny za pomocą narzędzi takich jak GTMetrix, często zobaczysz zalecenia dotyczące serwowania przeskalowanych obrazów dla lepszej prędkości.

Teraz przejdźmy przez to, jak serwować przeskalowane obrazy w WordPress. Omówimy dwie proste metody optymalizacji obrazów pod kątem wydajności.

• Metoda 1: Serwowanie przeskalowanych obrazów za pomocą wtyczki (łatwiejsza)
• Metoda 2: Ręczne serwowanie przeskalowanych obrazów
• Najczęściej zadawane pytania dotyczące skalowania obrazów w WordPressie
• Dodatkowe zasoby

Metoda 1: Serwowanie przeskalowanych obrazów za pomocą wtyczki (łatwiejsza)

Najprostszym sposobem serwowania przeskalowanych obrazów w WordPress jest użycie wtyczki, która automatycznie zmienia rozmiar obrazów i dostarcza je w odpowiednich wymiarach dla urządzenia każdego odwiedzającego.

Zalecamy tę metodę dla większości początkujących, ponieważ zajmuje się ona wszystkim w tle. Jest szybka w konfiguracji i dobrze działa w typowych witrynach.

Darmowa wtyczka Optimole jest jedną z najlepszych wtyczek do kompresji obrazów WordPress, które testowaliśmy. Automatycznie skaluje obrazy za Ciebie. Pamiętaj tylko, że jeśli Twoja strona ma ponad 5000 odwiedzin miesięcznie, będziesz potrzebować wersji premium.

Aby rozpocząć, zainstaluj i aktywuj wtyczkę Optimole. Możesz skorzystać z naszego przewodnika po instalacji wtyczki WordPress, jeśli potrzebujesz pomocy.

Po aktywacji przejdź do Multimedia » Optimole. Zostaniesz poproszony o utworzenie klucza API lub wprowadzenie istniejącego. Proces jest prosty.

Po prostu potwierdź swój adres e-mail i kliknij przycisk „Utwórz i połącz swoje konto”. Optimole automatycznie połączy Twoją witrynę, bez konieczności wklejania kluczy lub opuszczania pulpitu.

Optimole rozpocznie teraz optymalizację Twoich obrazów w tle. Wybiera odpowiedni rozmiar na podstawie ekranu każdego odwiedzającego i serwuje obrazy za pośrednictwem swojej globalnej sieci CDN, dzięki czemu Twoja witryna pozostaje szybka.

W zakładce „Ustawienia” zobaczysz, że Twoje obrazy są teraz zastępowane zoptymalizowanymi i przeskalowanymi wersjami. Dzieje się to automatycznie i nie spowalnia Twojego serwera dzięki CDN.

Optimole domyślnie umożliwia również leniwego ładowania. Oznacza to, że obrazy, które nie są widoczne na ekranie, nie będą ładowane, dopóki nie będą potrzebne – co pomaga skrócić czas ładowania strony i poprawić wydajność.

Domyślne ustawienia działają dobrze dla większości stron, ale możesz dostroić wszystko w menu „Zaawansowane”. Pamiętaj tylko, aby kliknąć przycisk „Zapisz zmiany”, jeśli wprowadzisz jakiekolwiek aktualizacje.

Ta metoda jest idealna, jeśli chcesz rozwiązania typu "ustaw i zapomnij". Jest szybka, przyjazna dla początkujących i nie wymaga ręcznej edycji każdego obrazu.

Niemniej jednak nie jest to najbardziej elastyczna opcja. Jeśli potrzebujesz pełnej kontroli nad wymiarami obrazu lub chcesz samodzielnie zająć się optymalizacją, serwowanie przeskalowanych obrazów ręcznie – może być lepszym rozwiązaniem.

Metoda 2: Ręczne serwowanie przeskalowanych obrazów

Ręczne skalowanie obrazów daje Ci pełną kontrolę nad tym, jak Twoje obrazy wyglądają i działają. Wymaga to nieco więcej wysiłku, ale wyniki mogą być bardziej precyzyjne i spójne w całej witrynie.

Oto dlaczego to podejście oferuje większą elastyczność:

• Możesz wybrać dokładne wymiary i formaty obrazów przed przesłaniem.
• Możesz zmniejszyć rozmiary plików bez polegania na narzędziach stron trzecich.
• Unikasz ograniczeń wtyczek lub miesięcznych limitów odwiedzin.
• Uzyskujesz bardziej spójne wyniki w różnych motywach i układach.

Dlatego ta metoda jest idealna dla projektantów, fotografów i każdego, kto chce mieć precyzyjnie dopasowaną kontrolę. Istnieją trzy sposoby, aby to zrobić:

1. Korzystając z oprogramowania do edycji obrazów (zalecane)
2. Biblioteka multimediów WordPress
3. W ustawieniach mediów WordPress.

Zacznijmy od podejścia z oprogramowaniem do edycji obrazów.

1. Skalowanie obrazów za pomocą oprogramowania do edycji obrazów

To jest metoda, której używamy na naszych stronach internetowych. Korzystając z narzędzi takich jak Adobe Photoshop lub Affinity Photo, możesz zmienić rozmiar swoich obrazów przed ich przesłaniem.

Możesz wybrać odpowiednie wymiary w pikselach, wybrać potrzebny format i zapisać plik o mniejszym rozmiarze — wszystko w jednym kroku.

Oto przykład narzędzia do przycinania Affinity Photo w akcji:

Oprócz wyboru odpowiednich wymiarów, istnieją inne sposoby, aby obrazy były lekkie i szybko się ładowały przed przesłaniem.

Aby uzyskać więcej wskazówek, zapoznaj się z naszym przewodnikiem na temat optymalizacji obrazów pod kątem wydajności sieci.

2. Skalowanie obrazów w bibliotece multimediów WordPress

Możesz również zmieniać rozmiar obrazów bezpośrednio w WordPressie. Wbudowany edytor obrazów pozwala na przycinanie, obracanie, odwracanie i skalowanie przesłanych obrazów.

Aby to zrobić, otwórz post lub stronę, na której znajduje się obraz. Kliknij obraz, a następnie kliknij przycisk „Zastąp” i wybierz „Otwórz Bibliotekę Mediów”.

Spowoduje to otwarcie Biblioteki Mediów z zaznaczonym obrazem.

Po prawej stronie zobaczysz pola na tekst alternatywny, tytuł, podpis i opis. Poniżej kliknij link „Edytuj obraz”.

To przeniesie Cię do ekranu edytora obrazów.

Stąd możesz podglądać obraz i używać podstawowych narzędzi do edycji. Aby zmienić rozmiar obrazu, poszukaj opcji „Skaluj obraz” po prawej stronie.

Wprowadź pożądaną szerokość, a wysokość zostanie automatycznie zaktualizowana, aby zachować proporcje.

Na przykład, obraz o rozmiarze 2560x1637 można przeskalować do 1200 pikseli szerokości jednym kliknięciem.

Po wprowadzeniu nowej szerokości kliknij przycisk „Skaluj”, aby zapisać zmianę.

Pamiętaj, że w WordPress możesz skalować obrazy tylko w dół, a nie w górę. Zwiększenie rozmiaru może zmniejszyć jakość lub zakończyć się niepowodzeniem.

Potrzebujesz pomocy z edycją obrazów w WordPress? Zobacz nasze poradniki dotyczące podstawowej edycji obrazów i przycinania miniatur.

Dostosowywanie rozmiarów obrazów w ustawieniach mediów

Domyślnie WordPress tworzy kilka wersji każdego obrazu w różnych rozmiarach. Możesz zmienić te domyślne rozmiary, przechodząc do Ustawienia » Multimedia w swoim panelu.

Tutaj możesz dostosować wymiary dla rozmiarów miniaturki, średniego i dużego. Wpływa to na sposób skalowania i wyświetlania obrazów w całej witrynie.

Jeśli potrzebujesz więcej rozmiarów obrazów, możesz utworzyć dodatkowe za pomocą kilku linii kodu lub wtyczki.

Po zmianie rozmiarów obrazów będziesz musiał regenerować miniatury dla istniejących obrazów, aby używały nowych ustawień.

Podczas wstawiania obrazu do wpisu lub strony, możesz również wybrać, który rozmiar ma być wyświetlany w panelu ustawień bloku.

Najczęściej zadawane pytania dotyczące skalowania obrazów w WordPressie

Poniżej znajdują się niektóre z najczęściej zadawanych pytań użytkowników dotyczących skalowania i obsługi obrazów w WordPressie.

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

Dodatkowe zasoby

Multimedia i obrazy sprawiają, że strona WordPress jest angażująca. Poniżej znajdują się dodatkowe zasoby, które pomogą Ci w pełni wykorzystać możliwości multimedialne WordPress.

• Jak dodać obraz nagłówkowy w WordPress
• Obrazek wyróżniający vs. Obrazek okładki w edytorze bloków WordPress (Przewodnik dla początkujących)
• Dlaczego nigdy nie powinieneś przesyłać wideo do WordPressa
• Jak utworzyć galerię obrazów w WordPress (krok po kroku)
• Jak dodać swoje kanały mediów społecznościowych do WordPressa (krok po kroku)

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak serwować przeskalowane obrazy w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat optymalizacji SEO obrazów WordPress lub naszym artykułem na temat wykorzystania sztucznej inteligencji do generowania obrazów do postów na blogu.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.