Jak sprawić, by obrazy ładowały się szybciej w witrynie WordPress

04.06.2020
WordPress 'Jak sprawić, by obrazy ładowały się szybciej w witrynie WordPress
0 11 мин.

Więc chcesz, aby twoje zdjęcia ładowały się szybciej?


Cóż, nie będę dylemat. Zanurzmy się w dobrych rzeczach!

Istnieją trzy sposoby na szybsze ładowanie obrazów w WordPress:

  • Zmień rozmiar
  • Kompresja
  • Leniwy ładunek

W tym poście wyjaśnię, jak działa każda z tych technik i dlaczego przyspieszą ładowanie witryny. Pokażę też, jak zaimplementować każdą taktykę, korzystając zarówno z ręcznych rozwiązań, jak i rekomendacji wtyczek.

Ta pierwsza technika jest niezwykle prosta, ale często pomijana przez początkujących użytkowników WordPress.

Jak zoptymalizować obrazy w WordPress

Zmień rozmiar zdjęć

Absolutnie najprostszym sposobem na szybsze ładowanie zdjęć jest zmiana ich rozmiaru. Pozwól mi wyjaśnić.

Co to jest zmiana rozmiaru?

Kiedy mówię „zmień rozmiar”, mam na myśli zmianę wymiarów obrazu, w tym przypadku chcesz zmniejszyć wymiary zbyt dużych obrazów.

Na przykład blogerzy czasami robią zdjęcia na swoich telefonach lub aparacie cyfrowym i przesyłają je na swoje blogi. Nieedytowane kopie zdjęć mogą mieć nawet 5000 pikseli szerokości. Pomyśl o tym…

Szerokość sekcji postów w witrynie prawdopodobnie nie jest większa niż 800 pikseli. Tekst, który teraz czytasz, zajmuje tylko około 700 pikseli na całej stronie, więc wyobraź sobie dodanie zdjęcia o szerokości 5000 pikseli. To byłby znacznie większy niż powinien być i mimo że zostałby zmniejszony w celu dopasowania do strony, załadowany plik obrazu jest nadal ogromny i wyjątkowo marnotrawny. A to dlatego, że …

Obrazy o większych wymiarach mają również większe rozmiary plików.

Jeśli chodzi o wydajność i przyspieszenie ładowania obrazów, zmniejszenie wymiarów obrazu to świetny sposób na drastyczne zmniejszenie rozmiaru pliku, co przyspiesza ładowanie obrazu.

Wróćmy do mojego przykładu i załóżmy, że obraz ma 5000 pikseli szerokości i wysokości. Jeśli zmniejszysz go z 5000 pikseli do zaledwie 700 pikseli, obraz faktycznie wykorzysta o 99% mniej pikseli. Innymi słowy, rozmiar pliku zmniejszyłby się o około 99%. Gdyby obraz miał 5 MB, skończyłby się tylko 50 KB i załadowałby 99% szybciej na twojej stronie.

Zmień rozmiar zdjęć

Jeśli nie masz zamiaru ostrożnie zmieniać rozmiaru swoich zdjęć, prawie na pewno są pewne korzyści.

Istnieje kilka sposobów zmiany rozmiaru zdjęć, aby idealnie pasowały do ​​witryny.

Ręcznie zmień rozmiar zdjęć

Przed przesłaniem nowego obrazu do witryny zmień jego rozmiar ręcznie, korzystając z wbudowanych narzędzi do edycji obrazów na komputerze.

Jeśli masz bardzo duży obraz, jak w moim przykładzie, natychmiast zrobi to dużą różnicę. Po zmianie rozmiaru obrazu możesz przesłać go do swojej biblioteki multimediów.

Nawet jeśli zamierzasz użyć obrazu w widoku lightbox lub suwaku, zwykle nie ma powodu, aby był szerszy niż 2000 pikseli. Jeśli obraz ma znajdować się w obszarze zawartości posta lub strony, prawdopodobnie możesz sobie poradzić z obrazem o szerokości 800 pikseli.

Ta metoda zmiany rozmiaru obrazów działa dobrze, ale nie pomaga w przypadku zdjęć przesłanych już do Twojej witryny. Prostą techniką dla istniejących obrazów jest po prostu wybranie innego rozmiaru.

Używaj mniejszych rozmiarów

Kiedy przesyłasz obraz do swojej biblioteki multimediów, WordPress tworzy do 3 dodatkowych wersji: Miniatura, Średnia i Duża.

Jeśli wejdziesz na stronę ustawień mediów, zobaczysz, że możesz wybrać te rozmiary tutaj:

Ustawienia mediów WordPress

Chociaż możesz modyfikować ustawienia, domyślny Duży rozmiar to 1024px, który jest wystarczająco duży, aby używać go do postów bez nadmiernego marnotrawstwa. Możesz użyć tego rozmiaru do wszystkich zdjęć, które umieszczasz w swoich postach.

Aby zmienić rozmiar obrazu dodanego do postu, kliknij go w edytorze, a zobaczysz menu Rozmiar obrazu na prawym pasku bocznym.

Zmiana rozmiaru obrazu WordPress

Wybierz „Duży” rozmiar i zaktualizuj post. Jeśli masz ponadwymiarowe obrazy, ta technika pozwoli ci szybko podać bardziej odpowiedni rozmiar, który będzie ładował się szybciej bez konieczności ponownego ładowania i zastępowania oryginału.

To powiedziawszy, może to być bardzo nudne, jeśli masz dziesiątki postów z dziesiątkami zdjęć. Dostępna jest jeszcze szybsza i bardziej skuteczna metoda.

Zautomatyzowana zmiana rozmiaru za pomocą wtyczki

Zamiast samodzielnie zmieniać rozmiar obrazów, możesz pozwolić, aby wtyczka zrobiła to automatycznie. Jeśli chodzi o automatyczną zmianę rozmiaru obrazu, nic nie przebije Optimole podłącz.

Optimole Image Optimizer

To nie działa w oczekiwany sposób.

Zamiast edytować obrazy w bibliotece multimediów, Optimole przechowuje własne kopie obrazów i obsługuje je z wysokowydajnej sieci CDN. W ten sposób twoje oryginały nigdy nie zostaną w żaden sposób zmodyfikowane.

Co więcej, nie musisz dawać Optimole jednego rozmiaru do wykorzystania w swoich obrazach. Zamiast tego uzyskuje rozmiar ekranu użytkownika i generuje optymalną wielkość każdego zdjęcia w locie. Oznacza to, że ktoś na urządzeniu mobilnym może załadować wersję 400 pikseli obrazu, podczas gdy inny użytkownik na laptopie otrzyma wersję 700 pikseli tego samego obrazu.

Ta metoda zmiany rozmiaru jest znacznie łatwiejsza do wdrożenia i bardziej skuteczna w przypadku urządzeń mobilnych, co jest szczególnie ważne, ponieważ użytkownicy mobilni często korzystają z wolniejszych połączeń.

Jeśli chcesz nauczyć się korzystać z Optimole, możesz śledzić mój film instruktażowy:

Zalecałem najpierw zmianę rozmiaru, ponieważ niezależnie od tego, czy robisz to ręcznie, czy zautomatyzujesz za pomocą wtyczki, jest to proste i może przynieść ogromne korzyści.

Jeśli Twoje obrazy są już odpowiednio dopasowane do Twojej witryny, nadal możesz znacznie poprawić jej wydajność dzięki kompresji.

Kompresuj swoje zdjęcia

Kompresja to sposób na zmniejszenie rozmiaru pliku obrazu bez zmiany jego wymiarów.

Dostępne są dwa rodzaje kompresji obrazu.

Pierwszy rodzaj kompresji obrazu nazywa się kompresją „bezstratną”.

Kompresja bezstratna

Przy bezstratnej optymalizacji sam obraz w rzeczywistości nie jest edytowany. Ta technika usuwa raczej wszystkie metadane przechowywane w pliku obrazu. Na przykład zdjęcia często przechowują nazwę urządzenia użytego do zrobienia zdjęcia, datę zrobienia zdjęcia, a czasem nawet współrzędne GPS ujęcia.

Ponieważ dane te są zwykle dość ograniczone, optymalizacja bezstratna może jedynie zmniejszyć rozmiar obrazu o 1-5%, ale tak naprawdę nie ma powodu, aby go nie używać, ponieważ nie ma to wpływu na jakość obrazu.

Prawdziwe korzyści pochodzą z optymalizacji stratnej.

Kompresja stratna

Jak można się spodziewać, kompresja stratna optymalizuje sam obraz i powoduje pogorszenie jakości. Ale oto rzecz…

Algorytmy kompresji są obecnie tak dobre, że często można zmniejszyć rozmiar pliku obrazu o 50-70% bez zauważalnej różnicy. O ile nie jesteś profesjonalnym fotografem i nie potrzebujesz doskonałych zdjęć na monitorach 4k, nie zauważysz nawet utraty jakości.

Jak skompresować swoje zdjęcia

Możesz ręcznie kompresować swoje zdjęcia za pomocą narzędzia takiego jak TinyPNG przed przesłaniem ich lub użyj wtyczki do automatyzacji.

ShortPixel to świetna wtyczka do optymalizacji obrazów w Twojej witrynie. Może je zoptymalizować od razu po ich przesłaniu i zoptymalizować zbiorczo wszystkie obrazy znajdujące się już w Twojej bibliotece multimediów.

shortpixel

Polecam Optimole do zmiany rozmiaru obrazu i bardzo skutecznie kompresuje obrazy. Po raz kolejny nie optymalizuje oryginałów przechowywanych w Bibliotece multimediów, ale kompresuje kopie, które udostępnia odwiedzającym.

Tutaj znajdziesz kilka dodatkowych wtyczek do optymalizacji obrazu.

Po zmianie rozmiaru i skompresowaniu zdjęć witryna ładuje się znacznie szybciej, ale jest jeszcze jedna optymalizacja dla obrazów, które możesz zrobić.

Wdrażaj leniwe ładowanie

Leniwe ładowanie to naprawdę sprytny sposób na dalszą optymalizację zdjęć.

Załóżmy, że masz wpis na blogu zawierający 12 zdjęć. Gdy ktoś odwiedza Twoją witrynę, nie wszystkie z tych obrazów będą od razu widoczne na ekranie. Muszą przewinąć w dół, aby większość z nich się pojawiła. Po co więc ładować wszystkie 12 od razu?

Przy leniwym ładowaniu ładowane są tylko obrazy wyświetlane na ekranie. Zamiast ładowanych 12 obrazów, może zamiast tego ładowane są tylko 2-3. Następnie, gdy odwiedzający przewija stronę, pozostałe obrazy są ładowane, gdy pojawiają się na ekranie. Oznacza to, że początkowe ładowanie jest znacznie szybsze, a ponieważ większość odwiedzających nie przewija całej strony, wiele obrazów nigdy nie jest ładowanych, co oszczędza cenne zasoby serwera.

Ten film ma wizualizację, która lepiej to wyjaśnia, jeśli chcesz uzyskać wyraźniejszy obraz działania leniwego ładowania:

Teraz, gdy sprzedałeś już tę koncepcję, możesz wdrożyć leniwe ładowanie w swojej witrynie.

Jak korzystać z leniwego ładowania

Po raz kolejny tę technikę optymalizacji wydajności można łatwo dodać do WordPress za pomocą wtyczki.

Jeśli szukasz bezpłatnej opcji, wypróbuj Optimole lub a3 Leniwy ładunek.

Dzięki Optimole leniwe ładowanie jest włączane automatycznie, a wtyczka a3 jest łatwa do skonfigurowania.

Dodatkowo, jeśli nie masz nic przeciwko płaceniu, sprawdź WP Rocket. Ma wysokowydajne buforowanie i wiele innych narzędzi prędkości.

Aby włączyć leniwe ładowanie za pomocą WP Rocket, wystarczy nacisnąć przełącznik:

WP Rocket Media

To nie może być łatwiejsze!

Ciesz się szybszym ładowaniem zdjęć

Podsumowując to, czego się właśnie nauczyłeś …

Duże obrazy przesyłane do Twojej witryny są bardzo wolne. Tylko jeden z tych obrazów może zatrzymać twoją witrynę.

Najważniejszą rzeczą, jaką możesz zrobić, aby przyspieszyć swoje zdjęcia, jest zmiana rozmiaru zbyt dużych obrazów, aby miały one odpowiedni rozmiar dla Twojej witryny. Możesz to zrobić ręcznie lub zautomatyzować za pomocą Optimole.

Następnie algorytmy kompresji obrazu przeszły długą drogę i obecnie można zmniejszyć rozmiar pliku obrazu o 50-70% bez zauważalnego wpływu na jakość. To nie jest pomysł. Użyj ShortPixel lub Optimole, aby skompresować każdy obraz w swojej witrynie.

Wreszcie leniwe ładowanie to świetny sposób na selektywne ładowanie zdjęć. Możesz użyć Optimole, a3 Lazy Load lub WP Rocket, aby natychmiast zaimplementować leniwe ładowanie na swojej stronie.

Jeśli nie korzystasz z żadnej z tych technik, po wdrożeniu witryna ładuje się znacznie szybciej. To cię zdmuchnie.

Czy masz jakieś pytania dotyczące pojęć i technik zawartych w tym poście? Masz jeszcze jedną wskazówkę do podzielenia się? Opublikuj w sekcji komentarzy poniżej!

Może Ci się spodobać,

Jak naprawić wolną witrynę WordPress i panel administracyjny (na stałe)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector