Publicerad 30 augusti 2022

Bilder, illustrationer

Riktlinjer och lathundar för bilder och illustrationer.

Bilder och illustrationer kan användas som betydelsebärande innehåll. Det innebär att de ska tillföra information som inte finns i texten, som kompletterar textens innehåll, eller förtydligar sammanhanget som texten förekommer i.

Riktlinjer

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 direkt vad bilden föreställer. Skriv inte "Bilden visar...", "En bild med..." och så vidare.
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 beskrivas i brödtext i omedelbar anslutning till bilden, inte i alternativtext.
- 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 vad det är diagrammet var tänkt att visualisera, vad som är poängen med det.

Bildformat

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

770 pixlars bredd.
- Höjden kan variera, men försök hålla dig till 275 pixlar om det går.
- 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 kvadratiska 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: 600 x 260 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å bloggskribenter: 300 x 300 pixlar.
Bilder på sidor utan undermeny (bred sida): 1170 pixlars bredd.
- Höjden kan variera, men försök hålla dig till 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.

Filformat

Följande filformat bör användas för bilder:

Fotografiska bilder: JPEG
Grafik och illustrationer: PNG
Vektorgrafik: SVG

Gör så här (kräver minst behörighet Redigerare)

Växla till redigeringsläget.
Kopiera en av bildmodulerna nedan.
Klistra in modulen där du ska ha en bild.
Byt ut den förvalda bilden mot din egen.
Ändra alternativtext och bildtext.

Storleken på bilderna i modulerna är förinställda och ska inte ändras. De anpassas automatiskt när de placeras på sidan. Däremot behöver du ändra alternativtext och bildtext (om sådan ska användas, annars raderar du den).

Bredd: 220 pixlar

Används för porträtt och andra små bilder. Bilder som laddas upp måste vara minst 220 pixlar breda, men gärna något bredare för att de ska bli tillräckligt skarpa.

Porträtt ska alltid vara kvadratiska, medan andra typer av bilder kan vara rektangulära. Dock blir de aldrig högre (och bredare) än 220 pixlar när de visas på sidan, dvs lika höga som breda.

Modulen används för porträtt och små bilder på sidor. Originalet ska vara minst 220 pixlar brett. Porträtt ska vara kvadratiska.

Bredd: 770 pixlar

Används för bilder som ska visas bredare än 220 pixlar och täcker hela sidans spaltbredd. Bilden som laddas upp behöver vara minst 770 pixlar bred. Höjden kan variera, men begränsas på sidan till maxhöjden 1000 pixlar.

Modulen används för standardbilder (ej porträtt) och täcker hela spaltbredden. Originalet ska vara minst 770 pixlar brett.

Bredd: 1170 pixlar (eller mer)

Används för bilder som behöver vara möjliga att förstora. Bilden som laddas upp behöver vara minst 1170 pixlar bred. Höjden kan variera, men begränsas på sidan till maxhöjden 1000 pixlar. När besökaren klickar på bilden förstoras den till sin fulla originalstorlek.

Illustration på något som behöver förstoras för att kunna urskiljas

Modulen används för bilder som ska förstoras, till exempel detaljerade diagram. Originalet ska vara minst 1170 pixlar brett.