08 406 00 30 

Mediakurser

Rätt filformat för bilder på din webbplats

filformat

Rätt filformat för bilder på din webbplats

Rätt filformat för bilder på din webbplats

Bilder på webben ska väga så lite som möjligt, men samtidigt se bra ut. Det gäller därför att välja rätt filformat när man laddar upp bilder på webbplatsen. De två vanligaste filformaten på webben idag är JPG och PNG. Om man jämför samma bild som JPG eller PNG ser de oftast precis likadana ut. Tittar man på olika webbplatser ser man att PNG verkar användas lite oftare än JPG. Jag hör ofta från andra att de tror att det är PNG som ska användas på webben och statistik bekräftar också att många gör på det sättet. Men är det verkligen rätt?

PNG eller JPG – vilket filformat ska man använda?

Det finns skillnader som är bra att känna till när du använder bilder på nätet, även fast JPG och PNG-bilder oftast ser likadana ut. Sökmotorer, som Google, rankar webbplatser som laddar in snabbare, högre än långsammare webbplatser. Bilder är en av de komponenter som påverkar hur snabb en webbplats är allra mest. Målet när man sparar bilder till webben hela tiden att få ner filstorleken så mycket som möjligt samtidigt som den synliga bildkvaliteten inte påverkas.

Förlustfri och förstörande kompression

Stora bilder tar plats på webbservern och gör så att webbsidan laddar in långsammare. För att minska filstorleken använder man komprimering. Syftet med att komprimera en bild är att spara utrymme, eftersom mindre bilder är lättare att överföra och lagra. Det finns två typer av komprimering, förlustfri och förstörande. JPG använder förstörande, PNG använder förlustfri komprimering.

Förlustfri komprimering

Bilder innehåller massor av information, en hel del som inte syns. Förlustfri komprimering tar bort data som inte syns ur bilden, men informerar också datorn om vilken data som var onödig och hur den kan återskapas vid behov. Sparar man bilder i filformatet PNG kan man alltså både äta kakan och ha den kvar.

Förstörande komprimering

JPG använder förstörande komprimering. Den tar bort bildinformation våra ögon inte kan se. Resultatet blir en bild med samma kvalitet som originalet, fast den väger betydligt mindre när man sparar som JPG. Nackdelen är att den information man tar bort inte kan återskapas. Varje gång en bild redigeras och/eller sparas en gång till, förlorar den ännu mer data, vilket minskar kvaliteten med tiden.

filformat, Rätt filformat för bilder på din webbplats

Nu när vi vet att PNG använder förlustfri komprimering och JPG förstörande är väl valet enkelt? Självklart väljer man PNG alla dagar i veckan. Då kan man öppna och redigera bilden hur många gånger som helst utan att förlora kvalitetet. Men tyvärr är det är inte alls så enkelt. Istället är nästan alltid JPG det bästa valet.

JPG – bästa filformat till fotografier

filformat, Rätt filformat för bilder på din webbplats

Fördelen med PNG-filer, att man behåller all bildinformation, är också en stor nackdel. Om man jämför filstorleken mellan PNG och JPG ser man att PNG-filer oftast väger 3–5 ggr mer än JPG-filer. En av de största anledningarna till att redigera bilder för webben är att hålla nere filstorlekarna så mycket som möjligt. Därför väljer jag nästan alltid JPG som filformat till alla fotografier jag visar på webben.

filformat, Rätt filformat för bilder på din webbplats

JPG

JPG står för Joint Photographic Experts Group. Ibland ser du bilder med filändelsen JPEG också. JPG och JPEG är samma filformat och fungerar exakt likadant. Tidiga Windows-versioner kunde bara bearbeta filer med tre bokstäver, så JPEG kortades till JPG.
Det smarta med JPG är att filformatet tar hänsyn till hur det mänskliga ögat uppfattar ljus. Även om antalet färger i bilden minskas när en JPG-fil komprimeras upplever ändå våra ögon en bild i mycket hög kvalitet.

Sammanfattning JPG

  • Det rekommenderade valet för fotografier.
  • Bra val för skärmdum par av spel, filmer och liknande innehåll.
  • Om bilden sparats på en vit bakgrund.
  • Betydligt mindre filstorlekar av JPG.
  • Snabbare sidinläsning och användarupplevelse på webben
  • JPG använder förstörande komprimering, men du kan styra hur mycket bilden ska komprimeras.
  • Varje gång du öppnar, redigerar och sparar en JPG-bild komprimeras bilden ytterligare, vilket till slut kommer att synas i bildkvaliteten.

PNG

filformat, Rätt filformat för bilder på din webbplats

PNG står för Portable Network Graphics. Fil ändelsen är PNG. Det finns flera olika varianter av PNG, men idag är det PNG-24 som gäller. Den stora fördelen med PNG-formatet, förutom att det är oförstörande, är att det stödjer genomskinlighet.

En sak vi inte tänker på så ofta är att alla bilder är rektangulära. Fotografier är oftast rektangulära och då passar JPG bäst som filformat. En bild på en oval logotyp är också rektangulär, men det som är utanför själva logotypen syns inte. Det är genomskinligt. Vi ser bara själva logotypen. Vill man använda bilder med genomskinlighet är därför PNG det bästa valet. När du ser en logotyp på en webbplats är det troligaste att du tittar på en PNG-fil.

Även fast jag rekommenderar att du använder JPG som filformat finns det tillfällen då PNG kan vara ett bättre val. PNG bevarar mer detaljer i en bild än JPG. Vet du att bilden ska förstoras i webbläsaren eller att detaljer är extra viktiga, kan PNG vara det bästa valet, trots filstorleken.

Är du inte riktigt säker på om du behöver redigera bilden på nytt kan du spara den som PNG. När du senare vet att du inte kommer att ändra mer i bilden kan du spara om den som JPG och ladda upp den på nytt. Har du text i bilder blir oftast kvaliteten betydligt bättre med PNG än med JPG.

Sammanfattning PNG

  • Bästa valet för illustrationer och ritad grafik
  • Används med fördel för detaljerade diagram och skärmbilder från datorprogram.
  • Till alla bilder som innehåller genomskinlighet
  • Stödjer genomskinlighet i flera nivåer, vilket gör det lämpligt för t.ex. skuggor
  • Ju färre färger som används, desto mindre filstorlekar
  • Förlustfri komprimering en fördel om du ska redigera bilden igen

GIF

filformat, Rätt filformat för bilder på din webbplats

Även om vi använder JPG och PNG till nästan alla våra bilder på webben kan det vara bra att känna till filformatet GIF. GIF står för Graphics Interchange Format. Tidigare var det ett vanligt förekommande filformat för bilder på webben, särskilt för illustrationer och bilder med genomskinlighet. Idag kan man säga att PNG ersatt GIF som filformat.

Det finns fortfarande ett undantag då vi fortfarande använder GIF och det är när vi vill animera bilder för webben och sociala medier. GIF stödjer visning av bildruteanimerade bilder och är det enklaste sättet att visa bilder med rörelse på webben.

Sammanfattning GIF

  • Enda filformatet som stödjer animering
  • Små filstorlekar, betydligt mindre än PNG
  • Kan bara innehålla 256 färger
  • Förlustfri komprimering

WebP – ett nytt filformat för webben

filformat, Rätt filformat för bilder på din webbplats

Idag är det fortfarande JPG och PNG som gäller på webben. Men snart är det kanske ändring på det?

WebP är ett modernt bildformat som utvecklas av Google som ger betydligt mindre filstorlekar, men samma bildkvalitet som JPG och PNG. Dessutom stödjer WebP också genomskinlighet och animering. Än så länge stödjer inte alla webbläsare och webbsystem det nya filformatet, men med tiden kommer kanske WebP att ersätta JPG, PNG och GIF.

När man sparar bilder i formatet WebP kan man välja om man vill använda förstörande eller oförstörande komprimering. Oförstörande bilder i WebP-formatet väger ca 25% mindre än jämförbara PNG-bilder. WebP-bilder som sparats med förstörande komprimering väger 25-34% mindre än jämförbara JPG-bilder.

Alla webbläsare har inte stöd för det nya WebP-formatet och försöker du ladda upp bilder i formatet till WordPress tillåts det inte ännu av säkerhetsskäl. Men det kommer att fungera i framtiden.

Vill du testa att konvertera dina bilder till det nya WebP-formatet kan du läsa mer om hur det går till på Googles egen sida för det nya bildformatet. Det är fortfarande under utveckling så det finns ännu inget färdigt program att ladda ner. Är du tekniskt intresserad kan du kanske lista ut hur man kan testa det här nya bildformatet för webben.



Fler blogginlägg

webp och avif
Grafisk Design

WebP och AVIF i Photoshop

På senare år har det kommit två nya bildformat för webb, webP och AVIF. WebP står för WebPicture och AVIF för AV1 Image File Format. Båda formaten komprimerar bilder mer

Läs mer »

Kategorier

Senaste inlägg

Ansvarig

Ansvarig utgivare
Richard Stenlund
richard@mediakurser.se

Prenumerera

Skaffa egen blogg

wordpress-kurs
Gå en kurs i WordPress

Boka e-handelsvecka 1-5 juli

Fyll i formuläret för att boka din plats.

Kontaktuppgifter
Kontaktinformation
Välj betalsätt