Webbläsaren som du använder stöds inte av denna webbplats. Alla versioner av Internet Explorer stöds inte längre, av oss eller Microsoft (läs mer här: * https://www.microsoft.com/en-us/microsoft-365/windows/end-of-ie-support).

Var god och använd en modern webbläsare för att ta del av denna webbplats, som t.ex. nyaste versioner av Edge, Chrome, Firefox eller Safari osv.

Bilder och bildstorlekar

Generella råd för bilder och bildstorlekar

De bilder du laddar upp i Drupal används av systemet på flera olika platser. Hur din bild kommer att visas kan därför inte exakt förutses.

Den bild du använder som huvudbild i en nyhetsartikel kan också användas i en listning av flera nyheter. På en plats kan en bild användas med vissa proportioner, medan en något annorlunda beskärning kan användas i ett annat sammanhang. Dessa beskärningar görs automatiskt av Drupal, och därför är det viktigt att du laddar upp bilder som är tillräckligt stora för att klara av de olika storlekarna.

Rekommenderade bildstorlekar – generella

Då det inte finns exakta mått eller lösningar för varje bild och sida på LU:s alla sajter i Drupal, rekommenderar vi att ni testar er fram. Och använd liggande bilder i största möjliga mån då det är ett bättre format för webb, dessa kan ni sedan beskära till stående eller kvadratiska om behovet finns.

  • För panoramabilder (tar upp hela bredden på sidan) 3840 pixlar i bredd.
  • För bilder i fullbredd, som t.ex. i bildspel, rekommenderar vi ca 3000 pixlar i bredd och använd då liggande bilder i största möjliga mån.
  • För övriga bilder i kolumner och body rekommenderar vi bredden 1500 pixlar på bilder för bästa upplösning. Börja att testa med denna storlek först, och minska eller öka vid behov.

Layout-läge

Bilderna påverkas av val av kolumner och sektioner i Layout/"layout-läge" i Drupal. Det är bäst att testa sig fram och tänka på att det bredden på bilden påverkas av kolumnens bredd. Tänk dock på att kolumnerna med bokstaven C: (1500 pixlar i bredd på bilden nedan med i bredd) inte passar med alla bilder, utan testa er gärna fram.


A: Panorama= 1 kolumn full width = 3840 pixlar i bredd.
B: Fullbredd= 1 kolumn 12 = 3000 pixlar i bredd.
C: Resten av kolumnerna= börja med 1500 pixlar i bredd.

Bild över kolumner och sektioner i Drupal. Illustration.


Man kan tänka att sidan är uppdelad i 12 delar. 3/12 delar är en smal kolumn.
Kolumnen påverkar hur bilderna beskärs i de olika boxarna/elementen. 

Bild som förklarar hur mallen för sidorna i Drupal bygger på tolv kolumner


I smala kolumner (3/12 delar av sidan) är det en bra idé att beskära bilden så snävt som möjligt:

Hur man beskär i ett bildredigerings-program. Foto.

Om bilden är för stor kan den beskäras helt fel i boxen. Om bilden beskärs fel, testa att minska bildens storlek i ett bildbehandlingsprogram, som exempel Photoshop eller Pixlr.

Testa även att lägga in en vit ram runt bilden i ett bildbehandlingsprogram, då beskärs ramen men inte bilden.

Här nedan ser ni ett exempel på olika boxar på rad på en sida, men beskärs olika beroende på box och kolumn-bredd:

Sol och sommar. Foto.

Om bilden är stående, är det fortfarande bredden som styr beskärningen.
Om bilden beskärs vid 1500 pixlar i bredd, testa att minska bildens bredd, i ett bildbehandlingsprogram, till exempel 1000 pixlar eller 650 pixlar i bredd.

Edit-läge

I Edit/"editläget" kan man också lägga in bilder i bodyn:
•       Tryck på Media Embed Button.
•       Välj en bild.
•       Lägg till alternativ text, format: ”Beskrivning om vad bilden föreställer. Foto.
•       Välj Full width image eller Half width image.
•       Välj Justering (beroende på vart ni vill bilden ska sitta på sidan).
•       Bildtext är frivilligt.
•       Bädda in.

Focal point och Images preview

Med Focal point kan man dra det vita krysset på bilden (se bilden nedan) som ska vara i centrum, och bilden beskärs i boxen därefter. Man markerar alltså den delen av bilden som är viktig och där focus ska ligga.

Bild på färglada påskkycklingar och hur man sätter focal point. Foto.

I Preview, eller Images preview, kan man se hur bilden ser ut på olika skärmar. Man kan alltså inte välja format här inne, utan är bara exempel på hur bilden kommer att visas på olika sätt för besökarna och på så vis få en uppfattning om slutresultatet.

Färglada påskkycklingar och hur man använder preview. Foto.


Förslag på gratis bildbehandlingsprogram

  • Affinity Photo hittar ni via Self Service (på er MAC-dator eller om du har PC maila LDC via servicedesk [at] lu [dot] se). Instruktionsvideos och kurser för Affinity Photo finns på nätet.
  • Pixlr är ett internetbaserat bildredigerings-program och är gratis: https://pixlr.com/se . Instruktioner finns på sidan och nätet. 
     

Support

Vid frågor, vänligen kontakta Servicedesk.

E-post: servicedesk [at] lu [dot] se

Ange alltid webbplatsens eller sidans URL som ärendet gäller.

Bilder i mobilvisning

Undvik stående bilder. Stående bilder tar upp mycket plats på skärmen i mobilvy, och gör att besökaren måste scrolla ner långt för att se innehållet under.

Får din bild konstiga färger?

Om din bild får konstiga färger då du använder den i Drupal kan det bero på att den använder fel färginställning. Bilder i Drupal ska vara lagrade i sRGB. Är bilden bearbetad för tryck är risken stor att den är sparad med färgmodellen CMYK. Ändra då färginställning för bilden i ditt bildbehandlingsprogram och spara om den innan du laddar upp den till Drupal.

Hjälpte den här informationen dig?