Rekommendationer för bilder och bildstorlekar i Drupal

Den här manualen används inte längre. Istället hittar du riktlinjer och instruktioner för hur du arbetar på gu.se, Studentportalen och Hotellportalen i Redaktörsmanual för Drupal.

Beskrivning	Den här sidan ger tips om hur du använder olika bildstorlekar, hur du anpassar bilder och vad du bör tänka på när det gäller bilder och tillgänglighet.

Mått på bilder

Bilder anpassas och beskärs automatiskt beroende på placering på webben och mottagarens skärmupplösning.

Rekommendation

Bilderna behöver både vara fotograferade och laddas upp bilder 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

Bildproportioner och pixelmått

Bildens yta förstår man enklast om man tänker på den som ett fönster där bilden visas bakom. Fönstret kan ha olika proportioner för olika sidor/placeringar och olika proportion för olika enheter (dator/mobil etc). Man skall därför ladda upp bilder som funkar för dessa olika proportioner

Exempel:
Om du placerar en puff som toppbild får den 5:2 proportion medans samma puff på en mobil visas i 3:2 proportion. Puffen kommer således inte att visas på samma sätt i dessa olika ”fönster”. När det gäller bilder som toppbild så kommer dessa att visas med samma proportion på desktop och mobil.

Använd foton med ett utzoomat utsnitt och att bilden har en bredd och höjd av 2656px x 1770 pixlar. Det är också viktigt att man väljer en fokuspunkt på det som är viktigast i bilden. Webbsidan beskär bilden så den funkar på respektive plats och i de olika enheter besökarna använder. Numera kan man för nyheter 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.

Toppbild

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

Fullbredd: 2656 x 1328
Large (högerställd) 2144 x 1286

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

Akeneo

Akeneo ska bilder vara minst 2560 pixlar breda. 2560 är det bildformat som kommer att visas på sidan, men att det fungerar att ladda upp en bild i ett annat format.
Bilder får inte vara större än 3 MB stora.
Huvudbild visas med fasta proportioner: 2560x768 pixlar.

Använd inte bildcollage

Undvik att göra 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.

Bilder med text, diagram eller information

Drupal beskär bilder vilket kan leda till att bilder med text, diagram eller annan information kan komma att beskäras så all information inte syns (vi arbetar på en lösning för detta så att man skall kunna förhindra att bilder beskärs). Man behöver också tänka på att den information som finns i bilden finns tillgänglig också för den som inte kan se bilden eller som inte kan skilja mellan olika färger. Färgerna bör alltså inte vara betydelsebärande.

Bilder och tillgänglighet

Använd inte gif-animationer
Undvik logotyper på bilder
Undvik text på bilder