Bildmått och bildhantering
Senast ändrad: 20 september 2023
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 660 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 660 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 660 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 700 px bred. Ingen beskärning sker, bara skalning. Välj om möjligt bilder med samma format.
- Metabild plockas upp av till exempel Facebook och kan användas om du vill ha en annan delningsbild eller en mer optimerad. Bilden ska vara 1200 x 630 pixlar.
Bildhantering – för sökbarhet och tillgänglighet
Om du vill ladda upp en bild från din dator
- Gör bilden till rätt storlek enligt ovanstående lista. Använd gärna Photoshop.
- Namnge bilden utan å, ä och ö. Spara den i jpg- eller png-format.
- Ladda upp bilden i rätt mapp i resursfönstret under Media.
- Markera bilden i mediabiblioteket och dubbelklicka på den så att den visas i redigeringsfönstret.
- Gå in på bildens baksida och fyll i vem som äger den.
- 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).
Alla bilder på våra webbplatser konverteras till ett effektivt format för webben. Om bilden du laddat upp och publicerat inte syns kan det vara så att att konverteringen inte fungerar på just den bilden. För att bilden ska synas behöver du bocka i en egenskap på bilden:
Om du vill hämta en bild från bildbanken MediaflowPro
Bildbanken MediaflowPro är integrerad i Episerver och du kan enkelt hämta en bild i rätt format direkt inifrån Episerver, via knappen med en ljusblå symbol där du hämtar in sidans ingressbild.
För att kunna spara ner bilden från Mediaflow till Episerver behöver du ange svensk och engelsk alt-text. I samband med att du laddar ner bilden bör du även byta filnamn till ett mer beskrivande sådant. Se riktlinjer för filnamn på webbriktlinjer.se. Efter att du laddat ner bilden kan du flytta den till den mapp du vill lagra den i. Per default hamnar den i mappen MediaflowPro under noden GEM.
Ge bilden en alternativtext (alt-text)
En så kallad alt-texten blir uppläst för den som lyssnar på en webbsida, 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. Det du behöver göra är att gå in i bildens redigeringsläge och ge den en svensk och engelsk alt-text och publicera om den.
Vissa bilder är av dekorativ karaktär och behöver därmed ingen alt-text. Det gäller till exempel för stämningsskapande toppbilder som ofta också har text ovanpå bilden. I de fallen går du in i bildens redigeringsläge och kryssar i rutan för dekorativ bild.
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 genom att 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 hur du skriver 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.