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

O bezpieczeństwie WordPress’a

O bezpieczeństwie WordPress’a

Żyjemy w czasach informacyjnych. Dosłownie informacja jest na wagę złota. Kto ma odpowiednią informację ten wygrywa. Wygrywa na polu biznesowym lub na polu walki. Dzięki informacji uzyskujesz przewagę, bo wiesz co lub gdzie, skąd, komu lub w końcu kiedy i za jaką cenę sprzedać. Za to historia konfliktów zbrojnych pokazuje, że zaskoczenie jest kluczowym czynnikiem decydującym o tym, kto wygra. WordPress napędza ponad 43% wszystkich witryn internetowych na świecie. Udział WordPress’a w stronach z panelem administracyjnym jest jeszcze większy, ponad 61%. Dlatego WordPress to bardzo ponętny kawałek.

Czy AI to tylko zabawka? Odczarowywanie tematu AI, rozmowa z prof. Piotrem Durką

Czy AI to tylko zabawka? Odczarowywanie tematu AI, rozmowa z prof. Piotrem Durką

Rozmowa, która powinna dość mocno rozwiać mgłę wokół tematu sztucznej inteligencji. Zajmuje niecałą godzinę, lecz każdy kogo nurtuje temat AI powinien ten materiał zobaczyć, aby „odczarować” swoje postrzeganie sprawy. Tak, odczarować, ponieważ w przytłaczającej większości ludzie mamieni są bełkotem sprzedawców, czyli marketing robi zamieszanie, a owczy pęd populacji podtrzymuje ten bełkot.

Empatia człowieka VS empatia sztucznej inteligencji

Empatia człowieka VS empatia sztucznej inteligencji

Dziś podczas pracy przy kodzie ChatGPT znowu zaczął mnie przepraszać za swoje pomyłki i tak mi się skojarzyło, jakie to AI jest kulturalne i nie ma przerostu ego. Jakiś czas temu wpadły mi w oko badania dotyczące poczucia empatii u swojego rozmówcy. Niestety nie pamiętam gdzie to wyczytałem, a chodziło o eksperyment, podczas którego grupę badanych osób skierowano na wywiad lekarski online. Część z lekarzy to byli ludzie z krwi i kości, a część AI wymodelowana pod tego typu działania. Badani oczywiście nie wiedzieli z kim mają do czynienia, a na koniec otrzymali ankietę do wypełnienia, w której były pytania również o empatię.