Bildmått och bildhantering

Senast ändrad: 25 mars 2020

I Episervers olika sidtyper och block beskärs i de flesta fall bilden automatiskt, men det är ändå bra att först spara bilden i rätt format. På så sätt ökar du kontrollen över hur bilden visas och undviker att spara onödigt tunga bilder.

Bilder kan också infogas i den redaktionella ytan ihop med texten, men då kommer de inte att ändra storlek i den responsiva designen. Det rekommenderas därför inte.

Bildbredden kommer att skalas om till den yta den ska ligga i, men om bilden är för hög för ytan kommer den att beskäras på höjden. Exempelvis visas bildytan huvudbild som maximalt 560 px hög, så om man lägger in en bild som är 2000 x 2000 px kommer bildmodulen att beskära den underifrån så att endast ca 500 px av den övre delen av bilden visas. För att ha bättre kontroll på hur den visas måste du därför ändå beskära den innan du lägger in den.

 Olika typer av bilder

  • Hero image, endast på startsida. Känsloskapande bild, helst centrerat motiv. Gör bilden 2 000 px bred. Visas maximalt 660 px hög.
  • Huvudbild på ingångssida eller sidlistningssida. Känsloskapande bild, helst sidoställt motiv. Gör bilden 2 000 px bred. Visas maximalt 500 px hög. Läs mer här om huvudbild på ingångssida.
  • Megabildsblock i 1 200 px-yta på startsida och ingångssida. Känsloskapande bild, en stor del täcks av text och knappar. Gör bilden 1 110 px bred. Visas maximalt 490 px hög. Beskärs från båda håll och underifrån.
  • Megabildsblock i fullbreddsyta på startsida och ingångssida. Känsloskapande bild, en stor del täcks av text och knappar. Gör bilden 2 000 px bred. Visas maximalt 490 px hög.
  • Huvudbild på kalenderhändelse. Gör bilden 760 x 240 pixlar.
  • Textblocksbild på startsida och ingångssida. Gärna föreställande. Alltid vänsterjusterad i förhållande till texten i blocket. Visas maximalt 750 px bred. Fast bredd. Flexibel höjd.
  • Bild i bildknapp på startsida och ingångssida. Föreställande. Lägg in bilden i formatet 880 x 660 px. Den skalas ner till rätt storlek beroende på om blocket visas i hela eller delar av ytan.
  • Ingressbild på standardsida, nyhetssida och kalendersida. Välj en föreställande bild med bildtext som förstärker budskapet i rubrik och ingress. Beskär till kvadratiskt format och skala till 300 x 300 px. Bilden visas även i listningsblock, på taggsidor och sidlistningssidor.
  • Bild/bildspel på standardsida. Föreställande bilder, med bildtext. Minst 680 px bred. Ingen beskärning sker, bara skalning. Välj om möjligt bilder med samma format.
  • Logotyp till subwebbar. Oklart hur stor bild som behövs. Ca 100 px bred, kanske.

Bildhantering – för sökbarhet och tillgänglighet

  1. Gör bilden till rätt storlek enligt ovanstående lista. Använd gärna Photoshop.
  2. Namnge bilden utan å, ä och ö. Spara den i jpg- eller png-format.
  3. Ladda upp bilden i rätt mapp i resursfönstret under Media.
  4. Markera bilden i mediabiblioteket och dubbelklicka på den så att den visas i redigeringsfönstret.
  5. Gå in på bildens baksida och fyll i vem som äger den.
  6. Fyll också i vad bilden föreställer/bildtexten vid Alt-text för att den ska kunna läsas upp av skärmläsare (se även expanderbara menyn nedan).

Lägg in alt-texter på bilder

Alt-texten blir uppläst för den som lyssnar på webbsidan, och syftet med den är att beskriva bilden för den som inte kan se den. Alt-texten visas också för den som surfar utan att visa bilder.

Alt-texten är numera obligatorisk i Episerver, för att möta den nya lagen om tillgänglighet. Det går inte att publicera en ny bild om den inte har fått en alt-text. Om du ändå publicerar sidan kommer bilden att markeras med ett rött kryss.

Bilder som publicerades tidigare (före januari 2020) visas fortfarande, men även dessa bilder behöver ges en alt-text för att följa lagen om tillgänglighet.

Undantag kan göras för bilder som bara är dekorativa, men det måste också markeras i bildens redigeringsläge.

Det du behöver göra är att gå in i bilden i redigeringsläget och ge den en svensk och engelsk alt-text och publicera den.

Så här lägger du till din alt-text

Lägg till din alt-text på bildens baksida via resursfönstret. Du når bildens baksida genom att dubbelklicka på den eller välja redigera till höger i hamburgermenyn.

 

Om du har svårt att hitta en redan uppladdad bild brukar det fungera bra att söka på bildens id-nummer i resursfönstret. Id-numret ser du om du håller muspekaren över bildfilen på webbsidan.

 

Tips för en bra alt-text

  • Beskriv motivet (till exempel "Man i grön keps äter banan på gångväg. Foto.").
  • Avsluta med punkt så att skärmläsande program vet att alt-texten är slut.
  • Utelämna onödiga ord som "Porträtt av ...", "Bild av..." etc. det blir tjatigt i de listor som alstras och läses upp av besökarens skärmläsarprogram.
  • Ange vad det är för typ av bild sist i alt-texten, till exempel foto, illustration, diagram eller liknande.
  • Ta inte med fotografens namn i alt-texten, skriv det i stället i fältet ägare/owner. Skriv också fotografens namn i bildtexten så att det visas på webbplatsen.
  • För dekorbilder som inte tillför något kommunikativt värde (till exempel bakgrundsbilder) kan du lämna alt-texten tom och istället kryssa i rutan för dekorativ bild.
  • Observera att du antingen måste skriva en alt-text eller kryssa i rutan för dekorativ bild för att bilden ska publiceras och visas på webbsidan.

Här kan du lära dig mer om alt-texter och digital tillgänglighet

Sidansvarig: webbredaktionen@slu.se