Publicerad 21 februari 2022

Bild, illustrationer

Riktlinjer för bilder och illustrationer.

Allmänt

  • Bilder ska följa SKR:s bildpolicy.
  • Bilder ska bara användas om de är betydelsebärande, det vill säga tillför information som inte finns i texten, kompletterar textens innehåll, eller förtydligar sammanhanget som texten förekommer i.
    • Du får inte använda bilder enbart för att "lätta upp" en sida.
    • I vissa fall kan bilder användas för att göra en sida lättare att läsa, till exempel för att fästa blicken vid långa uppräkningar. Dock ska även dessa bilder ha relevans till den text som står på sidan.
  • Om en bild innehåller text eller data, till exempel ett diagram, ska en förklaring av informationen även finnas som text i anslutning till bilden.
    • Diagram kan med fördel kompletteras av en tabell med den data som diagrammet innehåller.
  • Bilder som innehåller många detaljer kan upplevas som små när de laddas upp på en sida. Dessa ska publiceras med möjlighet för besökaren att se dem i större storlek.
    • Fråga din redaktör om vad som krävs för att bilder ska kunna visas i större storlek.
  • Säkerställ att SKR har rätt att publicera bilden på webbsidan.
    • Vissa bilder får bara användas i till exempel tryckt media eller i specifika sammanhang. Om du är osäker kontaktar du en kommunikatör på Avdelningen för kommunikation.
  • Bilder får inte placeras ovanför ingressen på sidan.

Alternativtexter

  • Bilder ska alltid ha alternativtexter som beskriver vad bilden föreställer.
  • Skriv inte "Bilden visar...", "En bild med..." och så vidare. Skriv direkt vad bilden föreställer.
  • I vissa fall förekommer så kallade dekorationsbilder på webbplatsen. En dekorationsbild är inte betydelsebärande utan används enbart som ett grafiskt element. Dessa bilder ska inte ha alternativtexter.
    • Dekorationsbilder används framför allt på landningssidor och översiktssidor.
  • Om bilden innehåller viktig information ska detta inte anges i alternativtexten, utan istället beskrivas i brödtext i omedelbar anslutning till bilden.
    • Alternativtexten ska bara beskriva vad bilden föreställer, inte hur bilden ska tolkas eller det sammanhang den försöker visualisera.
  • Alternativtexter bör bestå av högst 80-120 tecken.

Exempel på alternativtexter

"Två barn som leker i en sandlåda"

"Linjediagram som visar andelen arbetslösa 2019-2021"

"SKR:s ordförande Anders Knape i talarstolen på kongressen"

Förklaringstexter till diagram

  • Innehållet i diagram behöver beskrivas i text som ligger i anslutning till diagrammet.
  • Fokusera på vad diagrammet är tänkt att illustrera eller visualisera, inte på den data som diagrammet innehåller.
    • Om det är själva datan som är poängen med diagrammet så kompletterar du lämpligen en kortare beskrivning med en tabell där all data finns med.
  • Förklaringstexten behöver variera i omfång eller detaljrikedom beroende på hur komplicerade sambanden som diagrammet illustrerar är. Ju mer komplext, desto mer förklaring krävs.

Hur ska jag tänka vad gäller förklaringstexter?

Föreställ dig att du inte har möjlighet att presentera några diagram alls. Du måste alltså beskriva i ord den "poäng" som diagrammet var tänkt att visualisera.

Bildformat

För bilder på sidor bör du hålla dig till följande:

  • 770 x 275 pixlar.
    • Använd stora bilder sparsamt eftersom sidan blir tung att ladda, särskilt på mobila enheter.
  • 220 x 220 pixlar.
    • Porträttbilder ska alltid vara 220 x 220 pixlar.
    • Andra bilder kan vara högre eller lägre (men inte bredare) än 220 pixlar.

Övriga bilder

För andra sorters bilder gäller följande:

  • Puffbilder: 570 x 250 pixlar.
  • Sidor som ska delas på Facebook: 220 x 220 pixlar (eller större).
  • Bilder i nyhets- och debattflödena på indexsidan skr.se: 220 x 220 pixlar.
  • Bilder på sidor utan undermeny (bred sida): 1170 x 420 pixlar.

För indexsidor på delwebbar gäller följande:

  • Hero-bild helspalt: 1360 x 250 pixlar.
  • Hero-bild tvåspalt: 800 x 300 pixlar.