Bild och bildstorlekar för enhetssida 2.0

Bilderna ska visas bra oavsett om besökaren är på datorskärm, padda eller mobil. Cirka 50% av dem som söker information på goteborg.se (inklusive enhetssidor) surfar via mobil. Det gör att du behöver tänka "mobil först".

Gör så här - för att bilderna på din enhetssida ska fungera både på skärm, padda och mobil. Följ de bildmått som står angivet i mallen där du skapar ny sida och i denna manual. I bildarkivet kan du anpassa bilderna direkt till rätt storlek. Bilderna blir dessutom lagom tunga. Tänk mobil först. Se hur bilden ser ut i mobilen. Du ser direkt om bilden fungerar eller inte Ingen text inne i bilden. Det är otillgängligt och dessutom helt omöjligt i mobilen. Inga bildcollage eller mosaikbilder. De blir för för små och otydliga i mobil. Inga gif-bilder eller animationer av tillgänglighetsskäl. Rörliga bilder ska vara avstängda när besökaren kommer in på sidan. Tänk på att minska filstorleken. Bilderna bör inte vara för tunga (mindre än 0,5 mb) att ladda upp för besökaren. Använd de gratis bildbehandlingsprogram (PhotoFiltre, Paint) som finns på datorn eller att beställa via Mina verktyg för att beskära till rätt storlek. Har du Photoshop kan du använda alternativet Spara för webben. Det finns även program på webben för att minska filstorleken ytterligare.

I manualerna för bilder och bildstorlekar samt direkt i redaktörsgränssnittet framgår det vilken storlek ( höjd och bredd) det ska vara på bilden för bästa resultat. Om du hämtar bilderna från bildarkivet kan du dessutom ofta beställa formatet direkt där och få bilden i rätt storlek för var den ska visas.

Mått på bilder på enhetssida 2.0
px = pixlar
angivna mått är bredd x höjd

Startsidebild

Mått (px): 640 x 360

• Om bilden är bredare än 640 px justeras den på bredden till 640 px, bilden har kvar samma proportioner som den hade från början, men enligt storleken 640 x 360. Lägg inte in större bilder, då tar det längre tid för sidan att laddas in.
• Beskärning av bilder görs enligt ration 16:9. (640 x 360 px)

Formatet är nytt från och med maj 2019, men du behöver inte byta ut befintliga bilder.
Använd funktionen i bildarkivet när du laddar ner bilden som gör att den automatisk blir 640 pixlar bred.

Du kan i stället för bild välja att lgga in en film:

Bildpuffs-bild

• Mått (px): 400 x 225
• Ingen beskärning görs
• Om bilden är bredare än 400 px justeras den på bredden till 400 px och höjden justeras så att bilden har kvar samma proportioner.

Formatet är nytt från och med maj 2019, men du behöver inte byta ut befintliga bilder mer än om du ser att de inte längre blir bra.


Artikelbild (ovanför rubrik)

• Mått px: 900x400 (bilden bredare än texten)
• Ingen beskärning görs
  

Formatet är nytt från och med maj 2019, men du behöver inte byta ut befintliga bilder mer än om du ser att de inte längre blir bra.

Aktuelltartikel

• Bildstorlek: 880 x 400 eller 640 x 427. Tänk på att bilderna inte ska vara för tunga. Gärna mindre än 500 kB.

Bilder i brödtext

• Inga rekommenderade mått, bilden blir i det format som den laddas upp, men max 100% av tillgänglig yta, det vill säga den kan inte bli större än bredden för kolumnen den ligger i (640 px på datorskärm)
• Bilder som är mindre än kolumnens storlek lämnas som de är, en liten bild kommer alltså INTE att justeras.
• Bilden hamnar alltid till vänster och texten fortsätter under bilden.

Bilder i texteditorn:

Bilder i sidmodulen Bild

• Mått px: bredd 900, höjd valfri
• Ingen beskärning görs
• I sidmodulen bild justeras bilden upp till 100% av bredden på kolumnen, det vill säga 640 px. Det gör att bildtexten och fotograf placeras snyggare på datorskärm.

Formatet är nytt från och med maj 2019, men du behöver inte byta ut befintliga bilder mer än om du ser att de inte längre blir bra.

Se hur din sida ser ut på paddan, mobilen...
Det finns ett verktyg där du kan klistra in en webbadress för att se hur det ser ut till exempel i mobiltelefon: http://design.google.com/resizer/#

Gäller enhetssidor på alla paddor
Både bildstorleken (förhållandet bredd och höjd) och hur lång ingressen och en eventuell rubrik är på startsidan påverkar hur det ser ut. Om ingressen kanske är aningen lång kan det bli "luft" under bilden (vitt). Vi bedömer detta som bättre än att, som tidigare då bilderna beskars och inte visades korrekt på paddan eller i mobilen. Skriv färre än 300 tecken i ingressen för bästa utseende på startsidan. Prova dig fram.