Hoppa direkt till innehållet
printicon
Huvudmenyn dold.

Kapitel 8, Bilder

Ledorden är ”Få men bra bilder”. Alla de bilder du behöver till dina webbsidor hämtar du i Mediabanken direkt via Episervers redigeringsvy. Bilderna beskärs med färdiga mallar som finns i redigeringsvyn, beroende på hur och var bilden ska användas.

Få men bra bilder

Du kan lägga till bilder på alla sidor och sidors puffinnehåll samt i vissa blocktyper. Det betyder inte att du måste lägga till en bild.

Våra besökare kommer mer och mer från mobila enheter och har ett annat beteende; en bild som "bara" fungerar som utfyllnad upplevs som irriterande och störande och tar fokus från det som besökaren är på jakt efter på sidan. Samtidigt är det viktigt att de bilder vi väl använder är bra eftersom de får en framträdande roll.

Liggande bildformat är standard

På umu.se använder vi som standard liggande bilder med proportionerna 16:9 (1280x720 pixlar). Det bildformatet används i puffar, bildspel och fullbredd i brödtext.

Ändra bildformat via bildmallarna - ladda inte upp en ny bild

De allra flesta bilder har inte rätt mått från början utan behöver beskäras inne i Episerver med hjälp av verktyget Crop. Kom ihåg att alltid se efter om du har rätt att använda bilden genom att först klicka på View.

Ändra formatet i Qbank-connectorn via mallar – ladda inte upp en ny bild. För att ändra format på bilden använder du funktionen Crop i connectorn. Där finns flera olika anpassade mallar att välja mellan.

 

Bildformat som används mer sällan

Porträttbild kvadratisk vä/hö

Porträttbild kvadratisk vä/hö (600x600px) används för porträttbilder

  • i brödtext på nyhetssidor
  • i brödtext i studentintervjuer
  • på standardsidor som presenterar till exempel en institution eller enhets ledning.

Porträttbild används alltid i halvbredd.

Den kvadratiska porträttbilden får inte användas för andra motiv än porträtt. Bilden ska heller inte användas för kontaktinformation. En bild till kontaktinformation skapas med hjälp av kontaktblocket.

Toppbild

Toppbild (2560x800px) används för toppbilder.

Toppbild för porträttsida

Toppbild för porträttsida (1200x1200 px) används som toppbild för porträttsidor och i puffar för studentintervjuer, alltid i halvbredd höger- eller vänsterställd.

Formatet (custom) som finns med i listan behåller originalproportionerna för bilden och används aldrig på umu.se. Inte heller mallen frontend_small.

Bildtext och alt-text

Bildtext

Bildtexten visas precis nedanför bilden och är bland det mest lästa, så ägna tid till att skriva bra bildtexter. Den ska tillföra bilden något, locka till läsning av resten av texten och ha täckning i resten av innehållet. Namnge personer som medverkar på bilden.

Alt-text (alternativtext)

Alternativtext på bilder, så kallad alt-text, ska alltid finnas för en bild. Den är viktig av tillgänglighetsskäl för personer med synsvårigheter.

Formulera texten som en hel mening med stor bokstav i början och punkt på slutet. Meningen behöver inte innehålla ordet bild, men kan göra det om man vill förklara om det är exempelvis en närbild, porträttbild eller gruppbild.

Alt-texten bör vara beskrivande, till exempel Närbild på provrör i labbmiljö eller Två barn som leker i en sandlåda eller Porträttbild på Nils Nilsson, professor i biokemi vid Umeå universitet.

Tips! Föreställ dig hur läsupplevelsen blir om du skulle få texten för bilden uppläst.

Den information som följer med från Mediabanken är fotograf, alt-text och beskrivning (som bildtext). Du kan själv justera bildtexten och alt-texten om det skulle behövas.

Fotografens namn ska alltid synas

Fotografens namn följer automatiskt med från Mediabanken när du hämtar bilder därifrån. Ta inte bort den informationen.

Använd inte bilder för att visa text

Många besökare behöver anpassa texten på sin skärm för att kunna ta del av innehållet. Som regel har de goda möjligheter att kontrollera hur digital text presenteras, men när texten utgör en del av en bild saknas ofta de möjligheterna.

Använd därför så långt det är möjligt text för att presentera information i stället för text i form av en bild. Istället för text i bild och banners jobbar vi på umu.se med "rena" bilder som kompletterar det vanliga textinnehållet och med puffar där puffbild åtföljs av puffrubrik och pufftext.

Logotyper är undantagna 

Logotyper är undantagna från detta krav, och även andra bilder där den visuella presentationen av text är av avgörande betydelse för att bildens syfte ska uppnås. Det kan till exempel gälla skärmdumpar som syftar till att visa hur en digital resurs brukar se ut på en skärm.

Ordmoln rekommenderas inte

Ordmoln rekommenderas inte av tillgänglighetsskäl eftersom det är text i bildform. Texten i bilden kan inte läsas upp av skärmuppläsningshjälpmedel.

Illustrationer

En illustration kan till exempel användas för att åskådliggöra ett abstrakt fenomen där det är svårt att hitta passande foton.

Kontakta gärna Servicedesk om du har önskemål om fler illustrationer utöver de som finns i Mediabanken. Illustrationer ska följa vår grafiska profil.

Genrebilder

En genrebild kan till exempel vara motiverad om vi vill illustrera något som inte är bundet till specifika personer, situationer eller miljöer, till exempel ett möte, en vårdsituation eller en brandövning. Eller när vi vill illustrera ett abstrakt fenomen som exempelvis budget, vision eller kompetensutveckling.

Genrebilder används för att illustrera abstrakta fenomen eller för att väcka intresse för texten, till exempel i nyheter eller som puffbild. Undvik i övrigt att använda genrebilder som dekoration eller utfyllnad.

Använd genrebilder tagna i våra egna miljöer framför köpta genrebilder.

Saknar du bilder och vill ladda upp egna?

Om du inte hittar någon lämplig bild i Mediabanken kan du själv ladda upp en bild via connectorn i episerver. Bilder som du laddar upp ska vara högupplösta, liggande och i jpg-format. De ska vara färdigbearbetade, skarpa, ljus- och färgmässigt balanserade och följa Umeå universitets bildspråk.

Kom överens med fotografen om användningen

Se till att komma överens med fotografen hur Umeå universitet får använda bilden. Finns några begränsningar i hur bilden får användas eller hur länge den får användas? Sträva efter så få begränsingar som möjligt.

Se till att ha samtycke från avbildade

Kom även ihåg att eventuellt avbildade studenter eller externa personer har gett sitt samtycke till att Umeå universitet använder bilden i sin kommunikation och att bilden förvaras i Mediabanken.

Följ manualen

Det finns ingen övningsuppgift på att ladda upp en egen bild, men när du ska göra det kan du ta hjälp av manualen

Ladda upp ny bild till Episerver via Mediabanken

Övningsuppgifter

Om du inte redan är inloggad på testytan, öppnar du en ny flik eller nytt fönster och går till https://redaktorsstod.its.umu.se/episerver/. Logga in med ditt Umu-id. Det du gör i de här övningarna kommer du att behöva för att göra slutuppgiften.

Uppgift 21: Lägg till puffbild på sida

  1. Leta reda på din sida Om institutionen eller Om enheten i navigeringsfönstret.
  2. Markera sidan och gå in på ingången Puffinnehåll.
  3. Lägg till valfri bild som puffbild och publicera sedan sidan.

Den här bilden går inte att förhandsgranska, utan syns först när sidan använts i en pufflänkning.

Instruktion i Manual

Uppgift 22: Lägg till toppbild på sida

  1. Leta reda på din institutions startsida (sidan med ditt namn) i navigeringsfönstret.
  2. Markera sidan och gå in på ingången Toppbild.
  3. Välj valfri bild, förhandsgranska och publicera sidan.

Instruktion i Manual