Czy kiedykolwiek spędziłeś godziny na tworzeniu idealnego wpisu na blogu, tylko po to, by odkryć, że piękne, wysokiej rozdzielczości obrazy sprawiają, że Twoja witryna działa niezwykle wolno? Byłem w takiej sytuacji i frustrujące jest świadomość, że długi czas ładowania może odstraszyć odwiedzających, zanim jeszcze zobaczą Twoją treść.
Ręczne zmienianie rozmiaru każdego pojedynczego obrazu to ogromne pochłaniacz czasu, zwłaszcza w przypadku ugruntowanych witryn z dużymi bibliotekami multimediów. Na szczęście możesz zmienić rozmiar setek obrazów bezpośrednio w WordPress w zaledwie kilka kliknięć, co uratowało mi życie w moich własnych projektach.
W tym przewodniku przeprowadzę Cię przez dokładne kroki, aby masowo zoptymalizować i zmienić rozmiar Twoich obrazów za pomocą popularnej darmowej wtyczki. Sprawimy, że Twoja witryna będzie działać szybciej, poprawimy wrażenia użytkowników i nie będziesz potrzebować żadnych specjalnych umiejętności technicznych, aby to zrobić.
W SKRÓCIE: Zanim zagłębimy się w szczegóły, porozmawiajmy krótko o tym, co dzieje się „za kulisami”. Zrobimy dwie kluczowe rzeczy:
- zmiana rozmiaru Twoich obrazów do odpowiednich wymiarów (np. dopasowanie ogromnego zdjęcia do szerokości Twojego bloga) i
- optymalizacja ich w celu zmniejszenia rozmiaru pliku bez utraty jakości.
Pomyśl o tym jak o bardziej efektywnym pakowaniu walizki. Te same świetne rzeczy zmieścisz w znacznie mniejszej przestrzeni. Wtyczka, której dzisiaj używamy, zajmuje się tym wszystkim automatycznie. 👍
Dlaczego masowo optymalizować i zmieniać rozmiar obrazów w WordPress?
Duże, nieoptymalizowane obrazy mogą wyglądać pięknie, ale mogą potajemnie spowalniać Twoją witrynę. Dzieje się tak, ponieważ za każdym razem, gdy ktoś odwiedza Twoją witrynę, jego przeglądarka musi pobrać te duże pliki, co zajmuje czas i może spowolnić ładowanie strony.
Wolna witryna często prowadzi do sfrustrowanych odwiedzających, niższych pozycji w wyszukiwarkach, a nawet utraconych szans na rozwój odbiorców.
Dzięki masowemu skalowaniu i optymalizacji dużych obrazów możesz przyspieszyć działanie swojej strony internetowej, poprawić SEO i zapewnić płynniejsze wrażenia dla odwiedzających. To prosty krok, który robi dużą różnicę.
W WPBeginner zawsze upewniamy się, że wszystkie duże obrazy, które przesyłamy, są odpowiednio przeskalowane. Trzymamy się również określonych wymiarów, aby wszystkie nasze obrazy były spójne i jednolite w różnych postach.
Ponieważ mamy już tę procedurę dla całego zespołu, zazwyczaj nie muszę zmieniać rozmiaru obrazów masowo na WPBeginner, ale zdecydowanie musiałem to robić podczas pracy nad innymi stronami internetowymi.
Chociaż przeskalowanie dużych obrazów jest niezbędne dla wszystkich typów witryn, szczególnie polecam je dla witryn z dużą ilością obrazów. Obejmują one strony z fotografiami i portfolio, platformy e-commerce z obszernymi katalogami produktów, a także strony artystyczne i projektowe.
Czy jesteś gotów dowiedzieć się, jak masowo zmieniać rozmiar dużych obrazów w WordPress? Oto kroki, które dzisiaj omówię:
- Krok 1: Zainstaluj i aktywuj wtyczkę EWWW Image Optimizer
- Krok 2: Skonfiguruj podstawowe ustawienia wtyczki
- Krok 3: Masowa optymalizacja istniejących obrazów
- Krok 4: Testowanie i sprawdzanie obrazów
- FAQs About Resizing Images in WordPress
🚨 Ważna uwaga: Po przeskalowaniu obrazów tej akcji nie można cofnąć. Dlatego przed masowym przeskalowaniem obrazów zalecam wykonanie kopii zapasowej witryny WordPress. W ten sposób można szybko przywrócić obrazy do poprzedniej wersji, jeśli wystąpią jakiekolwiek problemy.
Zacznijmy!
Krok 1: Zainstaluj i aktywuj wtyczkę EWWW Image Optimizer
Najpierw będziesz potrzebować odpowiedniego narzędzia. Będę używać darmowej wtyczki EWWW Image Optimizer (EWWW IO). Moim zdaniem jest to najlepsza darmowa opcja do masowego przeskalowywania obrazów w WordPressie.
Automatycznie kompresuje, skaluje i konwertuje obrazy do formatów takich jak WebP, co może przyspieszyć działanie Twojej witryny.
Funkcja zbiorczej optymalizacji okazała się szczególnie przydatna w przypadku dużych witryn z wieloma plikami obrazów. Może zaoszczędzić mnóstwo czasu i zapewnić, że wszystkie obrazy zostaną zoptymalizowane wydajnie.
Jeśli chcesz dowiedzieć się więcej o tym, co potrafi, zapoznaj się z naszą pełną recenzją EWWW IO.
Teraz zainstalujmy EWWW IO. W swoim panelu WordPress przejdź do Wtyczki » Dodaj nową wtyczkę i wyszukaj „EWWW Image Optimizer”.
Gdy go zobaczysz, kliknij „Zainstaluj teraz”, a następnie „Aktywuj”.
Potrzebujesz przypomnienia, jak to zrobić? Możesz zapoznać się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.
Krok 2: Skonfiguruj podstawowe ustawienia wtyczki
Przed zmianą rozmiaru jakichkolwiek obrazów ważne jest skonfigurowanie podstawowych ustawień EWWW IO.
Aby to zrobić, musisz przejść do Ustawienia » Optymalizator obrazów EWWW.
Spowoduje to automatyczne uruchomienie kreatora konfiguracji wtyczki.
Na pierwszym ekranie zostaniesz zapytany o swoje cele. Czy chcesz przyspieszyć swoją witrynę, czy zaoszczędzić miejsce na dysku?
Wybierz opcję, która najlepiej Cię opisuje. Jeśli nie chcesz kupować wtyczki premium, musisz również wybrać opcję „Pozostań w trybie darmowym na razie”. Następnie kliknij „Dalej”, gdy będziesz gotowy.
Na następnej stronie zobaczysz trzy pola do zaznaczenia. Wyjaśnię, co oznaczają, po kolei.
Po pierwsze, masz opcję „Usuń metadane”. Zalecam zaznaczenie tego pola, ponieważ ta opcja usuwa niepotrzebne dane z obrazów, takie jak ustawienia aparatu i informacje o lokalizacji, co sprawia, że obrazy są jeszcze lżejsze.
Następna jest opcja „Lazy Load”. Po włączeniu tej opcji obrazy będą ładowane tylko wtedy, gdy użytkownik przewinie do nich, co pomaga przyspieszyć ładowanie stron.
Zazwyczaj polecam leniwe ładowanie, ale możesz nie potrzebować go włączać tutaj, jeśli używasz wtyczki wydajnościowej, która już je oferuje.
Następnie masz opcję „Konwersja WebP”. WebP to nowoczesny format obrazu stworzony przez Google, który zapewnia doskonałą jakość obrazu przy znacznie mniejszym rozmiarze pliku w porównaniu do tradycyjnych formatów JPEG i PNG.
Gorąco polecam włączenie tej opcji, ponieważ konwersja obrazów do formatu WebP jest jednym z najprostszych sposobów na znaczące przyspieszenie działania Twojej witryny.
Nie martw się, jeśli niektórzy z Twoich odwiedzających korzystają ze starszych przeglądarek, ponieważ EWWW IO automatycznie dostarczy im odpowiedni format obrazu.
Poniżej możesz ustawić „Maksymalną szerokość” i „Maksymalną wysokość” dla swoich obrazów.
⚠️ Wskazówka eksperta: Zrozumienie optymalnych wymiarów obrazu jest kluczowe dla utrzymania szybkości strony bez poświęcania jakości. Zalecamy ustawienie maksymalnej szerokości na 1200 pikseli dla większości obrazów w postach na blogu. Ten rozmiar wygląda ostro i wyraźnie na większości ekranów, od komputerów stacjonarnych po telefony komórkowe, nie będąc przy tym zbyt dużym.
Jeśli potrzebujesz pomocy w ustaleniu tych ustawień, zapoznaj się z naszym przewodnikiem dla początkujących na temat rozmiarów obrazów w WordPress.
Na koniec wybierz źródło kopii zapasowej obrazów. Po wprowadzeniu tych zmian kliknij przycisk „Zapisz ustawienia” na dole.
Następnie zobaczysz komunikat informujący, że EWWW IO automatycznie przeskaluje wszystkie nowe obrazy, które prześlesz, używając maksymalnej szerokości i wysokości, które właśnie ustawiłeś.
Nadal jednak musisz zmienić rozmiar istniejących obrazów masowo. Omówię to w następnym kroku. Po prostu kliknij „Gotowe”, aby przejść dalej.
Krok 3: Masowa optymalizacja istniejących obrazów
Gotowy do optymalizacji i zmiany rozmiaru wszystkich tych dużych obrazów za jednym razem?
Z panelu administracyjnego WordPressa przejdź do Media » Optymalizacja masowa. Tutaj zobaczysz przycisk „Skanuj nieoptymalizowane obrazy”.
Kliknij przycisk, a wtyczka przeszuka Twoją bibliotekę multimediów i znajdzie wszystkie obrazy, które można zoptymalizować lub zmienić ich rozmiar.
Po zakończeniu skanowania zobaczysz całkowitą liczbę obrazów do optymalizacji.
Kliknij przycisk „Optymalizuj X obrazów”, aby rozpocząć proces.
W zależności od liczby posiadanych obrazów, może to zająć trochę czasu, ale będziesz mógł śledzić postępy za pomocą poręcznego paska postępu.
Po zakończeniu obrazy zostaną przeskalowane zgodnie z wcześniej skonfigurowanymi ustawieniami, nadając Twojej witrynie świeży, szybki charakter!
Krok 4: Testowanie i sprawdzanie obrazów
Po zakończeniu przeskalowania nadszedł czas, aby upewnić się, że wszystko działa zgodnie z oczekiwaniami i że Twoje obrazy są wyświetlane poprawnie.
Odwiedź swoją witrynę i przeglądaj kilka stron. Przyjrzyj się obrazom, aby upewnić się, że wyświetlają się poprawnie i ładują szybko, ponieważ wpłynie to na doświadczenie użytkownika.
Następnie przejdź do swojej Biblioteki Mediów, aby sprawdzić wymiary obrazu. Sprawdź, czy odpowiadają wartościom, które wcześniej ustawiłeś w konfiguracji wtyczki.
Aby to zrobić, przejdź do Media » Biblioteka na swoim pulpicie WordPress. Następnie wybierz jeden z obrazów.
W moim przykładzie zobaczysz, że wymiary obrazu to 1200 px na 807, co poprawnie odzwierciedla maksymalną szerokość, którą wybrałem wcześniej.
Jeśli wszystko wygląda dobrze, gratulacje – pomyślnie przeskalowałeś swoje duże obrazy WordPress i skonfigurowałeś swoją witrynę również do przyszłych przesłań.
⚠️ Wskazówka dotycząca rozwiązywania problemów: Zmiana rozmiaru obrazów nie zawsze jest płynna. Czasami obrazy mogą wydawać się rozmazane po zmianie rozmiaru. Często dzieje się tak, jeśli wymiary ustawione podczas optymalizacji są zbyt małe. Zawsze dokładnie sprawdzaj ustawienia i eksperymentuj z różnymi rozmiarami. Dlatego tworzenie kopii zapasowej obrazów jest tak ważne przed rozpoczęciem zmiany ich rozmiaru.
Często Zadawane Pytania Dotyczące Przeskalowywania Obrazów w WordPressie
Teraz, gdy wiesz, jak masowo zmieniać rozmiar dużych obrazów w WordPress, możesz mieć jeszcze kilka pytań. Omówmy kilka najczęstszych, aby Ci pomóc.
Jak przeskalować wiele obrazów WordPress jednocześnie?
Aby zmienić rozmiar i zoptymalizować wiele obrazów jednocześnie w WordPressie, możesz użyć wtyczki takiej jak EWWW Image Optimizer. Po skonfigurowaniu ustawień zgodnie z tym przewodnikiem, przejdź do Media » Optymalizacja masowa w swoim panelu WordPress.
Stamtąd kliknij przycisk „Skanuj nieoptymalizowane obrazy”. Wtyczka automatycznie znajdzie każdy obraz w Twojej Bibliotece Mediów, który wymaga zmiany rozmiaru lub kompresji. Po zakończeniu skanowania możesz zoptymalizować je wszystkie w jednej partii za jednym kliknięciem.
Jak automatycznie zmieniać rozmiar obrazów w WordPress?
Polecam użyć wtyczki takiej jak EWWW Image Optimizer do automatycznego zmiany rozmiaru obrazów. Po zainstalowaniu i aktywowaniu wtyczki przejdź do Ustawienia » EWWW Image Optimizer w swoim panelu.
Następnie ustaw pożądane wymiary dla swoich obrazów. Dzięki tym ustawieniom wszystkie nowe obrazy, które przesłasz, zostaną automatycznie przeskalowane, aby pasowały do określonych przez Ciebie wymiarów.
Dodatkowe zasoby dotyczące optymalizacji obrazów w WordPressie
Jeśli chcesz przenieść obrazy swojej witryny na wyższy poziom, pomocne mogą być również te przewodniki:
- WebP vs. PNG vs. JPEG: Najlepszy format obrazu dla WordPressa
- Jak zoptymalizować obrazy pod kątem wydajności sieci bez utraty jakości
- Gdzie WordPress przechowuje obrazy na Twojej stronie?
- Narzędzia do tworzenia lepszych obrazów do Twoich wpisów na blogu
- Przewodnik dla początkujących po SEO obrazów – optymalizacja obrazów dla wyszukiwarek
- Jak połączyć Dysk Google z biblioteką multimediów WordPress
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.
Herb Baldwin
Czy wtyczka Imsanity automatycznie przeskalowuje zdjęcia w locie, gdy je przesyłam na mojego bloga? Czy też musiałbym okresowo „uruchamiać” wtyczkę, aby przeskalować większe pliki?
Wsparcie WPBeginner
Wtyczka obecnie automatycznie zmienia rozmiar obrazów za Ciebie
Admin
Chris
Czy ta wtyczka zachowuje proporcje?
Chcę tylko zmienić rozmiar obrazów, które mają szerokość większą niż 800px, do szerokości 800px, bez ich zniekształcania. Załóżmy, że mam obrazy o wymiarach 2400x1200 px -> powinny zostać przeskalowane do 800x400 px, podczas gdy obrazy 1600x900px powinny zostać przeskalowane do 800x450px.
Mam nadzieję, że możesz pomóc. Z góry dziękuję.
Brenda Maurah
Niestety, wtyczka nie działa dla niektórych moich obrazów, które chcę przeskalować
Lisa Wist
Niestety, ten wtyczka nie działa z obecną wersją WP (4.5.2). Jeśli sprawdzisz zakładkę wsparcia dla tej wtyczki, zobaczysz, że kilka osób zgłosiło, że przestała działać po wersji 4.5. Czy masz alternatywną rekomendację?
Wsparcie WPBeginner
Przetestowaliśmy wtyczkę na WordPress 4.5.2, działała tak, jak powinna. Jakie problemy masz z wtyczką?
Admin
odcień
Cześć
Właśnie zainstalowałem wtyczkę insanity na mojej stronie, po przejściu do ustawień zauważyłem, że obrazy załadowane na stronie/wpisie mają wymiary 2048×2048 pikseli szerokości/wysokości. Chcę zmienić rozmiar wszystkich moich wyróżnionych ruchomych obrazów na standardowy rozmiar, a nie obrazów na postach i stronach. Nie bardzo wiem, jak się do tego zabrać, czy ktoś może mi pomóc, ponieważ chcę uważać na ostrzeżenia o ostrożności.
dzięki
Roger
Pracuję nad stroną, która ma dużo obrazów z kilkuset postami na blogu. Okazuje się, że autor po prostu przesyłał oryginalne zdjęcia i używał edytora WP do przycinania i „zmiany rozmiaru”. Jestem dość pewien, że to nadal pozostawia oryginalny przesłany plik nietknięty, a teraz strona jest bardzo napuchnięta, prawie niemożliwa do zarządzania. Czy ta wtyczka usunie wstecznie duże oryginalne obrazy?
Z góry dziękuję!
Carly
Ja też chciałbym znać odpowiedź na to pytanie!
Diederik
Kolejna próba: czy źródłem może być adres strony internetowej? Czyli nie obraz, ale strona główna witryny, zwracająca na przykład plik jpg?
Daz Owens
Używałem tego wcześniej i to świetny plugin. Musiałem przetworzyć tysiące obrazów i działało świetnie!
Cameron Archibald
Świetny artykuł. Wygląda na doskonałą wtyczkę. Czytałem również o sieciach CDN i wiele się nauczyłem. Dziękuję bardzo.
Travis Pflanz
Używam Imsanity do wszystkich projektów.
Ten artykuł nawet nie obejmuje NAJLEPSZEJ funkcji tej wtyczki. Imsanity automatycznie zmieni rozmiar Twoich dużych obrazów podczas ich przesyłania, a następnie odrzuci zbyt duży obraz, zapisując zmieniony obraz jako „oryginalny”.
Na przykład: Masz obraz o rozdzielczości 5 megapikseli, o szerokości ponad 5000 pikseli. Nie będziesz potrzebować tak szerokiego obrazu na swojej stronie internetowej.
Po prostu prześlij obraz, a Imsanity zmieni jego rozmiar (nie przytnie) i zapisze zmieniony obraz na Twoim serwerze oraz w Twojej bibliotece multimediów.
Jest to również przydatne w przypadkach, gdy motyw jest źle zakodowany, używając oryginalnego rozmiaru obrazu do wyświetlania na stronie internetowej – wszyscy widzieliśmy bardzo wolne ładowanie obrazów na stronach internetowych.
Moje rekomendacje:
Ustaw obrazy przesyłane na stronę/wpis na rozmiar kontenera treści – jeśli używasz stron z paskiem bocznym i bez niego, upewnij się, że używasz szerokości dla strony bez paska bocznego.zmień
Ustaw „Przesłane do biblioteki multimediów” i „Przesłane gdzie indziej” na nieograniczone – ułatwi to zapisywanie dużych obrazów w razie potrzeby, a także pozwoli na używanie większych obrazów do pokazów slajdów, tła, nagłówków itp.