Bildmått och bildhantering

Senast ändrad: 15 oktober 2019

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 tillgänglighet och sökbarhet

  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 och visas i en bubbla vid mouse-over.

Skriv alt-texter så här för att öka webbens tillgänglighet

  • beskriv motivet (t.ex. "Man i grön keps äter en banan på en gångväg, foto.")
  • tänk på kontexten, dvs. ange i vlket sammanhang personerna befinner sig etc.
  • 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, dvs.. foto, illustration eller liknande
  • ta inte med fotografens namn
  • skriv gärna alt-texter även för dekorbilder
Fakta:

Sidansvarig: webbredaktionen@slu.se