publikacja: 4 listopada 2011, autor: , komentarze 54 http://wpninja.pl/artykuly/prosty-sposob-na-zmniejszenie-rozmiaru-plikow-graficznych-w-wordpressie/

Prosty sposób na zmniejszenie rozmiaru plików graficznych w WordPressie

Prosty sposób na zmniejszenie rozmiaru plików graficznych w WordPressie

Dzisiaj kilka słów o wtyczce, która powinna spodobać się wszystkim optymalizacyjnym maniakom - WP Smush.it. W skrócie służy ona do zmniejszania rozmiaru plików graficznych w WordPressie. Jak to robi? Czy warto ją zainstalować i ile da się dzięki niej wycisnąć?

Optymalizacja plików graficznych

Każdy szanujący się koder HTML dba o to, aby pliki graficzne wchodzące w skład podstawowego wyglądu strony były jak najmniejsze. Jedni wykorzystują tu swoją wiedzę z zakresu odpowiedniego dobierania formatów i ustawień kompresji a inni ograniczają się do specjalnych programów.

Smush.it

Jednym z nich jest Smush.it – narzędzie online ze stajni Yahoo, które przeprowadza optymalizację bez jakichkolwiek zmian w wyglądzie czy strat na jakości.

WP Smush.it

Wtyczka WP Smush.it wykorzystuje API wspomnianego serwisu, dzięki czemu wszystkie pliki w formacie JPG, GIF i PNG, które zostaną wgrane za pomocą WordPressa będą automatycznie przesłane do narzędzia i pobrane z powrotem w zoptymalizowanej postaci.

Pliki, które zostały wgrane przed aktywowaniem wtyczki można przerobić pojedynczo (media / biblioteka) lub wszystkie na raz (media / bulk smush.it).

Efekt działania wtyczki WP Smush.it

Efekt działania wtyczki WP Smush.it

Dlaczego warto a dlaczego nie?

Największą zaletą używania wtyczki jest zmniejszenie rozmiaru obrazków, które pociąga za sobą wiele innych korzyści. Według zasady drugiej strony medalu i tutaj także znajdzie się parę wad, które warto przeanalizować przed uruchomieniem WP Smush.it.

Zalety

  • więcej miejsca na serwerze,
  • mniejsze zużycie transferu,
  • szybsze wczytywanie się strony w przeglądarce, które ma także wpływ na:
  • wyższy ranking w wyszukiwarkach internetowych,
  • mniejszy współczynnik odrzuceń przez czytelników.

Wady

  • trzeba trochę dłużej poczekać przy wgrywaniu plików,
  • serwis umożliwia obrabianie jedynie plików, których rozmiar nie przekracza 1MB,
  • trzeba zaakceptować politykę usługi co nie dla wszystkich może być komfortowe.

Efekt?

Tyle teorii. Pora na to co tygrysy lubią najbardziej czyli… ile tak właściwie jesteśmy w stanie wycisnąć za pomocą wspomnianej wtyczki?

Do testów zaprzągłem 3 strony o różnym charakterze a stopień optymalizacji oscylował w przedziale 6-12%. Nie jest to więc jakiś fenomenalny rezultat, ale jak wszystko w życiu także i to zależy od punktu siedzenia. Dla mnie, jako fana optymalizacji pod każdą postacią, jest to bardzo dobry wynik. Zwłaszcza, że nakład pracy jest tutaj minimalny.

Reasumując – sam korzystam i polecam. A Ty co polecasz?

Komentarze

  1. agresor 5 lat temu:

    command line: jpegtran oraz pngcrush

    odpowiedz
    1. Rafał Bieleniewicz 10 miesięcy temu:

      Programy o których wspominasz napewno są dobre. Zaleca je samo Google. Z tego co wiem, działają tylko pod linuksem więc z czasem postawię wirtualną maszynę i przetestuję.

      odpowiedz
  2. Krystian Piątek 5 lat temu:

    Przy większym blogu częściej odwiedzanym przez userów każda oszczędność zasobów jest ważna. Wtyczka wygląda niezwykle interesująco. Tak jak wspomniał autor stosunek jakość/poświęcony czas jest relatywnie niski – wrzucam do swojej paczki niezbednika :)

    odpowiedz
  3. Naturalis 5 lat temu:

    Ja korzystam z tego narzędzia http://tools.dynamicdrive.com/imageoptimizer/index.php, które co prawda w porównaniu do smush.it sprawę załatwia łopatologicznie, to jednak stopień kompresji jest zasadniczo różny, z przewagą dla zapodanego narzędzia online.

    Można wybrać stopień kompresji porównując efekt wynikowy kompresji. Widać, że nieraz znaczna kompresja pozwala w oczach zwykłego internauty na niedostrzeżenie różnicy.

    odpowiedz
  4. Krzysztof Trynkiewicz z SukcesStrony.pl 5 lat temu:

    Ja polecam uzycie Save for Web & Devices Photoshopa i wlasnoreczne dobieranie, czy grafa mniej zajmie w PNG, czy w JPEG oraz dobieranie stopnia kompresji i liczby kolorow. Nie zajmuje to szczegolnie duzo czasu (z 2min na obrazek), a efekt najlepszy z mozliwych :)

    odpowiedz
  5. Łukasz Więcek - myDIY.pl 5 lat temu:

    Smush.it rzeczywiście zawsze dokonuje kompresji niewidocznej dla oka, czy też zdarza mu się przesadzić o nieco oszpecić przesyłane zdjęcia? U siebie na http://myDIY.pl mam bzika na punkcie zdjęć – ładuję ich całą masę do każdego potu (każda fotka po ~300kB) i zawsze dbam o to, by były możliwie jak najładniejsze. Oszczędność miejsca kusi, ale boję się, że odbije się to na jakości i zaczną się pojawiać jakieś artefakty.

    Mógłby się wypowiedzieć ktoś, kto od dłuższego czasu korzysta z tego rozwiązania?

    Pozdrawiam!

    odpowiedz
    1. Szymon Skulimowski 5 lat temu:

      Posiłkuję się tym narzędziem przy cięciu projektów graficznych już parę dobrych lat i nigdy nie zauważyłem pogorszenia jakości.

      odpowiedz
  6. Marcin 5 lat temu:

    Trackback nie wszedł więc zapodam moją odpowiedź:

    Moim zdaniem podany sposób jest przerostem formy nad treścią… http://iworks.pl/2011/11/04/zmniejszanie-obrazkow-w-wordpress/

    odpowiedz
    1. Szymon Skulimowski 5 lat temu:

      Ja też korzystam czasem z tego filtra, ale… do zwiększania jakości. Standardowe 90 to dla mnie jednak zbyt mało :-).

      Nie jestem pewien, ale wydaje mi się że to nie zadziała z innymi niż JPG formatami (GIF i ukochany PNG). I tak jak wspomniałeś – filtr działa tylko przy przeskalowywaniu czyli oryginalny plik pozostaje bez zmian.

      odpowiedz
    2. Marcin 5 lat temu:

      Filtr działa tylko na pliki typu jpeg (patrz nazwa jpeg_quality). Ale jaka jest szansa, że użytkownik nieświadomy graficznie użyje innego formatu? IMVHO przyzerowa.

      odpowiedz
    3. Szymon Skulimowski 5 lat temu:

      Parę razy zdarzyło mi się widywać nawet BMP :-).

      odpowiedz
  7. Łukasz Więcek - myDIY.pl 5 lat temu:

    Dobra – zaryzykowałem i przepuściłem przez Smush.it wszystkie grafiki z http://myDIY.pl

    Wynik możecie zobaczyć tutaj: http://dl.dropbox.com/u/164789/wp-mush-it.txt

    W sumie na 1,5-miesięcznym blogu na samych zdjęciach załączanych do postów udało się zaoszczędzić 4MB. Strat jakości nie zauważyłem. Dobrze jest, Panowie! Dzięki za cynk o Smush.it!

    odpowiedz
  8. Grzegorz 5 lat temu:

    Z tego typu wtyczkami-usługami jest problem natury bezpieczeństwa – przykładowo: http://hacking.pl/pl/news-16614-Infekujace_sajty_z_WordPressem.html

    odpowiedz
    1. Łukasz Więcek - myDIY.pl 5 lat temu:

      Wątpię, czy oficjalne dziecko Yahoo odważyłoby się zainstalować gdziekolwiek jakikolwiek syf :)

      odpowiedz
  9. elgo 5 lat temu:

    Stronka Smush.it przerobiła grafikę wielkości 32,6 KB na 30 KB, strona z której korzystam, a której wspominam http://www.e-elgo.pl/smietnik/przydatne-strony czyli JPEGmini.com „robi” to na 19,1 KB.

    Oczywiście trzeba przerabiać pojedynczo lub po albumach, a nie jak proponowana wtyczka powyżej na całym serwisie.

    odpowiedz
  10. matrix 5 lat temu:

    Jasne, że warto zainstalować. Polecam nie tylko optymalizacyjnym maniakom.

    odpowiedz
  11. mamonia38 5 lat temu:

    Warto warto szczególnie jeśli chodzi o zmniejszenie rozmiarów obrazków.

    odpowiedz
  12. Kuba Mikita 5 lat temu:

    Najfajniejsze byłaby możliwość łatwego wdrożenia do szablonu css sprites. Do tego przydałoby się łączenie plików css i js, co próbowałem zrobić już kilkoma wtyczkami. Dotychczasowe rezultaty to połączone kilka plików css i js, reszta wisi. Jeśli łącze wszystko to coś się gryzie i strona rozkracza koncertowo.

    odpowiedz
    1. Szymon Skulimowski 5 lat temu:

      Ja do łączenia używam W3 Total Cache, ale tak jak mówisz – trzeba jeszcze wiedzieć, które skrypty JS gdzie umieścić (np. jQuery zawsze powinien być w nagłówku) a to w dużej mierze zależy od używanego motywu i dodatkowych wtyczek.

      odpowiedz
    2. Kuba Mikita 5 lat temu:

      Najlepiej to chyba napisać własny szablon, który jest dobrze zoptymalizowany i korzysta z css sprites. Do tego później wyselekcjonowane wtyczki. Może kiedyś się pokuszę.

      A stanęło u mnie też na W3TC, wynik jednak jest zatrważający nadal: na stronie głównej 6 plików css oraz 19 plików js.

      odpowiedz
    3. mbloch 4 lata temu:

      A jakie są zalety CSS Sprites ?

      odpowiedz
    4. Szymon Skulimowski 4 lata temu:

      Mniejsza ilość zapytań i mniejszy rozmiar.

      odpowiedz
    5. mbloch 4 lata temu:

      Co do rozmiaru – rozumiem. Jednak mniejsza liczba zapytań ? Hmmm na co ma wpływ ? Generowanie ruchu, SEO ?

      odpowiedz
    6. Szymon Skulimowski 3 lata temu:

      Chodzi o zapytania przeglądarki o wszystkie elementy potrzebne do wyświetlenia strony (pliki graficzne, style, skrypty, fonty itp.).

      Tutaj jest to szczegółowo opisane: http://developer.yahoo.com/performance/rules.html

      odpowiedz
  13. Kuba Mikita 5 lat temu:

    A co jeśli wtyczka nie może przemielić zdjęć bo WP porobiło zdalne pliki? Jest na to jakaś rada?

    odpowiedz
    1. Szymon Skulimowski 5 lat temu:

      Niestety nic mi na ten temat nie wiadomo.

      odpowiedz
  14. GemSetMecz 3 lata temu:

    Przyda się na pewno, jednak czy przy małej ilości zdjęć opłaca się to wykorzystywać? Chodzi mi o jeden obrazek w każdym wpisie (wielkość 150×150). Pozdrawiam

    PS
    Przepraszam jak pytanie już gdzieś się powtórzyło. Po prostu nie czytałem komentarzy :)

    odpowiedz
    1. Szymon Skulimowski 3 lata temu:

      Z moich testów wynika, że obrazki zmniejszyły swój rozmiar o 6-12%. Jeśli masz 100 małych obrazków to pewnie niewiele zaoszczędzisz, ale jeśli masz ich 10000… :-)

      A do WordPressa ładujesz od razu obrazki 150×150 czy większe?

      odpowiedz
  15. Krzysztof 3 lata temu:

    U mnie niestety nie działa („Could not find… [adres katalogu]” lub „The server encountered an internal error or misconfiguration and was unable to complete your request”). Szkoda…

    odpowiedz
    1. Szymon Skulimowski 3 lata temu:

      Przetestowałem właśnie działanie wtyczki i faktycznie są jakieś problemy przy optymalizacji wszystkich plików na raz („Media / Bulk Smush.it”), przy wgrywaniu pojedynczego obrazka było OK (choć trwało to znacznie dłużej niż kiedyś).

      Czy u Ciebie jest to samo?

      Sama wtyczka zmieniła niedawno właściciela (na WPMUDEV) więc najprawdopodobniej w kolejnej wersji wszystko będzie już naprawione.

      odpowiedz
    2. Krzysztof 3 lata temu:

      U mnie – konflikt z wtyczką Media Rename autorstwa ShadowsDweller. Wystarczyło ją wyłączyć, w końcu i tak nie jest potrzebna przez cały czas :) Pozdrawiam :)

      odpowiedz
    3. Szymon Skulimowski 3 lata temu:

      Dzięki za informację! :-)

      odpowiedz
  16. Piotrek 3 lata temu:

    Słyszał ktoś o EWWW Image Optimizer podobno jest dobry, ale nie umiem sobie poradzić z jego instalacją, a raczej instalacją tego:

    jpegtran: MISSING
    optipng: MISSING
    gifsicle: MISSING
    pngout: MISSING

    Jeśli ktoś używa może się podzieli radami ;)

    odpowiedz
    1. Szymon Skulimowski 3 lata temu:

      Aby skorzystać z tej wtyczki musiałbyś mieć więcej uprawnień niż jest to standardowo przyjęte na współdzielonym hostingu. Możesz spróbować skontaktować się z firmą, u której zakupiłeś hosting w rozwiązaniu problemu (nie zapomnij wskazać na konkretną wtyczkę).

      odpowiedz
    2. Piotrek 3 lata temu:

      Dzięki, tak myślałem, że bez kontaktu z hostingodawcą się nie obejdzie :/

      odpowiedz
    3. Paweł Knapek 3 lata temu:

      @Piotrek, Linuxpl ? ;)
      Daj znać o efektach starań.

      odpowiedz
    4. Piotrek 3 lata temu:

      Tak :)

      Dzisiaj napisałem do nich czy jest możliwość doinstalowania tych elementów i dostałem odpowiedź, że je doinstalowano. Jednak przy ponownej próbie instalacji Ewww nadal pokazuje mi przy wszystkich „MISSING”. Zmieniłem prawa dostępu do folderu ewww i podkatalogów, ale to też nic nie dało :/ Nie wiem w czym jeszcze może być problem.

      odpowiedz
    5. Paweł Knapek 3 lata temu:

      phpinfo() i zobacz czy faktycznie są dostępne. Zerknij też do error loga jakimi tam błędami sypie – w panelu konta zakładka Statystyki i logi > Log błędu Apache’a >> Pełen Log błędu. Są też dostępne przez FTP w katalogu logs, popakowane gz’ipem.

      W ustawieniach wtyczki tez jest opcja załączania trybu debugowania.
      Posprawdzaj co tam siedzi, bo mogą być jakieś wskazówki które naprowadzą na przyczynę.

      Zawsze tez możesz dalej pomęczyć ich support ;)

      odpowiedz
    6. Piotrek 3 lata temu:

      W pliku phpinfo() nie znajduję informacji o tych aplikacjach.
      Można zobaczyć wpisując po adresie strony /info.php
      Tryb debugowania pokazuje to: http://pokazywarka.pl/qvxrs4/
      Logi: http://pokazywarka.pl/9s8pay/

      odpowiedz
    7. Paweł Knapek 3 lata temu:

      W phpinfo wprawdzie nie widzę tych elementów, ale tez nie mam pewności czy były by tam widoczne. W każdym razie widzę, że nie są powyłączane żadne istotne dla działania wtyczki funkcje.
      Z tego wtyczkowego debuga trudno mi cokolwiek wywnioskować. Widać, że brak odpowiedzi ww. modułów. Tak, jakby nie były zainstalowane …albo były nie tam gdzie trzeba (nie tam gdzie wtyczka się ich spodziewa), bo nawet pod systemowymi ścieżkami cisza (gdyby było ok, to w odp. na testy powinny padać odpowiedzi ze ścieżką i sygnaturką modułu np. „Independent JPEG Group’s JPEGTRAN, version 9 13-Jan-2013” itp.) .
      Powiedział bym – zaznacz „Use System Paths” i sprawdź czy zadziała – ale sądząc po wyniku debuga raczej to nic nie da.

      Proponował bym uderzyć do supportu hostingu, podesłać im ten debug i dopytywać dlaczego nie działa i czy mogą coś na to poradzić.

      Co do ostatniego logu, wrzuciłeś access log, nie error log ;)

      odpowiedz
  17. Szymon Słowik 2 lata temu:

    Czy wtyczka musi być cały czas włączona, czy tylko w czasie masowej kompresji (dotychczas wgranych plików) i dodawaniu nowych obrazów? Pozdrawiam

    odpowiedz
    1. Szymon Skulimowski 2 lata temu:

      Nie musi. Możesz używać ją okazjonalnie (np. korzystając raz na jakiś czas z masowej kompresji) lub dopiero w momencie gdy wrzucasz zdjęcia (nie jestem pewien czy to najwygodniejszy sposób).

      Ostatnio pojawił się dosyć fajny serwis Kraken Image Optimizer, który pozwala na świetną kompresję przed wgraniem plików do WordPressa. W płatnej wersji jest dostępna wtyczka, ale nie miałem jeszcze okazji jej przetestować.

      odpowiedz
  18. onizuka 2 lata temu:

    Hej,
    Powoli zabieram się za optymalizacje swojego WordPressa. właśnie odpaliłem ta wtyczkę i czekam na efekt ponad 2000 plików graficznych i 100min czekania :D Co będzie miało większy rozmiar może warto przerobić w zewnętrznym serwisie?
    Temat optymalizacji mam nieco zaniedbany bo na PageSpeed mam 40 punktów :P Poproszę o więcej wskazówek jak przyspieszyć działanie strony.
    Dzieki

    odpowiedz
  19. Kamil 2 lata temu:

    świetne narzędzie. U mnie 297 grafik zostało przerobionych w około 35minut.

    Jeżeli dodaję zdjęcia do „media” oczywiście wtyczka przerabia zdjęcia. Natomiast jeżeli dodaję zdjęcia poprzez „NextGEN Gallery” to też są one przerabiane?

    odpowiedz
    1. Szymon Skulimowski 2 lata temu:

      Niestety nie. Wtyczka „WP Smush.it” działa jedynie dla plików, które są ładowane standardowo dla WordPressa czyli do biblioteki mediów a „NextGEN Gallery” obsługuje pliki po swojemu.

      odpowiedz
  20. Rafik 2 lata temu:

    WP Smush.it wprowadziło dużo ograniczeń do darmowej wersji… teraz za jednym razem można maksymalnie 50 obrazów zoptymalizować. A tak to działa dobrze.

    odpowiedz
  21. Karol 2 lata temu:

    Rozumiem ze wszyscy pisze o zmianie rozmiarów ale czy za tym idzie waga? bo poszukuje wtyczki, która załatwi mi zmianę wagi zdjęcia

    odpowiedz
    1. Szymon Skulimowski 2 lata temu:

      W tym artykule rozmiar = waga.

      odpowiedz
  22. Rafał Bieleniewicz 10 miesięcy temu:

    Szukając czegoś co zoptymalizuje mi jedną ze stron trafiłem na ten wpis. Dość stary ale wtyczka cały czas popularna i na czasie. Przetestowałem i… niestety redukcja wagi plików jest zbyt mała. Dlaczego tak twierdzę? Dlatego że poddając stronę różnego rodzaju testom (gtmetrix, PageSpeed Insight) cały czas otrzymywałem komunikat, że obrazki ważą jednak za dużo. Zacząłem szukać dalej i dość konkurencyjną wtyczką jest też Prizm Image. Dopiero dzięki niej, strona zaczęła otrzymywać zdecydowanie więcej punktów. Do optymalizacji użyłem zestawu WP Super Cache + Autoptimize + Prizm Image. Klikałem, konfigurowałem i zoptymalizowałem. Z czasem WP Super Cache chcę zastąpić W3 Total Cache ale to wymaga ode mnie zdobycia dodatkowej wiedzy.

    odpowiedz
    1. Paweł 10 miesięcy temu:

      Tak, Smush nie powala stopniem kompresji. Tak, Prizm jest pod tym względem lepszy (w dodatku free) ….ale na max detalach, bo przy wyższym stopniu kompresji potrafi już sieczkę z fotek robić. Ale i przy maksymalnej jakości wypluwa duzo mniejsze pliki niż Smush.
      Co do cache, to uważał bym. Jeżeli WSC działa Ci ok, to nie kombinuj z W3.
      W3 to ciężki kombajn. Nie dość, że ma rozbudowany, trudny dla wielu do ogarnięcia konfig, to ma jeszcze swoje wymagania. Na jednej platformie po dobrym ustawieniu faktycznie będzie wymiatał, na innej zaś żadne ustawienia nie pomogą i zamiast kopa odczujesz czkawki i spowolnienie.

      odpowiedz
    2. Rafał Bieleniewicz 10 miesięcy temu:

      Dzięki za sugestie. WP Super Cache samo w sobie ma sporo opcji którymi można dużo zrobić. Znając siebie znajdę chwilę i skuszę się na W3 Total Cache. Tak jak mówisz „jak działa, nie kombinuj” a oprócz tego są ważniejsze rzeczy do zrobienia ;)

      @Paweł wiesz może, czy Prizm zastępuje pliki czy robi backup oryginałów?

      odpowiedz
    3. Paweł 10 miesięcy temu:

      Zastępuje, nie robi kopii.

      odpowiedz

Dodaj własny komentarz

Odnośniki z innych stron

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

  1. [»] Optymalizacja obrazów na blogu - narzędzie PunyPNG

    […] chyba przedstawiać. Sam dotychczas korzystałem z narzędzia, które poznałem dzięki wpisowi Prosty sposób na zmniejszenie rozmiaru plików graficznych w WordPressie. Służyło mi ono bardzo dobrze, ale dzisiaj postanowiłem zmienić je na wydajniejsze narzędzie […]

  2. przełam sieć

    Zmniejszanie obrazków w WordPress…

    Szymon w we wpisie Prosty sposób na zmniejszenie rozmiaru plików graficznych w WordPressie podał sposób na zmniejszenie obrazków używanych przez WordPress. Moim zdaniem podany sposób jest przerostem formy nad treścią, a do…