Confruntarea performanței efectelor imaginii web

Pe măsură ce browserele își îmbunătățesc în mod constant abilitățile de redare grafică, capacitatea de a proiecta cu adevărat în interiorul lor devine din ce în ce mai mult o realitate. Câteva linii de cod pot avea acum un impact vizual rapid și dramatic și permit coerență fără prea mult efort . Și ca și în majoritatea lucrurilor în dezvoltarea web, există adesea multe modalități de a obține același efect.

În această postare, vom arunca o privire la unul dintre cele mai populare efecte de imagine, în tonuri de gri, și vom evalua atât ușurința implementării, cât și implicațiile de performanță ale pânzei HTML, SVG, filtrelor CSS și modurilor de amestec CSS. Care va câștiga?

Citiți suplimentare despre SmashingMag:

• Confruntarea performanței efectelor imaginii web
• HTML5: Faptele și miturile
• Redimensionarea eficientă a imaginii cu ImageMagick
• Tehnici inteligente de optimizare JPEG

Filtrele de pe web funcționează ca un obiectiv așezat peste o imagine. Acestea sunt aplicate imaginii după ce browserul redă aspectul și pictura inițială. În browserele compatibile, filtrele pot fi aplicate individual sau stratificate unul peste altul. Deoarece pot fi aplicate ca modificări de imagine după randarea inițială și sunt probabil o îmbunătățire, filtrele se degradează în mod grațios, pur și simplu nefiind vizibile în browserele care nu le acceptă.

Filtre CSS

Să începem cu cea mai simplă metodă de a produce un efect în tonuri de gri: filtrul CSS umil, dar puternic.

Pentru a obține acest efect, adăugăm o singură linie de CSS: filter: grayscale(1) . Acest filtru desatura imaginea și poate fi folosit cu orice valoare numerică sau procentuală între 0 și 1 (sau 0% până la 100%). Notă: în prezent, filtrele pentru browserele bazate pe WebKit trebuie să aibă prefixul -webkit- . Cu toate acestea, o soluție precum Autoprefixer ar elimina necesitatea de a le adăuga manual.

Demo live – Filtru CSS

 .cssfilter-gray { -webkit-filter: grayscale(1); background: url('img/bird.jpg'); filter: grayscale(1); }

Modul de amestecare a fundalului

Modurile de amestec CSS oferă o varietate nesfârșită de opțiuni pentru combinații de efecte de imagine. Există două moduri de a utiliza modurile de amestec: proprietatea mix-blend-mode și proprietatea background-blend-mode .

• mix-blend-mode este proprietatea care descrie modul în care elementul se va amesteca cu conținutul din spatele lui.
• background-blend-mode este folosit pentru elemente cu fundaluri multiple și descrie relația dintre aceste fundaluri.

Vom folosi modul background-blend-mode: luminosity pentru a trage canalele de luminozitate pe un fundal gri în exemplul nostru, rezultând o imagine în tonuri de gri. Un lucru de remarcat este că ordinea fundalului este constantă: imaginile de fundal trebuie întotdeauna ordonate înaintea culorilor solide sau a fundalurilor cu gradient pentru ca efectele să fie redate corect . Culoarea trebuie să fie ultimul strat de fundal. Aceasta este, de asemenea, o protecție împotriva browserelor mai vechi care nu acceptă background-blend-mode - imaginea va fi redată în continuare fără efect.

Singura diferență cu modurile de amestecare și filtrul CSS este că acum avem mai multe fundaluri și folosim background-blend-mode: luminosity , care preia valorile luminozității din imaginea de sus (testerul de păsări) și stratifică acele valori de luminozitate pe o al doilea fundal gri.

Demo live – Modul de amestecare de fundal

 .cssfilter-gray { background: url('img/bird.jpg'), gray; background-blend-mode: luminosity; }

În prezent, aceasta este cea mai nouă și, prin urmare, cea mai puțin acceptată opțiune, deși încă funcționează bine în Chrome și Firefox și are suport parțial pentru Safari. Notă: Safari acceptă toate modurile de amestecare, cu excepția modurilor de amestecare bazate pe HSL: nuanță, saturație, culoare și luminozitate.

Pânză HTML5

HTML5 <canvas> permite o mulțime de flexibilitate atunci când vine vorba de manipularea imaginilor, deoarece avem acces la datele fiecărui pixel individual (în special prin canvasContext.getImageData ) și le putem manipula pe fiecare prin JavaScript. Această metodă, totuși, este cea mai complexă și vine cu cele mai multe cheltuieli. Are, de asemenea, câteva nuanțe în problemele de origine încrucișată din cauza problemelor de securitate.

Pentru a remedia eroarea de origine încrucișată în Chrome, imaginea dvs. va trebui să fie găzduită pe un site prietenos cu partajarea resurselor cu origini încrucișate (CORS), cum ar fi GitHub Pages sau Dropbox și să specificați crossOrigin="Anonymous" . Vedeți exemplul live pentru o demonstrație.

Modalitatea de a obține un efect în tonuri de gri cu <canvas> este de a îndepărta componentele roșii, verzi și albastre de orice valoare periferică a valorii pixelului, menținând în același timp nivelul de luminozitate (luminozitate). O modalitate de a face acest lucru este să mediați valorile RGB astfel: grayscale = (red + green + blue) / 3; .

În exemplul de mai jos, folosim valorile RGBa în formatul (R,G,B,a) în datele imaginii; canalul roșu este data[0] , canalul verde este data[1] și așa mai departe. Apoi obținem nivelul de luminozitate al fiecăruia dintre aceste canale (luminozitatea) și le facem o medie pentru a transforma imaginea în tonuri de gri.

Demo live – HTML5 Canvas

Filtru SVG

Filtrele SVG au cel mai larg suport (chiar și în Internet Explorer și Edge!) și sunt, de asemenea, (aproape) la fel de ușor de utilizat ca și filtrele CSS direct. Le puteți folosi cu aceeași proprietate de filter . De fapt, filtrele CSS provin din filtrele SVG. Ca și în cazul pânzei, filtrele SVG vă permit să transcendeți planul plat al efectelor bidimensionale, deoarece puteți utiliza umbrirea WebGL pentru a crea rezultate și mai complexe.

Există câteva modalități de a aplica un filtru SVG, dar în acest caz vom folosi în continuare proprietatea filter pe imaginea de fundal, la fel ca exemplul de filtru CSS pentru coerență. Cea mai mare diferență cu filtrele SVG este că trebuie să avem grijă să includem și să facem legătura cu acest filtru cu calea corectă. Aceasta înseamnă că trebuie să importam SVG-ul pe pagina de deasupra elementului în care îl folosim (ceea ce poate fi ușurat prin utilizarea motorului de șabloane și includerea declarațiilor).

Demo live – Filtru SVG

 <svg> <filter> <feColorMatrix type="saturate" values="0"/> </filter> </svg>

 .svgfilter-gray { background: url('img/bird.jpg'); -webkit-filter: url(#grayscale-filter); filter: url(#grayscale-filter); }

Performanța filtrului

Deci, cum se adună acestea când vine vorba de performanța inițială a randării? Am creat o pagină de test pentru fiecare și am folosit funcția de comparare WebPagetest în Chrome 47. Ținând cont de faptul că fiecare test a dat rezultate ușor diferite, tendința generală poate fi rezumată după cum urmează:

Filtrul CSS, filtrul SVG și metodele modului de amestec CSS au fost încărcate în intervale de timp relativ similare. Uneori, filtrul SVG a fost mai rapid decât modul de amestec CSS (dar întotdeauna abia) și invers. Filtrul CSS a fost în general printre cele mai rapide de încărcat, iar <canvas> a fost întotdeauna cel mai lent. Aceasta este cea mai semnificativă perspectivă obținută. <canvas> a rămas în mod regulat în urma celorlalte metode de redare a imaginii.

Pentru dreptate, am vrut să compar și timpul de încărcare pentru mai multe imagini. Am creat zece redări ale fiecăreia (în loc de doar una) și am rulat din nou testele:

Rezultatele au fost similare (rețineți că au existat mici variații la fiecare test). Filtrul CSS a fost cu 0,1 ms mai lent în acest caz, arătând că între filtrele CSS, modurile de amestecare și filtrele SVG, rezultatele sunt neconcludente pentru cea mai rapidă metodă. Cu toate acestea, HTML5 <canvas> a rămas semnificativ în comparație.

Aruncând o privire mai profundă asupra timpului de încărcare a paginii prin redarea JavaScript și timpul de randare a picturii, puteți vedea că această tendință continuă.

Din nou, <canvas> a durat cel mai mult timp pentru a reda și cel mai mult timp pentru a picta, în timp ce cele două opțiuni CSS au fost cele mai rapide, SVG venind la mijloc.

Aceste rezultate au sens, deoarece <canvas> preia fiecare pixel individual și efectuează o operație asupra acestuia înainte de a putea vedea vreodată vreo imagine. Acest lucru necesită multă putere de procesare în timpul randării. Deși în mod normal SVG-urile sunt folosite pentru grafica vectorială, tot le-aș recomanda cu căldură peste <canvas> atunci când se ocupă de efecte de imagine raster. Nu numai că SVG este mai rapid, dar este și mult mai ușor de tratat și mai flexibil în DOM. În general, filtrele CSS sunt chiar mai optimizate decât filtrele SVG, deoarece, din punct de vedere istoric, acestea sunt scurtături care apar din filtrele SVG și, prin urmare, optimizate în browsere.

#fără filtru

Ce zici de utilizarea fără filtru? Am comparat metoda noastră cea mai rapidă (adăugarea unui filtru CSS) cu editarea imaginii dvs. în software-ul de editare foto înainte de a o încărca (am folosit Previzualizare pe Mac OS X pentru a elimina saturația). Când am preeditat imaginea, am găsit o îmbunătățire constantă a performanței de 0,1 ms în testele mele:

Concluzie

Filtrele de imagine sunt o modalitate distractivă și eficientă de a oferi unitate vizuală și atractivitate estetică pe web. Rețineți că acestea vin cu o ușoară atingere de performanță, dar și cu beneficiile unui design rapid în browser și cu posibilitatea de a proiecta interacțiuni cu.

Pentru efecte de imagine simple, utilizați filtre CSS, deoarece acestea au cel mai larg suport și cea mai simplă utilizare. Pentru efecte de imagine mai complexe, consultați filtrele SVG sau modurile de amestec CSS. Efectele de filtru SVG sunt deosebit de frumoase datorită capacităților lor de manipulare a canalului și feColorMatrix . Modurile de amestec CSS oferă, de asemenea, niște efecte vizuale foarte frumoase cu elemente suprapuse pe pagină. Puteți utiliza moduri de amestecare similare în SVG (cum ar fi feBlend ), deși sunt asemănătoare background-blend-mode CSS, în sensul că interacțiunea se referă la SVG în sine și nu cu elementele din jur, așa cum permite mix-blend-mode . Doar nu folosiți <canvas> pentru filtre.