Bildstorlekar

I och med att spaltbredderna utökas kommer bilder att förfoga över större utrymme.

Det får olika konsekvenser för bilder i brödtextyta och bilder som listas i andra mallar (t ex i andra block och i startavdelningar).

Bilder i brödtextfält

Bildblock som ligger direkt i brödtextfältet visas precis som tidigare i sin originalstorlek.

Om bilden ligger i en artikels brödtextfält och har anpassats för tidigare sidbredd (670 pixlar) kommer den att fortsätta vara så bred även om sidan i den nya formen tillåter en större bredd (868 pixlar).

Trygga gärna för denna förändring genom att arbeta in bilder med större bredd om de ska fylla hela sidan.

Precis som tidigare kommer originalbilder som är bredare än vad sidbredden tillåter att skalas ned. Det gör alltså inget om en bild är för stor. Undvik dock att ladda upp onödigt stora bilder. Det gör sidorna trögare att läsa in för besökarna.

Rekommendation: Bilder avsedda att fylla full sidbredd sparas i 1 000 pixlars bredd.

Bilder i artiklar som positioneras till höger eller vänster med omkringliggande textflöde påverkas inte i annan mening än att den större sidbredden gör att dessa bilder tar upp relativt mindre plats i förhållande till den omkringliggande texten.

Exempel: Bild formaterad med 670 pixlars bredd fyller full sidbredd i gamla formen...

...men kommer i och med den utökade sidbredden att lämna en lucka till högermarginalen i den nya formen.

Bilder i listor

Här avses bilder som inte ligger direkt i brödtextfältet utan listas i andra mallar, t ex som puffmedia i puffblock, i spalt i kolumndelarblock et c.

Dessa bilder fyller hela spaltbredden oavsett originalbildens storlek. (Undantag görs för puffbilder som höger- eller vänsterpositioneras. De behåller originalbredd). En bild som i original är smalare än spalten den ligger i skalas upp. Är den bredare skalas den ned för att rymmas.

Om en sådan bild har anpassats för att vara exakt lika bred som den utgående smalare spaltbredden kommer bilden att skalas upp till den nya formens utökade spaltbredd. Den "omsamplas" och tappar i detalj och skärpa. Det slår olika hårt på olika bilder. Fotografier i god kvalitet klarar av uppskalningen bättre än lågupplösta bilder och grafik.

På mobila skärmar utgår webbplatsens flerspaltslösningar. Där visas allt innehåll i en och samma spalt. Innehåll i en smal spalt på dator kommer fylla mobiltelefonens fulla skärmbredd. Här påverkar mobilens skärmupplösning omskalningen av bilden men generellt gäller att bilder som anpassats för smala spalter i desktop-vy skalas upp på mobiltelefon. Det är påtagligt när bilden betraktas i telefonens stående porträttläge och än mer märkbart i liggande landskapsläge där bilden fyller än mer skärmbredd.

Tänk på att omständigheten med att bilder skalas upp i mobila vyer även gäller i den gamla formen. Surfa dina webbsidor på mobiltelefon och gör en bedömning av vilka bilder som tappar för mycket i skärpa när de tar upp skärmens fulla bredd. Dessa bilder bör sparas om i större strolek.

Rekommendation: Bilder avsedda för spalter som i desktop-vy är smalare än 500 pixlar bör sparas i minst 500 pixlars bredd. De behåller då fullgod skärpa såväl på dator som mobiltelefon.

Ta hjälp av pixelmåtten på sidan Sid- och spaltbredder när du formaterar dina bilder. Är spalten din bild är avsedd för smalare än 500 pixlar på datorskärm bör originalbilden vara minst 500 pixlar bred. Är spalten bredare än 500 pixlar bör du använda en bild som i original är minst 1 000 pixlar bred.

Observera att detta inte baseras på exakta kriterier utan ska ses som ett generellt rättesnöre för att förenkla hanteringen. En bild som är 800 pixlar bred duger utmärkt i en spalt som är 600 pixlar bred. 

Exempel: Nedanstående puff har en bild som sparats i samma bredd som spalten enligt den utgående webb-formen (210 pixlar).

I den nya formen tar spalten upp större bredd (270 pixlar) på dator och bilden skalas upp. Den tappar i skärpa.

I en modern mobiltelefon med hög upplösning skalas bilden upp ytterligare och oskärpan ökar. Bilden behöver vara minst 500 pixlar bred för att fungera även i detta sammanhang.

Tänk dock på att inte ladda upp onödigt stora bilder! De skalas visserligen ned till den bredd som spaltutrymmet tillåter men de gör sidorna tunga att läsa in för besökare.

Exemplet ovan förutsätter också att bilden blir kvar i en smal spalt. Flyttas puffen över till en bredare spalt gäller andra förutsättningar och en bredare bild kan behöva användas.

Bilder i samband med ökade textstorlekar

I och med att textstorlekarna ökar i nya formen kommer text i många fall ta upp relativt större plats än omkringliggande bilder. 

Det kan ge mindre önskvärda effekter när bildstorlekar har anpassats efter en viss mängd text och vice versa.

Exempel: Här har bilden anpassats efter att kunna ligga justerad till vänster om en bestämd textmängd.

I den nya formen tar texten större plats. Vänster- och högerjusterade bilder anpassas inte till detta utan behåller sin ursprungliga storlek. En oönskad lucka uppstår under bilden.

Det kan vara svårt att justera för detta på förhand men en rekommendation är att för den här typen av innehåll låta bilden ta upp relativt större plats (eller minska textmängden).

Exempel: I utgående form har här en större bild valts vilket "framtidssäkrar" utseendet när nya formen börjar gälla och texten blir större.

Hjälpte denna sida dig?
Tack för din åsikt!
Till sidans topp