Wsp贸艂czesna grafika cz臋sto stanowi wi臋kszo艣膰 danych pobieranych przez stron臋 www, jak r贸wnie偶 zajmuj膮 du偶o miejsca na same witrynie. Z tego wzgl臋du optymalizacja obraz贸w mo偶e cz臋sto przynosi膰 najwi臋ksze oszcz臋dno艣ci w zakresie ilo艣ci pobranych danych i najwy偶sze wzrosty wydajno艣ci wczytywania stron witryny: im mniej danych musi pobra膰 przegl膮darka, tym mniejsza konkurencja o pasmo u klienta i tym szybciej przegl膮darka mo偶e pobiera膰 i renderowa膰 u偶yteczn膮 tre艣膰 na ekranie.

Optymalizacja obraz贸w to zar贸wno sztuka, jak i nauka: sztuka, poniewa偶 nie ma jednej w艂a艣ciwej odpowiedzi, jak najlepiej skompresowa膰 dany obraz; nauka, poniewa偶 opracowano wiele technik i algorytm贸w umo偶liwiaj膮cych znaczn膮 redukcj臋 rozmiaru obrazu. Znalezienie ustawie艅 optymalnie dobranych do obrazu wymaga dok艂adnej analizy wielu aspekt贸w: mo偶liwo艣ci formatu, zawarto艣ci kodowanych danych, jako艣ci, rozmiaru w pikselach i innych.

Eliminowanie i zast臋powanie obraz贸w

TL;DR

  • Wyeliminuj niepotrzebne obrazy
  • Wykorzystaj efekty CSS3 wsz臋dzie tam, gdzie to mo偶liwe
  • Zastosuj czcionki sieci web zamiast kodowania tekstu na obrazach

Podstawowym pytaniem, kt贸re trzeba zada膰: czy obraz jest naprawd臋 potrzebny do osi膮gni臋cia wymaganego efektu? Dobry projekt jest prosty i zawsze umo偶liwia osi膮gni臋cie najwy偶szej wydajno艣ci. Je艣li mo偶na wyeliminowa膰 zas贸b obrazu cz臋sto wymagaj膮cy pobrania du偶ej ilo艣ci danych w stosunku do wielko艣ci znacznik贸w HTML i CSS oraz kodu JavaScript i innych zasob贸w na stronie, jest to zawsze najlepsza strategia optymalizacji. Jednak trzeba pami臋ta膰, 偶e obraz w dobrym miejscu mo偶e przekaza膰 wi臋cej informacji ni偶 tysi膮c s艂贸w, tak wi臋c potrzebny jest kompromis.

Zastan贸w si臋, czy dost臋pna jest technologia alternatywna pozwalaj膮ca uzyska膰 偶膮dane rezultaty w bardziej efektywny spos贸b:

  • Zastosowanie efekt贸w CSS (gradient贸w, cieni itp.) i animacji CSS pozwala uzyska膰 ostro艣膰 wy艣wietlania niezale偶nie od rozdzielczo艣ci i stopnia powi臋kszenia. Rozmiar takiego pliku to cz臋sto u艂amek rozmiaru pliku graficznego.
  • Czcionki sieci web umo偶liwiaj膮 wy艣wietlanie tekst贸w w wyrafinowany spos贸b przy zachowaniu zdolno艣ci do zaznaczania, wyszukiwania i zmiany rozmiaru tekstu, co skutkuje znacznym polepszeniem funkcjonalno艣ci.

Je艣li kiedykolwiek zaczniesz kodowa膰 tekst na obrazie, wstrzymaj si臋 i po艣wi臋膰 chwil臋 czasu na zastanowienie. Doskonale wygl膮daj膮ce czcionki to podstawa dobrego projektowania, budowania marki i czytelno艣ci. Jednak tekst na obrazach nie zapewnia wygody u偶ytkownikom: takiego tekstu nie mo偶na zaznacza膰, wyszukiwa膰 ani dowolnie powi臋ksza膰. Nie odczytuj膮 go aplikacje u艂atwiaj膮ce dost臋p niepe艂nosprawnym. Nie jest poprawnie wy艣wietlany na urz膮dzeniach o du偶ej rozdzielczo艣ci. U偶ycie czcionek sieci web wymaga zastosowania osobnych regu艂 optymalizacji, ale stanowi odpowied藕 na wszystkie powy偶sze zastrze偶enia. Zawsze stanowi lepsze rozwi膮zanie w przypadku wy艣wietlania tekstu.

Grafika wektorowa a rastrowa

TL;DR

  • Grafika wektorowa spisuje si臋 idealnie w przypadku obraz贸w zawieraj膮cych kszta艂ty geometryczne
  • Grafika wektorowa zachowuje ostro艣膰 niezale偶nie od rozdzielczo艣ci i stopnia powi臋kszenia
  • Grafik臋 rastrow膮 stosuje si臋 w przypadku z艂o偶onych scen z wieloma nieregularnymi kszta艂tami i detalami

Po ustaleniu, 偶e to w艂a艣nie obraz pozwoli osi膮gn膮膰 zamierzony efekt, nast臋pnym wa偶nym krokiem jest wyb贸r odpowiedniego formatu:

Powi臋kszony obraz wektorowy
Grafika wektorowa
Powi臋kszony obraz rastrowy
Grafika rastrowa
  • W przypadku grafiki wektorowej obraz jest reprezentowany przez linie, punkty i wielok膮ty.
  • W przypadku grafiki rastrowej warto艣ci ka偶dego z pikseli s膮 kodowane w prostok膮tnej matrycy.

Ka偶dy format ma swoje zalety i wady. Formaty wektorowe nadaj膮 si臋 idealnie do reprezentacji obraz贸w zawieraj膮cych proste kszta艂ty geometryczne (np. logotypy, tekst, ikony), je艣li wymagane jest zachowanie ostro艣ci przy ka偶dej rozdzielczo艣ci i przy ka偶dym stopniu powi臋kszenia. Czyni to je idealnymi formatami dla ekran贸w o wysokiej rozdzielczo艣ci i wy艣wietlania zasob贸w w r贸偶nych rozmiarach.

Jednak formaty wektorowe ujawniaj膮 swoje wady, gdy scena jest skomplikowana (jak w przypadku zdj臋cia): wielko艣膰 kodu SVG wymagana do opisu wszystkich kszta艂t贸w mo偶e okaza膰 si臋 nie do zaakceptowania, a obraz wyj艣ciowy nadal nie wygl膮da膰 fotorealistycznie. W takich przypadkach lepiej jest stosowa膰 formaty rastrowe, takie jak GIF, PNG, JPEG, lub jeden z nowszych: JPEG-XR lub WebP.

Obrazy rastrowe nie gwarantuj膮 niezale偶no艣ci od rozdzielczo艣ci i stopnia powi臋kszenia 鈥 przy ich powi臋kszaniu widoczne staj膮 si臋 poszarpane i rozmyte obszary. Z tego wzgl臋du mo偶e by膰 konieczne zapisywanie wielu wersji obraz贸w rastrowych o r贸偶nych rozdzielczo艣ciach, co zapewni u偶ytkownikom r贸偶nych urz膮dze艅 najwy偶szy poziom wygody.

Konsekwencje stosowania ekran贸w o wysokiej rozdzielczo艣ci

TL;DR

  • Na ekranach o wysokiej rozdzielczo艣ci na jeden piksel CSS przypada wiele pikseli urz膮dzenia
  • Obrazy o wysokiej rozdzielczo艣ci wymagaj膮 znacznie wi臋kszej liczby pikseli i ilo艣ci danych
  • Techniki optymalizacji obraz贸w s膮 takie same niezale偶nie od rozdzielczo艣ci

Rozpatruj膮c piksele obrazu, musimy rozr贸偶ni膰 r贸偶ne rodzaje pikseli: piksele CSS i piksele urz膮dzenia. Jeden piksel CSS mo偶e zawiera膰 wiele pikseli urz膮dzenia 鈥 np. jeden piksel CSS mo偶e odpowiada膰 bezpo艣rednio jednemu pikselowi urz膮dzenia albo wielu pikselom urz膮dzenia. Dlaczego tak jest? Im wi臋cej pikseli wy艣wietla urz膮dzenie, tym dok艂adniej mo偶na odwzorowa膰 tre艣膰 na ekranie.

Piksele CSS a piksele urz膮dzenia

Ekrany o wysokiej rozdzielczo艣ci DPI (HiDPI) wy艣wietlaj膮 ol艣niewaj膮cy obraz, ale ma to swoj膮 cen臋: zasoby obraz贸w musz膮 lepiej oddawa膰 detale. Dobr膮 wiadomo艣ci膮 jest to, 偶e obrazy wektorowe idealnie nadaj膮 si臋 do tego celu, poniewa偶 mo偶na je renderowa膰, zachowuj膮c ostro艣膰, przy dowolnej rozdzielczo艣ci 鈥 koszt przetwarzania przy wi臋kszej szczeg贸艂owo艣ci mo偶e by膰 wi臋kszy, ale zas贸b pozostaje taki sam niezale偶nie od rozdzielczo艣ci.

Obrazy rastrowe stanowi膮 du偶o wi臋ksze wyzwanie, poniewa偶 ka偶dy piksel jest kodowany osobno. St膮d du偶a liczba pikseli i wi臋kszy rozmiar pliku obrazu rastrowego. Rozwa偶my na przyk艂ad zdj臋cie wy艣wietlane w rozdzielczo艣ci 100×100 pikseli (CSS):

Rozdzielczo艣膰 ekranu 艁膮czna liczba pikseli Rozmiar nieskompresowanego pliku (4 bajty na piksel)
1x 100 x 100 = 10 000 40 000 bajt贸w
2x 100 x 100 x 4 = 40 000 160 000 bajt贸w
3x 100 x 100 x 9 = 90 000 360 000 bajt贸w

Przy dwukrotnym zwi臋kszeniu rozdzielczo艣ci ekranu fizycznego 艂膮czna liczba pikseli zwi臋ksza si臋 czterokrotnie: dwukrotne zwi臋kszenie liczby pikseli w poziomie pomno偶one przez dwukrotne zwi臋kszenie liczby pikseli w pionie. Dlatego w przypadku ekranu 2x liczba wymaganych pikseli nie zwi臋ksza si臋 dwukrotnie, lecz czterokrotnie!

Co to oznacza w praktyce? Ekrany o wysokiej rozdzielczo艣ci wy艣wietlaj膮 ol艣niewaj膮ce obrazy, co mo偶e stanowi膰 o przewadze ca艂ego produktu. Jednak wymagaj膮 one r贸wnie偶 obraz贸w o wysokiej rozdzielczo艣ci: lepiej korzysta膰 z grafiki wektorowej, poniewa偶 ostro艣膰 nie zale偶y od rozdzielczo艣ci, a je艣li potrzebne s膮 obrazy rastrowe, najlepiej przygotowa膰 i udost臋pni膰 wiele wersji ka偶dego obrazu 鈥 szczeg贸艂ami zajmiemy si臋 w dalszej cz臋艣ci.

Optymalizacja obraz贸w wektorowych

TL;DR

  • SVG to format obrazu oparty na XML
  • Kompaktowanie plik贸w SVG pozwala zmniejszy膰 ich rozmiar
  • Pliki SVG nale偶y kompresowa膰 do formatu GZIP

Wszystkie nowoczesne przegl膮darki obs艂uguj膮 format SVG (Scalable Vector Graphics), kt贸ry jest formatem grafiki dwuwymiarowej opartym na XML: kod SVG mo偶na zamie艣ci膰 w kodzie strony bezpo艣rednio albo jako zas贸b zewn臋trzny. Pliki SVG mo偶na tworzy膰 w wi臋kszo艣ci program贸w do edycji grafiki wektorowej lub r臋cznie, w ulubionym edytorze tekst贸w.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) 聽-->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
聽 聽x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_"><g>
聽 聽 <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></g>
</g>
</svg>

W powy偶szym przyk艂adzie renderowany jest prosty kszta艂t w postaci ko艂a z czarnym obramowaniem na czerwonym tle. Przyk艂ad ten wyeksportowano z programu Adobe Illustrator. Jak wida膰, zawiera on du偶o metadanych 鈥 informacje o warstwach, komentarze i przestrzenie nazw XML 鈥 cz臋sto zb臋dnych przy renderowaniu zasobu w przegl膮darce. Z tego wzgl臋du zawsze dobrze jest przeprowadzi膰 kompaktowanie plik贸w SVG za pomoc膮 takiego narz臋dzia jak svgo.

Rzeczywi艣cie, narz臋dzie svgo redukuje rozmiar powy偶szego pliku SVG z programu Illustrator o 58% 鈥 z 470 bajt贸w do 199 bajt贸w. Poniewa偶 format SVG jest oparty na XML, mo偶na r贸wnie偶 skompresowa膰 go do formatu GZIP, co zmniejszy jego rozmiar podczas transmisji 鈥 upewnij si臋, 偶e serwer jest skonfigurowany pod k膮tem kompresowania zasob贸w SVG.

Optymalizacja obraz贸w rastrowych

TL;DR

  • Obraz rastrowy to matryca pikseli
  • Dla ka偶dego piksela kodowane s膮 informacje o kolorze i przezroczysto艣ci
  • W algorytmach kompresji obraz贸w stosuje si臋 wiele r贸偶nych technik umo偶liwiaj膮cych redukcj臋 liczby bit贸w na piksel, co pozwala zmniejszy膰 rozmiar pliku obrazu

Obraz rastrowy stanowi po prostu 2-wymiarow膮 matryc臋 poszczeg贸lnych pikseli 鈥 np. obraz o rozdzielczo艣ci 100×100 pikseli zawiera sekwencj臋 10 000 pikseli. Z kolei w ka偶dym pikselu zapisywane s膮 warto艣ci [RGBA](http://pl.wikipedia.org/wiki/RGBA){: .external }: (R) dla kana艂u koloru czerwonego, (G) dla kana艂u koloru zielonego, (B) dla kana艂u koloru niebieskiego i (A) dla kana艂u alfa (przezroczysto艣ci).

Wewn臋trznie przegl膮darka przydziela do ka偶dego kana艂u 256 warto艣ci (odcieni), co przek艂ada si臋 na 8 bit贸w na kana艂 (2 ^ 8 = 256) lub 4 bajty na piksel (4 kana艂y x 8 bit贸w = 32 bity = 4 bajty). Dzi臋ki temu przy znajomo艣ci rozmiar贸w matrycy mo偶na 艂atwo okre艣li膰 rozmiar pliku:

  • obraz 100 x 100 pikseli sk艂ada si臋 z 10 000 pikseli
  • 10 000 pikseli x 4 bajty = 40 000 bajt贸w
  • 40 000 bajt贸w / 1024 = 39 KB

^

Wymiary Piksele Rozmiar pliku
100 x 100 10 000 39 KB
200 x 200 40 000 156 KB
300 x 300 90 000 351 KB
500 x 500 250 000 977 KB
800 x 800 640 000 2500 KB

39 KB dla obrazu o rozdzielczo艣ci 100×100 pikseli 鈥 to na pierwszy rzut oka niewiele, ale rozmiar pliku szybko ro艣nie wraz ze wzrostem rozdzielczo艣ci, przez co pobieranie tych zasob贸w jest zar贸wno powolne, jak i przyczynia si臋 do zwi臋kszenia op艂at za transfer. Na szcz臋艣cie do tej pory rozmawiali艣my o nieskompresowanym formacie obrazu. Co zrobi膰, by zredukowa膰 rozmiar pliku graficznego?

Jednym z prostszych sposob贸w jest zredukowanie g艂臋boko艣ci bitowej obrazu z 8 bit贸w na kana艂 do mniej licznej palety: 8 bit贸w na kana艂 oznacza do 256 warto艣ci na kana艂 i w sumie 16 777 216 (2563) kolor贸w. Co si臋 stanie po zredukowaniu palety do 256 kolor贸w? Dla kana艂贸w RGB potrzebne b臋dzie w sumie 8 bit贸w, co przyniesie oszcz臋dno艣膰 dw贸ch bajt贸w na piksel — taki rodzaj kompresji przynosi 50% oszcz臋dno艣ci w stosunku do pierwotnego formatu 4-bajtowego.

Artefakty spowodowane przez kompresj臋

optymalizacja seo

Po zoptymalizowaniu danych zapisanych w poszczeg贸lnych pikselach mo偶emy przyjrze膰 si臋 dok艂adniej s膮siednim pikselom: okazuje si臋, 偶e na wielu obrazach, a szczeg贸lnie na zdj臋ciach, piksele maj膮 zbli偶one kolory 鈥 w przypadku nieba, powtarzaj膮cych si臋 wzor贸w i tak dalej. Wykorzystanie tego spostrze偶enia w algorytmie kompresji mo偶e polega膰 na zastosowaniu [kodowania delta](http://en.wikipedia.org/wiki/Delta_encoding){: .external }. Zamiast przechowywa膰 warto艣ci ka偶dego z pikseli, przechowuje si臋 warto艣ci r贸偶nic pomi臋dzy s膮siednimi pikselami: je艣li s膮siednie piksele s膮 identyczne, r贸偶nica wynosi zero i trzeba przechowa膰 tylko jeden bit. Ale czemu nie p贸j艣膰 dalej…

Oko ludzkie cechuje si臋 r贸偶nymi poziomami czu艂o艣ci na r贸偶ne kolory: podczas kodowania mo偶na to uwzgl臋dni膰, odpowiednio zmniejszaj膮c lub zwi臋kszaj膮c liczno艣膰 palety dla tych kolor贸w. S膮siedztwo pikseli okre艣la si臋 w dwuwymiarowej matrycy, a wi臋c ka偶dy piksel ma wielu s膮siad贸w. R贸wnie偶 ten fakt mo偶na wykorzysta膰 do dalszego ulepszenia kodowania delta. Zamiast rozpatrywa膰 tylko bezpo艣rednich s膮siad贸w ka偶dego piksela, mo偶emy zaj膮膰 si臋 wi臋kszymi blokami s膮siednich pikseli i kodowa膰 r贸偶ne bloki z r贸偶nymi ustawieniami. I tak dalej…

Jak wida膰, optymalizacja obraz贸w szybko si臋 komplikuje (lub, zale偶nie od punktu widzenia, staje si臋 jeszcze ciekawsza), dlatego jest obszarem aktywnych bada艅 akademickich i komercyjnych. Obrazy zajmuj膮 wiele miejsca, tak wi臋c rozwijanie lepszych technik kompresji ma du偶e znaczenie. Dalsze informacje znajdziesz w Wikipedii i opracowaniu na temat kompresji WebP, w kt贸rym zosta艂 podany praktyczny przyk艂ad.

Nasza dyskusja przybra艂a charakter akademicki, ale jak to przek艂ada si臋 na mo偶liwo艣ci optymalizacji obraz贸w na naszych stronach? Zdecydowanie nie b臋dziemy si臋 koncentrowa膰 na rozwijaniu nowych technik kompresji, jednak wa偶ne jest zrozumienie zarysu problemu: pikseli RGBA, g艂臋boko艣ci bitowej i r贸偶nych technik optymalizacji. O wszystkich tych koncepcjach trzeba pami臋ta膰 przy rozpatrywaniu r贸偶nych format贸w obraz贸w rastrowych, ale tym zajmiemy si臋 p贸藕niej.

Stratna a bezstratna kompresja obraz贸w

TL;DR

  • Spos贸b dzia艂ania naszych oczu umo偶liwia stosowanie kompresji stratnej
  • Optymalizacja obrazu to po艂膮czenie kompresji stratnej i bezstratnej
  • Formaty obraz贸w r贸偶ni膮 si臋 algorytmami kompresji stratnej i bezstratnej u偶ytymi do optymalizacji obrazu
  • Nie mo偶na okre艣li膰 jednego najlepszego formatu lub ustawienia jako艣ci dla wszystkich obraz贸w: ka偶de po艂膮czenie algorytmu kompresji i obrazu daje w wyniku unikalny obraz wyj艣ciowy

Dla pewnych rodzaj贸w danych, takich jak kod 藕r贸d艂owy strony lub plik wykonywalny, wa偶ne jest, by algorytm kompresji nie zmieni艂 ani nie utraci艂 oryginalnej informacji: jeden brakuj膮cy lub nieprawid艂owy bit danych mo偶e zupe艂nie zmieni膰 znaczenie zawarto艣ci pliku, a nawet doprowadzi膰 do jego ca艂kowitego uszkodzenia. Dla innych rodzaj贸w danych, takich jak obrazy, d藕wi臋ki i filmy wideo, ca艂kowicie akceptowalne mo偶e by膰 dostarczenie przybli偶onej reprezentacji pierwotnych danych.

Z powodu sposobu dzia艂ania oka cz臋sto mo偶na pomin膮膰 pewne informacje o pikselach i zredukowa膰 rozmiar pliku obrazu 鈥 np. oko cechuje r贸偶ny poziom czu艂o艣ci na r贸偶ne kolory, dlatego niekt贸re kolory mo偶na zakodowa膰 z wykorzystaniem mniejszej liczby bit贸w. Z tego powodu typowa procedura optymalizacji sk艂ada si臋 z dw贸ch krok贸w wysokiego poziomu:

  1. Przetworzenie obrazu przez filtr [stratny](http://pl.wikipedia.org/wiki/Kompresja_stratna){: .external } eliminuj膮cy niekt贸re dane pikseli
  2. Przetworzenie obrazu przez filtr [bezstratny](http://pl.wikipedia.org/wiki/Kompresja_bezstratna){: .external } kompresuj膮cy dane pikseli

Pierwszy krok jest opcjonalny. Jednak warto zapami臋ta膰, 偶e ka偶dy obraz mo偶na podda膰 kompresji stratnej w celu redukcji rozmiaru, a dok艂adny algorytm tej kompresji zale偶y od konkretnego formatu obrazu. R贸偶nica pomi臋dzy r贸偶nymi formatami obraz贸w, takimi jak GIF, PNG, JPEG, polega na r贸偶nym po艂膮czeniu algorytm贸w wykorzystywanych (lub nie) w kroku kompresji stratnej i bezstratnej.

Wi臋c jaka konfiguracja optymalizacji stratnej i bezstratnej jest najlepsza? Odpowied藕 zale偶y od zawarto艣ci obrazu i w艂asnych kryteri贸w. Nale偶y pr贸bowa膰 osi膮gn膮膰 kompromis mi臋dzy rozmiarem pliku i wielko艣ci膮 artefakt贸w wprowadzanych przez kompresj臋 stratn膮: w niekt贸rych przypadkach wskazane jest pomini臋cie optymalizacji stratnej, co pozwoli na wierne przekazanie szczeg贸艂贸w, w innych mo偶na zastosowa膰 agresywn膮 optymalizacj臋 stratn膮 i maksymalnie zmniejszy膰 rozmiar obrazu. W tym miejscu rol臋 powinien odegra膰 w艂asny os膮d i kontekst wykorzystania obrazu 鈥 nie ma jednego uniwersalnego zestawu ustawie艅.

Save for Web (Publikuj dla Internetu)

Praktyczny przyk艂ad: dla formatu stratnego, takiego jak JPEG, mo偶na zazwyczaj zmieni膰 ustawienie jako艣ci algorytmu kompresji (np. suwak jako艣ci funkcji Save for Web (Publikuj dla Internetu) w programie Adobe Photoshop). Jest ono zazwyczaj liczb膮 z zakresu od 1 do 100 wp艂ywaj膮c膮 na spos贸b dzia艂ania zestawu algorytm贸w stratnych i bezstratnych. Aby uzyska膰 najlepsze wyniki, sprawd藕 r贸偶ne ustawienia jako艣ci obraz贸w i nie obawiaj si臋 znacznie zmniejszy膰 jako艣ci 鈥 rezultaty wizualne s膮 cz臋sto bardzo dobre, a redukcja rozmiaru pliku znaczna.

Wyb贸r odpowiedniego formatu

TL;DR

  • Rozpocznij od wyboru odpowiedniego formatu uniwersalnego: GIF, PNG, JPEG
  • Dla ka偶dego formatu metod膮 pr贸b i b艂臋d贸w dobierz najlepsze ustawienia: jako艣膰, rozmiar palety itp.
  • Rozwa偶 dodanie zasob贸w WebP i JPEG XR dla nowoczesnych klient贸w obrazy skalowane: null
  • Zastosowanie grafiki skalowanej jest jednym z najprostszych i najbardziej efektywnych sposob贸w optymalizacji
  • Szczeg贸lnie uwa偶aj na du偶e grafiki, poniewa偶 odpowiadaj膮 one za odczuwalny spadek wydajno艣ci
  • Wyeliminuj niepotrzebne piksele, dostosowuj膮c rozdzielczo艣膰 obraz贸w do ich rozmiaru na ekranie

Opr贸cz zastosowania odmiennych algorytm贸w stratnych i bezstratnych formaty obraz贸w r贸偶ni膮 si臋 obs艂ug膮 funkcji, takich jak animacje i kana艂y przezroczysto艣ci (alfa). Dlatego wyb贸r formatu odpowiedniego dla konkretnego obrazu zale偶y nie tylko od potrzebnych rezultat贸w wizualnych, lecz r贸wnie偶 od wymaga艅 funkcjonalnych.

Format Przezroczysto艣膰 Animacja Przegl膮darka
GIF Tak Tak Wszystkie
PNG Tak Nie Wszystkie
JPEG Nie Nie Wszystkie
JPEG XR Tak Tak IE
WebP Tak Tak Chrome, Opera, Android

Powszechnie obs艂ugiwane s膮 trzy formaty: GIF, PNG i JPEG. Opr贸cz nich niekt贸re przegl膮darki obs艂uguj膮 r贸wnie偶 nowsze formaty, takie jak WebP i JPEG XR, cechuj膮ce si臋 wy偶sz膮 ca艂kowit膮 kompresj膮 i wi臋ksz膮 funkcjonalno艣ci膮. Wi臋c jaki format zastosowa膰?

Save for Web (Publikuj dla Internetu)

  1. Czy potrzebna jest animacja? Je艣li tak, format GIF jest jedynym uniwersalnym wyborem.
  2. W formacie GIF wyst臋puje ograniczenie liczno艣ci palety kolor贸w do najwy偶ej 256 kolor贸w, co dla wi臋kszo艣ci obraz贸w czyni go kiepskim wyborem. Ponadto format PNG-8 osi膮ga wy偶szy stopie艅 kompresji dla obraz贸w z mniej liczn膮 palet膮. Z tego wzgl臋du format GIF stanowi odpowiedni wyb贸r tylko w przypadku konieczno艣ci zastosowania animacji.
  3. Czy trzeba zachowa膰 drobne detale o najwy偶szej rozdzielczo艣ci? Zastosuj format PNG.
  4. W formacie PNG nie s膮 stosowane 偶adne algorytmy kompresji stratnej, wybiera si臋 tylko rozmiar palety kolor贸w. Dlatego uzyskany obraz b臋dzie mia艂 wysok膮 jako艣膰, ale kosztem znacznie wi臋kszego rozmiaru pliku ni偶 w przypadku innych format贸w. Stosuj z rozwag膮.
  5. Je艣li obraz zawiera grafik臋 sk艂adaj膮c膮 si臋 z kszta艂t贸w geometrycznych, rozwa偶 jego konwersj臋 do formatu wektorowego (SVG).
  6. Je艣li obraz zawiera tekst, po艣wi臋膰 chwil臋 czasu na zastanowienie. Tekstu na obrazach nie mo偶na zaznacza膰, wyszukiwa膰 ani dowolnie powi臋ksza膰. Je艣li wymagany jest niestandardowy wygl膮d (przy tworzeniu logotypu marki lub z innych przyczyn), lepiej u偶y膰 czcionek sieci web.
  7. Optymalizujesz zdj臋cie, zrzut ekranu lub podobny obraz? Zastosuj format JPEG.
  8. Format JPEG wykorzystuje po艂膮czenie optymalizacji stratnej i bezstratnej, co pozwala znacznie zredukowa膰 rozmiar pliku obrazu. Wypr贸buj kilka poziom贸w jako艣ci formatu JPEG, by osi膮gn膮膰 najlepszy kompromis mi臋dzy jako艣ci膮 i rozmiarem pliku danego zasobu.

Po ustaleniu optymalnego formatu obrazu i ustawie艅 dla ka偶dego z zasob贸w rozwa偶 dodanie dodatkowej wersji z kodowaniem WebP i JPEG XR. Formaty te s膮 nowe, ale niestety (jeszcze) nieobs艂ugiwane powszechnie przez wszystkie przegl膮darki. Ich zalet膮 jest znaczna redukcja rozmiaru w przypadku nowszych klient贸w 鈥 np. format WebP pozwala uzyska膰 艣rednio 30%-tow膮 redukcj臋 rozmiaru pliku w stosunku do obrazu w formacie JPEG o por贸wnywalnej jako艣ci.

Poniewa偶 format WebP i JPEG XR nie s膮 powszechnie obs艂ugiwane, konieczne b臋dzie zaimplementowanie dodatkowych procedur w aplikacji lub na serwerze, dzi臋ki czemu przes艂any zostanie odpowiedni zas贸b:

  • Niekt贸re sieci CDN oferuj膮 optymalizacj臋 obraz贸w jako us艂ug臋, w tym umo偶liwiaj膮 przesy艂anie obraz贸w w formatach JPEG XR i WebP.
  • Niekt贸re narz臋dzia typu open source (np. PageSpeed for Apache lub Nginx) automatyzuj膮 optymalizacj臋, konwersj臋 i przesy艂anie odpowiednich zasob贸w.
  • Mo偶esz doda膰 dodatkowe procedury wykrywaj膮ce klienta, sprawdzaj膮ce obs艂ugiwane przez niego formaty i przesy艂aj膮ce obrazy w najlepszym dost臋pnym formacie.

Nie zapomnij, 偶e je艣li do renderowania swojej aplikacji u偶ywasz widoku Webview, masz pe艂n膮 kontrol臋 nad klientem i mo偶esz korzysta膰 wy艂膮cznie z formatu WebP. Facebook, Google+ i wiele innych serwis贸w stosuje format WebP do przesy艂ania wszystkich obraz贸w w swoich aplikacjach 鈥 korzy艣ci wynikaj膮ce z redukcji rozmiaru s膮 na pewno tego warte. Wi臋cej informacji o formacie WebP zawiera prezentacja WebP: Deploying Faster, Smaller, and More Beautiful Images z konferencji Google I/O 2013.

Narz臋dzia i wyb贸r parametr贸w

Nie istnieje jeden doskona艂y format obrazu, narz臋dzie lub zestaw parametr贸w optymalizacyjnych, kt贸re mo偶na zastosowa膰 do wszystkich obraz贸w. Najlepsze wyniki uzyskuje si臋 dzi臋ki wybraniu formatu oraz jego ustawie艅 przy uwzgl臋dnieniu zawarto艣ci obrazu i wymaga艅 wizualnych, jak r贸wnie偶 innych wymaga艅 technicznych.

Narz臋dzie Opis
gifsicle tworzenie i optymalizacja obraz贸w w formacie GIF
jpegtran optymalizacja obraz贸w w formacie JPEG
optipng bezstratna optymalizacja obraz贸w w formacie PNG
pngquant stratna optymalizacja obraz贸w w formacie PNG

Nie b贸j si臋 eksperymentowa膰 z parametrami ka偶dego z program贸w do kompresji. Zmniejsz ustawienie jako艣ci, sprawd藕 wygl膮d obrazu, a p贸藕niej powt贸rz t臋 procedur臋 od nowa. Po znalezieniu zestawu dobrych ustawie艅 mo偶esz je zastosowa膰 do innych podobnych obraz贸w w witrynie, ale nie zak艂adaj, 偶e wszystkie obrazy musz膮 by膰 skompresowane z u偶yciem tych samych ustawie艅.

Przesy艂anie skalowanych obraz贸w

Optymalizacja obraz贸w sprowadza si臋 do dw贸ch krok贸w: optymalizacji liczby bajt贸w s艂u偶膮cych do zakodowania ka偶dego z pikseli obrazu i optymalizacji 艂膮cznej liczby pikseli: rozmiar pliku obrazu zale偶y od 艂膮cznej liczby pikseli pomno偶onej przez liczb臋 bajt贸w wymaganych do zakodowania ka偶dego z pikseli. Ni mniej, ni wi臋cej.

Dlatego jedna z najprostszych i najbardziej efektywnych technik optymalizacji obrazu polega na zapewnieniu, 偶e nie przesy艂a si臋 wi臋cej pikseli, ni偶 wymaga wy艣wietlenie zasobu w rozmiarze zastosowanym przez przegl膮dark臋. Proste, prawda? Niestety dla wi臋kszo艣ci obraz贸w na stronach ten warunek nie jest spe艂niony: zazwyczaj przesy艂ane s膮 zasoby o wi臋kszej rozdzielczo艣ci, a na przegl膮dark臋 spada ich przeskalowanie i wy艣wietlenie w mniejszej rozdzielczo艣ci, co wyczerpuje r贸wnie偶 zasoby procesora.

Przeskalowany obraz

Przesy艂anie zb臋dnych pikseli, tylko po to, by przegl膮darka wyr臋czy艂a nas w zmianie skali obrazu, to utracona okazja do redukcji 艂膮cznej liczby bajt贸w wymaganych do renderowania strony. Jak wida膰, zmiana rozmiaru nie wynika po prostu z liczby pikseli, o kt贸re redukuje si臋 rozmiar obrazu, ale r贸wnie偶 od jego rozmiaru naturalnego.

Rozmiar naturalny Rozmiar wy艣wietlania Zb臋dne piksele
110 x 110 100 x 100 110 x 110 鈥 100 x 100 = 2100
410 x 410 400 x 400 410 x 410 鈥 400 x 400 = 8100
810 x 810 800 x 800 810 x 810 鈥 800 x 800 = 16100

Zwr贸膰 uwag臋, 偶e we wszystkich trzech powy偶szych przypadkach rozmiar wy艣wietlania jest tylko o 10 pikseli mniejszy od naturalnego rozmiaru obrazu. Liczba dodatkowych pikseli do zakodowania i przes艂ania szybko ro艣nie wraz ze wzrostem rozmiaru naturalnego. Mimo 偶e trudno jest zagwarantowa膰 dostarczanie ka偶dego zasobu dok艂adnie w tej rozdzielczo艣ci, w kt贸rej jest wy艣wietlany, nale偶y si臋 upewni膰, 偶e liczba zb臋dnych pikseli jest minimalna i 偶e zw艂aszcza zasoby o du偶ym rozmiarze s膮 dostarczane w rozdzielczo艣ci mo偶liwie najbardziej zbli偶onej do rozdzielczo艣ci wy艣wietlania.

Optymalizacja obraz贸w 鈥 lista czynno艣ci

Optymalizacja obraz贸w to zar贸wno sztuka, jak i nauka: sztuka, poniewa偶 nie ma jednej w艂a艣ciwej odpowiedzi, jak najlepiej skompresowa膰 dany obraz; nauka, poniewa偶 opracowano wiele technik i algorytm贸w umo偶liwiaj膮cych znaczn膮 redukcj臋 rozmiaru obrazu.

Niekt贸re wskaz贸wki i techniki, o kt贸rych trzeba pami臋ta膰 podczas optymalizacji obraz贸w:

  • Preferuj formaty wektorowe: grafika wektorowa jest niezale偶na od rozdzielczo艣ci i skali, co idealnie kwalifikuje j膮 do 艣rodowiska urz膮dze艅 o wysokiej rozdzielczo艣ci.
  • Wykonuj kompaktowanie i kompresuj zasoby SVG: kod XML utworzony w wi臋kszo艣ci aplikacji graficznych cz臋sto zawiera zb臋dne metadane, kt贸re mo偶na usun膮膰; upewnij si臋, 偶e konfiguracja Twoich serwer贸w obejmuje kompresj臋 zasob贸w SVG do formatu GZIP.
  • Wybierz najlepszy format obrazu rastrowego: okre艣l wymagania funkcjonalne i wybierz format, kt贸ry najlepiej pasuje do danego zasobu.
  • Metod膮 pr贸b i b艂臋d贸w dobierz optymalne ustawienia jako艣ci format贸w rastrowych: nie obawiaj si臋 znacznie zmniejszy膰 jako艣ci 鈥 rezultaty wizualne s膮 cz臋sto bardzo dobre, a redukcja rozmiaru pliku znaczna.
  • Usu艅 zb臋dne metadane obraz贸w: wiele obraz贸w rastrowych zawiera zb臋dne metadane: informacje geograficzne, parametry aparatu i tak dalej. Do usuwania tych danych korzystaj z odpowiednich narz臋dzi.
  • Przesy艂aj przeskalowane obrazy: zmieniaj rozmiar obraz贸w na serwerze; dopilnuj, by rozmiar wy艣wietlania by艂 jak najbardziej zbli偶ony do naturalnego. Zwracaj szczeg贸ln膮 uwag臋 na obrazy o du偶ej rozdzielczo艣ci, poniewa偶 s膮 one przyczyn膮 najwi臋kszego ubytku wydajno艣ci przy zmianie rozmiaru przez przegl膮dark臋.
  • Automatyzuj, automatyzuj, automatyzuj: zainwestuj w automatyczne narz臋dzia i infrastruktur臋, kt贸ra zapewni optymalizacj臋 wszystkich zasob贸w obraz贸w w przysz艂o艣ci.