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:
- 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.
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.
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:
- Przetworzenie obrazu przez filtr
[stratny](http://pl.wikipedia.org/wiki/Kompresja_stratna){: .external }
eliminujฤ cy niektรณre dane pikseli - 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ล.
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ฤ?
- Czy potrzebna jest animacja? Jeลli tak, format GIF jest jedynym uniwersalnym wyborem.
- 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.
- Czy trzeba zachowaฤ drobne detale o najwyลผszej rozdzielczoลci? Zastosuj format PNG.
- 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ฤ .
- Jeลli obraz zawiera grafikฤ skลadajฤ cฤ siฤ z ksztaลtรณw geometrycznych, rozwaลผ jego konwersjฤ do formatu wektorowego (SVG).
- 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.
- Optymalizujesz zdjฤcie, zrzut ekranu lub podobny obraz? Zastosuj format JPEG.
- 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.
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 donaturalnego
. 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.
Zostaw komentarz