Ca designeri, folosim multe tipuri diferite de formate de imagine. Fiecare cu un scop si o utilizare diferite. Dar, în unele cazuri, poate fi putin confuz cu privire la care este cel mai bine în ce scop. 

Astazi ne vom uita în mod special la formatele de fisiere PNG si SVG. Ambele sunt tipuri de fisiere de imagine utilizate frecvent în proiectarea receptiva pentru site-uri web si aplicatii. Dar cand trebuie sa folosesti PNG si cand sa folosesti SVG? 

Ce este PNG?

PNG înseamna Portable Network Graphics . Este un tip de fisier imagine raster. Aceasta înseamna ca toate imaginile si graficele PNG sunt alcatuite din pixeli. Prin urmare, acestea nu pot fi reduse la orice dimensiune, asa cum o pot face grafica vectoriala.

PNG este un format de fisier utilizat în mod obisnuit pentru imaginile publicate pe web. Tinde sa aiba o rezolutie mai buna decat JPEG si este mai bun pentru designul digital. 

Este tipul de fisier preferat pentru logo-uri si ilustratii cu fundal transparent. Sa evaluam avantajele si dezavantajele utilizarii PNG atat în proiectarea digitala, cat si în cea tiparita.Pro : 

  • Suporta fundaluri transparente.
  • Functioneaza pentru adaugarea de logo-uri decupate la orice tip de design; tiparit, digital si web.
  • Calitate mai buna decat JPEG pentru digital.

Contra :

  • Cand mariti, se pixeleaza.
  • În ceea ce priveste designul receptiv, dimensiunea ramane aceeasi de la desktop la mobil.
  • Fara straturi.
  • Nu este usor de editat.
  • Nu este tipul de fisier potrivit pentru imaginile utilizate în proiectarea tiparita.

Ce este SVG?

SVG înseamna Scalable Vector Graphic . Este un tip de fisier imagine vectoriala. Toate imaginile SVG sunt scalabile la orice dimensiune, fara a pierde rezolutia. 

Principala diferenta între SVG si PNG este ca SVG accepta animatia si scalabilitatea. O alta diferenta este ca, în calitate de designer, puteti schimba mult mai usor culorile unei imagini SVG, deoarece are straturi.Iata avantajele si dezavantajele utilizarii SVG atat pentru design digital, cat si pentru tiparire.

Pro :

  • Poate fi animat.
  • Are straturi editabile.
  • Este receptiv, ceea ce înseamna ca dimensiunea graficului se schimba în functie de dimensiunea ecranului. 
  • Poate fi personalizat cu CSS.

Contra :

  • Nu este formatul potrivit pentru fotografii.
  • Browserele si aplicatiile de e-mail mai vechi uneori nu pot citi SVG.
  • Nu este potrivit pentru imprimare.

Cand se foloseste PNG sau SVG?

Acum ca am vazut avantajele si dezavantajele fiecarui format, sa vedem cand ar trebui sa le utilizati. Vom folosi cateva exemple din viata reala.Sa presupunem ca descarcati o pictograma de la Flaticon si trebuie sa alegeti între a descarca un PNG sau un SVG. 

  • Descarcati ca PNG daca proiectati un design digital care nu raspunde sau un tiparit. Folositi cea mai mare dimensiune posibila pentru a o mentine clara.
  • Descarcati în format SVG daca utilizati pictograma pentru un design UI / UX pentru o aplicatie sau un site web receptiv.

Acum , sa presupunem ca sunteti în Povestiri si doriti sa descarcati ilustrare dumneavoastra . Puteti descarca designul ca ilustratie statica sau ca animatie.

  • Ca descarcare instantanee statica :
    • Descarcati ca PNG daca doriti ca ilustratia sa nu poata fi editata în ceea ce priveste culoarea si straturile. De exemplu, pentru un design sau o imprimare digitala care nu raspunde.
    • Descarcati ca SVG daca doriti sa puteti schimba culorile mai tarziu sau straturile designului în ansamblu.
  • Ca animatie :
    • Dupa ce ati animat o ilustratie Povestiri, nu mai aveti optiunea de a descarca ca PNG.
    • Descarcati sub forma de SVG (într-una dintre optiunile oferite) pentru a fi utilizat în aplicatii si designuri web. 

si acum, imaginati-va ca proiectati o sigla pentru un client . Ce tip de fisier le trimiteti?

  • Cel mai bun pariu este sa le trimiteti un PNG. Pot folosi acest lucru pe antetul site-ului web, pe orice design digital sau tiparit. Trimite-le trei versiuni; de calitate scazuta, de calitate medie si de înalta calitate.

Ce se întampla daca proiectati pictograme personalizate pentru o aplicatie sau un site web?

  • Trimiteti clientului atat fisiere PNG, cat si fisiere SVG. Cel mai bine este sa le oferiti toate optiunile pentru marca lor.

Esti un colaborator Flaticon ?

  • Încarcati toate desenele de pictograme ca SVG.

Sunteti proiectarea unui site web si nu stiu ce elemente pentru a utiliza ca PNG sau SVG?

  • Fotografiile ar trebui sa fie PNG.
  • Logourile din anteturi pot fi PNG sau SVG, în functie de modul în care este configurat antetul. Majoritatea temelor site-ului web vor avea o miscare de micsorare integrata pentru anteturi. Daca nu, utilizati SVG.
  • Ilustratiile animate ar trebui sa fie SVG daca aveti nevoie ca acestea sa fie scalabile. GIF daca doriti sa ramana la aceeasi dimensiune.
  • Pictogramele ar trebui sa fie SVG daca doriti ca acestea sa fie reduse cu dimensiunile ecranului si PNG daca vor ramane la aceeasi dimensiune.