SVG vs PNG vs JPG: Prednosti i nedostaci formata slike

/2016-01-04 00:04:46/
Brilee
/Grafika/

Kada je riječ o stvaranju slika za web i druge digitalne svrhe, koji će vam formati datoteka dati najbolji rezultat? Morate razmišljati o brzini nasuprot kvaliteti slike i skali. Pa što biste trebali koristiti: SVG vs PNG vs JPG?

Bilo je razdoblja kada ste upravo koristili JPG veličine kako biste uklopili prostor pri 72 dpi i nastavili dalje. Ne više. Zasloni visoke rezolucije, više prikaza i potreba za brzim internetskim stranicama učinili su to znatno složenijim procesom. Uronimo u prednosti i nedostatke svakog od ovih formata!

SVG

SVG izgleda izvrsno u bilo kojoj veličini i radi za gotovo sve vrste slika osim fotografije.

SVG ili skalabilna vektorska grafika nevjerojatno je praktična. Zato dizajneri to koriste češće.

Budući da je SVG vektorski format, izvrsno izgledaju u bilo kojoj veličini i rade za gotovo sve vrste slika osim fotografije.

SVG je format bez gubitaka - što znači da ne gubi nikakve podatke prilikom komprimiranja - daje neograničen broj boja i najčešće se koristi za grafiku i logotipe na webu i za projekte koji će se pregledavati na mrežnici ili drugim ekranima visoke razlučivosti.

Pros SVG-a

Vektorski format dobro se prikazuje u bilo kojoj veličini
Sposobnost stvaranja jednostavnih SVG prikaza u uređivaču koda ili teksta
Dizajnirajte i izvozite složene grafike iz Adobe Illustrator ili Sketch
SVG tekst je dostupan
SVG datoteke su jednostavne za stil i pisanje
SVG formati podržani su modernim preglednicima i dokazuju budućnost
Format je vrlo stisljiv i lagan
Dobar za pretraživanje zbog tekstualnog formata
Podržava transparentnost
Omogućuje fotografiranje ili animirane slike

Protiv SVG-a

Projektiranje SVG-ova može se zakomplicirati
Ne prikazujte na nekim degradiranim preglednicima
Ograničena podrška za klijente e-pošte

Želite znati više? Imamo još dva vodiča koji objašnjavaju više o SVG-u: Praktični vodič za SVG i Kako (i zašto) SVG ide preuzeti.

PNG

PNG nudi nešto što JPG ne može - transparentnost.

PNG ili Portable Network Graphics format je dizajniran za web koji nudi nešto što JPG ne može - transparentnost. Samo ovo je razlog zašto je PNG toliko popularan za učitavanje elemenata poput logotipa na dizajn web stranica.

Postoje dvije vrste PNG-ova - PNG-8 i PNG-24. PNG-8 koristi ograničenu paletu boja sa samo 256 boja, ima nešto bolju prozirnost i izvozi u maloj veličini. PNG-24 koristi neograničenu paletu boja, održava transparentnost, ali izvozi u većoj veličini. Oba tipa PNG imaju kompresiju bez gubitaka.

Iako su formati PNG slični GIF-ovima, ne podržavaju animaciju. Taj se format najčešće koristi za ikone, male fotografije ili bilo koju sliku kojoj je potrebna transparentnost.

Pros za PNG

Podržava transparentnost
Dobro za slike s tekstom u njima
PNG formati dobro prikazuju logotipe
Sadrži ugrađeni opis teksta za tražilice
PNG-8 ima malu veličinu datoteke i najviše je lagan
Izvozi bez nazubljenih ivica

Protiv PNG-a

Veličine datoteka brzo rastu za velike datoteke, poput slika
Neki stariji klijenti e-pošte imaju problema s njihovim prikazivanjem
Nema animacije
PNG-24 datoteke mogu se povećati; nije tako dobro za dijeljenje weba

JPEG

Svaki put kada se fotografija ponovo spremi i izveze u JPG format, ona će se smanjivati.

JPG, ili Joint Photographic Experts Group ili JPEG, vjerojatno je najpoznatiji format slike. To je zadana opcija za većinu ušteda slike jer je foto-prijateljska zahvaljujući praktično neograničenom zaslonu u boji.

JPG također nudi mogućnost odabira kako komprimirana slika treba biti od 0 posto (velika kompresija) do 100 posto (bez kompresije). Većina dizajnera odluči se za nešto u rasponu od 60 do 70 posto. Slike i dalje izgledaju dobro na ovoj razini kompresije, ali veličine datoteka su znatno manje.

JPG koristi kompresiju gubitaka i ne održava izvorne podatke tijekom kompresije. Svaki put kada se fotografija ponovo spremi i izveze u JPG format, ona će se smanjivati.

JPG format najčešće se koristi za slike, fotografiju i bilo što s puno boja.

Pros JPEG

Izvrsno za visoke boje i fotografije
Jednostavno smanjenje veličina datoteka
Prikazuje se dosljedno u klijentima e-pošte

Protiv JPEG-a

Nema transparentnosti
Stvara nazubljene rubove teksta
Nema animacije
Format gubitka
Nema automatskih metapodataka za pretraživanje, mora sadržavati informacije

Koji format trebate koristiti?

Sad kad znate koje su neke od razlika između SVG i PNG u odnosu na JPG, što biste trebali koristiti?

Možete si postaviti nekoliko pitanja kako biste došli do tog odgovora.

Trebate li vektorski ili rasterski format?
Vektor: SVG
Raster: JPG ili PNG

Treba li vam transparentnost?
Da: SVG ili PNG
Ne: JPG

Koristite li sliku visoke boje?
Da: JPG ili PNG
Ne: SVG

Je li to velika fotografija?
Da: JPG
Ne: PNG

Sadrži li slika tekst?
Da: PNG
Ne: JPG

Je li vam kompresija bez gubitaka važna?
Da: SVG ili PNG
Ne: JPG

Morate li grafiku ažurirati i ponovo rasporediti?
Da: SVG
Ne: PNG ili JPG

Koristite li animaciju?
Da: SVG
Ne: JPG ili PNG

Zaključak

Sva tri formata slike - SVG, PNG i JPG - imaju praktične i široke aplikacije. Iako je SVG najnoviji format i često se može spremiti na najmanju veličinu datoteke, to nije uvijek najbolja opcija.

Razmislite o tome kako koristite slike u svom projektu dok odabirete vrstu datoteke kako biste pronašli onu koja će najbolje raditi za ono što pokušavate postići. Čak možete naći da projekti uključuju slike koje koriste sve tri vrste datoteka. (Zapravo je prilično uobičajeno!)