SVG vs PNG vs JPG: beeldformaat voors en tegens

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

Als het gaat om het maken van afbeeldingen voor het web en andere digitale doeleinden, welke bestandsindelingen geven u het beste resultaat? Je moet nadenken over snelheid versus beeldkwaliteit en schaal. Dus wat moet je gebruiken: SVG versus PNG versus JPG?

Er was een tijd dat je net een JPG-formaat gebruikte om de ruimte op 72 dpi te passen en verder ging. Niet meer. Schermen met hoge resolutie, meerdere viewports en de behoefte aan een pittige website hebben het tot een veel complexer proces gemaakt. Laten we ingaan op de voor- en nadelen van elk van deze formaten!

SVG

SVG ziet er geweldig uit op elk formaat en werkt voor vrijwel elk type afbeelding behalve een foto.

SVG, of schaalbare vectorafbeeldingen, is ongelooflijk praktisch. Daarom gebruiken ontwerpers het vaker.

Omdat SVG een vectorformaat is, zien ze er geweldig uit op elk formaat en werken ze voor vrijwel elk type afbeelding behalve een foto.

SVG is een verliesvrij formaat - wat betekent dat het geen gegevens verliest wanneer het wordt gecomprimeerd - geeft een onbeperkt aantal kleuren weer en wordt meestal gebruikt voor afbeeldingen en logo's op het web en voor projecten die op retina of andere schermen met hoge resolutie worden bekeken.

Voordelen van SVG

Vectorformaat wordt goed weergegeven op elk formaat
Mogelijkheid om eenvoudige SVG-renderingen te maken in een code- of teksteditor
Ontwerp en exporteer complexe afbeeldingen vanuit Adobe Illustrator of Sketch
SVG-tekst is toegankelijk
SVG's zijn eenvoudig op te maken en te scripten
SVG-formaten worden ondersteund door moderne browsers en zijn toekomstbestendig
Formaat is zeer samendrukbaar en lichtgewicht
Goed voor zoeken vanwege het op tekst gebaseerde formaat
Ondersteunt transparantie
Staat stilstaande of bewegende beelden toe

Nadelen van SVG

Het ontwerpen van SVG's kan ingewikkeld worden
Render niet in sommige verslechterde browsers
Beperkte ondersteuning voor e-mailclients

Wil meer weten? We hebben nog twee andere handleidingen die meer uitleggen over SVG: de praktische beginnershandleiding voor SVG en hoe (en waarom) SVG het gaat overnemen.

PNG

PNG biedt iets dat een JPG niet kan: transparantie.

PNG, of Portable Network Graphics, is een indeling die is ontworpen voor het web en die iets biedt wat een JPG niet kan: transparantie. Alleen daarom is PNG zo populair geweest voor het uploaden van elementen zoals logo's naar website-ontwerpen.

Er zijn twee soorten PNG's: PNG-8 en PNG-24. PNG-8 gebruikt een beperkter kleurenpalet met slechts 256 kleuren, heeft een iets betere transparantie en exporteert op een klein formaat. PNG-24 gebruikt een onbeperkt kleurenpalet, behoudt de transparantie maar exporteert op een groter formaat. Beide PNG-typen hebben compressie zonder verlies.

Hoewel PNG-indelingen vergelijkbaar zijn met GIF's, ondersteunen ze geen animatie. Dit formaat wordt het meest gebruikt voor pictogrammen, kleine stilstaande beelden of elke afbeelding die transparant moet zijn.

Voordelen van PNG

Ondersteunt transparantie
Goed voor afbeeldingen met tekst erin
PNG-formaten geven logo's goed weer
Bevat ingesloten tekstbeschrijving voor zoekmachines
PNG-8 heeft een kleine bestandsgrootte en is het lichtst
Exporteert zonder gekartelde randen

Nadelen van PNG

Bestandsgroottes groeien snel voor grote bestanden zoals afbeeldingen
Sommige oudere e-mailclients hebben problemen met het renderen ervan
Geen animatie
PNG-24-bestanden kunnen groot worden; niet zo goed voor delen op het web

JPEG

Elke keer dat een foto opnieuw wordt opgeslagen en geëxporteerd als een JPG, zal deze verslechteren.

JPG of Joint Photographic Experts Group, of JPEG, is waarschijnlijk het meest bekende beeldformaat. Het is de standaardoptie voor het opslaan van de meeste afbeeldingen omdat het fotovriendelijk is dankzij een vrijwel onbeperkt kleurendisplay.

JPG biedt ook de mogelijkheid om te kiezen hoe gecomprimeerd een afbeelding moet zijn van 0 procent (zware compressie) tot 100 procent (geen compressie). De meeste ontwerpers kiezen voor iets in het bereik van 60 tot 70 procent. Afbeeldingen zien er nog steeds goed uit op dit compressieniveau, maar de bestandsgroottes zijn aanzienlijk kleiner.

JPG maakt gebruik van compressie met verlies en behoudt tijdens de compressie geen originele gegevens. Elke keer dat een foto opnieuw wordt opgeslagen en geëxporteerd als een JPG, zal deze verslechteren.

Het JPG-formaat wordt het meest gebruikt voor afbeeldingen, fotografie en alles met veel kleur.

Voordelen van JPEG

Geweldig voor hoge kleuren en fotografie
Eenvoudig bestandsgroottes verkleinen
Wordt consistent weergegeven in e-mailclients

Nadelen van JPEG

Geen transparantie
Maakt gekartelde randen voor tekst
Geen animatie
Lossy formaat
Geen automatische metadata voor zoeken, moet informatie bevatten

Welk formaat moet je gebruiken?

Nu u weet wat enkele van de verschillen zijn tussen SVG en PNG versus JPG, wat moet u dan gebruiken?

Je kunt jezelf een paar vragen stellen om dat antwoord te krijgen.

Heeft u een vector- of rasterformaat nodig?
Vector: SVG
Raster: JPG of PNG

Transparantie nodig?
Ja: SVG of PNG
Nee: JPG

Gebruikt u een afbeelding met hoge kleuren?
Ja: JPG of PNG
Nee: SVG

Is het een grote foto?
Ja: JPG
Nee: PNG

Bevat de afbeelding tekst?
Ja: PNG
Nee: JPG

Is compressie zonder verlies belangrijk voor u?
Ja: SVG of PNG
Nee: JPG

Moeten afbeeldingen worden bijgewerkt en opnieuw worden geïmplementeerd?
Ja: SVG
Nee: PNG of JPG

Gebruikt u animatie?
Ja: SVG
Nee: JPG of PNG

Gevolgtrekking

Alle drie de afbeeldingsindelingen - SVG, PNG en JPG - hebben praktische en brede toepassingen. Hoewel SVG het nieuwste formaat is en vaak kan worden opgeslagen in de kleinste bestandsgrootte, is dit niet altijd de beste optie.

Denk na over hoe u afbeeldingen in uw project gebruikt terwijl u een bestandstype selecteert om het type te vinden dat het beste werkt voor wat u probeert te bereiken. Misschien vindt u zelfs dat projecten afbeeldingen bevatten die alle drie de bestandstypen gebruiken. (Het is eigenlijk heel gewoon!)