Kompletny przewodnik po optymalizacji obrazu dla WordPress

1 … 2 … 3 … – Twój potencjalny klient właśnie zamknął Twoją witrynę, ponieważ nadal się ładuje. Brzmi znajomo? Wierzę, że wiele razy byłeś takim niecierpliwym i sfrustrowanym gościem. Wiem, że byłem. Dlatego przygotowałem ostateczną listę rzeczy, które musisz wiedzieć o optymalizacji obrazu. To potrwa długo, ale mam nadzieję, że uznasz to za warte przeczytania.

Spis treści

• Treść tego artykułu w 3 min wideo
• Korzyści z optymalizacji obrazu
• Formaty obrazu
• Zmień rozmiar zdjęć przed przesłaniem
  • Wtyczka Imsanity WordPress do automatycznej zmiany rozmiaru obrazów
• Kompresowanie obrazów
  • Najlepsze narzędzia online do kompresji obrazu
    • MałePNG
    • Optymalizacja
    • Kompresor
    • ImageOptim
    • ObrazMniejszy
    • Kraken
    • JPEG.io
    • Statystyki PageSpeed
    • Wyniki dla najlepszego narzędzia do kompresji online
    • Najlepsze narzędzie do kompresji plików JPEG online
    • Najlepsze narzędzie do kompresji online plików PNG
    • Najlepsze narzędzie do kompresji obrazu online
  • Najlepsze wtyczki WordPress do kompresji obrazu
    • WP Smush (wersja darmowa)
    • Kompresuj obrazy JPEG i PNG przez TinyPNG
    • Krótkie piksele
    • Wyobraź sobie
    • Optymalizator obrazu EWWW (wersja bezpłatna)
    • Wyniki dla najlepszej wtyczki WordPress do kompresji obrazu
    • Najlepsza wtyczka WordPress do kompresji plików JPEG
    • Najlepsza wtyczka WordPress do kompresji plików PNG
    • Najlepsza wtyczka WordPress do ogólnej kompresji obrazu
• Wniosek

Treść tego artykułu w 3 min wideo

Oto bardzo krótki przegląd wideo tego artykułu. Nadal polecam lekturę, ale żeby ci wystarczyć, oto jedziemy:

Korzyści z optymalizacji obrazu

Czy nadal nie sprzedajesz wszystkich rzeczy związanych z optymalizacją obrazu? Przyjrzyjmy się wszystkim korzyściom, jakie uzyskasz, jeśli tylko naprawisz ten mały i trywialny problem:

• Twoja strona będzie szybsza
• Twój wynik Google PageSpeed ​​będzie lepszy
• Google polubi Cię bardziej, a Twoje pozycje w wyszukiwarkach poprawią się
• Twój współczynnik odrzuceń będzie mniejszy, a więcej odwiedzających zobaczy Twoją stronę
• Będziesz potrzebował mniej miejsca na swoich serwerach i wydasz mniej zasobów na serwery, co pozwoli Ci zaoszczędzić pieniądze
• Zaoszczędzisz pieniądze na mobilną transmisję danych dla siebie i swoich gości

Mam teraz twoją uwagę, prawda? Teraz możemy zacząć od prawdziwej pracy.

Formaty obrazu

Optymalizacja obrazu zaczyna się od podstawowej wiedzy na temat formatów obrazu. Dwa najpopularniejsze formaty w Internecie to PNG z rozszerzeniem .png i JPEG z rozszerzeniem .jpg . W większości przypadków będę używał JPEG, ponieważ jest to najlepszy format dla zdjęć, obrazów z gradientami i obrazów z milionami kolorów. Z drugiej strony PNG jest lepszy w przypadku obrazów o ograniczonej liczbie kolorów, takich jak logo, oraz obrazów z przezroczystością.

Następny przykład pokaże Ci, jak ważny jest wybór odpowiedniego formatu obrazu dla najlepszej optymalizacji obrazu.

Zapiszę nasz niezoptymalizowany obraz child.jpg w formatach .jpg i .png . Widzimy, że obrazek -dziecko-zapisany-jako-jpeg.jpg ma rozmiar 3,1 MB, a obrazek -dziecko-zapisany-jako-png.png ma rozmiar 4,5 MB. W tym przypadku obraz PNG stał się o 45% większy niż obraz JPEG, co jest różnicą, która wynika po prostu z wybrania określonego formatu obrazu. Nie ma łatwiejszego sposobu na zaoszczędzenie tak dużej ilości miejsca przy tak niewielkim wysiłku. Cóż, może jest. Rzućmy okiem na następny krok.

Zmień rozmiar zdjęć przed przesłaniem

W poprzednim przykładzie zaoszczędziliśmy trochę miejsca, wybierając właściwy format obrazu , ale możemy zaoszczędzić jeszcze więcej miejsca , jeśli zmienimy rozmiar obrazu przed jego przesłaniem. Ale ile powinniśmy zmienić jego rozmiar? To naprawdę zależy od szerokości i kontenera Twojej witryny.

Na naszej stronie ProteusThemes maksymalna szerokość obrazu to 1110 px, więc zmienię rozmiar bieżącego obrazu child.jpg , który ma szerokość 1800 px, do szerokości 1110 px. W tym przypadku właśnie przeszliśmy z 3,1 MB do 1,1 MB, co stanowi kolejne 65% zaoszczędzonej i zmniejszonej przestrzeni .

Wskazówka: możesz zmienić rozmiar obrazów bezpośrednio w swojej bibliotece multimediów WordPress. Kliknij Media -> Wybierz swój obraz -> Edytuj obraz i wybierz nowe wymiary dla swojego obrazu:

Wtyczka Imsanity WordPress do automatycznej zmiany rozmiaru obrazów

Jeśli nie chcesz myśleć o zmianie rozmiaru obrazu lub jeśli wielu różnych użytkowników przesyła obrazy do Twojej witryny, wtyczka Imsanity powinna działać idealnie dla Ciebie. W ustawieniach wtyczki możesz wybrać maksymalną szerokość lub wysokość, jaką powinny mieć obrazy, a wtyczka zmieni rozmiar wszystkich większych obrazów do tego rozmiaru. Możesz także wybrać funkcję zmiany rozmiaru zbiorczego, aby zmienić rozmiar wszystkich istniejących obrazów. Zdecydowanie polecam tę wtyczkę każdemu, kto ma problem ze zmianą rozmiaru każdego obrazu z osobna przed jego przesłaniem. Możesz pobrać wtyczkę Imsanity za darmo.

Kompresowanie obrazów

Teraz, gdy nauczyliśmy się podstaw optymalizacji obrazu, zobaczmy, jak możemy ulepszyć naszą grę. W Internecie możemy znaleźć wiele narzędzi do kompresji obrazu, a nawet wtyczki do WordPressa , które zmniejszą rozmiar Twojego obrazu. Ale musimy tutaj uważać, niektóre narzędzia prawie nie zrobią żadnej różnicy, a niektóre ustawienia zniszczą nasz wizerunek i sprawią, że będzie bezużyteczny. Jak więc znaleźć idealną równowagę? Nie martw się, w momencie pisania tego tekstu (czerwiec 2017 r., aktualizacja 2018 r.) przetestowaliśmy wszystkie najpopularniejsze narzędzia/usługi online oraz wtyczki WordPress do optymalizacji obrazu i wybraliśmy najlepsze z nich.

Do przeprowadzenia naszego testu użyliśmy 3 różnych obrazów JPEG i 1 obrazu PNG.

Wszystkie 3 obrazy JPEG pochodzą z Unsplash, autorów Mi Pham, Breather, Denise Chan i Niko Virtanen. Zostały one przycięte i przeskalowane do 1110 x 624 px w celach testowych.

W przypadku obrazu PNG stworzyliśmy własny obraz z logo ProteusThemes i wzorem za nim. Podobnie jak obrazki testowe JPEG, również ten ma rozmiar 1110 x 624 px.

Przeprowadzimy teraz wszystkie obrazy przez wszystkie wybrane narzędzia i wtyczki do kompresji i dowiemy się, która z nich jest dla Ciebie najlepsza. Zacznijmy od narzędzi online.

Najlepsze narzędzia online do kompresji obrazu

W chwili pisania tego tekstu (czerwiec 2017 r., aktualizacja 2018 r.) poniżej znajduje się pełna lista najpopularniejszych narzędzi i usług online do kompresji obrazu:

• MałePNG
• Optymalizacja
• Kompresor
• ImageOptim
• ObrazMniejszy
• Kraken
• JPEG.io
• Statystyki PageSpeed

Jeśli uważasz, że na tę listę zasługuje jakieś inne narzędzie, daj nam znać, przetestujemy je i dodamy do listy. Poniżej znajdziesz moje recenzje każdego narzędzia, a także moją ocenę najlepszych z nich. Jeśli nie chcesz czytać o każdym indywidualnym narzędziu, kliknij tutaj – Pokaż mi zwycięzców!

MałePNG

TinyPNG był jednym z pierwszych narzędzi do kompresji obrazu, z których korzystałem i czasami nadal go używam. Nie ma opcji, po prostu przesyłasz obrazy, a otrzymasz je skompresowane. Za pomocą tego narzędzia online możesz zbiorczo przesłać do 20 obrazów o rozmiarze 5 MB.

Optymalizacja

Optimizilla to kolejne proste, ale potężne narzędzie online. Jest darmowy i ma opcję zbiorczego przesyłania do 20 obrazów. Aby uzyskać najlepszy stosunek kompresji do jakości, pozostawiamy ustawienie jakości na 90, tak jak jest to domyślnie. Jeśli chcesz jeszcze bardziej zwiększyć kompresję, po prostu zmień to ustawienie, a od razu zobaczysz zmiany w jakości.

Kompresor

Compressor ma potencjał, aby stać się jednym z najlepszych narzędzi do kompresji obrazu, ale ma jedną dużą wadę. Obecnie nie ma opcji przesyłania zbiorczego, co oznacza, że ​​możesz skompresować tylko 1 obraz naraz. Poza tym jest darmowy, łatwy w użyciu i ma dwie opcje kompresji. W naszym teście używamy opcji stratnej, ponieważ jakość obrazu po kompresji pozostaje taka sama.

ImageOptim

ImageOptim to narzędzie z wieloma ustawieniami. Możesz wybierać między 3 różnymi opcjami jakości i 3 różnymi opcjami jakości kolorów. Odkryliśmy, że najlepsze wyniki kompresji/jakości uzyskuje się przy ustawieniach domyślnych. Ustaw jakość na średnią, a jakość kolorów na automatyczną. To, co niepokoiło mnie najbardziej z ImageOptim , obok trochę przestarzałego projektu, było to, że eksportuje pliki JPEG, nawet jeśli przesyłam pliki PNG . Wysłałem Kornelowi (twórcy ImageOptim) maila w tej sprawie i już go naprawił.

ObrazMniejszy

Podobnie jak w przypadku Compressora , ImageSmaller ma tę samą wadę. Nie ma opcji przesyłania zbiorczego. Jednak ma jeden z największych limitów przesyłania, z 50 MB. Jeśli masz większe pliki do optymalizacji, ImageSmaller może być odpowiednim narzędziem dla Ciebie.

Kraken

Kraken to narzędzie do kompresji obrazu premium, z najlepszym pulpitem nawigacyjnym spośród wszystkich testowanych przeze mnie narzędzi. Znajdziesz ładny interfejs sieciowy do przesyłania zdjęć i wiele różnych ustawień, aby uzyskać najlepsze wyniki. W naszym teście użyliśmy ich domyślnych ustawień stratnych.

JPEG.io

JPEG.io to darmowa wersja tego samego narzędzia co Kraken . Ma te same możliwości kompresji, ale jak mówi nam adres URL witryny, jest tylko dla plików JPEG.

Statystyki PageSpeed

Nie spodziewałeś się, że zobaczysz ten tutaj, prawda? PageSpeed ​​Insights udostępnia nam również skompresowane pliki .zip podczas testowania naszej witryny. Nie jest to najbardziej przyjazny dla użytkownika sposób, ponieważ będziesz już musiał mieć swoją witrynę online ze wszystkimi obrazami, a następnie zastąpić je nowymi skompresowanymi, ale otrzymasz obrazy skompresowane tak, jak chce tego Google.

Wyniki dla najlepszego narzędzia do kompresji online

Poniżej znajdziesz wykresy z wynikami wszystkich naszych testów. Możesz również sprawdzić nasz szczegółowy arkusz kalkulacyjny, aby uzyskać więcej informacji.

Najlepsze narzędzie do kompresji plików JPEG online

Większość narzędzi kompresuje nasze testowe pliki JPEG do około 80% . Przyjrzyjmy się naszemu obrazowi child.jpg . Zaczęliśmy od zdjęcia o rozmiarze 3,1 MB, a po zmianie rozmiaru i kompresji nasz obraz miał tylko 165 KB, co oznacza 95% mniejszy rozmiar . To jest różnica! Udało nam się uzyskać takie same wyniki z Compressor i ImageOptim . Wygląda więc na to, że mamy tu dwóch zwycięzców.

Najlepsze narzędzie do kompresji online plików PNG

W naszym teście PNG uzyskaliśmy średnio 50% zmniejszony rozmiar ze wszystkimi narzędziami. Jednak Optimizilla była trochę lepsza od pozostałych, z 56% zmniejszonym rozmiarem naszego obrazu pt-logo.png .

Najlepsze narzędzie do kompresji obrazu online

Nawet gdyby Optimizilla nie była najlepszym narzędziem do kompresji plików JPEG, poleciłbym ją jako najlepsze narzędzie do kompresji dostępne obecnie online. Pliki JPEG skompresowane do 79% są nadal niesamowite i możesz podnieść je jeszcze wyżej, dzięki prostemu ustawieniu jakości na stronie. Ma również opcję przesyłania zbiorczego, w przypadku braku Compressora i bardziej niezawodnego przesyłania, niż ImageOptim , gdzie wszystkie obrazy są eksportowane jako pliki JPEG, nawet jeśli są wśród nich pliki PNG. Z powodu tych wszystkich rzeczy myślę, że Optimizilla zasługuje na miano najlepszego narzędzia do kompresji obrazu online.

Następnie zobaczmy, czy wtyczki WordPress mogą pokonać narzędzia do kompresji obrazu online.

Najlepsze wtyczki WordPress do kompresji obrazu

Jaka jest różnica między narzędziami graficznymi online a wtyczkami WordPress? Cóż, jeśli korzystasz z internetowych narzędzi graficznych do kompresji obrazu, nadal będziesz musiał przesłać te obrazy do swojej witryny WordPress, a następnie z nich korzystać. Jeśli wolisz mieć wszystko w jednym miejscu, najlepszym rozwiązaniem może być wtyczka WordPress do kompresji obrazu. Większość wtyczek ma również opcję optymalizacji obrazów podczas przesyłania, więc możesz włączyć to ustawienie i zapomnieć o dodatkowej pracy.

Stworzyłem nową witrynę WordPress dla każdej wtyczki i za każdym razem przesyłałem te same 4 obrazy. Różne wtyczki mają różne ustawienia, więc szukałem idealnej równowagi między kompresją a jakością obrazu.

Przetestowałem następujące wtyczki:

• WP Smush (wersja darmowa)
• Kompresuj obrazy JPEG i PNG autorstwa TinyPNG
• Krótkie piksele
• Wyobraź sobie
• Optymalizator obrazu EWWW (wersja bezpłatna)

Tak jak wspomniałem wcześniej, jeśli znasz jakąś inną wtyczkę, którą powinniśmy przetestować, daj nam znać, a dodamy ją do listy. Jeśli nie chcesz dowiedzieć się więcej o tych wtyczkach, kliknij tutaj – Pokaż mi zwycięzców!

WP Smush (wersja darmowa)

WP Smush to jedna z najstarszych znanych mi wtyczek do kompresji obrazu. Ma jedną miłą zaletę w stosunku do wszystkich innych wtyczek, ponieważ nie ma potrzeby rejestracji, aby korzystać z darmowej wersji. Posiada również opcję automatycznego kompresowania nowo przesłanych obrazów, więc po ustawieniu wtyczki możesz o niej zapomnieć i wykona całą pracę za Ciebie w tle. Niestety wyniki kompresji były jednymi z najgorszych w darmowej wersji, więc nie polecałbym jej używać. Stwierdzili na swojej stronie, że wersja pro kompresuje się znacznie lepiej, więc przetestuję ją również w następnej aktualizacji artykułu.

Kompresuj obrazy JPEG i PNG przez TinyPNG

Podobnie jak narzędzie do kompresji online TinyPNG , wtyczka WordPress jest bardzo prosta. Po przejściu przez rejestrację ma minimalne ustawienia i w zasadzie działa po wyjęciu z pudełka. Wszystkie nowo przesłane obrazy mogą być również automatycznie skompresowane, dzięki czemu możesz aktywować wtyczkę i zapomnieć o niej.

Krótkie piksele

ShortPixel był osobiście jedną z największych niespodzianek. Nigdy o tym nie słyszałem przed moimi badaniami i byłem pod wrażeniem. Dzięki domyślnym stratnym zalecanym ustawieniom ma najlepsze wyniki kompresji między wtyczkami WordPress, a także ma opcję błyszczącą. Ta opcja jest przeznaczona dla fotografów lub innych profesjonalistów, którzy potrzebują bardzo wysokiej jakości zdjęć i nie mogą iść na kompromis z utratą jakości.

Wyobraź sobie

Imagify to wtyczka stworzona przez ręce słynnych autorów wtyczek WP Rocket . Po rejestracji otrzymasz kilka przejrzystych opcji do wyboru. Aby uzyskać najlepszą kompresję i jakość obrazu, wybierz tryb agresywny. Jedną z fajnych rzeczy w ustawieniach jest również opcja posiadania osobnego folderu na oryginalne obrazy, na wypadek gdyby coś poszło nie tak z kompresją. Jedyne, czego do końca nie zrozumiałem, to dlaczego musimy przełączyć się na widok listy w mediach, aby zobaczyć wyniki kompresji. Poza tym Imagify jest naprawdę fajną i solidną wtyczką.

Optymalizator obrazu EWWW (wersja bezpłatna)

EWWW Image Optimizer był jedyną wtyczką, która powodowała błędy. Najpierw wypróbowałem go na własnym hostingu i otrzymałem błąd, że EWWW Image Optimizer wymaga exec() lub klucza API. Następnym razem, gdy próbowałem wtyczki na mojej lokalnej witrynie WordPress, pojawił się błąd, że brakuje mi pngout. Postępowałem zgodnie z instrukcją instalacji i wtyczka była w końcu gotowa do testów. Odkąd przetestowałem darmową wersję, była tylko opcja bezstratna, która nie prowadziła do najlepszych wyników. Podobnie jak w przypadku WP Smush, przetestuję również wersję pro EWWW Image Optimizer w następnej aktualizacji artykułu i zobaczymy, czy będzie działał lepiej.

Wyniki dla najlepszej wtyczki WordPress do kompresji obrazu

Tak jak poprzednio, poniżej znajdziesz wykresy z wynikami wszystkich naszych testów. Możesz również sprawdzić nasz szczegółowy arkusz kalkulacyjny, aby uzyskać więcej informacji.

Najlepsza wtyczka WordPress do kompresji plików JPEG

Zwycięzcą został ShortPixel , ze średnią 84% kompresji . Tak samo jak Compressor i ImageOptim w kategorii za najlepsze narzędzie do kompresji online. Drugą najlepszą wtyczką był Imagify , ze średnią kompresją 70% . Oświadczam, że ShortPixel jest obecnie absolutnym zwycięzcą tej kategorii.

Najlepsza wtyczka WordPress do kompresji plików PNG

Najlepsza wtyczka do kompresji PNG nazywa się Compress JPEG & PNG images by TinyPNG , z 56% kompresją . Co ciekawe, ponownie najlepszy wynik jest taki sam jak w kategorii najlepsze narzędzie do kompresji online. Jednak inne wtyczki były tutaj nieco bardziej konkurencyjne, z kompresją około 50% .

Najlepsza wtyczka WordPress do ogólnej kompresji obrazu

Moim zdaniem najlepszy stosunek między doświadczeniem użytkownika, różnymi ustawieniami i kompresją był z wtyczki ShortPixel . Ogólnie rzecz biorąc, jest to bardzo solidna wtyczka, z wieloma opcjami, ale także ze świetnymi ustawieniami domyślnymi. Możesz zacząć korzystać z wtyczki od razu po rejestracji, a co najważniejsze kompresja jest świetna. W tej chwili wybrałbym wtyczkę ShortPixel dla mojej własnej strony internetowej, zwłaszcza jeśli większość zdjęć to JPEG.

Wniosek

To była długa podróż, prawda? W międzyczasie udało nam się skompresować nasz obraz child.jpg do 95% . Twoja witryna może działać znacznie szybciej, jeśli wykonasz tylko te 3 proste kroki . Powtórzmy je jeszcze raz:

• Wybierz odpowiedni format obrazu
• Zmień rozmiar obrazu przed przesłaniem
• Kompresuj obraz za pomocą narzędzi online lub wtyczek WordPress

Inną ważną rzeczą jest to, że używasz tylko jednego narzędzia lub wtyczki WordPress do każdego obrazu, ponieważ większość z nich ma jakąś kompresję stratną, co oznacza, że ​​jakość twojego obrazu może się pogarszać z każdą dodatkową kompresją i to jest coś, co robimy nie chcę. Dodaliśmy również wszystkie obrazy testowe na GitHub, jeśli chcesz sprawdzić porównanie jakości między nimi lub samodzielnie przetestować inne narzędzia i wtyczki.

Nie powinieneś mieć więcej wymówek, aby nie kompresować obrazów. Jest wiele narzędzi i sposobów na to, a my udowodniliśmy, że w końcu warto. Wybierz swojego osobistego zwycięzcę kompresji online lub wtyczki WordPress i sprawdź swoją witrynę wynik Google PageSpeed ​​przed i po optymalizacji. Udostępnij informacje o szybkości Twojej witryny i poprawie wyników w naszej sekcji komentarzy. Chciałabym również wiedzieć, czy ten artykuł pomógł Ci w optymalizacji obrazu i jakie są Twoje zdanie na ten temat.