Optymalizacja obrazków na stronie

Poniżej przedstawiam case z optymalizacji obrazków na stronie internetowej i4a.pl – a wszystko po to, by oczywiście zwiększyć szybkość ładowania się strony. Zobacz krok po kroku jak przyśpieszyć swoją stronę optymalizując grafikę bez straty jakości.

Na początek sprawdzam jak szybko ładuje się strona. Użyłem do tego korporacyjnego narzędzia: PageSpeed Insights.

Wyniki testu szybkości dla strony i4a.pl:


Postaram się teraz zwiększyć prędkość. Operacja jest bardzo prosta i zajmuje nie więcej niż 5 minut.

Krok pierwszy. Ściągam z serwera wszystkie obrazki. Mam wszystkie obrazki w jednym folderze, więc biorę cały folder na dysk.
Pobranie programu. Ściągam teraz program, który praktycznie całą robotę odwali za mnie. Strona internetowa: http://pngquant.org/. Klikam tam „PNGoo — Windows GUI for batch conversion” i zapisuję na dysk. Po zapisaniu (mały plik) otwieram program.
Optymalizacja obrazków. Program jest prosty w obsłudze. Zaznaczam opcję „output to same directory”, dzięki temu pomniejszone pliki zostaną nadpisane, a te, których nie udało się powiększyć zostaną bez zmian. Wskazuję jeszcze tylko obrazki do zoptymalizowania i klikam „Go!”.
Podmiana obrazków. Teraz tylko wystarczy podmienić obrazki na serwerze.

No i sprawdzam ponownie szybkość:


Jak widać prostym sposobem udało się poprawić prędkość o 4 punkty dla komputerów, dla komórek bez zmian. Oczywiście postęp zależy tu głównie od nasycenia strony grafiką no i jakości wcześniejszej optymalizacji.

okazwłoka

Co jest grane?

12 thoughts on “Optymalizacja obrazków na stronie

  • Marzec 24, 2015 at 4:30 am
    Permalink

    dzięki, ostatnio zmagam się ze stroną fotografa, która miała bardzo dużo zdjęć w wysokiej rozdzielczości. program bardzo przyspieszy mi pracę

  • Marzec 24, 2015 at 7:57 am
    Permalink

    Fajne rozwiązanie, na pewno skorzystam z niego :)A powiedz mi czy na stronach wordpress z wtyczką smush it też trzeba optymalizować obrazki? W końcu ta wtyczka działa w podobny sposób.

  • Marzec 24, 2015 at 9:52 am
    Permalink

    Program fajnie działa na plikach png a znasz może jakiś co będzie przerabiał masowo pliki jpg ?

  • Marzec 24, 2015 at 10:26 am
    Permalink

    Teraz zasadnicze pytanie: Czy im większa wartość w tym narzędziu tym nasza strona może liczyć na wyższe pozycje w wyszukiwarce? Czy ma to jakiś wpływ, czy raczej to taki subiektywny wskaźnik dla webmastera, że strona działa dobrze.

  • Marzec 24, 2015 at 11:27 am
    Permalink

    Optymalizację jpegów widziałen na nacie, jest tego pełno szukając w googlu po „jpeg optimizer”.

    Nie znam tej wtyczki smush, więc nic nie napiszę. Ale możesz zrobić test z włączoną wtyczką i z wyłączoną.

    Pozycja a prędkość ładowania strony. Na pewno kilka oczek w tym teście nie ma zbytniego wpływu na pozycję. Trzeba by sprawdzić pozycje przy większych różnicach – zachęcam do przetestowania.

  • Marzec 25, 2015 at 2:22 pm
    Permalink

    @zenjo

    A powiedz mi czy na stronach wordpress z wtyczką smush it też trzeba optymalizować obrazki?

    Obecnie tak, bo Yahoo wyłączyło free wersję tej usługi o czym zostałeś poinformowany, chyba, że nie korzystasz z najnowszej wersji 😉 Ale są inne wtyczki i wówczas co chyba oczywiste nie trzeba. Bo po co się bawić w takie pobieranie obrazków, jak są bez naszej fatygi optymalizowane. Dla wcześniej wgranych odpala się masowe działania i wuala.

    ====

    @okazwłoka może jakieś zestawienie tego typu usług/narzędzi? Dla właścicieli stron statycznych lub innych pod które z jakiejś przyczyny nie można podpiąć narzędzia/usługi optymalizującej automatycznie obrazki, by się przydało 😀

  • Marzec 26, 2015 at 3:54 pm
    Permalink

    dzięki za info, ale nie mogę jakoś tego błędu wywołać 🙂

  • Kwiecień 1, 2015 at 3:10 pm
    Permalink

    Przydałoby się jeszcze dodatkowo sprzwdzenie tych parametrów dla obrazków złączonych w całość (tych małych, ikon i np. jakichś miniatur) i tylko odpowiednio pozycjonowanych za pomocą CSS.
    Wiadomo, że to się sprawdza tylko dla statycznych stron, ale im mniej żądań, tym lepiej. Warto byłoby wiedzieć, czy ma to sens, czy jest to pomijalne.

  • Luty 9, 2016 at 7:13 pm
    Permalink

    Bardzo interesujący ten program , przeanalizuje go sobie.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Title
Caption
File name
Size
Alignment
Link to
  Open new windows
  Rel nofollow