Till innehåll på sidan
Till KTH:s startsida Till KTH:s startsida

Bilder på KTH:s webbplats

Webbplatsens maxbredd i desktop-läge har utökats vilket gör att bilder som tar fasta på den exakta maxbredd som gällt tidigare inte längre fyller full sidbredd.

Webbplatsens maxbredd går från 1168 pixlar till 1248 pixlar.

Artiklar med vänstermeny går från en innehållsyta på 868 pixlar till 918 pixlar.

Fullbreddsbilder i artikel

Bilder som med exakta mått anpassats efter tidigare maxbredd ger numer en lucka till webbsidans högermarginal. I en artikel med vänstermeny ger en bild som är 868 pixlar bred ett avstånd på 50 pixlar till innehållsytans högerkant.

En rekommendation är att skapa fullbreddsbilder med 1000 pixlars bredd. De skalas då ned till lämplig storlek.

Fullbreddsbild
Fullbreddsbilden här är satt till tidigare maxbredd 868 pixlar. Det högerpositionerat bildblocket på samma sida tar fasta på sidans nya maxbredd så bilderna får inte samma högermarginal.

Positionerade bilder i puff

Puffbilder som positionerats ovanför det övriga puffinnehållet fyller även fortsättningsvis full puffbredd.

Puffbilder som är vänster- eller högerpositionerade behåller som tidigare sin ursprungsstorlek. I och med att webbsidorna nu är bredare kommer dessa bilder att ta upp mindre puffyta än tidigare. Bildmått satta för att låta bilders vänster- och högermarginaler linjera med varandra ger inte längre önskad effekt.
 

Positionerade puffbilder
I det här exemplet fyller inte längre bilderna upp halva puffbredden. Den raka mittlinje mellan puffarna som har eftersträvats kräver bredare bilder.

Puffbilder visas i fullbredd på mobiltelefon. För att hantera detta bör puffbilder ha en bredd på minst 500 pixlar.

Vit bakgrund i bild

Webbplatsen har fortsättningsvis en vit bakgrundsfärg med lätt gråton. Bilder med vit bakgrund kommer att ge en lätt kontrast till denna bakgrund. Dessa bilder kan i vissa fall kräva en ram innan de laddas upp i bildblocket. I andra fall behöver bilderna vara frilagda med transparent bakgrund. Det gäller typiskt logotyper i PNG- eller GIF-format.

Vad behöver jag göra?

  • Gör en bedömning om dina bilder i artiklar behöver sparas om för att fylla sidans fulla bredd. Det här är framförallt angeläget där fullbreddsbilder ligger nära högerpositionerade block och ger en avvikande högermarginal.