Oprogramowanie

Skompresuj grafikę, skróć czas ładowania strony!

speed

Odkąd Google przyznało, iż czas ładowania strony ma znaczenie podczas ustalania pozycji, każdy specjalista działający w branży SEO nie może przejść obojętnie obok tego tematu. Szybkość witryny ma zasadnicze znaczenie na stronach e-commerce, gdzie nawet najdrobniejsza zwłoka w załadowaniu podstrony może spowodować rezygnację użytkownika z obejrzenia oferty. Dlatego jednym z ważniejszych elementów w sklepach internetowych (w ogóle wszędzie tam, gdzie mamy do czynienia ze sprzedażą, czy to szkoleń, czy też produktów i usług) jest kwestia optymalizacji czasu ładowania podstron.

W tym scenariuszu bezpośrednio mamy do czynienia z sytuacją, gdzie długi czas ładowania powoduje utratę potencjalnego klienta. Klient wybierze kolejną stronę z wyników wyszukiwania, a my zostaniemy na lodzie. Możemy temu zapobiec!

Trimage image compressor, szybka kompresja png, jpg

Optymalizacja grafiki jest ściśle powiązana z działaniami SEO dlatego też często można spotkać na blogu artykuły poruszające tego typu zagadnienia. W niniejszym poradniku przedstawię kolejny darmowy program – Trimage. Aplikacja stanowi nakładkę (graficzny interfejs użytkownika) na optymalizatory takie jak optipng, pngcrush, advancecomp oraz jpegoptim, dedykowana na platformę Unix, mała, zgrabna, nieskomplikowana, pozwalająca uzyskać całkiem przyzwoite wyniki w bardzo krótkim czasie.

Trimage znajdziemy w repozytoriach wszystkich większych dystrybucji. Instalacja aplikacji w systemach Debian, Ubuntu, Linux Mint (pod konsolą):

sudo aptitude install trimage

Po instalacji w menu systemowym pojawi się nowy wpis Trimage image compressor. Celowo nie piszę konkretnej ścieżki, albowiem uzależnione jest to od środowiska, dystrybucji (na zrzucie Trimage w menu Linux Mint).

Mint Menu Trimage

Program przywita nas bardzo skąpym interfejsem, ale przecież nie to w nim jest najważniejsze. Kompresję rozpoczynamy od dodania zestawu plików (PNG, JPG). Możemy to zrobić na dwa sposoby, z wykorzystaniem metody drag and drop przeciągając wybrane pliki na okno programu lub używając przycisku Add and compress. Po zdefiniowaniu zestawu obrazków klikamy Recompress.

Trimage image compressor

Po pewnym czasie w oknie Trimage pojawią się statystyki: pierwotny rozmiar (Old Size), rozmiar po optymalizacji (New Size) oraz informacja o stopniu kompresji wyrażona w procentach (Compressed).

Jak program prezentuje się na tle konkurencji? Cóż… konkretnych testów nie przeprowadzałem, dlatego nie mogę przedstawić liczb, co gdzie i kiedy, natomiast po wstępnych oględzinach mogę powiedzieć, że obrazy kompresowane są błyskawicznie, nawet te o dużych rozdzielczościach, przez co Trimage świetnie nadaje się do szybkiego zmniejszania wagi plików.

Aby nie było tak różowo przyczepię się do stopnia kompresji, który nie powala na kolana. W procesie optymalizacji bierze udział tylko kilka narzędzi, zatem nie należy spodziewać się cudów. Stosując specjalistyczne skrypty optymalizacyjne można zwiększyć współczynnik, co zaowocuje skróceniem czasu ładowania elementów graficznych witryny.

O autorze

Mariusz Kołacz

Z zawodu mgr inż. informatyk, zwolennik nowoczesnych technologii i fan Nikoli Tesla. Prowadzi kilka blogów o tematyce technologicznej. Po godzinach lubi przeczytać dobrą książkę, pozwiedzać ciekawe miejsca w Polsce lub spędzić wolny czas na łonie natury.

11 komentarzy

  • Fakt zawsze przy tworzeniu witryny internetowej Joomla analizuje grafiki. I oczywiście jest to dylemat pomiędzy jakością grafiki a rozmiarem pliku. Zwykle korzystam a Photoshopa i exportu grafiki do internetu. Ale też tam można ustawić wielkość pliku wynikowego. Jaki wybrać? Przy ostatniej stronie nawet zrezygnowałem z plików PNG bo były za duże.

    • Widziałem taką opcję Save for Web czy jakoś tak, lecz niestety nie pomogę, do optymalizacji plików graficznych używam specjalistycznego oprogramowania (skryptów), realizacja zapisu do pliku pierwotnego dowolna, później obróbka i optymalizacja więc nie ma to wielkiego znaczenia jakie opcje wybiorę.

  • Niestety wiele osób zapomina nawet o skalowaniu obrazu zanim załadują go na stronę www zmniejszając go tylko za pomocą kodu html – obraz będzie mniejszy, ale jego waga już nie, przez co ładowanie znacznie się wydłuży.

    Gdy już przeskalujemy obraz warto jest jeszcze skompresować wtedy już niemal do minimum ograniczamy czas jego ładowania.

    • @Denis, na ogół jeśli mówimy o skalowaniu do 70% i mniej, większość obrazów będzie mniejsza od oryginału, zależy to od wielu czynników ale mówię o typowych zrzutach ekranu. Paradoksalnie obraz zmniejszony w ten sposób ma uboższe możliwości optymalizacyjne, większy zysk otrzyma się przy pierwotnym zrzucie. Jeśli skalowanie wynosi np. 80% oryginału w wielu przypadkach obraz będzie większy niż oryginał 100% (mówię wciąż o typowych zrzutach ekranu), jak dodamy zastosowaną optymalizację ten rozmiar można dodatkowo zbić. Generalnie typ postępowania zależy od konkretnego obrazu, co innego będzie dla zrzutów gradientowych, a co innego dla zrzutów nie posiadających przejść tonalnych. Optymalizacja grafiki to temat rzeka i nie ma uniwersalnych metod, które w każdym przypadku okażą się super skuteczne.

  • Witam 🙂
    Widzę, że u siebie na blogu także kontynuujesz temat optymalizacji grafiki. Myślę, że dla rozwiania wątpliwości i przekonania innych czytelników (także mnie ;)) mógłbyś rozwinąć temat skalowania obrazów. Wielu osobom wydaje się nielogiczne to, co piszesz o zwiększeniu rozmiaru pliku po zmniejszeniu jego wymiarów. Wiem, że masz rację i czasem rzeczywiście tak to wygląda, ale skoro zajmujesz się na poważnie optymalizacją grafiki, mógłbyś udowodnić swoje teorie i przedstawić to na jakiś przykładach, żeby wszystkim było jasne kiedy warto skalować zdjęcia, a kiedy nie.

    • Witaj,
      to nie teoria tylko praktyka 😉 Czym dłużej zajmuje się tym, tym więcej przypadków i wniosków, warto byłoby to spisać. Niestety wiele osób nawet nie zdaje sobie sprawy ile czynników trzeba uwzględnić w optymalizacji, nawet metoda skalowania jest istotna, każdy algorytm jest inny, przy Catmull Rom uzyskamy inny wynik, a dla Lanczos inny. Kolejność zastosowania optymalizatorów również jest ważna, jednym słowem to temat bardzo szeroki.

      Być może taki artykuł powstanie, natomiast już teraz zastanawiam się w jaki sposób najlepiej zaprezentować dane, tak aby każdy zrozumiał o co w tym wszystkim chodzi, wielostronicowa publikacja PDF lub rozbicie tego na kilka/kilkanaście mniejszych poradników hmm… nie lubię opisów czysto teoretycznych tylko praktyczne porady. Zobaczymy co z tego wyjdzie. Dzięki za propozycję.

  • Fajny program. Prosty w obsłudze.
    Oprócz wpływu na pozycjonowanie, wolne wczytywanie obrazków ma wpływ na ilość odwiedzin na stronie. Ja osobiście nienawidzę stron zrobionych we flashu które ładują się jakiś czas. W momencie gdy widzę, że strona mi się ładuję bardzo często zamykam ją. Podobnie sprawa wygląda z obrazkami. Gdy wczytują się wolno nawet jeżeli przeczytam interesujący mnie artykuł to raczej nie wracam do tej strony

  • Prosty w obsłudze programik!
    Wielkość obrazków, tudzież grafik ma wpływ na pozycjonowane strony. Warto poświęcić trochę czasu podczas optymalizacji na skompresowanie obrazków.

  • Czy jest możliwe, że plik który waży mniej (kompresja png na jpg) wpływa na dłuższy czas ładowania strony pomimo mniejszej jej wagi ? Proszę o odpowiedź

    • Zazwyczaj nie ale faktycznie są sytuacje, gdzie pozornie mniejszy plik będzie ładował się dłużej, ale to bardzo szeroki temat i kwestia czy faktycznie będziemy mieli do czynienia z paradoksem czy nie należy dyskutować w odniesieniu do konkretnego przypadku. Masz jakiś konkretny przypadek na myśli?

  • Narzędzie jest świetne. Dla systemów Windows polecam również TinyPNG. Na prawde sporo miejsca można zaoszczędzić 🙂 pozdrawiam

Kliknij tutaj aby skomentować