Bilder
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. Bilder som tillför något till sidan kan exempelvis vara bilder som visualiserar en fråga eller en process, eller som bekräftar besökarens kunskap (att det är just den skolan, eller platsen).
Innehåll på sidan
- Kommunens bildmanér
- Bilder som innehåller personuppgifter
- Placering av bilder
- Bilden ska inte vara ensam informationsbärare
- Bildstorlekar
- Bildfilens storlek
- Två bildarkiv – ett i Sitevision och ett i Mediaflow
- Spara bilder
- Bildnamn
- Bildbeskrivning
- Alt-text
- Bildtexter
- Infoga bild
- Zoom-möjlighet
- Kartbilder
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.
Bilden ska inte vara ensam informationsbärare
Tänk på att bilden inte ska vara ensam informationsbärare – alla kan inte se bilder! Om bilden exempelvis föreställer en karta med markeringar på vissa gator där gatuarbeten utförs behöver platserna även beskrivas i text. Om det finns text i en bild behöver den även finnas som ren text i anslutning till bilden, det gäller organisationsscheman, processbilder m.m.
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 cirka 800 pixlar 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
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.
Förstora bildenHö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.
Förstora bildenExempel på en väldigt stor bild, både när det gäller pixlar och filstorlek.
Det går att redigera bilders storlekar i pixlar i Sitevision. Men det är att föredra att använda sig av ett annat, dedikerat bildredigeringsprogram för att få det bästa resultatet.
När du laddar upp en bild i Sitevision kan du högerklicka på bildfilen och välja "Redigera bild".
Genom att högerklicka på bilden kan du välja att redigera bilden.
Nu får du upp en vy där du kan redigera bilden. Här ser du originalstorleken men kan alltså ställa in en största bredd eller största höjd som bilden kommer att ändras till. Bilden håller sina proportioner. En lite udda grej i Sitevision är att det inte är säkert att det "tar" om man skriver in pixelstorleken, utan kan behöva plussa upp eller ner för att se att ändringen verkligen genomförs.
Skriv in den pixelstorlek du vill ändra bilden till och klicka sedan minus, och sedan plus, för att vara på säkra sidan. När knappen "Spara som ny bild" blir klickbar har det fungerat, och då kan du klicka på knappen.
I dialogrutan för att redigera bild kan du ändra storleken på bilden.
Nu har en ny, mindre bild sparats och du kan lägga in den bilden på sidan. Den nya bilden går i sin tur så klart att konvertera till WebP för att få en ännu mer komprimerad bild.
När du har sparat bilden lägger den sig som en ny bildfil i bildarkivet.
Kom ihåg att radera den första, stora, bilden du laddade upp så att den inte ligger och tar utrymme på servern!
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.
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 det inte är självklart vad bilden föreställer. I bildtexten behöver du även beskriva viktig information som finns i bilden om det inte står någon annanstans, till exempel vilka gator som är avstängda och var man kan åka istället vid ett gatuarbete. Om du till exempel lägger in ett organisationsschema så skriver du i bildtexten vilken organisation som schemat visar (se sidan Förvaltningar som exempel).
Om bilden är klickbar så skriver du det i bildtexten, till exempel "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".
I Sitevision
I Sitevision skriver du bildtexten på fliken "Texter" i Bild-modulen. Du kan även välja att ange en bildtext redan när du laddar upp en bild, som du sen kan välja att använda när du infogar en bild.
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
- 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. - 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.
- 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).
- Klicka på
Ladda upp bild
och öppna bilden. - 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). - 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".
- 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
- Se först till att bilden är sparad i Mediaflow.
- 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.
- Leta upp bilden som du vill använda i Bilder-mappen, använd söken om du inte vet i vilken mapp den finns.
- Markera bilden och klicka på den blå knappen "Använd denna bild".
- Välj bildstorleken "Orebro.se (1200x675 px)" och beskär ev bilden som du vill ha den.
- 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.
- Klicka på ”OK”.
- Se till att bilden inte hamnat ovanför ingressen. Om den gjort det – dra ner den.
Zoom-möjlighet
Om bilden har många detaljer bör du ställa in att den går att klicka på och få upp i större storlek. Detta fungerar för bilder som ligger i Sitevisions bildarkiv.
I inställningarna för bilden – välj "Anpassa storlek", ställ in t.ex. 800 under "Största bredd", välj sen "Zooma" under "Vid musklick".
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.
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.
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:
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.
Kartbild från orebro.se-kartan.
Kartbild från orebro.se-kartan.
Kartbild från Internkartan, med bakgrunden Illustrationskarta.
Senast uppdaterad:
Publicerad:
Tack för ditt svar!
Berätta gärna vad vi kan göra bättre på den här sidan för att förbättra webbplatsen! Vi har ingen möjlighet att svara, men dina synpunkter är värdefulla för oss. Tänk på att inte skicka in personuppgifter. Om du vill ha svar på en fråga kan du istället använda formuläret ”Lämna en synpunkt”.
Om du ändå skickar in personuppgifter via detta formulär hanteras uppgifterna av Kommunstyrelsen och kan eventuellt lämnas vidare till annan verksamhet inom Örebro kommun i syfte att förbättra vår service.
Här hittar du mer information om hur vi hanterar personuppgifter.
Tack för ditt svar!
Du har nu hjälpt oss att förbättra våra webbplatser.