Webbredaktör och lättredaktör kan hantera bilder.
Sidans innehåll
Om bilder
Du kan använda bilder på gu.se för att tydliggöra information eller ett budskap. Tänk därför alltid efter innan du väljer att publicera en bild, tillför bilden verkligen något till ditt innehåll? Om inte kan det vara relevant att inte lägga till en bild eftersom mycket bilder kan göra sidor röriga och svårnavigerade.
Du ska alltid följa den grafiska profilen för bilder och helst använda bilder i Bildbanken.
Förstå hur du arbetar med bilder på gu.se
Varje webbyta på gu.se har ett eget bildbibliotek där redaktörer kan ladda upp bilder. Det finns också ett delat bildbibliotek där redaktörer kan ladda upp bilder som kan användas av alla webbytor på gu.se. Du behöver alltid ladda upp en bild i valfritt bildbibliotek innan du kan bädda in bilden i komponenten bild eller som huvudbild på din sida.
Du når bildbiblioteket via “Innehåll” i redaktörsgränssnittet på din webbyta.
Riktlinjer
Innan du publicerar är rekommendationen att du läser genom våra riktlinjer för publicering som gäller för universitetets centrala webbplatser. Utöver dessa finns det också specifika riktlinjer för gu.se:
Använd komponenter som är avsedda för bilder
På gu.se har vi komponenter som är gjorda för bilder. Det är dessa du ska använda när du lägger upp bilder:
Alt-text
En alt-text ska kunna ersätta och beskriva bilden för den som inte ser bilden. Det kan handla om en besökare som använder ett uppläsande hjälpmedel, när en sökmotor indexerar sidan eller om bilden inte finns på servern längre.
En alt-text ska förmedla informationen i bilden. Du ska inte skriva “bild/foto av” och alt-texten ska inte vara samma som bildtexten. Till exempel kan alt-texten till bilden nedan vara: Student sitter vid en studieplats och skriver i ett anteckningsblock.
Du ska alltid skriva en alt-text, så länge bilden inte är dekorativ. Det kan vara svårt att veta när en bild är informationsbärande eller dekorativ. Ett tips är att om du skulle beskriva innehållet på sidan för någon och du helt hoppar över bilden så är den troligen dekorativ. Beroende på informationen på en sida kan bilden i exemplet ovan vara dekorativ och därför ska alt-texten vara: <none>
Tips på hur du beskriver innehåll som inte är text med text på DIGGs hemsida
Bildtext
Bildtext ska inte blandas ihop med alt-text. Medan alt-texten ska förmedla informationen i bilden, ska en bildtext förklara motivet och sambandet till informationen på sidan. Dessa två ska därför aldrig vara samma text.
Till exempel kan bildtexten till bilden nedan vara: Göteborgs universitets huvudbyggnad i Vasaparken. Medan alt-texten till en sådan bild istället skulle vara: Stenbyggnad där det står Göteborg universitet ovanför ingången, alternativt <none> om den endast är dekorativ.
Ha inte text i bilden
Text i bild gör det svårare för besökare att ta del av innehållet, till exempel kan text i bild inte läsas upp av en skärmläsare vilket gör att besökare som använder det inte får tillgång till texten i bilden. Ett annat exempel är att text i bild blir svårläst i mobiltelefon och kan lätt bli pixlig om du zoomar in.
På grund av det här ska vi inte använda bilder med text på gu.se utan istället presentera text som text och bilder som bilder. De enda undantagen från detta är:
Använd text, inte bilder av text, för att visa text, DIGGs hemsida
Undvik bildcollage
Undvik att ladda upp bildcollage. Webbsidan kommer att anpassa bilden efter det format den visas upp på och det ser olika ut beroende på vilken skärmstorlek besökaren har. Collaget kan komma att beskäras på ett sådant sätt att bilden inte visas som tänkt.
Rekommendation för mått på bilder
Bilder anpassas och beskärs automatiskt beroende på placering på webben och mottagarens skärmupplösning. Bilderna behöver både vara fotograferade och laddas upp med utzoomat utsnitt istället för att tänka vilken placering/format bilden ska ha. Välj en fokuspunkt på bilden. Högsta bildstorlek är 50 MB.
Bilder med lägst:
bredd 2656 pixlar
höjd 1770 pixlar
OBS! Bilder har ett maxmått på 6500x6500 pixlar
Du kan undvika beskärning av bilder för nyheter och informationssidor. För nyheter ska du välja ett bildformat som inte beskär bilden t ex "Bildkomponent: Medium (No crop)". För bilder som placeras i en informationssektion via komponenten "Bild" kan man kryssa i rutan "Beskär ej" för att förhindra att bilden beskärs.
Bildens visningsyta på desktop
Bilderna är olika stora beroende på din skärmstorlek och upplösning på din skärm.
Huvudbild
Startsidor: 2656 x 1062 (5:2 proportion, visas samma på mobil)
Infosida: 2656 x 796 (10:3 proportion, visas samma på mobil)
Nyheter och evenemang
Puffar/informationssida
Fullbredd megapuff 2656 x 1000
Sektion fullbredd bild (infosidor) 2656 x 1280
Sektion bild enspalt 2016 x 800
Sektion två spalt 33%: 659 x 470
Sektion två spalt 66%: 1337 x 802
Bild i brödtext 1152 x 650
AI-bilder
Enligt styrdokumentet Göteborgs universitets regler för visuell identitet är universitetets bildspråk dokumentärt. Profilerande bilder ska skildra verkligheten på universitetet där människan ska vara i centrum och mångfald ska eftersträvas i bildmaterialet.
På grund av detta ska vi inte använda AI-bilder på gu.se.
Lägg till bild (första gången en bild laddas upp)
I redaktörsgränssnittet väljer du “Innehåll” och går du till fliken “Bildbibliotek”. Beroende på din skärm kan fliken ligga bakom de tre punkterna bredvid fliken “Innehåll”.
Dubbelkolla så att bilden inte redan ligger uppladdat genom att söka i bildbiblioteket, både i ytans bildbibliotek och det delade bildbiblioteket.
Finns inte bilden klickar du på “Lägg till bild”.
Skriv in titeln på bilden. Försök skriva en så tydlig titel som möjligt som förklarar vad det är för bild, det blir lättare när du ska försöka hitta bilden igen.
Ladda upp filen genom att klicka på “Välj fil”.
Ange fotograf.
Välj kategori för bilden för att göra det enklare att hitta bilden i bildbiblioteket.
Vill du att bilden ska finnas i det delade bildbiblioteket kryssar du i “Shared pool”.
Klicka på “Spara”.
Publicera bild i komponenten bild
Komponenten bild kan du lägga till i samtliga layouter.
På sidan väljer du fliken “Layout”.
När du valt layout klickar du på “Lägg till komponent” och väljer “Bild”.
Klicka på “Öppna bildbiblioteket”. Där kan du antingen välja mellan bilder i ytans bildbibliotek, Gemensamt bildbibliotek eller att ladda upp en ny bild.
Välj din bild och klicka på “Välj bild”.
Skriv in Alt-text. Titta i riktlinjerna för stöd.
I layouten “Information” kan du lägga till bildtext, om du vill förtydliga sammanhanget mellan motivet och innehållet på sidan.
Klicka på “Lägg till komponent”.
Publicera bild i huvudbild
Beroende på vilken sidtyp du har valt finns det olika rekommendationer för när du ska använda huvudbild och inte.
På sidan väljer du fliken “Redigera”.
Klicka på fliken “Huvudbild/film” och välj “Huvudbild”.
Klicka på “Öppna bildbibliotek”. Där kan du antingen välja mellan bilder i ytans bildbibliotek, Delat bildbibliotek eller att ladda upp en ny bild.
Välj din bild och klicka på “Välj bild”.
Skriv in Alt-text. Titta i riktlinjerna ovan för stöd.
Vill du förtydliga sammanhanget mellan motivet och innehållet på sidan så kan du skriva en bildtext.
Säkerställ att sidan har status “Publicerad” och klicka på “Spara”.
Beroende på var du ska lägga upp din bild finns det olika tillvägagångssätt.
Publicera bild i puff
Du kan lägga till bilder i puffar, både interna och externa. Du hittar instruktioner för hur du gör detta i följande manualer: