Jak łatwo serwować skalowane obrazy w WordPressie (krok po kroku)

Czy kiedykolwiek odwiedziłeś stronę i opuściłeś ją w ciągu kilku sekund, ponieważ obrazy nie ładowały się wystarczająco szybko? To dokładnie to, czego mogą doświadczać Twoi odwiedzający, jeśli nie dostarczasz skalowanych obrazów na swojej stronie WordPress. 

Ten problem występuje, gdy Twoje obrazy są zbyt duże w stosunku do rozmiaru wyświetlania, co powoduje wolne ładowanie strony i negatywnie wpływa na doświadczenie użytkownika.

Ale nie martw się, mamy cię pod opieką! Postępuj zgodnie z szybkim samouczkiem poniżej, aby dowiedzieć się, jak łatwo serwować skalowane obrazy!

Dlaczego musisz serwować skalowane obrazy?

Obrazki skalowane to obrazy, które zostały zmienione rozmiarowo, aby dopasować dokładne wymiary, w jakich będą wyświetlane na stronie internetowej. To różni się od oryginalnych plików, które zazwyczaj mają znacznie większe rozmiary i rozdzielczości.

Na przykład, Twój oryginalny wyróżniony obraz może mieć 4000 × 3000 pikseli, ale Twoja strona wyświetla go tylko w rozmiarze 800 × 600 pikseli. Jeśli użyty zostanie oryginalny obraz zamiast wersji skalowanej, Twoja witryna będzie ładować się wolniej.

Gdy obrazy nie są odpowiednio skalowane, przeglądarka musi ręcznie zmieniać ich rozmiar w locie. Spowoduje to spowolnienie ładowania strony, zmuszając użytkowników do czekania i potencjalnie zwiększając współczynnik odrzuceń.

Ważne jest używanie skalowanych obrazów, ponieważ ich brak może prowadzić do kilku problemów:

• Niepotrzebne czasy ładowania, ponieważ użytkownicy muszą pobierać większe pliki niż to konieczne.
• Pikselowane lub rozmyte obrazy, jeśli obraz jest zbyt mały i zostaje rozciągnięty.
• Zwiększony czas przetwarzania, ponieważ przeglądarka musi w locie zmieniać rozmiar obrazów, co powoduje opóźnienia w wyświetlaniu treści.

Przewodnik krok po kroku

1. Użyj narzędzi do edycji obrazów

Ta metoda oferuje szybsze zmienianie rozmiaru obrazów przy użyciu narzędzi edycyjnych. Możesz używać narzędzi takich jak Adobe Photoshop, aby tworzyć odpowiednio skalowane obrazy. Photoshop umożliwia rozbudowaną personalizację, dzięki czemu możesz określić wymiary pikseli w zależności od wymagań rozmiaru.

Jeśli szukasz darmowej alternatywy, narzędzia online takie jak PhotoPea są dobrą opcją. Ale. w tym samouczku skupimy się na Photoshopie ze względu na jego wszechstronne funkcje.

Aby zmienić rozmiar obrazu przed przesłaniem, postępuj zgodnie z poniższym samouczkiem:

• Otwórz swój obraz w Photoshop
• Kliknij Obraz zakładkę i wybierz Rozmiar obrazu

• W oknie dialogowym, które się pojawi, zmień rozmiar obrazu zgodnie z wymaganiami wyświetlania strony internetowej. 

Na przykład, jeśli Twój oryginalny obraz ma wymiary 1281 x 493 px i chcesz go przeskalować do 3600 x 2400 px, wprowadź nowe wymiary. 

• Zmień Rozdzielczość na 72 PPI do użytku w sieci, lub 300 PPI, jeśli potrzebujesz wysokiej jakości druku.
• Następnie wybierz metodę przeskalowywania. Dwie najbardziej odpowiednie opcje optymalizacji dla sieci to:

• Kliknij OK aby zastosować zmiany. Twój obraz został teraz przeskalowany.
• Aby zapisać obraz, otwórz Plik zakładkę i wybierz Eksport.

• Kliknij Eksportuj jako i wybierz dowolny format pliku oraz dostosuj ustawienia, aby uzyskać jak najmniejszy rozmiar pliku bez utraty zbyt dużej jakości obrazu.

2. Wykorzystaj wbudowane rozmiary obrazów WordPressa

Jeśli wolisz nie instalować żadnego oprogramowania firm trzecich, możesz użyć wbudowanego edytora obrazów w WordPressie. Dzięki temu narzędziu możesz wykonywać podstawowe zadania edycji obrazów, takie jak przycinanie, odwracanie i zmiana rozmiaru.

Możesz uzyskać dostęp do tej funkcji, klikając dowolny obraz w swoim poście lub bibliotece mediów. Dodatkowo możesz definiować własne rozmiary obrazów, modyfikując plik functions.php w swoim motywie.

Aby zachować prostotę, 'rozpocznijmy od podstawowego przewodnika poniżej:

• Prześlij swój obraz do swojego wpisu w WordPressie. 

• Wybierz obraz, a następnie kliknij Zastąp i wybierz Otwórz bibliotekę mediów z menu.

• W pasku bocznym kliknij Edytuj obraz.

• Zostaniesz przeniesiony do edytora obrazu. Kliknij Skaluj aby zmienić rozmiar obrazu

• Wprowadź nowy wymiar dla twojego obrazu. Na przykład, zmień go z 1198 × 744 px na 805 x 500 px. Proporcje są zachowane, więc druga wartość zostanie automatycznie dostosowana w zależności od wprowadzonej szerokości lub wysokości.

• Kliknij Skaluj przycisk, aby zastosować zmiany.
• Twój obraz jest teraz skalowany i gotowy do użycia w poście.

3. Wykorzystaj wtyczki

• Zainstaluj i aktywuj WP Meta SEO na swojej stronie WordPress.

• Z pulpitu WordPress przejdź do WP Meta SEO > Edytor obrazów.

• Otwórz ustawienia Image SEO & HTML Resize.

• Włącz opcję Dynamicznego skalowania obrazów, aby umożliwić WP Meta SEO automatyczne skalowanie obrazów w zależności od ich rozmiaru wyświetlania.

• Zdefiniuj maksymalne wartości szerokości i wysokości, aby kontrolować, jak obrazy są skalowane w interfejsie użytkownika.

Po włączeniu, WP Meta SEO będzie automatycznie dostosowywać wymiary obrazów, gdy są wyświetlane na Twojej stronie, zapewniając optymalne rozmiary obrazów bez ręcznej interwencji. To podejście poprawia szybkość ładowania strony, zwiększa wydajność SEO i zapewnia lepsze doświadczenie użytkownika—szczególnie dla stron z dużą ilością obrazów. 

Aby uzyskać więcej szczegółów, możesz zapoznać się z oficjalną dokumentacją i przeglądem funkcji:

• WP Meta SEO Funkcja Image SEO & HTML Resize
• Dynamiczny dokumentacja zmiany rozmiaru obrazu

4. Zaimplementuj responsywne obrazy używając atrybutu srcset

Atrybut srcset jest używany w znaczniku w HTML, aby zapewnić różne źródła obrazów dla różnych rozdzielczości ekranu. Dodając ten atrybut, przeglądarka może wybrać najbardziej odpowiedni obraz w zależności od urządzenia użytkownika.

Na przykład, jeśli użytkownik odwiedza Twoją stronę na urządzeniu mobilnym z wyświetlaczem o niskiej rozdzielczości, przeglądarka załaduje obraz o niższej rozdzielczości, aby zapewnić płynniejsze działanie.

Jeśli chcesz dowiedzieć się, jak ręcznie serwować skalowane obrazy, postępuj zgodnie z poniższymi instrukcjami:

• Otwórz plik HTML witryny za pomocą edytora kodu.
• Zlokalizuj znacznik dla obrazu, który chcesz zoptymalizować.

• Edytuj znacznik i dodaj atrybut srcset, jak pokazano na obrazku. 

W tym przykładzie 100w i 400w wskazują rzeczywistą szerokość każdego obrazu. Przeglądarka użyje tych informacji, aby zdecydować, który obraz załadować na urządzeniu użytkownika.

• Zapisz zmiany i odśwież swoją witrynę, aby zobaczyć wynik.

Jak zidentyfikować nieprzeskalowane obrazy

Po nauczeniu się, jak optymalizować obrazy, ważne jest również zidentyfikowanie, które obrazy nadal wymagają skalowania, a które już są zoptymalizowane.

Istnieją dwa popularne sposoby sprawdzenia nieprzeskalowanych obrazów, zarówno przy użyciu narzędzi, jak i przeprowadzając regularny audyt witryny. Postępuj zgodnie z poniższym samouczkiem:

1. Korzystanie z Google PageSpeed Insights

To jest niezbędne narzędzie, które oferuje sugestie pomagające przyspieszyć Twoją witrynę. Sugestie te są generowane w wyniku dogłębnej analizy przy użyciu Google Lighthouse. Jedną z typowych sugestii jest prawidłowe skalowanie każdego obrazu oznaczonego jako nieprzeskalowany.

Aby szybko sprawdzić, możesz postępować zgodnie z poniższą instrukcją:

• Otwórz Google PageSpeed Insight pod https://pagespeed.web.dev.

• Wklej pełny URL Twojej strony internetowej do pola wprowadzania.
• Kliknij Analizuj aby rozpocząć proces.
• Poczekaj, aż się zakończy. PSI następnie dostarczy Ci raport wydajności.
• Przewiń w dół, aby znaleźć pozycję oznaczoną Poprawny rozmiar obrazów.
• Jeśli występuje, zobaczysz listę nieprzeskalowanych obrazów znalezionych na Twojej stronie.

Jeśli jeden z Twoich obrazów jest oznaczony jako nieprzeskalowany, Google PageSpeed Insights może zaoferować kilka sugestii, w tym:

• Serwowanie obrazów w formatach nowej generacji, takich jak WebP, AVIF, JPEG XR lub JPEG2000.
• Prawidłowe zmienianie rozmiaru obrazów, aby spełnić różne wymagania rozmiarowe, np. zmiana rozmiaru do 1000 x 1000 px dla strony szczegółów produktu lub 400 x 400 px dla strony listy produktów.
• Używając lazy loading, tak aby tylko obrazy widoczne na ekranie user's były ładowane od razu.

2. Przeprowadzanie regularnego audytu witryny

Przeprowadzanie regularnych audytów witryny dostarcza Ci głębokich wglądów w zdrowie i wydajność site's.

Podczas audytu staraj się priorytetyzować przegląd architektury Twojej witryny i doświadczenia użytkownika, aby wykryć ewentualne problemy.

Ten proces może również ujawnić możliwości optymalizacji obrazów. Upewnij się, że testujesz swoją witrynę na różnych urządzeniach, takich jak telefon komórkowy, tablet i komputer stacjonarny, aby zapewnić spójne doświadczenie.

Zwróć również uwagę, czy obrazy są prawidłowo skalowane. If they're not, don't forget to follow the tutorial above.

Wniosek

Używanie skalowanych obrazów jest niezbędne do optymalizacji wydajności witryny, szczególnie na urządzeniach mobilnych. Pomaga to stronom ładować się szybciej i zmniejsza współczynnik odrzuceń.

Jednak skalowanie dużej liczby obrazów może być czasochłonne. Rozważ użycie wtyczki takiej jak WP Media Folder, która pozwala automatycznie zmieniać rozmiar, organizować i zamieniać obrazy, zapewniając jednocześnie ich optymalizację pod kątem wydajności.