Vilka bildstorlekar ska jag använda?

Introduktion

Bildstorlekarna nedan är för vår standardsajt. Om ni specifikt önskat ändra bildstorlekarna, eller beställt andra bannertyper än våra standardtyper så gäller inte dessa instruktioner. 

Tycker ni att det är svårt att skala om bilder till de specifika måtten? Läs om vår integration till Cloudinary här.

Bilder på vanliga sidor

Generellt sett kan man säga att det finns två bildvarianter som används i content-ytan.

En huvudbild som fyller ut hela content-ytans bredd i desktopläge och en miniatyrbild (valfri) som används i bl.a mobilt läge och när den publika sidan listas.

För att sidan skall se enhetlig ut rekommenderar vi att man håller sig till ett bestämt bildförhållande (aspect ratio) på samtliga huvudbilder och miniatyrbilder.

Vi tycker att ett 16:9-bildförhållande är passande.

Huvudbild (”Large”)

Generellt sätt så används första bildfältet i content management till huvudbilden

Vi har bestämt att content-ytan i desktop-läge på CMS sidorna ska vara 8/12 av behållarens bredd i desktop-läge, därför rekommenderar vi att huvudbilden skall vara 800px bred dvs:

Bildförhållande 16:9.
Bredd: 800px
Höjd: 450px

Miniatyrbild (’small’)

Generellt sett används andra bildfältet i admin content management till miniatyrbilden. Den här bilden rekommenderar vi ska vara 400px bred.

Bildförhållande: 16:9
Bredd: 400px
Höjd: 225px

Bild i header

Fjärde bildfältet i content management kan man använda om man vill ha en unik bakgrundsbild i header-ytan på den befintliga publika sidan.

Om man vill optimera sidan och göra så att sidan laddas snabbare för mindre enheter såsom mobil och surfplatta så kan man använda tre olika bildversioner för detta.

Logiken för att få det här att fungera är att bilden som specificeras i sökvägen måste ligga i en mapp som heter 'desktop'. Mobilvarianten måste ha samma sökväg men istället för 'desktop' så skall den ligga i en mapp som heter 'mobile'. Tablet-versionen skall ligga i en mapp som heter 'tablet'. Samtliga bildversioner måste alltså ha samma filnamn.

För att den extrema widescreen-bilden i desktop-läge inte ska se fjuttig ut i mobilt-läge så använder vi oss av tre olika bildförhållanden.

Rekommenderade bildstorlekar för dessa tre bilder:

Desktop

Bildförhållande: 3:1
Bredd: 1680px
Höjd: 560px

Tablet

Bildförhållande: 2:1
Bredd: 1200px
Höjd: 600px

Mobile

Bildförhållande: 16:9
Bredd: 600px
Höjd: 338px

Bilder i startbanners

Startbanners kan publiceras / kopplas till samtliga publika sidor förutom hotellsidorna. Läs mer om banners här.

Position: 'Slideshow - Header section'

Bildspel i header. En startbanner är en slide i bildspelet. Samma bildmått som för  ”BILD I HEADER”  gäller här förutom att de tre olika bildversionernas sökvägar specificeras i dedikerade fält. 

Position: 'Page section - Grid column span via banner types'

Den här ytan sträcker sig över hela grid-behållarens bredd. Det finns ett antal startbannertyper som endast fungerar tillsammans med den här positionen. Bildstorlekarna och varianterna listas nedan.

GRID - WHOLES. colspan 1/1 (All layouts)

Bredd: 1200px
Höjd: [valfri]

GRID - HALVES. colspan 1/2 (Desktop)

Bredd: 600px
Höjd: [valfri]

GRID - THIRDS. colspan 1/3 (Desktop)

Bredd: 400px
Höjd: [valfri]

GRID - THIRDS. colspan 1/3 (Desktop) - with text over image ('hoverbox')

Bredd: 400px
Höjd: [valfri]

GRID - FOURTHS. colspan 1/4 (Desktop)

Bredd: 300px
Höjd: [valfri]

GRID - SIXTHS. colspan 1/6 (Desktop)

Bredd: 200px
Höjd: [valfri]

GRID - A. colspan 2/4 'x2' (Desktop)

Bildförhållande: 200:131
Bredd: 600px
Höjd: 393px

GRID - A. colspan 1/4 'x1' (Desktop)

Bildförhållande: 16:9
Bredd: 400px
Höjd: 225px

GRID - B. colspan 2/3 'x2' (Desktop)

Bildförhållande: 160:101
Bredd: 800px
Höjd: 505px

GRID - B. colspan 1/3 'x1' (Desktop)

Bildförhållande: 16:9
Bredd: 400px
Höjd: 225px