To oczywiste, że zdjęcia są integralną częścią naszego życia. W związku z tym trudno wyobrazić sobie stronę internetową bez zdjęć. Zdjęcia przyciągają wzrok odwiedzających i pomagają uporządkować zawartość strony. Obrazy sprawiają, że strona jest interesująca, bogata w informacje i poprawia wrażenia użytkownika.
Obrazy o zbyt dużym rozmiarze mają negatywny wpływ na wydajność witryny i powinny być skalowane zgodnie z aktywnym motywem. Są ważnymi elementami na stronie internetowej i zasługują na to, by pokazać je w najlepszy możliwy sposób. Bardzo ważne jest, aby wyświetlać przeskalowane obrazy w witrynie WordPress.
Rozmiary przeskalowanych obrazów dopasowują się do odpowiednich rozmiarów zgodnie z tymi zdefiniowanymi w HTML i CSS. Jednak niewielu webmasterów zwraca uwagę na ten ważny szczegół projektu. Weź przykład obrazu o wymiarach 500 x 500 pikseli dla miniatury 50 x 50. Przeglądarka internetowa musi pobrać obraz i przeskalować go, aby można go było wyświetlić odwiedzającemu. Oczywiście jest to nieefektywne i spowolni działanie witryny.
Różnica w rozdzielczości nie jest widoczna i stąd często nie zauważa się wagi, jaką niosą ze sobą duże obrazy. Większość ludzi nawet nie zdaje sobie sprawy, że ta przesadna rozdzielczość powoduje problemy, a problem pozostaje nierozwiązany. Pozostawiają problem przeglądarce.
Dlaczego warto wyświetlać skalowane obrazy w witrynie WordPress?
Głównym powodem wyświetlania przeskalowanych obrazów jest to, że obrazy o pełnej rozdzielczości spowalniają witrynę i wydłużają czas ładowania. Powolna strona prowadzi do słabego doświadczenia użytkownika i zamiast zostać i wrócić, odejdzie i trzyma się z daleka. Statystyki Kissmetrics pokazują, że strony, które ładują się dłużej niż trzy sekundy, będą miały wyższy współczynnik odrzuceń.
Dzięki zoptymalizowanym rozmiarom obrazów w witrynie czas ładowania będzie krótszy. Ludzie chętniej zostają dłużej na stronie i wracają później. Poprawia to pozycjonowanie i podnosi pozycję witryny.
Duże obrazy powodują różne problemy
- Zwiększa nacisk na wydajność przeglądarki. Przeglądarka będzie musiała wykonać dodatkowe żądania serwera. Nie może szybko wyświetlić obrazu, ale zamiast tego zajmie czas i zasoby, aby zmienić rozmiar obrazu. Strony internetowe z ciężkimi obrazami ładują się dłużej.
- Jeśli duże obrazy o wysokiej rozdzielczości są wyświetlane w małych rozmiarach na stronie internetowej, marnują czas i pobierają dane. Dzieje się tak na przykład, gdy selfie z telefonu komórkowego jest używane w stanie nieprzetworzonym przez maleńkiego Gravatara.
Jak skalować obrazy w witrynach WordPress
Ręcznie
Aby zacząć od początku, przeanalizuj obrazy na stronie za pomocą narzędzia takiego jak GTMetrix. GTMetrix to narzędzie do analizy wydajności, zaprojektowane przez GT.net. Firma ta słynie z monitorowania i optymalizacji prędkości oraz Pingdom. Po przeanalizowaniu strony przez GTMetrics, generuje raport. Pokazuje, jakie problemy zostały znalezione i jakie ulepszenia zaleca.
Przeglądając raport, zwróć szczególną uwagę na zakładkę Struktura. Na tej karcie kliknij Obrazy o odpowiedniej wielkości. Wyświetli listę obrazów, które nie mają prawidłowego rozmiaru.
WordPress nie zmniejsza automatycznie obrazów, jeśli to możliwe, ale dodaje je do witryny bez przetwarzania. Aby rozwiązać ten problem, istnieją dwie opcje.
Nawet jeśli korzystanie z wtyczek nie jest pożądanym sposobem, istnieją inne opcje. Pierwszym sposobem skalowania obrazów jest ręczne dostosowanie rozmiaru każdego z nich za pomocą edytora zdjęć, takiego jak Photoshop. Może się wydawać, że ta metoda jest nieefektywna, ale w rzeczywistości tak nie jest.
W Photoshopie jest więcej opcji oprócz dostosowania wysokości i szerokości obrazu. Kolejną rzeczą do sprawdzenia jest rozdzielczość obrazu. W większości przypadków, w przypadku aplikacji internetowych, 72 PPI wystarcza do dobrego oglądania.
Drugim jest użycie wtyczki do skalowania obrazów. Ta opcja jest łatwa i szybka. WordPress ma do tego własną funkcję, srcset. To narzędzie może konwertować grafikę, taką jak obrazy, na responsywne pliki. Responsywne obrazy są automatycznie dostosowywane do różnych urządzeń i rozmiarów ekranu. Poniżej znajduje się kilka innych wtyczek, które świetnie sprawdzają się przy zmniejszaniu rozmiarów obrazów.
Optimole
Doskonałym narzędziem do obsługi przeskalowanych obrazów jest Optimole. Jest to wtyczka WordPress, która może zmieniać rozmiar obrazów dla różnych urządzeń. Automatycznie zmienia rozmiar do optymalnego rozmiaru obrazu na podstawie różnych typów urządzeń. Wynikiem są wysokiej jakości przeskalowane obrazy.
Oto niektóre z cech, które sprawiają, że Optimole jest interesującym wyborem:
- Przetworzone obrazy są mniejsze, ale zachowują swoją jakość.
- Jest całkowicie zautomatyzowany. To tylko kwestia załadowania obrazów.
- Optimole obsługuje wszystkie formaty obrazów.
- Obsługuje różne typy obrazów, w tym Retina i WebP
- Obsługuje biblioteki obrazów w chmurze.
- Optimole bezpłatnie udostępnia globalne obrazy CDN.
- Nie ma potrzeby zgadywania ani szacowania pożądanego rozmiaru. Optimole korzysta ze specyfikacji urządzenia odwiedzającego.
- Istnieje pełne wsparcie dla twórców stron internetowych, takich jak Elementor.
Funkcja automatycznego przetwarzania obrazu jest wielkim plusem tej opcji wtyczki. Nie ma potrzeby przechodzenia przez długą listę ustawień; Optimole robi to sam.
W sekcji Media > Optimole wtyczka pokazuje stan usług, a także wykorzystanie i osiągniętą optymalizację.
Sekcja Opcje znajduje się w zakładce Ustawienia . Na szczególną uwagę zasługują tutaj dwie cechy:
- Włącz zastępowanie obrazu. Upewnij się, że ta opcja jest włączona, aby cieszyć się zaawansowaną funkcją optymalizacji obrazu.
- Skaluj obrazy i leniwe ładowanie. Jest to opcja, która umożliwia skalowanie obrazów w oparciu o rozmiar ekranu odwiedzającego. Lazy loading wyświetla te obrazy.
Smush Optymalizacja obrazu
Smush Image Optimization, Compression i Lazy Load to pełna nazwa na tej liście wtyczek. Podczas zmniejszania obrazów upewnij się, że jakość obrazu jest zachowana.
Aby korzystać z WP Smush, należy go najpierw zainstalować i aktywować. Następnie ikona Smush pojawi się na pulpicie WordPress. W desce rozdzielczej pojawiają się statystyki, które gromadzi Smush oraz aktualny stan różnych funkcji.
Obok danych całkowitych oszczędności pojawi się ikona informująca o wszystkich obrazach w bibliotece multimediów, które wymagają przetworzenia. Jeśli istnieją obrazy, które wymagają przetworzenia, najłatwiej jest przejść do modułu Bulk Smush. Spowoduje to zmniejszenie rozmiaru wszystkich oznaczonych obrazów.
Aby indywidualnie przetwarzać obrazy, przejdź do Biblioteki multimediów i kliknij opcję Sprawdź ponownie obrazy. Daje to aktualizację w czasie rzeczywistym zdjęć, które powinny zostać przetworzone.
Smush posiada funkcje umożliwiające filtrowanie obrazów według statusu Smush oraz selektywne skalowanie obrazów.
Wtyczka Smush nie przetwarza filmów i plików GIF. Pliki obrazów, które pozostają nieskalowane, wskazują, że moc Smush nie jest w pełni wykorzystana.
Optymalizator obrazu EWWW
EWWW Image Optimizer to także wtyczka WordPress, która optymalizuje rozmiary i formaty obrazów. Działa z nowymi przesłanymi i istniejącymi obrazami. Posiada opcję, która skanuje wszystkie obrazy na stronie internetowej i optymalizuje je.
Aby zacząć z niego korzystać, pobierz i zainstaluj go oraz aktywuj z obszaru administracyjnego witryny WordPress. W środowisku Dashboard kliknij Ustawienia, a następnie EWWW Image Optimizer. W Ustawieniach podstawowych znajdują się różne opcje, takie jak usuwanie metadanych z obrazów. Poziom optymalizacji dla GIF, JPG i PNG powinien być ustawiony na Pixel Perfect. Tylko wersja płatna umożliwia również optymalizację plików PDF.
Karta Zmień rozmiar zawiera opcję Wykrywanie zmiany rozmiaru . W Resize Images ustaw maksymalną dozwoloną wysokość i szerokość obrazów na stronie. Włącz także opcje Zmień rozmiar innych obrazów i Zmień rozmiar istniejących obrazów . Nie zapomnij zapisać zmian.
Krótkie piksele
Ostatnią rekomendacją do obsługi skalowanych obrazów jest wtyczka ShortPixel. Jest to właściwa opcja dla tych, którzy muszą wyświetlać obrazy w skali, ale mają ograniczony budżet. Darmowa wersja oferuje 100 skalowań obrazu miesięcznie.
ShortPixel jest prosty i łatwy w użyciu. Automatycznie przetwarza obrazy do wymiarów określonych przez użytkownika podczas przesyłania na stronę. Oprócz opcji automatycznej istnieje również możliwość ręcznego przetwarzania obrazów.
Wtyczka zmniejsza rozmiar obrazu bezstratnie lub z utratą rozdzielczości. Jest w stanie przetwarzać obrazy GIF, JPEG i PNG, a nawet optymalizować pliki PDF.
Końcowe myśli o tym, jak wyświetlać skalowane obrazy
Oczywiście istnieje wiele sposobów wyświetlania przeskalowanych obrazów w witrynie WordPress i nie musi to być trudne ani kosztowne. Problem polega na tym, że strona internetowa jest od dawna w sieci i jest wiele obrazów do przetworzenia.
Skalowanie obrazów to ważna umiejętność dla każdego, kto buduje lub utrzymuje witrynę internetową. Pomaga przyspieszyć powolne strony internetowe i zapewnia inne korzyści związane z wydajnością. Właściwa specyfikacja obrazu poprawi szybkość każdej witryny.
Jeśli podobał Ci się ten artykuł o tym, jak wyświetlać skalowane obrazy w WordPress, powinieneś zapoznać się z tym, jak sprawić, by numer telefonu był klikalny w WordPress.
Pisaliśmy również o kilku powiązanych tematach, takich jak jak osadzić film z Facebooka w WordPressie, jak usunąć motywy WordPress, jak skanować bazę danych WordPress w poszukiwaniu złośliwego oprogramowania, jak przesłać plik HTML do WordPressa, jak zrobić czyszczenie bazy danych WordPress, jak znaleźć i zamienić URL w bazie danych WordPressa i jak ukryć autora w WordPressie