När det gäller att skapa bilder för webben och andra digitala ändamål, vilka filformat ger dig det bästa resultatet? Du måste tänka på hastighet kontra bildkvalitet och skala. Så vad ska du använda: SVG vs PNG vs JPG?
Det fanns en tid när du bara använde en JPG-storlek för att passa utrymmet med 72 dpi och fortsatte. Inte längre. Högupplösningsskärmar, flera visningsportar och ett behov av att ha en snygg webbplats har gjort det till en mycket mer komplex process. Låt oss dyka in i för-och nackdelarna med vart och ett av dessa format!
SVG
SVG ser bra ut i alla storlekar och fungerar för nästan alla typer av bilder än ett foto.SVG, eller Scalable Vector Graphics, är otroligt praktisk. Därför använder designers det oftare.
Eftersom SVG är ett vektorformat ser de bra ut i vilken storlek som helst och fungerar för nästan alla typer av bilder än ett foto.
SVG är ett förlustfritt format - vilket betyder att det inte förlorar data vid komprimering - ger ett obegränsat antal färger och används mest för grafik och logotyper på webben och för projekt som kommer att ses på näthinnan eller andra högupplösta skärmar.
Fördelar med SVG
- Vektorformat gör det bra med alla storlekar
- Möjligheten att skapa enkla SVG görs i en kod eller textredigerare
- Konstruera och exportera komplex grafik från Adobe Illustrator eller Sketch
- SVG-text är tillgänglig
- SVGs är lätta att skriva och skript
- SVG-format stöds av moderna webbläsare och är framtidssäkra
- Format är mycket komprimerbar och lätt
- Bra för sökning på grund av textbaserat format
- Stöder öppenhet
- Tillåter stillbilder eller animerade bilder
Nackdelar med SVG
- Att utforma SVG kan bli komplicerat
- Gör inte på några nedbrutna webbläsare
- Begränsat stöd för e-postklienter
Vill veta mer? Vi har två andra guider som förklarar mer om SVG: Den praktiska nybörjarens guide till SVG och hur (och varför) SVG kommer att ta över.
PNG
PNG erbjuder något som JPG inte kan - öppenhet.PNG eller Portable Network Graphics, är ett format som är utformat för webben som erbjuder något som JPG inte kan - öppenhet. Detta ensam är varför PNG har varit så populär för att ladda upp element som logotyper till webbdesign.
Det finns två typer av PNG-filer - PNG-8 och PNG-24. PNG-8 använder en mer begränsad färgpalett med bara 256 färger, har något bättre genomskinlighet och export i liten storlek. PNG-24 använder en obegränsad färgpalett, upprätthåller insyn men exporterar i större storlek. Båda PNG-typerna har förlustfri kompression.
Medan PNG-format liknar GIF-filer, stöder de inte animering. Detta format används mest för ikoner, små stillbilder eller någon bild som behöver öppenhet.
Fördelar med PNG
- Stöder öppenhet
- Bra för bilder med text i dem
- PNG-format gör logotyper bra
- Innehåller inbäddad textbeskrivning för sökmotorer
- PNG-8 har liten filstorlek och är lättast
- Exportera utan skrynkliga kanter
Nackdelar med PNG
- Filstorlekar växer snabbt för stora filer som bilder
- Vissa äldre e-postklienter har problem med att göra dem
- Ingen animering
- PNG-24-filer kan bli stora; inte lika bra för webbdelning
JPEG
Varje gång ett foto reseras och exporteras som en JPG, kommer det att försämras.JPG eller Joint Photographic Experts Group, eller JPEG, är förmodligen det mest kända bildformatet. Det är standardalternativet för de flesta bildbesparingar eftersom det är fotovänligt tack vare en praktiskt taget obegränsad färgdisplay.
JPG erbjuder också möjligheten att välja hur komprimerad en bild ska vara från 0 procent (tung komprimering) till 100 procent (ingen komprimering). De flesta designers väljer något i 60 till 70 procent. Bilder ser fortfarande bra ut på denna komprimeringsnivå men filstorlekarna är betydligt mindre.
JPG använder lossy-komprimering och behåller inte originaldata under komprimering. Varje gång ett foto reseras och exporteras som en JPG, kommer det att försämras.
JPG-formatet används mest för bilder, fotografier och allt med mycket färg.
Fördelar med JPEG
- Perfekt för hög färg och fotografi
- Lätt att minska filstorlekarna
- Ger konsekvent i e-postklienter
Nackdelar med JPEG
- Ingen öppenhet
- Skapar kantiga kanter för text
- Ingen animering
- Lossy format
- Inga automatiska metadata för sökning, måste innehålla all information
Vilket format ska du använda?
Nu när du vet vad några av skillnaderna är mellan SVG vs PNG vs JPG, vad ska du använda?
Du kan fråga dig några frågor för att få det svaret.
Behöver du ett vektor- eller rasterformat?
Vektor: SVG
Raster: JPG eller PNG
Behöver du insyn?
Ja: SVG eller PNG
Nej: JPG
Använder du en högfärgsbild?
Ja: JPG eller PNG
Nej: SVG
Är det ett stort foto?
Ja: JPG
Nej: PNG
Innehåller bilden text?
Ja: PNG
Nej: JPG
Är förlustfri kompression viktig för dig?
Ja: SVG eller PNG
Nej: JPG
Behöver grafiken uppdateras och omfördelas?
Ja: SVG
Nej: PNG eller JPG
Använder du animering?
Ja: SVG
Nej: JPG eller PNG
Slutsats
Alla tre bildformat - SVG, PNG och JPG - har praktiska och omfattande applikationer. Medan SVG är det senaste formatet och ofta kan sparas till den minsta filstorleken är det inte alltid det bästa alternativet.
Tänk på hur du använder bilder i ditt projekt när du väljer en filtyp för att hitta den som fungerar bäst för det du försöker åstadkomma. Du kanske även upptäcker att projekt innehåller bilder som använder alla tre filtyper. (Det är faktiskt ganska vanligt!)