Jak łatwo wyświetlać skalowane obrazki w WordPress (krok po kroku)

Czy chcesz wyświetlać skalowane obrazki na twojej witrynie WordPress?

Początkujący często spowalniają swoje witryny internetowe poprzez wgrywanie obrazków bez zwracania uwagi na ich rozmiar.

Serwowanie obrazków o prawidłowych wymiarach poprawi wydajność twojego WordPressa bez obniżania jakości.

W tym artykule pokażemy, jak łatwo obsługiwać skalowane obrazki w WordPress.

Dlaczego warto wyświetlać skalowane obrazki w WordPress?

W witrynie internetowej WordPress będziesz potrzebować obrazków do wpisów na blogu, miniaturek, nagłówków stron, okładek i nie tylko.

W zależności od twojego motywu, obrazki te będą zajmować określoną liczbę pikseli. Na przykład, twój wyróżniający się obrazek może zajmować 680×382 pikseli, a miniaturka 100×100 pikseli.

Ważne jest, aby używać obrazków, które zostały przeskalowane tak, aby pasowały do odpowiednich wymiarów twojej witryny. Na przykład, jeśli twoje wyróżniające się obrazki zajmują 680×382 pikseli, to powinieneś zapisać je w dokładnie takim rozmiarze.

W przeciwnym razie Twoja witryna może zostać spowolniona lub jakość doświadczenia użytkownika zostanie obniżona. Oto kilka najczęstszych powodów takiego stanu rzeczy:

• Twoi odwiedzający będą musieli pobierać większe pliki niż to konieczne, co wydłuża czas wczytywania.
• Jeśli użyjesz obrazków z mniejszą liczbą pikseli niż dozwolone miejsce, będą one wyglądały na rozmyte po wyświetleniu w większym rozmiarze.
• Twoja witryna internetowa będzie musiała zmieniać rozmiary obrazków w locie, co oznacza, że musi uruchomić więcej procesów, zanim będzie mogła wyświetlić treść użytkownikom.

Niezależnie od tego, zapewni to twoim użytkownikom złe wrażenia i może również negatywnie wpłynąć na SEO twojego obrazka.

Dlatego też, jeśli przetestujesz wydajność swojej witryny internetowej za pomocą skanowania GTMetrix, często będzie on zalecał wyświetlanie skalowanych obrazków, aby przyspieszyć twoją witrynę.

Mając to na uwadze, przyjrzyjmy się, jak łatwo obsługiwać skalowane obrazki w WordPress. Omówimy dwie metody:

Metoda 1: Serwowanie skalowanych obrazków za pomocą wtyczki

Najprostszym sposobem na wyświetlanie skalowanych obrazków jest użycie wtyczki, która automatycznie wyświetla twoje obrazy w witrynie internetowej w odpowiednim rozmiarze. Ta metoda jest najłatwiejsza, ale nie pozwala na tak dużą elastyczność, jak druga metoda.

Darmowa wtyczka Imagely jest jedną z najlepszych wtyczek do kompresji obrazków WordPress i automatycznie skaluje twoje obrazki. Jeśli jednak odwiedza Cię ponad 5000 użytkowników miesięcznie, będziesz potrzebować wersji premium.

Najpierw należy zainstalować i włączyć wtyczkę Optimole. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu zostaniesz automatycznie przeniesiony na stronę Media ” Optimole i poproszony o zarejestrowanie się w celu uzyskania klucza API lub wpisz twój istniejący klucz API. Jest to bardzo proste.

Po prostu upewnij się, że Twój adres e-mail jest poprawny, a następnie kliknij przycisk „Utwórz i połącz swoje konto”. Połączenie z Optimole nastąpi automatycznie. Nie trzeba nawet przechodzić na inną witrynę internetową ani ręcznie wklejać klucza.

Optimole rozpocznie teraz optymalizację twoich obrazków w tle. Automatycznie wybierze prawidłowy rozmiar obrazka dla urządzenia i przeglądarki każdego odwiedzającego i będzie serwować obrazki z szybkiej usługi Optimole Cloud Service CDN.

Po kliknięciu karty „Ustawienia” zobaczysz, że obrazki w twoich wpisach i stronach zostaną automatycznie zastąpione tymi zoptymalizowanymi i skalowanymi przez Imagely.

Nie odbywa się to w locie, ponieważ odbywa się za pośrednictwem CDN, co oznacza, że twoja witryna nie ucierpi na wydajności.

Ponadto wtyczka włącza funkcję lazy load, co oznacza, że obrazki na stronie, które nie są aktualnie widoczne, nie będą wczytywane, dopóki nie będą potrzebne. Jest to kolejny skuteczny sposób na skrócenie czasu wczytywania strony i poprawę wydajności witryny internetowej.

Ustawienia te sprawdzą się w przypadku większości witryn internetowych. Możesz jednak dostosować Optimole dalej, korzystając z ustawień w menu „Zaawansowane”, aby zobaczyć, co działa najlepiej dla twojej witryny internetowej.

Jeśli dokonasz jakichkolwiek zmian w ustawieniach, nie zapomnij kliknąć przycisku „Zapisz zmiany” u dołu strony.

Metoda 2: Ręczne serwowanie skalowanych obrazków

Można również skalować obrazki bez użycia wtyczki. Istnieją trzy sposoby, aby to zrobić: można użyć oprogramowania do edycji obrazu, funkcji edycji obrazu w bibliotece multimediów WordPress lub zmieniając wartości w ustawieniach multimediów WordPress.

Skalowanie obrazków za pomocą oprogramowania do edycji obrazów

Możesz przeskalować swoje obrazki do odpowiednich wymiarów przed umieszczeniem ich w witrynie internetowej za pomocą oprogramowania do edycji zdjęć na komputerze, takiego jak Adobe Photoshop lub Affinity Photo.

Oprogramowanie pozwala wybrać odpowiednią liczbę pikseli dla twojego obrazka i zapisać go w niewielkim rozmiarze i preferowanym formacie pliku.

Na przykład, oto zrzut ekranu demonstrujący narzędzie do kadrowania Affinity Photo.

Poza dobraniem odpowiedniego rozmiaru obraz ka od samego początku, istnieją inne rzeczy, które można zrobić przed przesłaniem obrazów, aby upewnić się, że nie spowalniają one twojej witryny internetowej.

Więcej informacji można znaleźć w naszym przewodniku na temat optymalizacji obrazków pod kątem wydajności w sieci.

Skalowanie obrazków w bibliotece multimediów WordPressa

Czy wiesz, że możesz dokonać podstawowej edycji obrazków w WordPressie? Funkcja edycji obrazków WordPress umożliwia przycinanie, obracanie, przerzucanie i skalowanie obrazków.

Podczas edycji wpisu lub strony, należy kliknąć na obrazek, który chcemy edytować. Następnie należy kliknąć przycisk „Zamień”, a następnie wybrać z menu opcję „Otwórz bibliotekę multimediów”.

Spowoduje to otwarcie biblioteki multimediów WordPress z wybranym obrazkiem.

Po prawej stronie znajduje się obszar, w którym można dodać tekst alternatywny, tytuł, podpis i opis dla twojego obrazka. Znajduje się tam również odnośnik „Edytuj obrazek”.

Wystarczy kliknąć ten odnośnik, aby przejść na stronę „Edytuj obrazek”.

Znajduje się tutaj podgląd obrazka, przyciski edycji i kilka innych opcji przydatnych podczas skalowania lub przycinania obrazka.

Aby przeskalować obrazek, wystarczy zmienić jedną z wartości „Nowe wymiary” w sekcji Skaluj obrazek po prawej stronie.

Na przykład ten obrazek ma bardzo dużą rozdzielczość 2560×1637 pikseli. Możemy zmniejszyć go do szerokości 1200 pikseli, wpisując rodzaj w pierwszym polu „Scale Image”.

Jedyne, co należy zmienić, to szerokość, ponieważ wartość wysokości obrazka zostanie zmieniona automatycznie, aby zachować proporcje obrazka.

Następnie wystarczy kliknąć przycisk „Skaluj”, aby zmienić rozdzielczość obrazka.

Należy pamiętać, że w WordPressie można skalować obrazek tylko w dół. Nie można powiększyć obrazu poprzez zwiększenie jego wymiarów.

Szczegółowe instrukcje można znaleźć w naszych przewodnikach na temat podstawowej edycji obrazków w WordPressie oraz przycinania i edytowania miniaturek wpisów w WordPressie.

Dostosowywanie rozmiarów obrazków w ustawieniach multimediów

Gdy przesyłasz obrazki na swoją witrynę internetową, WordPress automatycznie tworzy kilka kopii w różnych rozmiarach. Możesz dostosować te rozmiary, przechodząc na stronę Ustawienia ” Media w obszarze administracyjnym WordPress.

Tutaj można łatwo zmienić wymiary miniaturki, średniego i dużego rozmiaru obrazka.

Na niektórych witrynach internetowych może być potrzebnych więcej rozmiarów obrazków niż tylko miniaturka, średni i duży. Możesz dowiedzieć się, jak utworzyć te rozmiary, postępując zgodnie z naszym przewodnikiem na temat tworzenia dodatkowych rozmiarów obrazków w WordPress.

Jeśli zmienisz domyślne rozmiary obrazów lub utworzysz dodatkowe rozmiary obrazów, będzie to miało wpływ tylko na nowe obrazy. Konieczne jest ponowne utworzenie rozmiarów obrazów dla istniejących obrazów.

Po dodaniu obrazka do wpisu lub strony można wybrać rozmiar obrazka w ustawieniach bloku po lewej stronie strony.

Mamy nadzieję, że ten poradnik pomógł ci nauczyć się obsługi skalowanych obrazków w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat optymalizacji SEO obrazków WordPress lub zajrzeć do naszego artykułu na temat wykorzystania sztucznej inteligencji do generowania obrazków do wpisów na blogu.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.