Jak zoptymalizować obrazy w WordPressie?

Obrazy są ważną częścią każdej strony internetowej. Można ich używać do tworzenia nastroju, eksponowania produktów lub dodawania wizualnego zainteresowania stronie. Ale czasami możesz nie mieć najlepszych obrazów dla swojej witryny, które sprawiłyby, że wyglądała najlepiej.

Na szczęście WordPress ma kilka wbudowanych funkcji, które pomogą zoptymalizować obrazy, dzięki czemu ładują się szybciej i zajmują mniej miejsca w witrynie bez utraty jakości!

Znajdź niezoptymalizowane obrazy w GTmetrix + PSI

Najlepszym sposobem na znalezienie obrazów, które wymagają optymalizacji w Twojej witrynie, jest skorzystanie z bezpłatnego narzędzia online, takiego jak GTmetrix lub PSI. Oba te narzędzia przemierzają pliki Twojej witryny i dają łatwy do zrozumienia raport o tym, co należy zoptymalizować, aby szybciej się ładowała.

Optymalizuj obrazy za pomocą wtyczek i usług WordPress

Istnieje również sporo wtyczek do optymalizacji obrazu WordPress (zarówno płatnych, jak i bezpłatnych), takich jak EWWW Image Optimizer, które bardzo dobrze kompresują obrazy, aby szybciej ładować się w Twojej witrynie.

Istnieją również usługi, które zrobią to za Ciebie, takie jak TinyPNG i Kraken Image Optimizer, które kompresują obrazy bez wpływu na jakość.

Użyj prawidłowego rozmiaru obrazu

Tak jak musisz zmienić rozmiar grafiki, filmów i innych mediów do szerokości bloga w edytorze WordPress przed jego przesłaniem, musisz również upewnić się, że zmieniono również rozmiar plików graficznych. Dzięki temu żaden z Twoich obrazów nie zajmie więcej miejsca niż powinien!

Obrazy w pamięci podręcznej

Innym sposobem optymalizacji obrazów jest ich buforowanie. Zapewnia to szybsze ładowanie witryny, nawet jeśli odwiedza ją wiele osób w tym samym czasie, ponieważ odwiedzający stronę z obrazami w pamięci podręcznej nie będą musieli czekać na pobranie tych plików, aby cokolwiek zobaczyć!

Wtyczka WP Smush faktycznie robi to automatycznie po zainstalowaniu i aktywacji (i zdecydowanie powinieneś zrobić obie te rzeczy!). Możesz także użyć wtyczek, takich jak Autoptimize lub Wp Super Cache, które nie tylko buforują, ale także minimalizują kod.

Użyj LazyLoad, aby odłożyć obrazy poza ekranem

LazyLoad to nowsza i mniej znana funkcja WordPressa, która pozwala odroczyć ładowanie obrazów, dopóki użytkownik nie przewinie do swojej pozycji w Twojej witrynie. Gdy to zrobią, te obrazy będą się ładować szybko, ponieważ nie zostały załadowane, gdy strona była pobierana po raz pierwszy!

Użyj kompresji obrazu

Możesz użyć dwóch różnych typów kompresji obrazu: LZW lub JPEG. Różnica między nimi ma więcej wspólnego z typem pliku graficznego niż z czymkolwiek innym, więc wybierz ten, który ma sens w Twojej sytuacji!

Działa to poprzez zmniejszenie liczby kolorów używanych w obrazie, co oznacza, że ​​podczas przeglądania trzeba przesłać mniej danych ze strony serwera na stronę klienta. Zmniejsza to wykorzystanie przepustowości, a także czas ładowania.

Kompresja obrazu jest nieodzowną częścią każdej witryny, a WordPress ma wiele wtyczek kompresujących, które ułatwią tworzenie witryn z wysokiej jakości obrazami bez uszczerbku dla wydajności!

Wyświetlaj obrazy w formatach nowej generacji

Ważne jest, aby zdać sobie sprawę, że istnieje wiele różnych formatów obrazów i nie wszystkie z nich sprawdzą się w Twojej witrynie. Jeśli chcesz poprawić wydajność na dowolnej stronie internetowej, konieczne jest użycie formatów nowej generacji, takich jak WebP lub JPEG XR, które zazwyczaj mają lepszą kompresję niż inne typy.

Określ wymiary obrazu

Określając wymiary obrazów, mówisz WordPressowi, ile miejsca chcesz wykorzystać, umieszczając je na swojej stronie. Jest to ważne, ponieważ zmniejsza obciążenie przepustowości, co oznacza szybszy czas ładowania strony!

Wyświetlaj obrazy z CDN

CDN to szybki i wydajny sposób na serwowanie obrazów Twojej witryny z serwerów, które są geograficznie bliższe. Zmniejsza to opóźnienia, co oznacza szybsze ładowanie dla użytkowników!

Połącz obrazy za pomocą sprite'ów CSS

Sprite CSS to rodzaj obrazu, który w rzeczywistości łączy wszystkie mniejsze obrazy w jeden duży plik. Jest to przydatne, ponieważ zmniejsza liczbę żądań plików, co oznacza szybszy czas ładowania – zwłaszcza na urządzeniach mobilnych! Możesz użyć generatora sprite CSS, aby go utworzyć, a następnie dodać go do swojego motywu za pomocą CSS.

Użyj obrazów adaptacyjnych dla urządzeń mobilnych

Obrazy adaptacyjne to świetny sposób na wyświetlanie różnych rozmiarów obrazów użytkownikom na różnych urządzeniach. Zmniejsza to wykorzystanie przepustowości i czas ładowania! Możesz to zrobić za pomocą wtyczki WordPress, ale jest też wiele innych sposobów na zrobienie tego za darmo na własną rękę.

Wyłącz łączenie obrazów

Kiedy łączysz obraz na gorąco, zasadniczo łączysz się z oryginalnym plikiem na czyimś serwerze. Wyłączenie tego powstrzymuje ludzi przed kradzieżą przepustowości, więc jest to coś, co chcesz zrobić.

Możesz to zrobić za pomocą wielu wtyczek WordPress, takich jak WP Rocket. Zwykle możesz również poprosić swojego gospodarza, aby zrobił to za Ciebie (jeśli masz dobrego gospodarza).

Usuń dane EXIF

Dane EXIF ​​to ukryte informacje, których nie widzisz w swoim edytorze WordPress, ale mogą je zobaczyć inni. Zawiera informacje, takie jak marka i model aparatu, a także ustawienia daty i czasu. Usunięcie tego zmniejszy wykorzystanie przepustowości!

Ten proces obejmuje użycie narzędzia do usuwania obrazów, takiego jak JPEGsnoop lub jhead, które pozwala usunąć wszystkie dane EXIF ​​​​z obrazów w witrynie — bez konieczności ich wcześniejszego pobierania!

Wyświetlaj obrazy niższej jakości użytkownikom przy wolnych połączeniach

To jest coś, co możesz zrobić ze swoimi obrazami, ale nie każdy motyw będzie miał opcję, aby to ukryć. Zasadniczo służy do wyświetlania obrazów o niższej jakości osobom korzystającym z wolnych połączeń (mobilnych lub innych). Możesz to zrobić za pomocą wtyczki Optimole.

Dlaczego ważne jest, aby używać zoptymalizowanych obrazów?

Obrazy mogą mieć duży wpływ na wydajność Twojej witryny, dlatego ważne jest, aby je zoptymalizować! Dzięki temu obrazy ładują się tak szybko i wydajnie, jak to tylko możliwe.

Im szybciej ładuje się Twoja witryna, tym lepiej dla użytkowników i wyszukiwarek! Czas ładowania zyskał ostatnio większą wagę w rankingach Google (ale tylko nieznacznie), ale nawet jeśli to nieprawda, nadal chciałbyś upewnić się, że wszystko ładuje się tak szybko, jak to możliwe.

Ludzie nienawidzą czekać w witrynach, zwłaszcza użytkownicy mobilni – co sprawia, że ​​optymalizacja obrazów jest istotną częścią każdej witryny WordPress. Pomaga również w SEO, ponieważ Google również lubi szybko ładujące się strony internetowe (nie bez powodu).

Wniosek

Podsumowując, obrazy są ważną częścią każdej strony internetowej. Można ich używać do tworzenia nastroju, eksponowania produktów lub dodawania wizualnego zainteresowania stronie.

Czasami jednak oryginalne obrazy mogą nie być wystarczająco zoptymalizowane i mogą zajmować więcej miejsca niż to konieczne. WordPress ma wiele funkcji optymalizujących te pliki, dzięki czemu ładują się szybciej bez utraty jakości! Najlepszym sposobem jest zainstalowanie wtyczki do kompresji obrazu, takiej jak LazyLoad lub PSI, która w razie potrzeby automatycznie skompresuje i zmieni rozmiar obrazów. Możesz także optymalizować obrazy, określając ich wymiary, używając sprite'ów CSS, używając buforowania obrazów i