När det kommer till att skapa hemsidor eller att producera content stöter man ofta på olika bildformat. Är PNG det bästa alternativet, eller ska jag köra med JPG? Jag vill ha en enkel GIF-animation – men varför använder jag då inte SVG?
Vad är JPG?
JPG, eller JPEG, är ett bildformat som främst används när det kommer till digitala foton. Bilder som sparas i JPG-format komprimeras destruktivt. Det innebär att bildens filstorlek minskas genom att datorn tar bort information från bilden. Denna information går därefter inte att få tillbaka.
En liten filstorlek gör att sidan laddas snabbare. Sökmotorer som Google gillar sidor som laddar snabbt, eftersom användare är mer benägna att stanna på sidan. Det gör att du rankas bättre på sökmotorer.
Beroende på program kan du själv välja hur mycket du vill komprimera bilden. Genom att använda en högre kvalitetsinställning så kommer det vara svårt att se att bilden är sparad i JPG.
Bilder sparade i JPG kan i regel inte ha någon transparens.
Vad är PNG?
PNG ses av många som ett värdig alternativ till JPG. På hemsidor används PNG främst för bilder som ikoner, digital grafik och andra liknande bilder. Detta beror på två saker:
PNG är ett bildformat som använder icke-destruktiv komprimering. Det innebär att en bild som sparas genom PNG i stort sett ser likadant ut som originalet. Det gör att ikoner, digital grafik, och loggor, kan behålla sin skärpa när de står för sig själv. Tyvärr innebär detta också att bildformatet har en större filstorlek än JPG, vilket gör att foton oftast inte används.
Transparens är PNGs största styrka. Om du i ditt bildbehandlingsprogram inte har en bakgrund till din logga kan du, med PNG, lägga bilden över vilken färgad bakgrund som helst. Bakgrunden är, med andra ord, genomskinlig!
Vad är GIF?
GIF är ett äldre bildformat som också använder sig av icke-destruktiv komprimering. Nuförtiden används GIF sällan till annat än bildanimationer. Du har säkert sett ett videoklipp i bildformat någon gång – det är en GIF. Men även där har GIF under de senaste åren sakta men säkert ersatts. Idag används ofta alternativen .mp4 och .webm – fast i folkmun kallar vi dessa fortfarande för giffar.
Anledningen till att alternativ har dykt upp beror på formatets begränsningar. Som en GIF kan en bild endast innehålla 256 olika färger. Det gör att bilder ofta förlorar färginformation och därmed ser dåliga ut. Med videoformat som .mp4 och .webm har vi inte detta problem.
Vad är SVG?
SVG är ett bildformat vars innehåll är uppbyggt av vektorgrafik. Det innebär att du behöver specialiserade program för att kunna redigera en SVG-fil som bild. Du kan även redigera en SVG-fil med vilket textbaserat program som helst – till exempel om du vill byta färg på en ikon.
Vektorgrafik är skalbar. Det innebär att du kan lägga in en SVG-bild i vilken upplösning som helst, och bilden kommer fortfarande vara skarp.
Tyvärr innebär denna skalbarhet inte att du kan ta ett digitalt foto och göra den superstor. Vektorgrafik och SVG-bilder är enkla och består av diverse geometriska former. Vanligen ser vi logotyper, ikoner och animationer som SVG-filer.
Animationer? Ja, animationer. Om du vill ha en illustration med animation på din hemsida görs grunden ofta i ett vektorformat. Detta för att göra illustrationen mer skalbar.
SVG är främst ett format som hjälper oss att se till att vi har en responsiv hemsida där bilder ser bra ut på alla upplösningar.
När ska jag använda vad?
Till viss del har vi redan gått igenom svaret, men vi gör det en gång till för säkerhetens skull.
JPG används för digitala foton, som artikelbilder. Använd inte JPG när du har en logotyp eller ikon som har transparent bakgrund. Använd inte JPG när du har bilder med små linjer, som ritningar, då det finns en risk att dessa upplevs som suddiga. Använd endast när bildstorleken annars är för stor.
PNG använder du när du behöver en transparent bakgrund, eller av annan anledning inte vill förlora en bilds kvalitet. Använd inte när du har ett större digitalt foto – oftast blir filstorleken alldeles för stor, vilket sänker din hemsidas hastighet. Om det digitala fotot har en transparent del måste du ändå använda PNG.
GIF bör du endast använda till enkla stillbildsanimationer med få färger. Det finns idag bättre alternativ till små filmklipp, som .mp4 och .webm.
SVG använder du till animationer av vektorfigurer. Detta för att behålla bildens kvalitet i olika storlekar.
Du har ett val att göra när det kommer till PNG och SVG avseende logotyper och ikoner på din hemsida. Om hemsidans hastighet är hög prioritet är PNG ett bättre alternativ. Om hemsidans skalbarhet är en prioritet är SVG ett bättre alternativ. Du kan också använda SVG till loggan och PNG till ikoner, eller tvärtom.
Funderar du på en ny hemsida, med en ny och fräsch look?
Kontakta oss här för att ta reda på hur vi kan hjälpa er.
