Innehåll

Introduktion

Användarguide

Val av bildmaterial till webbplatsen

I denna guide lyfts grundläggande förutsättningar för att optimera och välja rätt bild till rätt plats på webbplatsen.

Bildbredder

På webbplatsen finns i regel tre olika bildbredder: smal, bred och fullbredd.

  • Smal – fyller mindre än halva ytan för innehållets bredd. Även om de visas i ex. 450 px bredd i desktop kan de bli bredare när kolumner hamnar på en rad i mindre skärmbredder. De bör därför som regel renderas i ca 980 px bredd.
  • Bred – fyller hela innehållsbredden. Dessa bilder kommer i regel inte visas bredare än de visas i designskissen. En riktlinje kan vara ca 1200 px i bredd
  • Fullbredd – täcker hela webbläsarfönstrets bredd, ett vanligt exempel kan vara bilderna i den så kallade herosektionen. Dessa bilder kommer alltid visas lika breda som webbläsarfönstret. En riktlinje kan vara ca 2000 px i bredd.

Nedan är exempel på hur bildbredderna kan visas om i desktopformat, tablet och mobil.

Desktop

Tablet

Mobil

image-size
image-size-tablet-2
image-size-mobile-2

Format och kvalitet

På webbplatsen används i regel fyra olika filformat. JPG, PNG, WEBP och SVG.

  • JPG – bör användas för foton och-/eller bilder som inte innehåller transparent information. JPG-kvaliteten bör sättas i hänsyn till både visuell kvalitet och inladdning. En riktlinje kan vara 60 %.
  • SVG – bör användas för er egen logotyp samt eventuella egna ikoner och-/eller illustrationer. Detta filformat minskar filstorleken markant i förhållande till rastergrafik. 
  • PNG – kan användas för bilder som innehåller transparenta pixlar i de fall SVG ej finns att tillgå. Ett exempel för detta kan vara om ni visar upp kundlogotyper på er webbplats, de bör då ha en transparent bakgrund. 
  • WEBP – vid uppladdning i mediebiblioteket kommer både JPG- och PNG-filer att konverteras till WEBP, som behåller informationen i bilderna, men kan minska filstorleken. Detta är något som sker automatiskt på webbplatsen för att optimera laddtid och pagespeed. 

Nedan är exempel på vilken typ av bild som bör ha vilket format.

JPG

SVG

PNG

WEBP

image-jpg
image-svg
image-png-2
image-webp

Bildbeskärning i olika enheter

I regel kan vi utgå från tre olika brytpunkter: desktop, tablet och mobil. Utöver detta finns det också olika typer av bildytor. En bildyta kan vara fast proportionerlig eller dynamisk i relation till skärmbredd.

  • Fasta proportionerliga bildytor varken beskärs eller ändrar proportioner. I dessa bildytor bör bilder med extra viktig information placeras, så att inget klipps bort i någon av brytpunkterna. Exempel på en sådan bild kan vara en bild i innehållsdelen på en artikelsida.
  • Dynamiska bildytor kan beskäras både horisontellt och ut och vertikalt. Dessa bildytor har ofta en fast höjd och beskärs i enlighet med skärmbredden. Ett vanligt exempel där denna typ av bildytor används är de så kallade herosektionerna. Viktigt att tänka på för dessa är att motivet gärna får hållas centrerat i höjd- och breddled om det är känsligt för beskärning, så att det får vara en del av bildytan även när webbplatsen besöks i enheter med mindre skärm. 

Nedan är exempel på hur de olika bildytorna beter sig i olika enheter.

Fast proportionerlig

Dynamisk höger-vänster

Dynamisk upp-ned

Bildproportioner

I regel kan vi utgå från tre olika proportioner: liggande, kvadrat och stående. Dessa proportioner relaterar inte till en viss höjd eller bredd, utan endast till sig själva. 

  • Liggande bildytor har ofta proportionen 16:9. Denna proportion kan vara en bra riktlinje vid val av bild för en liggande bildyta.
  • Kvadratiska bildytor har alltid proportionen 1:1. Denna proportion bör även appliceras på bilder som visas i geometriskt runda cirklar.
  • Stående bildytor har ofta proportionen 4:5

Nedan är exempel på hur de olika bildproportionerna upplevs i förhållande till varandra.

16:9

1:1

4:5

image-16-9
image-1-1
image-4-5

Vanliga frågor

Vad är webp?

WebP är ett modernt bildformat som ger överlägsen komprimering för bilder på webben. Med hjälp av WebP kan webbadministratörer och webbutvecklare skapa mindre (kb) men skarpa bilder som gör webben snabbare. WebP-bilder är 26 % mindre i storlek jämfört med PNG och 25 % - 34 % mindre än JPEG-bilder vid motsvarande SSIM-kvalitetsindex.

 

Måste jag själv skaffa fram webp-filer?

Nej! Med G-Theme kan du som kund ladda upp png/jpg filer utan att behöva göra någonting. Vårt tema kopierar bilden till ett WebP-format och levererar den som standard till dina besökare.

 

Varför får jag inte ladda upp stora bilder?
 
Datamängd

Vi rekommenderar en maxgräns på 500 kb (PNG/JPEG & WebP) då alla server-leverantörer ger en maximal datamängd som vi som kunder får använda på vår webbplats.

Om vi totalt sett har 15 bilder på en sida, och varje bild väger 4 MB. Så har vi då använt upp 60MB datamängd från servern.
Om vi istället komprimerar bilderna till hälften så kommer vi bara ta upp 7,5 MB datamängd. Detta innebär då att vi får plats med fler bilder för samma datamängd, och har även chansen att förminska dessa ännu mer genom att använda bildformatet “.WebP”.

Pagespeed

Helst bör din sida aldrig visa bilder som är större än 500 kb då det saktar ner sidladdningstiden.

En bild som är fullt optimerad kan vara 2560 pixlar bred och väga 135 kb. En icke-optimerad bild kan vara 2560kb och väga 4-7 MB. Bilderna är identiska, men sidladdningsskillnaden kan vara 3-4 sekunder. Detta har man förr i tiden inte sett som ett problem då alla sidor i regel var långsamma, men idag kan man tydligt se problemet med detta då Google kräver snabba webbplatser.

Vilket format ska jag ladda upp i?

Filformatet beror på om bilden ska innehålla transparenta pixlar eller ej, samt om bilden finns att tillhandahålla som rastergrafik eller vektorgrafik.

Bilderna blir pixliga, vad kan jag göra?

Baserat på att originalbilden finns som JPG, i bättre upplösning och kvalitet, kan du rendera bilden i större storlek eller öka JPG-kvaliteten. Tänk på bildfilen ofta blir tyngre och att detta i sin tur kan påverka sidladdningstiden. Finns bilden som PNG med transparenta pixlar i bättre upplösning kan även denna renderas i större storlek för bättre visuell kvalitet.

Vad händer när jag laddar upp en bild i mediabiblioteket?

När du som användare laddar upp en bild i G-Theme, så kopieras & konverteras bilden till bildformatet “.WebP”. På detta så kopieras din bild upp ytterligare 5 gånger i 5 olika storleksformat (både WebP och formatet som laddades upp). Detta för att leverera optimerade bilder till olika enheter.

T.ex får mobila enheter bilder med bredden 720 px och då även en mindre datamängd på runt 19 kb (beroende på bilden såklart). Istället för att vi i mobila enheter laddar ner en 2560 px stor bild på en 375 px bred enhet (vanlig iPhone skärm).

Kan man ha en GIF?

Ja, det går alldeles utmärkt. Tänk på att en gif innehåller flera olika bilder i en sekvens och att filen därför kan tendera att blir väldigt tung (långsam inladdning). En GIF kan max innehålla 256 olika färger, vilket begränsar den visuella kvaliteten en aning.

Hur fungerar det med licensierade bilder?

Med licensierade bilder menas bilder som köpts från en bildbank eller fotograf. Tänk på att olika bildbanker och fotografer kan ha olika villkor.

Hur vet jag vilket bildformat eller pixlar en bild har?

Genom att spara ned bildfilen på datorn och sedan öppna bildinformationen går det att utläsa bildens storlek i pixlar. Bildens proportion är således minsta gemensamma nämnare mellan bredden och höjden.

Behöver jag beskära bilder utifrån en specifik proportion?

Vi rekommenderar generellt liggande bilder att beskäras i 16:9 eller 16:10 proportioner och stående bilder att beskäras i 4:5 proportioner. Notera att detta endast är generella riktlinjer och inte nödvändigtvis något som går att applicera på varje bildyta.