Jak przeprowadzić masową optymalizację zdjęć na potrzeby bloga i strony www

Żyjemy w czasach kiedy szybkość z jaką zdobywamy oraz przyswajamy informacje ma kolosalne znaczenie. Strona internetowa ładująca treści zbyt długo, zostanie porzucona a jej miejsce zastąpi inna wyszukana za pomocą wyszukiwarki google.

Jeżeli jesteś właścicielem bloga, strony WWW, sklepu internetowego to wiem, że jest to dla Ciebie scenariusz z koszmaru. Chcesz by Twoje treści trafiały do jak największej ilości osób.

Wielkość i rozmiar zdjęć lub grafik ma znaczenie

Z doświadczenia z pracy z klientami przy optymalizacji ich serwisów najczęściej spotykanym błędem jest wgrywanie zdecydowanie zbyt dużych plików graficznych na swoje strony internetowe. Rekordzista serwował swoim czytelnikom zdjęcia na blogu o wadze ponad 20 MB. Przy bardzo szybkim i stabilnym łączu Internetu światłowodowego dało się to przełknąć. Największy problem miały osoby korzystające z Internetu mobilnego, który jak wiemy posiada swoje limity mimo zapewnień operatorów, że takowych nie ma.

Jak optymalizować zdjęcia

Przechodząc do „mięsa”. Do dyspozycji mamy kilka możliwości.

Optymalizowanie grafik za pomocą wtyczek i dodatków do stron WWW

Jeżeli korzystasz na swojej stronie internetowej z popularnych systemów zarządzania treścią jak np.: WordPress możesz skorzystać z wtyczek, które mają za zadanie optymalizować wgrywane nań zdjęcia i grafiki. Nie chcę w tym wpisie opisywać obsługi i działania tychże. Poniżej, krótka lista wtyczek:

• ShortPixel Image Optimizer
• Smush Image
• Compress JPEG & PNG images (TinyPNG)
• EWWW Image Optimizer

Przy korzystaniu z wtyczek proszę o zachowanie ostrożności, czytaniu komunikatów i jeżeli jest dostępna dokumentacja o zapoznanie się z nią. Nie biorę odpowiedzialności za jakiekolwiek uszkodzenia i błędy wynikłe z ich działania. Procent, że coś pójdzie nie po Twojej myśli jest znikomy, zalecam jednak wykonanie backupu całej strony www.

Optymalizacja zdjęć online

Poza narzędziami, które możesz zainstalować na komputerze mamy do dyspozycji narzędzia online, które chwalą się bezstratną kompresją grafik. Jak być może zauważysz część będzie się pokrywać z powyższymi propozycjami.

• TinyPNG – https://tinypng.com/
• Optimizilla – https://imagecompressor.com/pl/

Wgrywasz zdjęcia do narzędzia. Po skończonej optymalizacji pobierz je i użyj na swojej stronie lub blogu.

Optymalizacja zdjęć lokalnie przy użyciu programów na własnym komputerze

Przechodząc do sedna tego wpisu. Optymalizację, czyli zmianę rozdzielczości oraz poziomu kompresji grafiki najlepiej wykonać już przed samym wgraniem na serwer. Do tego celu znajdziesz od groma programów i narzędzi – profesjonalnych i co za tym idzie płatnych (Photoshop, Bridge itp.)

Zamiast wydawać kilka tysięcy na oprogramowanie, z którego będziesz korzystać tylko na potrzeby optymalizacji grafik polecam skorzystać z darmowych alternatyw. Celowo pomijam tu skomplikowane dla początkujących programy open source jak np. Gimp a skupię się na narzędziach prostszych, które umożliwiają tzw. przetwarzanie wsadowe, czyli masową edycję. Do takich narzędzi możemy zaliczyć FastStone Photo Resizer, FastStone Image Viewer, IrfanView i wiele innych.

Na przykładzie tego ostatniego (IrfanView) pokażę w jaki sposób w własnym zakresie z optymalizować zdjęcia na własną stronę internetową lub bloga.

Masowa optymalizacja zdjęć za pomocą programu IrfanView.

Na początek, jeżeli nie masz programu zainstalowanego na komputerze to należy to jak najszybciej nadrobić 😉

Gdzie pobrać program IrfanView

Zawsze i bezdyskusyjnie zalecam pobierać oprogramowanie z oficjalnych źródeł.

Przejdź zatem pod adres: IrfanView

Pobierz wersję 64 bitową lub 32 bitową. Jeżeli nie masz „przedpotopowego” komputera wybierz 64 bitową wersję. Jeżeli mimo to nie zadziała, spróbuj z 32 bitową.

Liczę, że potrafisz instalować oprogramowanie na swoim komputerze, więc nie będę robił instruktarzu do tego punktu.

Polacy nie gęsi, więc opcjonalnie możesz doinstalować spolszczenie z poniższego adresu:
Strona z dodatkowymi językami do IrfanView

Spolszczenie jest dostępne w formie instalatora (installer) oraz w formie spakowanych plików, które należy przenieść ręcznie w miejsce, w którym program został zainstalowany (ZIP).

Po zainstalowaniu programu oraz pakietu spolszczającego uruchom program.

Optymalizujemy zdjęcia z pomocą przetwarzania wsadowego

Przed sobą widzisz główne okno programu IrfanView. Otwórz okno przetwarzania wsadowego korzystając z paska narzędzi: Plik > Przetwarzanie wsadowe (seryjne) lub korzystając ze skrótu klawiszowego [B].

W tej chwili możesz poczuć się troszkę przytłoczonym przez ilość opcji, jednak zapewniam, że raz wykonana operacja później będzie dla Ciebie banalna. Poniżej znajdziesz zrzut ekranu z wstępnie oznaczonymi opcjami.

1. Wykonuj: Wybierz „Wsadowa (seryjna) konwersja”
2. Ustawienia wsadowej konwersji:
   • Formaty wyjściowy ustaw na „JPG – JPG/JPEG Format” na dzień dzisiejszy nadal jest najpopularniejszym formatem obsługiwanym przez wszystkie przeglądarki.
   • Zaznaczamy „ptaszkiem” checkbox – „Użyj opcji zaawansowanych”
   • Do przycisków [Opcje…] oraz [Opcje zaawansowane…] wrócę później
3. Po prawej stronie masz wyszukiwarkę plików. Znajdź więc folder ze swoimi zdjęciami. Zaznacz pliki przeznaczone do optymalizacji i wciśnij przycisk [Dodaj] lub skorzystaj z przycisku [Dodaj wszystk.] by dodać wszystkie zdjęcia z folderu. Jeżeli masz w tym folderze więcej zdjęć w pod folderach musisz zaznaczyć checkbox przy opcji „Uwzględniaj podkatalogi (dla 'Dodaj wszystk.’).
4. Katalogiem docelowym zapisanych zdjęć po konwersji jest TEMP znajdujący się na dysku C (C://TEMP). Jeżeli nie chcesz szukać plików po całym dysku pozostaw tę opcję bez zmian. Dla mnie wygodniej jest zachować zdjęcia w katalogu, w którym znajdują się oryginalne pliki graficzne. Żeby nie szukać katalogu ze zdjęciami ponownie używam przycisku [Użyj obecnego katalogu jako docelowego]

Opcje i Opcje zaawansowane konwersji

Teraz wróć do przycisków z pkt. 2c. Otwórz okno ukryte pod przyciskiem [Opcje…]

1. Z doświadczenia najczęściej wybieraną przeze mnie wartością przy jakości jest 65%, artefakty nie gryzą jeszcze po oczach a waga pliku znacząco spada. Jeżeli pliki wynikowe Ci nie odpowiadają podwyższ tą wartość. Zachęcam do poeksperymentowania i sprawdzeniu jak zmiana jakości wpływa na pliki wynikowe pod względem wyglądu oraz wagi plików.
2. Resztę checkbox’ów odznaczamy, zostawiamy zaznaczone „Zapisz jako progresywny JPG”. Jeżeli jesteś fotografem to prawdopodobnie będziesz chciał pozostawić dane EXIF, w których znajdują się najczęściej informacje – jakim urządzeniem i na jakich ustawieniach zdjęcie zostało wykonane. Dla mnie te informacje są zbędne dlatego też je czyszczę.
3. Jeżeli często zmieniasz ustawienia możesz pozapisywać profile ustawień by przyśpieszyć pracę w przyszłości.
4. Zatwierdź ustawienia przyciskiem [OK]

Przejdź do [Opcje zaawansowane…]

W oknie „Zastosuj do wszystkich obrazów:” ustaw wszystkie ustawienia tak jak ja zrobiłem to na zrzucie poniżej. Pod zrzutem postaram się wyjaśnić najważniejsze ustawienia.

1. Ustawienia kadrowania pomijam, zalecam kadrować zdjęcia ręcznie. Jednak opcja sprawdza się jeżeli Twoje zdjęcia są w jakiś sposób powtarzalne (np.: zdjęcia produktowe, gdzie na wszystkich zdjęciach produkt jest nieco przesunięty).
2. Zmiana rozmiaru jest tu natomiast kluczowa, na tej zmianie możesz najwięcej zyskać. Na początek proponuję się zastanowić w jakiej rozdzielczości chcesz udostępnić zdjęcia Twoim odwiedzającym. Wybór zależy od przeznaczenia zdjęcia oraz rozdzielczości ekranu na jakim będą oglądane.
3. Jeżeli są to zdjęcia do sklepu internetowego wybrałbym 800px, natomiast zdjęcia do galerii internetowej to zatrzymałbym się na 1200px. Na zrzucie ekranu wpisałem 1000px dla szerokości oraz wysokości, by zdjęcie zostało przycięte do tej wartości po najdłuższym boku.
4. Ważne by zaznaczyć checkbox „Zachowaj pierwotne proporcje boków” niemile widziane są porozciągane nienaturalnie zdjęcia (chyba, że taki ma być zabieg artystyczny 😉 ).
5. Również ważne do zaznaczenia „Nie powiększaj mniejszych”. Nie chcesz zwiększyć rozmiaru plików, tylko go zmniejszyć. Rozpikselowane zdjęcia też nie są Ci potrzebne, a taki efekt byś uzyskał/a.
6. Zatwierdź ustawienia przyciskiem [OK]

Uruchomienie konwertera

Jeżeli zrobiłeś/aś wszystko wg powyższej instrukcji pozostaje Ci wcisnąć przycisk [Start]

Po zakończeniu otrzymasz raport z informacją ile plików zostało prze konwertowanych, czy były jakieś błędy oraz ostrzeżenia. Jeżeli wszystko poszło z planem skorzystaj z przycisku [Wyjście].

Sprawdź folder docelowy, w którym miały zapisać się pliki i ciesz się z optymalizowanych grafik.

Teraz już bez obaw możesz skorzystać z grafik na swojej stronie www lub blogu.

Optymalizacja grafik „awaryjnie” na Twoim smartfonie

Musisz przygotować wpis i zdjęcie na bloga a komputer/laptop został w domu? Bez obaw, w 95% przypadkach masz swojego smartfona przy sobie. Programów do edycji zdjęć na systemy mobilne jest od zatrzęsienia. Każdy znajdzie coś dla siebie.

Ja chcę Ci polecić program, który sam używam – Snapseed. Kadruj, dostosowuj, naprawiaj i na koniec eksportuj zdjęcia do wybranych ustawień. Nie można co prawda wpisywać ustawień „z palca” a jedynie wybrać predefiniowane ustawienia. Mimo wszystko polecam!

Jeżeli znasz inne warte uwagi oprogramowanie, które rozwiązuje powyższe problemy podziel się nim w komentarzach. Inni na pewno skorzystają.

Jeżeli spodobała Ci się powyższa treść, podziel się nią z innymi 🙂