Bilder

I bildguiden hittar du instruktioner för hur bildelementet i de nya webbmallarna fungerar och hur bilder ska hanteras på bästa sätt.

 

Om bilder på nya webben

Den nya webben är mer bildbaserad, vilket ställer högre krav på att webbredaktören ska kunna hantera bild (både bildval och bildredigering). Bilderna är viktiga för användarupplevelsen och ska fungera bra på alla enheter. Tänk på att ett bra bildarbete kräver tid!

De nya mallarna har utvecklats enligt de nya lagkraven på tillgänglighet och enligt GDPR. För att lagkraven ska följas krävs även att webbredaktören hanterar bilder på rätt sätt. 

Bilder i de nya mallarna fungerar på ett annat sätt än i de tidigare polopoly-mallarna. Du kan därför inte använda bildelementet från de gamla mallarna i polopoly utan alla bilder som ska användas måste laddas upp på nytt.

Nedan följer instruktioner och information om hur det nya bildelementet och de nya bildytorna fungerar. 

Vill du ha information om bildmanér och bildkällor vid Stockholms universitet? Se su.se/kommunikation. 

Om bilder på su.se/kommunikation

su.se är en responsiv webbsida vilket innebär att sajten med automatik anpassas efter den enhet som besökaren använder – desktop, läsplatta, mobil (och alla olika varianter inom dessa).

Skärmdumpar av samma webbsida på olika enheter.
Exempel på vy från su.se i olika enheter - desktop, läsplatta och mobil.

Den responsiva anpassningen sker med automatik men du behöver också tänka på detta som webbredaktör när du redigerar dina bilder och texter. 

Även bilderna påverkas av den responsiva funktionen, det betyder att samma bild används och anpassas på olika sätt efter olika enheter. För att en bild ska se bra ut i flera enheter så måste du beskära bilden på ett bra sätt. I vissa enheter kapas nämligen bilden något.

Tänk på att du som redaktör bör testa sajten i en mobil regelbundet, så att du får en bra upplevelse av hur bilderna (och texterna) fungerar i mobilen. 

OBS! Det går inte att fixa så att alla bilder blir perfekta i alla lägen och i alla enheter.

På den nya webbsidan finns det bilder med text på. Av tillgänglighetsskäl så är det viktigt att texten kan läsas på ett bra sätt av alla användare. Därför finns det också på dessa bilder en mörk toning. Den mörka toningen läggs på automatiskt i polopoly. 

Placeringen av texten/den mörka toningen varierar i nuläget mellan lika puffar. Detta ska utvärderas och ses över.

Skärmdump som visar exempel på tonade bilder.
 

Om det nya bildelementet

Det nya bildelementet i polopoly innebär:

  • Andra och större bildformat än tidigare. 
  • Kan beskära i olika bildformat i polopoly
  • Kan avpublicera ett bildelement
  • Mallarna är mer tillgängliga

Det går numera att avpublicera en bild i polopoly. Du hittar funktionen längst ner i bildelementet under "Status". För att avpublicera ställer du in en av-tid. 

Skärmdump på inställningar för status i bildelementet i polopoly.

OBS! Tänk på att ett och samma bildelement kan vara publicerat på flera ställen. Därför ska du alltid titta under ”Refererande innehåll” innan du avpublicerar. Där ser du var bildelementet är publicerat.

OBS! Tänk på att en och samma bild kan vara uppladdad i flera olika bildelement. Om bilden ska avpubliceras helt från webben måste samtliga bildelement med bilden avpubliceras.

Skärmdump av samma bild som syns flera gånger i polopolys sökfunktion.
Ska en bild plockas bort helt i polopoly så måste alla element med bilden avpubliceras.

 

När du laddar upp en bild i polopoly så måste du även komma ihåg att fylla i relevent bildinformation.

Skärmdump av bildinformation.

Du ska fylla i:

  • Namn på bilden. Döp bilden så du hittar den igen.
  • Bildtext. Här skriver ni in eventuell bildtext samt fotografnamn. Texten visas i artikeln alt. vid mouseover om i puff. Om du klistrar in samma bildelement i flera artiklar så kan du välja att ha olika bildtexter för olika artiklar (du kan justera detta när du klistrar in bilden i artikeln). 
  • Alt-text. Texten som läses upp av skärmläsaren, det vill säga en förklaring av bilden för den som inte kan se. Denna text är alltså viktig för tillgängligheten på sidan och måste fyllas i (kan vara tom om bilden inte är betydelsebärande).

OBS! Att lägga till den här informationen går inte att automatisera utan kräver en redaktörs handpåläggning. Du som är redaktör på webben måste lägga tid på detta för att SU:s webb ska följa de lagkrav som finns till exempel kring tillgänglighet och upphovsrätt. 

 

Om de olika bildmåtten

I det nya bildelementet så finns det fyra olika bildmått; landscape, widescreen, box och full widescreen. 

Du kan ladda upp en bild i polopoly och använda en och samma bild för alla bildmått. Beronde på placering på webben så väljer polopoly automatiskt rätt bildmått.

Det bildmått som används som default i artiklar. 

Används bland annat i stående puffar, längst upp i högerspalten, i blocket Aktuellt på su.se/forskning och på så kallade genomgångssidor på centrala webben. 

Används bland annat i mosaiken på samlingssidor på centrala webben och i mosaik-blocken på de olika ingångssidorna. 

Används i bred banner, på toppytor på ingångar och som bakgrundsbild på bland annat institutionens sidor. 

I puffar kan inte redaktören välja vilket format som ska användas utan det är förinställt i systemet.

I artiklar kan redaktören välja vilket format som ska användas. Landscape väljs som default när du lägger in en bild, men du kan manuellt välja att byta storlek till widescreen, full widescreen eller box. Oavsett bildmåttet du väljer är sedan alternativen för visning (justering) i artikel fullbredd eller halvspalt. 

Se exempel på bilder i artiklar

I polopoly anges minimimått för alla bildvarianter. För att det ska bli så bra kvalitet som möjligt (på större ytor) så rekommenderas att du använder minst 1000 px i bredd för landscape/widescreen/box-format alternativt 2000 px i bredd om bilden också ska användas i full widescreen-format.

Observera att om du laddar upp en bild med minimimåtten så kan du inte beskära bilden mer i polopoly utan att den blir pixlig (se vidare under Beskärning nedan). 

Minimimått för de olika bildmåtten

Landscape - Minimimått 768 x 549 px 

Widescreen - Minimimått 768 x 483 px

Box - Minimimått 768 x 768 px

För samtliga ovan rekommenderas att du laddar upp en bild som är 1000 px bred. 

Full widescreen - Minimimått 1468 x 710 px

För bästa kvalitet på full widescreen rekommenderas att du använder bild som är 2000 px bred.

När du laddar ner bilder från mediabanken så finns det, förutom originalbild, några förinställda bildmått att välja mellan som passar för webben. 

Webb, ppt, digitalt (1000 px) = kan användas för alla bilder förutom för bred banner (full widescreen) på nya webben. Om bilden inte ska användas för bred banner så rekommenderas alltid denna storlek. 

Bakgrundsbild, banner (2000 px) = kan användas för bred banner (full widescreen) och alla andra format på nya webben.

Gamla webben (728 px) = bilder som ska användas för de gamla polopolymallarna, ex för medarbetarwebben 

Skärmdump av alternativ för bildmått i mediabanken.
De olika alternativen som du kan välja i mediabanken.

Till mediabanken

 

Bilder i artiklar

I nyhetsartiklar, evenemangsartiklar, huvudartiklar och standardartiklar så fungerar bilder på samma sätt. 

Du kan välja att placera bilderna som antingen som fullbredd (helspalt) eller halv vänster (halvspalt i linje med vänsterkanten). 

Se exempel på hur de olika bildmåtten ser ut i hel- och halvspalt i artikel

OBS! I nuläget finns även alternativet tredjedelsbild. Det alternativet ska inte användas då det kommer att försvinna inom kort.

Bilder kan användas även i faktarutor vid behov. Se exempel nedan: 

 

I huvudartiklar och i forskningskatalogen så kan du även lägga in ett så kallat bildreportage, det vill säga ett urval av flera bilder (eller video). 

Syftet med bildreportaget är att kunna visa upp flera bilder och att jobba med bildberättande. Minst två bildelement (alternativt video) krävs för att bildreportaget ska fylla sin funktion. Om du bara har en bild att visa så ska det vanliga bildelementet användas.

Du kan sedan ha hur många ytterligare bilder du vill. Men viktigt att det är en variation av motiv på bilderna - om det är snarlika bilder fyller det ingen funktion för användaren.

Så småningom kommer denna funktion att finnas i fler artikelmallar (kommande utveckling i polopoly).

 

På de centrala sidorna Om universitetet och Utbildning så styr bilden i huvudartikeln även bilden som visas på den så kallade genomgångssidan.

I första hand är det puffbilden som visas. Om den saknas så visas istället den översta bilden i listan över bilder inne i artikeln. För att byta bild så ändrar du i så fall ordning på bilderna i bildlistan. Observera att det inte fungerar att visa video som bild på genomgångssidan (ligger video överst i bildlistan så visas ingen bild). 

 

I utbildningskatalogen och på vissa ställen i forskningskatalogen så går det endast att lägga in en landscape-bild (alt. videoelement) på en specifik plats. Begränsningarna i katalogerna beror på att det ska vara så enhetligt som möjligt för att det också ska vara så enkelt och tydligt som möjligt för användaren att hitta till rätt information. 

 

 

Beskärningsfunktionen

I det nya bildelementet så finns en inbyggd beskärningsfunktion som redaktören kan använda vid behov. Fördelen med beskärning i polopoly är att redaktören kan göra enklare beskärningar av bilder utan att det krävs ett bildredigeringsprogram och att ett och samma bildelement kan användas på flera ställen med olika mått. 

Det betyder inte att du som redaktör måste beskära alla bilder. Beskärning i polopoly är mest för att finjustera utsnitt på bilderna, inte för att ändra komposition i bilden. Mer avancerade bildjusteringar måste alltid göras i mer avancerade bildredigeringsprogram (som photoshop och liknande).

Med hjälp av bildelementets funktion för förhandsvisning kan du enkelt se hur bilden ser ut i de olika bildmåtten. Ser förhandsvisningen för alla mått bra ut behöver du inte göra något mer.

Om du måste anpassa din bild, så kan du göra en egen beskärning.

Beskärning kopplat till bildstorlek 

Observera att om du laddat upp en bild med minimimått så kan du inte beskära något alls. När du beskär en bild så gör du bilden mindre. Det betyder att om du vill beskära en bild till 690 px så måste bilden du ska beskära vara större än 690 px. Om den är mindre blir resultatet pixligt. Därför är det viktigt, om ni måste beskära en bild, att se till att originalet (som ni beskär från) är större än minimimåtten. Därför är också rekommendationen att ni laddar upp en något större bild i polopoly än vad minimimåtten anger (bildmåtten i mediabanken är också anpassade efter detta, se vidare information om bildmått i mediebanken ovan).

Om det inte går att beskära bra – vad kan man göra? 

Vissa bildmotiv kan vara svåra att anpassa till det liggande formatet som oftast används som standard på webben. De är alltså svåra att beskära på ett bra sätt. Vad kan du då göra som redaktör? Här följer några tips: 

1. Finns det en annan bild? Det bästa är om du kan hitta en annan bild där motivet är något annorlunda och passar bildformaten som används på webben bättre. 
2. Om du har mer tid och kunskap i bildhantering – använd photoshop (eller liknande bildredigeringsverktyg) och gör en mer avancerad beskärning där. Då kan du till exempel ladda ner bilder i originalstorlek (ej webbalternativen) från mediabanken och  beskära själv innan du laddar upp i polopoly. OBS att detta kräver kunskaper i bildredigering. 
3. Ibland får det vara ”good enough”, i vissa lägen blir det inte helt perfekt.

Det bästa (i framtiden) är att tänka på att ta/beställa bilder som passar för webbformaten (liggande bilder bättre än stående).

 

Nedan hittar du guider för hur du ska beskära på bästa sätt för olika format och för att den responsiva anpassningen ska ske på bästa sätt. 

Utgå från var bilden syns när du ska redigera och välj instruktion nedan. Samma bild kan redigeras på olika sätt beroende på i vilket element den ligger.

Stor artikelpuff

Mosaik 3 bilder

Banner

Nyhet > Bild i teaser/puff - liggande och stående

Mosaik på samlingssida

Teaserlista

Artikelpuffar

Artikel > Bild i högerspalt

Artikel > Bild i helbredd

Artikel > Bild i halvbredd

Artikel > Bild i tredjedelsbredd

På denna sida