Gif, png, jpg sau svg ce să utilizați

Gif, png, jpg sau svg ce să utilizați

Se pare că 256 de culori sunt multe. Pentru comparație, în fotografii complexe, mii de nuanțe. În procesul de conversie în GIF, gama de culori este mult redusă și acesta este motivul principal pentru a nu utiliza GIF pentru fotografii color.

GIF nu este potrivit pentru imagini cu o gamă largă de culori, dar o limită de 256 de culori poate ajuta la menținerea greutății reduse a fișierului, ceea ce este ideal chiar și pentru cele mai lente conexiuni. Pentru o perioadă lungă de timp, numai GIF a avut o funcție de transparență. Acum este în PNG și SVG.

Gif, png, jpg sau svg ce să utilizați

Curs practic pe crearea design-ului de site-uri în Photoshop

Deveniți un web designer profesionist, creând machete de site-uri cerute.

grafice cu o variație redusă a pixelilor (de exemplu, culori monotone, cum ar fi logo-uri și steaguri).

În funcție de preferințele dvs., puteți utiliza acest format ca "JPEG" sau "JPG" - ambele sunt variante acceptabile ale unui acronim - Joint Photographic Experts Group.

Spre deosebire de GIF, formatul JPEG este de 16 biți, adică el poate amesteca roșu, albastru și verde. Acest lucru vă permite să afișați milioane de culori și o face foarte prietenos cu fotografiile. Acest lucru este parțial pentru că este un format standard, în majoritatea camerelor digitale de pe piață.

JPEG vă permite să ajustați flexibil gradul de comprimare a imaginii: de la 0% (compresie puternică) la 100% (fără compresie). De obicei, 60% -75% este suficient pentru a reduce semnificativ greutatea fișierului, menținând în același timp o calitate excelentă în majoritatea ecranelor.

JPEG este foarte potrivit pentru comprimarea și redarea fotografiilor, dar acesta este un tip de compresie cu pierderi. Adică nu este potrivit pentru editarea permanentă a imaginilor. Exportarea în JPEG duce la pierderea calității, iar pierderile sunt în creștere cu exporturile ulterioare. Prin urmare, fotografii profesioniști sunt fotografi în mare parte în format RAW fără pierderi.

De asemenea, spre deosebire de GIF și PNG, formatul JPEG nu păstrează transparența.

imagini cu culori și dinamică complexe.

Spre deosebire de GIF și JPEG, formatul PNG (Portable Network Graphics) este mai nou. Datorită celor două versiuni, formatul este similar cu mixurile GIF și JPEG.

PNG-8 este foarte asemănător cu GIF și utilizează, de asemenea, o paletă de culori de maximum 256 de culori. Are o transparență puțin mai bună și o greutate mică a fișierului. Cu toate acestea, PNG-8 nu are o funcție de animație.

PNG-24 vă permite să redați imagini cu milioane de culori, aproape ca JPEG, dar și să păstrați transparența.

PNG-24 este un format fără pierderi, ceea ce mărește greutatea fișierelor. Dacă calitatea imaginilor este mai importantă decât greutatea fișierelor, PNG-24 este cea mai bună alegere. Servicii precum TinyPNG.com pot reduce adesea foarte mult greutatea fișierului.

În comparație cu jumătatea fratelui JPEG, PNG-24 nu este universal compatibil cu toate aplicațiile și platformele, ceea ce face ca formatul să nu fie potrivit pentru partajare în rețea. Cu toate acestea, formatul poate fi editat fără pierderi de calitate.

grafice web cu transparență;

fotografii complexe cu o mulțime de culori și grafică;

imagini care trebuie re-editate și exportate.

Spre deosebire de cele trei formate de mai sus, SVG (Scalable Vector Graphics) nu este un format pur raster. Acesta este un format vectorial apropiat de AI în Adobe Illustrator și EPS. Grafica grafică câștigă treptat popularitate în designerii rețelei și UI.

Uneori este convenabil să reprezentăm SVG ca "HTML pentru ilustrații". Acest format este ușor diferit de celelalte.

SVG este un format vectorial, dar puteți (adesea face acest lucru) inserați grafice bitmap în același mod în care JPEG este inserat în HTML.

Serviciile online, cum ar fi WordPress, Flickr, Medium, Tumblr și Facebook, fie vor transforma SVG în formatul potrivit pentru ei, fie, mai probabil, vor bloca imediat descărcarea SVG. Rețeaua are o mulțime de găzduire SVG, printre care svgur.com. imgh.us și chiar Github, așa cum a demonstrat Alex aici.

Îmi place că există mici găzduiri SVG, dar sunt 99% sigur că în următorii 5 ani GitHub va fi ușor de utilizat. Când se utilizează SVG în designul web, este aproape întotdeauna posibilă comprimarea greutății unui fișier, spre deosebire de JPEG și PNG. Dar cu cât este mai complex SVG, cu atât este mai mare ponderea dosarului.

logo-uri și grafică în designul web;

Am aflat despre diferențele dintre formatele populare, acum este timpul să le comparăm față în față. Mai jos veți vedea modul în care GIF, JPEG, PNG și SVG procesează imagini cu culori simple și complexe, precum și imagini.

Grafica cu culori monotone

Primul tip pe care îl vom analiza este grafica cu culori monotone. Acesta acoperă majoritatea logourilor și marcilor, icoane, hărți simple, diagrame și diagrame. Dimensiunea originală a imaginii este de 23,4 Kb cu o rezoluție de 1280 x 1280 pixeli.

Mai jos este o comparație a greutății și calității fișierului. Imaginile au fost salvate printr-o funcție din Photoshop "Salvare pentru web și dispozitive" cu o calitate maximă.

Gif, png, jpg sau svg ce să utilizați

Curs practic pe crearea design-ului de site-uri în Photoshop

Deveniți un web designer profesionist, creând machete de site-uri cerute.

JPEG 100% (fără compresie): 53,3 KB

Gif, png, jpg sau svg ce să utilizați

Gif, png, jpg sau svg ce să utilizați

Gif, png, jpg sau svg ce să utilizați

Gif, png, jpg sau svg ce să utilizați

SVG: 6 KB (grafică vectorială pură)

În cazul acestei imagini, nu se înregistrează pierderi de calitate ridicate atunci când se compară cele șase formate. Deși puteți vedea artefacte mici în jurul marginilor JPEG-ului comprimat.

Nu întotdeauna totul va fi atât în ​​cazul graficelor cu culori monotone, dar în majoritatea cazurilor nu vor apărea probleme cu astfel de imagini. Pentru această imagine, cea mai bună opțiune, cu condiția să avem originalul - SVG cu o greutate de 6Kb. Dacă nu există grafică vectorială, puteți folosi PNG-8 pentru ao înlocui. Greutatea fișierului este redusă de la 23,4KB la 11,8KB.

Imagini cu culori complexe

Original - 328KB JPEG cu o rezoluție de 1280 x 960. Mai jos este o comparație a greutății fișierelor și a calității. Imaginile au fost salvate printr-o funcție din Photoshop "Salvare pentru web și dispozitive" cu o calitate maximă.

Nu avem versiunea vectorială a acestei imagini, astfel încât orice versiune SVG va fi doar JPEG în SVG. Acest format va fi inutil.

JPEG 100% (necomprimat): 776 KB

Gif, png, jpg sau svg ce să utilizați

Gif, png, jpg sau svg ce să utilizați

Gif, png, jpg sau svg ce să utilizați

Imaginile cu culori complexe arată mai bine în JPEG, PNG-24 și SVG. Culorile pentru cea mai mare parte sunt păstrate, și nu există nici o inele teribile și zgomot, care de obicei iese în GIF și PNG-8.

Fotografiile color

Original - 215KB JPEG cu o rezoluție de 1280 x 710. Mai jos este o comparație a greutății fișierelor și a calității. Imaginile au fost salvate printr-o funcție din Photoshop "Salvare pentru web și dispozitive" cu o calitate maximă.

SVG aici nu va da prea mult.

JPEG 100% (fără compresie): 90 KB

Gif, png, jpg sau svg ce să utilizați

Gif, png, jpg sau svg ce să utilizați

Gif, png, jpg sau svg ce să utilizați

Gif, png, jpg sau svg ce să utilizați

Ca și în cazul imaginilor complexe, fotografiile sunt salvate cel mai bine în JPEG, PNG-24 sau SVG. În fotografia de mai sus, culorile sunt salvate în toate formatele, cu excepția formatelor PNG-8 și GIF, unde în fundal, precum și în partea superioară a fotografiei, se aude inele și zgomote în umbra părului.

Ediție: Comanda webformself.

Gif, png, jpg sau svg ce să utilizați

Curs practic pe crearea design-ului de site-uri în Photoshop

Deveniți un web designer profesionist, creând machete de site-uri cerute.

Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame

Gif, png, jpg sau svg ce să utilizați

Desenați site-uri cool, obțineți comenzi și călătoriți!

Articole similare