Bilder på webben

Välj rätt bild

Bestäm dig för vad du vill att bilden ska förmedla. Ska den förstärka ett budskap, förmedla en känsla eller förenkla och förtydliga något som är svårt att förklara? 

Tips på hur du väljer rätt bilder

Komplettera med text

Använd inte bilder som enda sätt att förmedla viktig information. Användare som är beroende av till exempel skärmläsare och punktdisplay behöver beskrivningar av allt innehåll som inte är text. Det gäller till exempel:

• Bilder (förutom sådana som endast används för dekoration)
• Diagram
• Animationer

Beskriv innehållet tillräckligt detaljerat för den som enbart uppfattar textbeskrivningen. Utgå från användarens behov och innehållets syfte.

Lagen kräver: Beskriv med text allt innehåll som inte är text (Webbriktlinjer)

Undvik text i bild

Text ska skrivas som text, inte läggas in i bilder. Text i bilder orsakar problem för exempelvis skärmläsare, för de som behöver större text i bra kvalité och för de som använder mindre skärmar.

Färger

Använd gärna färger, men låt inte färgskillnader vara det enda sättet att urskilja information utan komplettera med exempelvis text, mönster eller någon annan visuell indikation.

Lagen kräver: Använd inte enbart färg för att förmedla information (Webbriktlinjer)

Alt-texter

Bilder som har betydelse för förståelse för innehållet på sidan måste enligt Webbdirektivet ha en beskrivande text, en så kallad alt-text. Det är extra viktigt för de med nedsatt syn men även sökmotorerna använder alt-texten för att få mer information om vad bilden föreställer.

Är bilden bara dekorativ eller återger det som även i finns i text på sidan ska du undvika att lägga in alt-text.

Storlek på bilder

Använd inte för stora bilder på webb, det vill säga för tunga bildfiler. För besökare blir sidorna trögladdade, framförallt på mobiltelefon och sämre internetuppkopplingar. Sidor som presterar sämre i nedladdningstid rankas också lägre i sökmotorerna.

Optimera bilderna för de ytor de tar upp på webbsidorna. Bilder som är bredare är spaltbredden tillåter skalas visserligen ned på sidan men de finns kvar i sin originalstorlek i bakgrunden. Se sidan Sid- och spaltbredder  för vilka spaltbredder som gäller i pixlar på sidorna.

Exempelvis är högerytan på en sida med vänstermeny 868 pixlar bred. En bild som ska visas i den ytan behöver med andra ord inte vara bredare än så.

I vissa sammanhang fyller bilden alltid full spaltbredd oavsett storlek. Det gör att för stora bilder skalas ned och för små bilder skalas upp för att matcha spaltbredden. I mobiltelefon visas hela sajten i enbart en spalt. Det innebär att den bredd som gäller för mobilskärmen påverkar återgivningen av fullbreddsbilderna. Bilder som har tillräcklig bredd för en smal spalt på dator kan förlora skärpa när de fyller upp en högupplöst mobilskärm.

En rekommendation är att bilder som ligger i en spaltlösning i desktop-vy men tar upp full skärmbredd på en mobiltelefon bör var 400-500 pixlar breda. Även om de inte kräver den storleken på dator utan skalas ned i sådan vy kommer de behöva den större storleken när de tar upp fullbredd på mobil.

Testa dina webbsidor på mobiltelefon. Om bilder som fyller upp mobilskärmens fulla bredd är oskarpa bör de laddas upp i större storlek.

Bra att tänka på vid bildredigering i Photoshop

• Exportera bilder, spara inte. Alltså välj alternativet "Exportera som..." och inte "Spara som..." när bilden ska publiceras på webb. Spara-alternativet behåller onödig information i bilden.
• För jpeg-bilder, välj i rutan för export en kvalitet på ca 60-70 procent. Observera att det är en hög kvalitet på bild. Den är fullt tillräckligt i så gott som alla sammanhang (förutsatt att originalbilden inte håller låg kvalitet) och krymper storleken på bilden väsentligt och ökar webbsidans prestanda.
• För jpeg-bilder, välj i rutan för export att så kallad metadata inte ska följa med bilden.

Startbilder för mediaspelare

I de fall du arbetar med en mediaspelare på en webbsida kan du i de flesta fall hantera en särskild startbild som visas innan besökaren startar spelaren. En sådan bild behöver ha samma proportioner som mediaspelaren. Spelaren anpassar sig dock efter proportionera på videoklippet och dessa kan variera. Du behöver med andra ord formatera startbilden så att den motsvarar de aktuella proportionerna på videoklippet.

De två vanligaste formaten här är 16:9 (Youtube) och 4:3. Om ett videoklipp har proportionerna 16:9 och startbilden är 160 pixlar bred behöver den med andra ord beskäras till en höjd på 90 pixlar.

Här är en liten lathund för lämpliga storlekar på bild givet vilken plats mediaspelalaren tar upp på en webbsida och vilket format som gäller för videoklippet.

Mediaspelare i fullbredd i desktop-vy

Videoformat 16:9: Startbild 868 x 488 pixlar
Videoformat 4:3: Startbild 868 x 651 pixlar

Mediaspelare i spalt i desktop-vy

Videoformat 16:9: Startbild 500 x 281 pixlar
Videoformat 4:3: Startbild 500 x 375 pixlar

Det är alltså proportionerna på bilden som är viktiga här. Inte den exakta bildstorleken. Bilden kommer att skalas upp eller ned i storlek proportionerligt med den plats mediaspelaren tar upp i olika visningslägen.

Vilka bilder får jag använda?

Det är viktigt att KTH äger rätten att använda bilderna. Det är förbjudet att ta andras bilder från webben och använda för eget bruk. Du får heller inte ta någon annans bild och göra om den.

Det finns webbsidor där du kan hämta gratisbilder. Det är du som publicerar bilden som ansvarar för att personer på bilden har samtyckt till användning och att du följer reglerna för användning av just den bilden. Var alltså försiktig när du hämtar bilder från internet.

Tänk på att följa Dataskyddsförordningen.

Dataskyddsförordningen (GDPR)

I KTH:s bildbank finns bilder som får användas för KTH:s egen verksamhet.