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.
5/5 - (4 votes)