Prosty sposób na zmniejszenie rozmiaru zdjęć dla stron internetowych

11 maja 2016 | Po godzinach - Wszystkie wpisy, Poradnik | 3 Komentarze

Szybkość komputerów i łącz internetowych wzrasta, dlatego coraz mniej osób zwraca uwagę na wielkość zdjęć umieszczanych na swoich stronach. A warto, ponieważ rośnie także ilość użytkowników korzystających z urządzeń mobilnych do przeglądania stron internetowych. Internet mobilny z reguły jest znacznie wolniejszy od stacjonarnego.

rysiu

Jest jeszcze drugi ważny powód – już od 2010 roku Google daje znać na swoim oficjalnym blogu, że na pozycje w wynikach szukania tej największej wyszukiwarki wpływ ma także szybkość ładowania stron internetowych.

Oczywiście ciężar obrazków jest jedną ze składowych szybkości ładowania stron, jednakże warto poświęcić chwilę na dopracowanie tego aspektu swojej witryny internetowej. Proces optymalizacji dużo czasu nie zajmie a plusy mogą być znaczące. Mam tu na myśli „user experience” czyli wrażenia użytkownika podczas przeglądania strony internetowej. Jeśli witryna wolno się ładuje zniechęca to do dalszych jej odwiedzin.

irfanikonDo optymalizacji plików JPG polecam program Irfan View. Jest darmowy do użytku domowego, natomiast jeśli chcesz wykorzystywać go w firmie należy zakupić licencję. Kosztuje niewiele jak na swoje możliwości – 45,2 zł netto. Można skorzystać ze sklepu polskiego dystrybutora. I jest to jedyna wada programu jeśli chodzi o użytek komercyjny, no może prócz jego ikonki przypominającej rozjechanego kota 😉

Proces zmniejszania wielkości obrazków w formacie JPG przebiega niesamowicie prosto.

  • Otwieram obrazek, następnie w menu wybieram: Plik / Zapisz jako.
  • Jeśli nie jest wybrany format JPG klikam w „Zapisz jako typ” i wybieram JPG.
  • Obok dużego okna powinienem zobaczyć mniejsze okienko, z zaznaczonymi ptaszkami. Jeśli go nie widać klikam w „Pokaż okno opcji” na samym dole dużego okna.
  • W małym okienku z opcjami odznaczam wszystkie ptaszki i ustawiam jakość na 80. Kliknij na obrazku poniżej, tam zaznaczyłem wszystkie kluczowe pola.
  • Teraz pozostało już tylko kliknąć w „Zapisz”.

irfan1

Jakość 80 jest wystarczająca na potrzeby Internetu, zdjęcia będą ostre, z niewielką ilością zniekształceń. Tak, będą małe artefakty, ponieważ format JPG to tak zwana stratna kompresja obrazu. Czyli zyskujemy na mniejszym ciężarze obrazka kosztem jego jakości. Tak więc warto zostawiać oryginały do dalszej obróbki.
Przy ustawieniach zapisu jakie wyżej podałem wielkość obrazka spada średnio o 5 razy, to jest bardzo dużo.

Omówiłem sposób optymalizacji plików JPG, ale w użyciu są jeszcze pliki PNG. Korzysta się z nich rzadziej, ale i je warto zoptymalizować. Do tego celu służy program PNGOUT. Jest to mikroskopijna aplikacja obsługiwana linią komend, tak więc dla przeciętego użytkownika komputera jest niezrozumiała. Ale jest i pomoc. Także do tego celu przyda się Irfan View!
Co prawda trzeba poklikać trochę więcej, ale niezbyt wiele. Należy pobrać paczkę z pluginami ze strony IrfanView i zainstalować. Domyślnie PNGOUT nie jest zainstalowany, a szkoda.

Jeśli PNGOUT z jakiegoś powodu nie trafi do właściwego katalogu, a taki miałem sygnał od znajomego, który instalował go na nowym komputerze, należy wtedy pobrać sam plik PNGOUT ze strony jego autora i wgrać go do podkatalogu „plugins” w katalogu w którym jest zainstalowany Irfan View. W zależności od wersji (32 lub 64 bity) może to być folder „pliki programów (x86)” lub „program files”.

Następnie:

  • Otwieram plik PNG.
  • Klikam w menu: Plik / Zapisz zoptymalizowany (moduł).
  • Pojawi się dodatkowe okienko, w nim wybieram „PNG”.
  • W opcjach ustawiam:
    » Color reduction: 128 lub więcej, można poeksperymentować jaki efekt przyniesie ograniczenie ilości kolorów, ponieważ mamy podgląd na żywo,
    » Color quantization algorithm: NeuQuant neural-net (slow).
    » Externals Optimizers: PNGout Xtreme (very slow).
  • Pozostało już tylko zapisać plik i tu ważna sprawa – zapisuję wchodząc w menu w okienku optymalizacji PNG, a nie w okienku głównym w którym otworzyłem obrazek. Dodatkowe okienko pomimo spolszczenia IrfanView posiada angielskie napisy. W nim wybieram: File / Save us.

irfan2

Przy okazji Irfan View to doskonała przeglądarka obrazków, osobiście z niego korzystam od lat.
Program posiada też spolszczenie oraz wiele użytecznych pluginów. I wszystko instalowane jest automatycznie po uruchomieniu pliku EXE pobranych ze strony twórcy aplikacji.

A kotek na zdjęciu to obywatel ZOO z Myślęcinka. Wygląda znacznie sympatyczniej niż ikonka Irfan View, choć przy zdjęciach nie pomoże. Zaraz, zaraz, no przecież ryś pięknie pozował, a to też pomoc! 😉

Autor tekstu:

Autor tekstu:

Tomasz Bartosiewicz - Ojciec dyrektor

Ojciec bo pełni funkcję taty dla dwójki cudownych dusz, a dyrektor, bo jest szefem w ITB Vega 😉
Co mnie kręci: świat technologii oraz jak można go użytecznie wykorzystywać, maratony w basenie, wędrówki po starych górach, robienie zdjęć.
Mieszkam i pracuję w Bydgoszczy, ale wykonuję sporo prac zdalnych. Jeśli szukasz kogoś do stworzenia strony internetowej lub do jej aktualizacji, zadzwoń, z przyjemnością porozmawiam o Twoich potrzebach
507 96 11 46

3 komentarze

  1. Radek

    dzięki za receptę na mniejsze fotki
    skutecznie skorzystałem
    i pogłaskał rysia z podziękowaniem 🙂

  2. Tomasz Bartosiewicz

    Miło słyszeć, że moja paplanina do czegoś się przydaje 🙂
    A rysia łapałem z daleka, teleobiektywem. W ZOO do drapieżników nie da się podejść blisko, to oczywiście ze względów bezpieczeństwa.

  3. Michalina

    Dziękuję! Skutecznie zmniejszyłam swoje fotki, których jest dużo na stronie. Potem zrobiłam testy z wyczyszczoną pamięcią w przeglądarce i faktycznie zauważyłam wyraźny wzrost szybkości ładowania stronki. Super!
    Rysiu jest śliczny, żeby mieć taki portret chyba blisko podszedłeś?

Wyślij komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Po godzinach

Wielkie zmiany w pozycjonowaniu stron internetowych

Wielkie zmiany w pozycjonowaniu stron internetowych

Można to śmiało nazwać rewolucją, a zbliża się ona wielkimi krokami. Niektórzy spece od SEO zaczynają to zauważać i czasami gdzieś w sieci można spotkać ciekawe analizy. Wynika z nich, że strony www, którymi się opiekują piszący, przyciągają duży ruch, który jest niewspółmiernie wielki do środków jakie włożono w linkowanie. I to jest najbardziej zaskakujące, ten stosunek działań do efektów, zwłaszcza pod kątem linkowania.

Ghost in the Machine, IBM NorthPole, zasobożerność procesów myślowych i kreatywność sztucznej inteligencji

Ghost in the Machine, IBM NorthPole, zasobożerność procesów myślowych i kreatywność sztucznej inteligencji

Tytuł wpisu to zbiór tematów, które przy niedzieli mnie naszyły, a że pod czaszką kipi kreatywność, to pozwalam jej się wydostać przy pomocy klawiatury. A i że kocham muzykę wszelkiej maści, to dziś się też podzielę pewnym smacznym kąskiem, który idealnie pasuje do mojego pisania o sztucznej inteligencji i jej zagrożeniach wynikających z jej rozwoju, bo i o tym też wspomnę.

Przyszłość WordPress, czyli najpopularniejszego systemu CMS na planecie Ziemia

Przyszłość WordPress, czyli najpopularniejszego systemu CMS na planecie Ziemia

Zastanawiasz się może nad przyszłością WordPress’a? Pewnie nie. No chyba, że twój biznes oparty jest o tworzenie lub obsługę stron internetowych i czasami sprawdzasz czy twoje narzędzia mają potencjał w przyszłości. Albo może jesteś amatorem, który dzierga strony wieczorowo i sprawdzasz czy ten WordPress jeszcze długo pociągnie. A może ktoś Ci stawia stronę na WordPress’ie i chcesz dowiedzieć się czy długo ona podziała? Jeśli zastanawiasz się nad przyszłością WordPress’a to zapraszam do lektury.

CSS before i after dla Google są za ścianą

CSS before i after dla Google są za ścianą

Na oficjalnym profilu Google na platformie X pojawił się wpis „Zalecamy, aby nie dodawać znaczących treści ani symboli za pomocą pseudoelementów CSS ::before i ::after”. Spece z Google stwierdzają, że takie treści nie mogą być wykorzystywane do indeksowania stron. Jako ciekawostkę można dodać, że nie jest to zmiana w działaniu wyszukiwarki Google. Została ona po prostu wspomniana w dokumentacji.

Wyszukiwarka Bing + AI = Coś niespotykanego!

Wyszukiwarka Bing + AI = Coś niespotykanego!

Jest taki tort, który zwie się wyszukiwarki internetowe. Microsoft chciał chapnąć z niego większy kawałek. Zapewne firma widziała okazję na zmniejszenie dominacji Google. Na początku roku, bo to jakoś w lutym było, Microsoft ogłosił uruchomienie ChatGPT w swojej wyszukiwarce Bing. Oczywiście wszystko dostępne tylko we własnej przeglądarce Edge. Upłynęło kilka miesięcy, można ocenić skutki – co wyszło z tego połączenia?