Gå till innehåll

Vi använder bara bilder som är av hög kvalité och som tillför något till sidans innehåll, dvs. vi lägger inte in bilder bara för att det är trevligt med bilder. Det kan handla om att visualisera en fråga, skapa en särskild stämning eller att bekräfta besökarens kunskap (att det är just den skolan, eller platsen).

Innehåll på sidan

Kommunens bildmanér

I kommunens grafiska profil, intranat.orebro.se/grafiskprofil, står det bland annat följande om kommunens bildmanér:

  • Bilderna vi använder ska ha god kvalitet, såväl tekniskt som innehållsmässigt. De ska bidra till att förstärka budskapet och textens innehåll.
  • Skildra gärna vardagliga situationer och välj miljöer och sammanhang som betraktaren enkelt kan knyta an till.
  • Våra bilder ska vara inkluderande och spegla samhällets variation beträffande kön, ålder, etnicitet, kulturer etcetera. När vi väljer bilder ska vi tänka normkritiskt, utmana stereotypa bilder och bryta traditionella könsroller.

Bilder som innehåller personuppgifter

För att publicera bilder som innehåller personuppgifter krävs enligt dataskyddsförordningen (GDPR) att ni kan hävda en rättslig grund för personuppgiftshanteringen, till exempel allmänt intresse, avtal eller samtycke. En personuppgift kan exempelvis vara att en person går att identifiera utifrån sitt utseende eller namn.

Det är de olika nämnderna i Örebro kommun som är personuppgiftsansvariga och ytterst ansvariga för att uppgifterna behandlas på ett korrekt sätt.

På intranätet finns mer information om hantering av personuppgifter.

Placering av bilder

Vi lägger aldrig bilder ovanför huvudrubrik eller ingress. Placera bilden där den passar bäst innehållsmässigt. Bilden kan ligga direkt under ingressen, men tänk då på att om bilden är stor så tar den stor plats i mobilvy och du kan behöva ställa in att den inte ska visas i mobilvy om den inte är nödvändig att visa.

Ibland kan vi behöva använda en stående bild och då passar det oftast bäst att låta text flöda till vänster om bilden. Glöm inte att kolla så det ser bra ut i mobilvy.

Bildstorlekar

Vi har inga bestämda bildmått men använd gärna följande mått – då fyller bilden ut sidans mittenspalt: 1200x675 px. Bilden får då storleksformatet 16:9. Du kan även lägga in större bilder – då anpassar de sig till ytan och fyller ut mittenspalten (men ladda inte upp FÖR stora bilder, det kan göra sidan seg). Om du har en bild som har mindre bredd än ca 800 bör du kolla om det går att få den i större format.

Använd helst liggande format

Normalt använder vi liggande format på bilder, särskilt om den fyller ut sidans bredd. Liggande format blir bäst på webben, särskilt på datorskärm.

Om du behöver lägga in en bild med stående eller kvadratiskt format så bör du begränsa bredden på bilden, annars fyller den alltid upp hela mittenspaltens bredd vilket gör att bilden kan bli för stor på datorskärmen (högre än skärmens höjd).

Om du skulle behöva använda en stående eller kvadratisk bild så tänk på att kolla så det ser bra ut i mobil.

Exempel

Illustration Södra Bettorp

Exempel på bild som är 2000x1125 px och anpassar sig till mittenspalten.

Bildfilens storlek

När du minskar storleken på bilden i pixlar så minskar även filstorleken. Men det är inte alltid det räcker och att bilden blir snabbladdad trots mindre pixelstorlek. Försök att hålla bildstorlekarna under 1 mb så att de kan läsas in snabbt på sidan.

Konvertera till WebP

Förstora bilden

Högerklicka på en bildfil i bildarkivet och välj alternativet "Konvertera till Webp". (Du kan klicka på bilden för att förstora den).

Efter att du har laddat upp en bild i Sitevisions bildarkiv kan du konvertera bilden till formatet WebP. WebP är ett bildformat som rejält minskar filstorleken. Att du konverterar till detta format innebär inte att du "slipper" att minska upplösningen i pixlar på bilden. Men du kan alltså få ner storleken på filen ytterligare efter uppladdning.

I bildarkivet högerklickar du på bildfilen och väljer "Konvertera till Webp". Du får efter detta upp en ruta som visar skillnaden på bilden innan och efter konvertering samt skillnaden i filstorlek.

Denna ruta visas när innan du färdigställer konvertering till WebP i Sitevision. Här ser du skillnaden mellan bilden före och efter konvertering.

Det finns två bildarkiv – ett i Sitevision och ett i Mediaflow

Bildarkivet i Sitevision

Här sparar vi bilder som ska användas för engångsbruk och/eller endast är aktuella under en kortare tid, t.ex. en bild från en prisutdelning som ska ligga i en nyhet.

För att lägga in en bild från Sitevisions bildarkiv på en sida använder man modulen "Bildmodul".

Bilder som ska användas till bildspel behöver bo i Sitevisions bildarkiv.

Bildarkivet i Mediaflow

Bilder som redan finns i Mediaflow hämtar vi därifrån genom att använda modulen "Bild från MediaflowPro". Bilder som finns i Mediaflow ska vara aktuella över längre tid, t.ex. bilder på en förskola eller en park.

Om bilden som du ska lägga in inte finns i Mediaflow behöver den först läggas in där. Mejla Kommunikationsavdelningen via kommunsupport@orebro.se för bollning kring om bilden bör bo i Mediaflow samt hjälp att lägga in ny bild.

För att se vilka bilder som redan finns i Mediaflow kan du kolla i interna bildbanken eller logga in på mediaflow.com (gäller främst Kommunikationsavdelningen) där vi ser fler bilder än när vi kollar via intranätet.

Endast bildredaktionen skapar nya mappar under Bilder i Mediaflow.

Spara bilder

I Sitevision

Spara bilder i bildarkivet i lämplig mapp eller skapa en mapp själv om ingen lämplig finns. Nyhetsbilder till orebro.se sparas i Nyheter-mappen (dessa rensas ibland).

För att bilden ska gå att spara i Sitevision måste den vara i rgb-läge. Cmyk-bilder går inte att spara! Kolla/åtgärda detta i Photoshop under Bild - Läge.

I Mediaflow

Kontakta Kommunikationsavdelningen via kommunsupport@orebro.se för att få hjälp att spara bilder i Mediaflow.

Lägg alltid in:

  • fotograf
  • sökord
  • beskrivande text – det är denna som syns som alt-text i integrationer.

Bildbyråbild

Bilder som vi köper från Scandinav bildbyrå hamnar automatiskt i mappen "Köpta bildbyråbilder" i Mediaflow. Vi måste dock manuellt lägga till "Scandinav" efter fotografens namn för att det ska synas i integrationer och lägga bilden i lämpliga mappar. Det gör du enkelt genom att dra bilden till lämplig plats och välja "Kopiera filen hit".

Chefer eller politiker

När vi laddar upp en bild på chefer eller politiker ska vi även ange personens namn och titel.

GDPR-status ska vara "Medgivande behövs ej - berättigat intresse".

Konstverk

När vi laddar upp en bild på ett konstverk ska vi tagga bilden med namn på konstnären och verket.

Illustration

Om bilden är en illustration från arkitektbyrå ska arkitektbyråns namn stå under Fotograf.

Bildnamn

I Sitevision

  • Döp bilderna till vettiga sökbara namn! T.ex.:
    • Varbergaparken.jpg
    • logga Oxhagen fritidsgård.jpg
    • Alnängsbadet. Foto Susanne Flink.jpg
  • Det går bra att använda åäö i bildnamnet.
  • Använd inte / i bildnamnet – bilden går att ladda upp i SiteVision men syns inte utåt.
  • Lägg gärna in fotografens namn i bildnamnet så vi har koll på vem som fotograferat (särskilt om fotografen vill anges).
  • Bilder från Scandinav bildbyrå döper vi med bildens bildbyrå-ID + Scandinavbildbyrå + fotograf, t.ex.: BA_E3NJ_Scandinavbildbyrå_Foto Leif Johansson. Skriv då i bildbeskrivningen vad bilden innehåller.

I Mediaflow

Kommunikationsavdelningen sparar/döper bilder i Mediaflow.

Bildbeskrivning

I Sitevision

  • Bildbeskrivningstexten syns bara för oss internt, det som står där blir sökbart för oss när vi söker på bilder i SiteVision. Lägg in en beskrivande text om bilden eller lämpliga sökord som kan vara bra att förknippa med bilden så att den hittas vid sökning (om inte orden förekommer i bildnamnet). Om du skrivit en beskrivande text kan du välja att använda beskrivningstexten som alt-text när du infogar en bild.
  • Skriv i bildbeskrivningen på bilderna om du vill berätta något mer om bilden för oss internt, som inte ska synas utåt på webben (t.ex. om bilden bara får användas i vissa sammanhang).

I Mediaflow

Kommunikationsavdelningen sparar bilder/lägger in ev bildbeskrivningar i Mediaflow.

Alt-text

Alla bilder ska ha en alternativtext (alt-text) så att de personer som av olika anledningar inte kan se bilden får veta vad den föreställer. Skriv som du skulle säga om någon ringer och frågar vad som är på bilden, skriv inte in "Bilden föreställer ..." el liknande utan rakt på sak, t.ex. "Flicka kastar en boll utomhus". Om en inlagd bildbeskrivningstext passar som alt-text kan du välja att använda den när du infogar bilden.

I Sitevision

Skriv i alt-texten vad bilden föreställer.

I Mediaflow

I Mediaflow är alttext ofta inlagd av den som sparade bilden. Om inte lägger du till en alttext.

Bildtexter

Skriv en bildtext om du behöver förklara för användaren vad bilden föreställer. T.ex. om du lägger in ett organisationsschema så skriv vilken organisation som schemat visar (se sidan Förvaltningar som exempel).

Om bilden är klickbar så skriver du det i bildtexten, t.ex. "Klicka på bilden för att se den i större format".

Om vi behöver ange bildens källa och/eller fotografens namn så anger vi det i bildtexten. Bildtext till Scandinav-bilder ska vara "Foto: Fotografens namn/Scandinav". I de fall fotografen inte är en fysisk person, utan ett företag eller produktionsbyrå, skriver vi "Foto: Företag/Scandinav".

Du kan välja att ange en bildtext när du laddar upp en bild, sen kan du välja att använda den när du infogar en bild.

I Sitevision

I Sitevision skriver du bildtexten på fliken "Texter" i Bild-modulen.

I Mediaflow

I Mediaflow skriver du bildtexten efter att ha klickat på "Mer inställningar" i MediaflowPro-modulen.

Infoga bild

Med Sitevisions bildmodul – steg för steg

  1. Börja med att spara bilden någonstans på datorn, t.ex. på skrivbordet. Döp bilden till ett vettigt sökbart namn, t.ex. våghustorget.jpg om bilden visar Våghustorget.
  2. Gå till sidan eller nyheten där du vill infoga bilden. Klicka på bildikonen, "Lägg till bildmodul" uppe i verktygslisten. Du kommer nu in i bildarkivet.
  3. Markera lämplig mapp där du vill spara bilden, skapa en mapp själv om ingen lämplig finns. Nyhetsbilder till orebro.se sparas i aktuell månadsmapp i Nyheter-mappen (dessa rensas ibland).
  4. Klicka på Ladda upp bild och öppna bilden.
  5. Klicka på filken Texter. Nu ska du ändra på alternativtexten, som är till för dem som inte kan se bilden (t.ex. de som använder synhjälpmedel eller de som valt att inte se bilder).
  6. Om en bildtext behövs, t.ex. för att förklara något på bilden – skriv in en bildtext under "Bildtext (visas under bilden)". Klicka på "OK".
  7. Se till att bilden inte hamnat ovanför ingressen. Om den gjort det – dra ner den.

På SiteVisions hjälpwebb finns mer info om att infoga bilder.

Med Modulen Bild från MediaflowPro

  1. Se först till att bilden är sparad i Mediaflow.
  2. Gå till sidan där du vill infoga bilden. Klicka på Övriga moduler-ikonen uppe i verktygslisten och sen på "Bild och media" – "Bild från MediaflowPro". Du kommer nu in i mediabanken i Mediaflow.
  3. Leta upp bilden som du vill använda i Bilder-mappen, använd söken om du inte vet i vilken mapp den finns.
  4. Markera bilden och klicka på den blå knappen "Använd denna bild".
  5. Välj bildstorleken "Orebro.se (1200x675 px)" och beskär ev bilden som du vill ha den.
  6. Ange alt-text om det inte redan finns en sådan inlagd. Om du vill lägga till en bildtext: Klicka på "Mer inställningar" och ange bildtext.
  7. Klicka på ”OK”.
  8. Se till att bilden inte hamnat ovanför ingressen. Om den gjort det – dra ner den.

Kartbilder

Om något hänt/ska hända på en viss plats är det bra att visa en kartbild. Ibland räcker det dock att länka till webbkartan, t.ex. när det handlar om en specifik adress/plats som går att söka fram på kartan, som en adress där kommunen hyr ut en bostad, eller en viss badplats eller återvinningscentral.

En kartbild är bra för att visa ett visst område, t.ex. en korsning där ett trafikljus är ur funktion, eller vissa delar av ett område, t.ex. vilka gator som påverkas av ett trafikarbete.

Kartbilder passar oftast bäst att spara i Sitevision, inte i Mediaflow.

Ta helst en skärmdump från webbkartan som finns på orebro.se. Många platser/gator går att söka fram och då får du upp en kartnål på rätt plats. Zooma in eller ut vid behov och ta en skärmdump som du sparar ner. Om det inte går att få en kartnål på rätt plats får du ta en skärmdump på lämpligt område och själv märka ut den exakta platsen med hjälp av Photoshop, Paint eller annat.

Om kartan har många detaljer bör du ställa in att den går att klicka på och få upp i större storlek. I inställningarna för bilden – välj "Anpassa storlek", ställ in t.ex. 1000 under "Största bredd", välj sen "Zooma" under "Vid musklick".

Om bilden inte behöver ha zoomningsfunktion och du tror att användarna kan behöva hjälp att förstå var området på kartan är kan du välja att länka kartbilden till motsvarande område på webbkartan. Välj "Länka" under "Vid musklick" och ange den externa länken till rätt plats på webbkartan (kopiera länken från kartan genom att klicka på "Funktioner" – "Dela" – "Kopiera").

Tänk på att om du gör bilden klickbar behöver du beskriva i bildtexten att det går att klicka på bilden och vad som händer vid klick.

Tänk på god tillgänglighet!

För att så många som möjligt ska kunna ta till sig informationen behöver vi tänka på vissa saker när vi skapar kartbilder.

Följande info finns även på intranätsidan Underlag för webbinformation, trafikarbete för de som beställer webbinfo om trafikarbeten.

Använd helst orebro.se-kartan (karta.orebro.se) – den är lätt att tyda och ger igenkänning för användare som besökt vår webbkarta via karta.orebro.se och/eller sett våra så kallade instickskartor som finns på vissa webbsidor.

I andra hand kan du använda intranätkartan (internkarta.orebro.se), med bakgrunden "Illustrationskarta". Den kan du välja om du ser att den ger bättre tillgänglighet än orebro.se-kartan, exempelvis om gatunamnen som visas i orebro.se-kartan "krockar" med information som du vill lägga in i kartbilden.

Se till att viktiga gatunamn, parker och liknande syns på kartbilden

Se till att viktiga gatunamn, parker och liknande som nämns i texten syns på kartbilden. Om du valt att använda en kartvy som inte visar namn på gator, parker och liknande behöver du själv lägga till viktiga namn i bilden.

Ta ett stort utsnitt av kartan för bäst kvalitet

När du ska ta ut utsnittet från kartan är det bra om aktuellt område täcker en stor del av din skärm. En större bild ger bättre kvalitet. Gör alltså gärna webbläsarfönstret så stort som möjligt innan du sparar ner kartvyn. Gör även gärna utsnittet i liggande format, det passar ofta bäst på webben.

Exempel på hur du kan spara ner en kartvy

  • Ta en skärmdump av kartutsnittet som du vill använda. Kopiera skärmdumpen och klistra in den i t.ex. Powerpoint.
  • Skapa en pdf eller png av kartutsnittet genom kartans utskriftsfunktion och spara ner filen på datorn. På orebro.se-kartan kommer du åt utskriftsfunktionen genom att trycka ctrl+P (där kan du endast välja pdf, inte png), och på intranätkartan finns en skriv ut-knapp i verktygslisten till höger. Öppna sedan filen i t.ex. Photoshop eller infoga den i Powerpoint via Infoga – Bilder eller Infoga – Objekt.

Tänk på goda kontraster

  • Undvik röd markering/text på grön eller brun botten.
  • Se till att använda tillräckliga kontraster mellan färgen på bildens bakgrund och färgen som du använder till en markering på bilden. Om du använder flera olika färger till olika markeringar på bilden bör även de färgerna ha bra kontrast mot varandra. En bra utgångspunkt för att veta om det är tillräcklig kontrast är att bilden ska kunna tolkas om den skrivs ut i gråskala!

Använd kommunens basfärger för markeringar

Som markeringsfärger, använd helst basfärgerna från vår grafiska profil:

Kommunens basfärger i grafiska profilen

Komplettera linjer och/eller fält med mönster

Om det finns flera linjer och/eller fält behöver de även kompletteras med mönster av olika slag, t.ex. i form av streck eller prickar, för att lätt kunna skiljas åt. Se till att linjer har tillräckligt stor tjocklek för att synas bra.

Förklara markeringarna i text

Markeringar i kartan ska förklaras i text, endera i en infälld ruta i bilden eller i bildtext under bilden. Skriv ev. text i bilden i så stor storlek som möjligt, helst i typsnittet Century gothic och med så god kontrast som möjligt till bakgrunden. Använd gärna en ruta med vit bakgrund och skriv den förklarande texten i svart färg för bäst läsbarhet.

Du kan göra markeringar och textrutor i Powerpoint

Använd gärna Powerpoint för att göra markeringar, med eller utan mönster, samt lägga in ev. text, om du inte har InDesign eller Photoshop eller annat verktyg.

  • För att infoga en linje/form i Powerpoint: Klicka på Infoga – Former och välj lämplig linje/form. Anpassa sedan linjer och ev. fyllning under Figurformat. Se till att konturer har tillräcklig bredd/tjocklek, t.ex. 6 pt. Om du använder flera linjer/former ser du till att de har olika färger och strecktyper (prickig, streckad, heldragen osv.).
  • För att infoga en textruta i Powerpoint: Välj Infoga – Textruta. Välj att rutan ska ha hel, vit, fyllning och skriv texten med svart färg för bäst läsbarhet.

Beskär och spara bilden

Om du gjort bilden i Powerpoint exporterar du bilden till png eller jpeg-format efter att du lagt in markeringar och ev. text. Därefter kan bilden behöva beskäras, det kan du göra i exempelvis Paint.

Om du gjort bilden i Photoshop eller annat verktyg, beskär den vid behov och spara som png eller jpeg. Om möjligt, se till att storleken på bilden är ca 1200x675 px men gärna åtminstone ca 800 px bred.

Karta över Norrköpingsvägen

Kartbild från orebro.se-kartan.

Karta över Kulturkvarteret

Kartbild från orebro.se-kartan.

Karta över Ekeby Almby

Kartbild från Internkartan, med bakgrunden Illustrationskarta.

Tänk på att bilden inte ska vara ensam informationsbärare – alla kan inte se bilder så se till att beskriva i text vilka gator som är berörda, hur trafiken leds om och liknande. I beställningsformuläret för trafikarbeten beskrivs detta i frågan "Hur påverkar det mig som trafikant?".

Senast uppdaterad:

Publicerad:

Kontakta Webbmanual & webbriktlinjer

Politiskt ansvar

Kontakta Örebro kommuns servicecenter

Telefon: 019-21 10 00 

Öppettider: Vardagar kl. 8–16.30

Besöksadress: Näbbtorgsgatan 10

Öppettider: Vardagar kl. 10–16

E-post till servicecenter

 servicecenter@orebro.se