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.

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.

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.

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.

Vanliga frågor