Kompresja obrazu – co to jest, jak się to robi?

Zagadnienie związane z kompresją obrazu jest ciągle na czasie i nie traci na aktualności. Co więcej- temat obróbki grafiki na potrzeby stron internetowych zyskuje co raz większe znaczenie. Grafika potrafi zajmować znaczną część puli danych transferowanych z serwera na urządzenie użytkownika. Bywa, że jedno nieskompresowane zdjęcie, zajmuje tyle miejsca (czyli danych), że przekreśla wszystkie działania SEO na stronie.

Żeby było wszystko jasne: kompresja grafik to jeden z kilku czynników „pozycjonujących grafiki”. Na to jak Google ocenia grafiki, innymi słowy na pozycjonowanie grafik,  poza kompresją mają wpływ dopasowanie rozmiaru grafik, nazwa pliku, opisy ALT i Title. O tych czynnikach napiszę przy innej okazji.

No ale do brzegu, zanim zacznę rozpisywać się o narzędziach do kompresji grafik, należy wyjaśnić co to ta kompresja jest. W dużym skrócie, kompresja to sposób zmniejszenia „wagi” grafiki, np.: zdjęcia, przy zachowaniu tego samego rozmiaru. Czyli mamy zdjęcie 1024 x 768 (klasyczna tapeta Windows) i przy tych samych wymiarach z 1 MB danych chcemy zejść do 200KB. Jak to zrobić?

Bezstratna kompresja zdjęć

To wykorzystanie algorytmów matematycznych do uproszczenia zapisu danych. Przykładowo kolor czarny, u grafika komputerowego przyjmuje wartość RGB (red green blue) 0, 0, 0. Ten sam kolor u Web developera przedstawia się #000000. Kolor biały u grafika ma wartość RGB 255, 255, 255 a u Web developera #FFFFFF. Kolory online więc przedstawiane w wersji alfanumerycznej.

Kompresja polega na zapisaniu zamiast sześciu danych (sześciu F: FFFFFF) dwoma: 6F. Uzyskujemy więc ten sam efekt, przy oszczędności często przeszło 60% danych. 

Stratna kompresja zdjęć

Tu wyjaśnienie kompresji w sposób prosty jest praktycznie nierealne. Obraz jest dzielony na bloki, wyciągane są z nich średnie kolorów, oraz różnice pkseli w tych blokach, obraz RGB konwertowany jest na dwa kanały barwy (jasność i chrominację).  Następuje tak wiele nieodwracalnych procesów, że mówi się często o niszczeniu zdjęcia. O ile stopień zniszczenia, kompresji nie przekracza 1:20- 1:30 straty są względnie niezauważalne. Całość można porównać do przekonwertowania płyty audio do formatu mp3.

Przedstawione porównania i schematy są podane jedynie w celu wyobrażenia procesów i ich skutków. Nie są merytorycznym przekazem, który mógłby godzić matematyków, informatyków czy grafików.

Kompresja grafik- jak zrobić to dobrze?

Skoro już wiesz, co to jest kompresja grafik i wiesz, że to dość skomplikowany proces to może się Tobie wydawać, że jest to proces trudny w realizacji. Takich osób jak Ty, jest bardzo dużo i właśnie dla Was udostępnia się programy do optymalizacji grafik. Wybór jest przeogromny. Poniżej przedstawię kilka przykładowych, ale od początku. 

Najlepiej zasady pracy przedstawiać na praktyce. Jestem poznaniakiem, więc dla przykładu wybrałem najbardziej znany obraz w Poznaniu. Obraz pt: "Plaża w Pourville" Moneta, dzięki historii pt: kradzież dziesięciolecia zyskał sporą popularność. Nie będę tu robił kryminalnego offtopu. Jeśli porwała Cię ta niecodzienna zajawka zajrzyj na link na koniec artykułu. Wracając do sedna. Wybrałem się do Muzeum Narodowego i poprosiłem panią w kasie o instrukcje:

- chciałbym sfotografować tego Moneta, co to go jakiś pędzlarz rąbnął kilka lat temu. 

No i jest: Oryginał zrobiony lustrzanką. 5472 x 3648 pix zajmuje 3 137 536 B

Oryginalne zdjęcie obrazu w muzeum.

Wierzcie lub nie, ale zdarzało mi się, że ludzie mówiący o sobie businessmani i gazele biznesu wrzucali takie foty na swoje strony WWW. Nie widzieli nic złego w tym, że zdjęcie ładuje się dłużej niż ajfon. Nie przeszkadzało im, że kadr mógłby być lepszy. Ta niecodzienna awangarda w podejściu do prezentowanego produktu nie przekłada się na tzw User Experience. Co z tym można zrobić? 

Optymalizacja zdjęć- krok pierwszy: kadrowanie

Kadrowanie, czyli ujednolicenie formatu, proporcji lub po prostu obcięcie tego co zbędne. Strona nie jest ani o Monecie, ani o plażach, ani w sumie o grafice. Przeprowadziłem kadrowanie po poznańsku- oszczędnie. Skupiłem się na obrazie, tak aby poza ramą nie pozostawało zbyt wiele. Wiem, pogwałciłem tu złote proporcje i zapewne niejeden gust został tu zdeptany. Istotą zabiegu było kontrastowe przedstawienie zmiany. A wiec oto jest:

 Zdjęcie obrazu w muzeum po wykadrowaniu.

Jak wspomniałem, cięcie było toporne, ale efekty już widać. Brak jest fragmentu ściany, brak nieczytelnej tabliczki. 

Po kadrowaniu obraz ma wymiary 2516 x 2137 pix i zajmuje 2 301 952 B.

Jak widać, prostym zabiegiem jednocześnie usunąłem szpetne elementy grafiki, wydobyłem to co istotne na zdjęciu i ... oszczędziłem 26% danych! To nie wszystko. 

 

Optymalizacja zdjęć- krok drugi: zmiana rozmiaru

Uważny czytelnik zaniepokoi się faktem, że zdjęcie  po kadrowaniu ma 2516 pixeli szerokości. Z moich informacji wynika, że 45% sesji na stronie z urządzeń typu desktop ma ekrany o szerokości 1920 pixeli. Obraz (w sensie zdjęcie) jest więc wiekszy niż większość monitorów na których się ta strona wyświetla. Ba, sam obraz na stronie także nie wyświetla się na 100% szerokości ekranu. Maksymalna szerokość grafiki na tej stronie to 940 pix. 

 Zdjęcie obrazu w muzeum po wykadrowaniu i dopasowaniu rozmiaru do strony WWW.

 

Po kolejnej obróbce obraz ma wymiary 920 x 781 pix i zajmuje 425 984 B. Jest to więc 86% oszczędność danych (2 711 552 B) względem szalonego "oryginału". Tu znów, uważny czytelnik mógłby wskazać, że szerokość zdjęcia jest 20 pix mniejsza niż szerokość kolumny z tekstem. Otóż tak: zdjęcie ma 10 pix marginesy po bokach. 10 po lewej i 10 po prawej, stąd 20 pix węższy obraz. 

Optymalizacja zdjęć- krok trzeci: kompresja

Do tej pory, przetwarzanie zdjęć odbywało się łatwo i z ewidentną korzyścią dla oglądającego. Uwidaczniałem "sedno sprawy", pozbywałem się zbędnych elementów, dostosowałem rozmiar grafiki do przeglądarki. Teraz zaczyna się czarowanie- które nie zawsze udaje się realizować z sukcesem. 

 

 Zdjęcie obrazu w muzeum po wykadrowaniu, dopasowaniu rozmiaru do strony WWW i kompresji.

 

Tu skupię się na liczbach: Zdjęcie przy zachowaniu rozmiarów ma 81 920 B co oznacza, że względem oryginału oszczędzam 97% danych. Zamiast jednego niezoptymalizowanego zdjęcia, mogę zaproponować czytelnikowi 38 zoptymalizowanych grafik. 

Pro Tip:
Jeśli czujesz się na siłach i chcesz samodzielnie optymalizować grafiki- nie szczędź sobie miejsca na dysku na kopie zapasowe. 

Kompresję realizowałem przez program TinyPng. Jest jednak ich masa. Inne sprawują się lepiej przy kompresji masowej, inne przy pojedyńczych plikach. Jedne bardzo oszczędzają dane- często kosztem jakości grafiki, inne są mniej wydajne ale grafika trzyma jakość. O ich wyborze i różnicach napiszę niebawem. 

[edit 2020 09 14]

Nie było lekko, ale zgodnie z obietnicą naskrobałem krótki artykuł o kompresji zdjęć na stronę WWW. Znajdziesz go >> tutaj <<

 

Optymalizacja zdjęć- opcjonalnie: konwersja

 Zdjęcie obrazu w muzeum po wykadrowaniu, dopasowaniu rozmiaru do strony WWW, kompresji i finalnie konwersji

 

Konwersja do formatu webp to o tyle kłopotliwy temat, że przy przetwarzaniu już istniejących grafik- trzeba w kodzie zmienić ich format. Czy warto? Spójrz na liczby: 36 864 B to waga finalnego pliku. W mojej opinii z pewnością warto pamiętać o tym formacie przy nowych treściach. 

 

 Optymalizacja zdjęć- ile to kosztuje?

Tak jak ze wszystkimi pracami w IT, koszt zależy od ilości poświęconego czasu, użytych narzędzi i klasy fachowca realizującego zadanie. O narzędziach już nieco wiesz, fachowca zapewne juz znasz, więc rozwinę kwestię czasu. 

• Optymalizacja grafik przy nowych treściach - jest względnie najszybszym procesem. Przetwarzane są paczki plików przed zamieszczeniem na serwer. Prace postępują regularnie i sukcesywnie wraz z rozwojem strony WWW. 
• Optymalizacja grafik konkretnego adresu URL. Często wykonuję tą pracę, choć jej bardzo nie lubię. Optymalizowane są konkretne grafiki, które uprzednio trzeba pobrać. Dużo czasu zajmują tu same operacje na plikach.
• Optymalizacja całego serwisu. Tu praca idzie względnie gładko, bo operacje na plikach są bardzo proste. Problemem jest skala działań. Jeśli masz w sklepie 10 kategorii a tam 10 podkategorii i wszędzie 10 produktów, a każdy ma 4 zdjęcia- to znaczy że do przetworzenia jest minimum 4 tys grafik. Często zdjęcia przechowywane są w kilku rozmiarach i optymalizacja możliwa jest tylko dzięki wydajnej karcie graficznej. Niepodważalną zaletą takiego podejścia jest fakt, że zoptymalizowane są wszystkie grafiki- co w pewnym sensie zamyka temat na dłuższy czas.

Omawiajac kwestie wynagrodzenia, wskazuję na to, ze zawsze każda praca musi być weryfikowana. Podobnie sprawa dotyczy grafik. Każda optymalizacja to pobranie plików, utworzenie kopii zapasowej, przetwarzanie plików, kontrola jakości i wgranie nowych, zoptymalizowanych grafik. Praca nie jest zbyt skomplikowana, ale wymaga wiedzy, doświadczenia a finalnie na każdej jednej grafice musi się zatrzymać oko i ocenić jakość pracy. 

 

Jak często optymalizować grafiki

Sam do kwestii optymalizacji grafik wracam co 3-4 miesiące. Ciągły postęp technologiczny i nowe algorytmy kompresji grafik sprawiają, że trzeba być ciągle "na fali". Zaniedbanie tej sprawy może pociągnąć trudne do odwrócenia konsekwencje. 

obiecana opowieść o 

obrazie Moneta Plaży w Pourville

oraz niecodziennej kryminalnej miłości do sztuki

 

 https://gloswielkopolski.pl/odzyskano-skradziony-9-lat-temu-obraz-moneta/ar/208774