iMagazine

ImageOptim dla OS X – skompresuj obraz bezstratnie (lub nie)

03/11/2015, 07:30 · · · 8

Pomimo że strona iMagazine jest dla Was darmowa do czytania, to wchodząc tutaj ponosicie  inne koszty – musicie zużyć trochę prądu w smartfonie, pobrać odpowiednią ilość danych niezależnie od platformy i być może nawet obciążyć pakiet internetowy u operatora, jeśli takowy macie. O ile na stacjonarnym komputerze podłączonym do szerokopasmowego internetu raczej tego nie odczujecie, to w innych sytuacjach już tak, szczególnie na 3G lub Edge.

Właśnie w tym celu korzystam z programu ImageOptim – jest darmowy i przeznaczony dla OS X1 – którego jedynym zadaniem jest bezstratne lub stratne kompresowanie zdjęć przeznaczonych do publikacji w internecie. Obsługuje dwa najważniejsza formaty – PNG i JPG. Program może przy okazji również wyciąć ze zdjęcia metadane, tj. EXIF, dane geolokalizacyjne, profile kolorów, itd.

Moja konfiguracja

ImageOptim config 01

Najważniejsze dla mnie jest takie ustawienie ImageOptim, aby nie wycinał dodatkowych informacji dołączonych do zdjęcia – często nie mają one większego znaczenia z różnych powodów, ale czasami mają ogromne. Te zmiany dokonuje się w preferencjach programu, w zakładce OgólneGeneral.

ImageOptim config 02

ImageOptim domyślnie kompresuje zdjęcia bezstratnie. W przypadku JPG jest to zazwyczaj sporo, ale przy PNG zyski są znikome. Dlatego w sytuacjach wymagających jeszcze mniejszych plików włączam tymczasową stratną kompresję. Robi się to w preferencjach, w drugiej zakładce Jakość Quality.

Przykład

Tomek wczoraj opublikował artykuł na temat Web Summit i dołączył do niego zdjęcia o rozdzielczości ponad 3000 px na długim boku. Staramy się na iMagazine mieścić w przedziale 2000-3000 px na szerokość, aby poprawnie obsługiwać Wasze Retiny, ale jednocześnie staramy się zejść poniżej 500 KB dla pojedynczego zdjęcia.

ImageOptim example 01

Bez uprzedniego zmniejszania rozdzielczości zdjęcia, wrzuciłem go do ImageOptim. Ograniczył on jego rozmiar o 7,7%, z nieznacznie ponad 2 MB do 1.86 MB. Za mało.

ImageOptim example 02

Po włączeniu stratnej kompresji, ustawionej na 80%, rozmiar zjechał do 841 KB. Gdybym dodatkowo ograniczył jego rozdzielczość do 2000 px (przed uruchomieniem ImageOptim), to uzyskałbym wynik nieznacznie ponad 300 KB. To ogromna różnica.


Dla większości ludzi ta stratna kompresja jest niezauważalna, a zyski są tego warte. Osobiście nie schodzę poniżej 80% jeśli absolutnie nie muszę, a często oscyluję w rejonie 90% na suwakach jakości.


★ ImageOptim – OS X – za darmo

  1. Nie ma niestety żadnego zbliżonego odpowiednika dla iOS, uprzedzając pytania dla tych z Was, którzy są #iPadOnly.
8

Wojtek Pietrusiewicz

Wydawca, fotograf, podróżnik, podcaster – niekoniecznie w tej kolejności. Lubię espresso, mechaniczne zegarki i zwinne samochody. Niedawno rozpocząłem prowadzenie kursów Lightrooma i fotografii na Pikselowe.pl – zapraszam.

morid1n

Dodaj komentarz

Dariusz Grabowski napisał(a):

Bardzo fajny wpis. Odnośnie tego mam takie pytanie – czy możecie się podzielić statystykami ile osób odwiedzających iMagazine ma retiny gdzie szerokość jest większa niż 2000px? Czy planujecie wprowadzić obsługę img srcset by oszczędzić ładowanie 0.5MB plików osobom korzystającym ze sprzętów o mniejszych rozdzielczościach? http://caniuse.com/#search=srcset

Moridin napisał(a):

srcset mogę włączyć w każdej chwili, ale obawiam się braku kompatybilności…

Stanisław Olszak napisał(a):

Tu nie powinno być problemu, bo możesz dodać zwykły src awaryjnie dla sam-wiesz-której-przeglądarki ;) Oprócz tego jest jeszcze Picturefill, który nieźle wspiera starsze i bardziej ułomne przeglądarki.

Dariusz Grabowski napisał(a):

Jako czytelnik iMagazine poproszę o włączenie srcset – jadąc pociągiem gdzie w większości trasy jest tylko EDGE zrobi to dużą różnicę :)
Najnowszy wpis „iPad nie ma kalkulatora” waży 4MB :( Trochę dużo jak na 800 słów + dwie grafiki.

Według caniuse.com w Polsce pokrycie przeglądarek obsługujących srcset wynosi 74% (globalnie 65%). Zresztą co tu dużo mówić: Safari obsługuje, Chrome i Firefox też :)
Poza tym tak jak napisał Stanisław Olszak – bardzo łatwo uzyskać wsteczną kompatybilność.

Dariusz Grabowski napisał(a):

Najnowsza wersja WP włącza srcset z automatu, więc nie trzeba nic włączać tylko wystarczy update. http://www.wpbeginner.com/news/whats-coming-in-wordpress-4-4-features-and-screenshots/

Stanisław Olszak napisał(a):

No to jeszcze serwowanie obrazów o mniejszych wymiarach dla mniejszych ekranów :)

P.S. W artykułach wysyłacie każdy obraz w wersji @1x i @2x :(

Moridin napisał(a):

Cześć. Tu Wojtek z przyszłości dziękujący Wojtkowi z przeszłości, że to spisał. ;-)

Lokinpl napisał(a):

Dzięki. Fajny automacik.
Lubię takie narzędzia!