Bilder på vinnova.se
För att alla besökare på vinnova.se ska kunna ta till sig bilderna och för att vi ska veta hur vi arbetar med bilder finns det ett gemensamt sätt att arbeta. Det finns rekommenderade bildstorlekar, varför och hur vi arbetar med alternativtexter med mera.
Rekommenderade bildstorlekar
Rekommenderade bildstorlekar hittar du i det grafiska komponentbiblioteket.
Toppbakgrundsbild på en mikrosajt ska hanteras som vanliga bilder men den rekommenderade bildstorleken är 1800 x 500 pixel.
Justera storleken på en bild
Vi har väldigt långa laddningstider för sidor som innehåller bilder. Vi har idag en automatisk omskalningsfunktion som komprimerar bilder till ungefär 70 procent av sin ursprungsstorlek. Men som redaktörer har vi ändå har ett stort ansvar att inte lägga in för stora bilder.
Så här ska vi arbeta med bilder
- Ladda upp bilden i originalstorlek.
- Justera sedan bildstorleken och kvaliteten i Epis bildhantering:
- Spara alla bilder med en bredd på 1920px. (Höjden regleras automatiskt.) Detta gör att de är tillräckligt stora att använda på alla ställen på webben.
- Kvalitet: medel. - Om du arbetar i bildblocket, lägg även in en alternativ mobilbild.
-Kvalitet: låg.
Spara bilder i PickIt
Ha alltid som rutin att spara nya utlysningsbilder även i PickIt. Spara bilden i dess originalstorlek och säkerställ att beskrivningen innehåller utlysningens namn så att det blir tydligt vilken utlysning som den ska användas till.
Övriga bilder sparas i PickIt efter behov – om de kan antas användas på andra ställen än på webben, exempelvis övergripande programbilder.
Så sparar du webb-bilder i Pickit
- Logga in på https://vinnova.pickit.com/manage/
- Your Library
- Klicka på mappen Utlysningsbilder
- Klicka på molnsymbolen längst uppe till höger för att ladda upp foton
Ladda upp en bild i Media
- Öppna upp Resursfönstret och ställ dig på mappen du ska ladda upp bilden i.
- Klicka på Ladda upp filer genom att släppa dem här, eller klicka och bläddra
Du kommer nu i Utforskaren på din dator. - Leta upp aktuell bild och markera den.
- Klicka på Infoga.
Bilden laddas nu upp i den mapp du valt. Nästa steg är att lägga till alt.text på bilden, se nedan varför och hur.
Lägg till alternativ text (alt.text) på bild
Alt.texter är viktiga för att synskadade ska förstå vad en bild visar. Vi lägger bara in alt-texter när bilden är meningsbärande och vi vill visa den i sin helhet.
- Är bilden värdebärande ska den ha en alt-text. Då kommer den visas i sin helhet (dvs inte beskäras).
- Är bilden dekorativ ska den inte ha en alt-text. Då kommer den beskäras i olika format beroende på skärmstorlek.
Gör så här för att lägga till alt.text på bild
- När du laddat upp bilden dubbelklickar du på den.
Bilden visas då i arbetsytan och är redigerbar. - I vyn Alla egenskaper under fliken Innehåll i fältet Alt-texten skriver du alternativtexten.
Om fel bild visas när man delar våra sidor på Facebook
Ibland ser FB-bilden konstig ut och stämmer inte med den default-bild vi lagt in för vinnova.se. Då behöver vi be Facebook läsa om bilden på sidan.
- Lägg in sidans url på Facebook debugsida
- Välj Debug
- Vänta några minuter
- Sedan ska problemet vara löst, för den enskilda sidan
Senast uppdaterad 19 november 2024