Format och vikt
En webbsida med tunga bildfiler tar längre tid att ladda och rankas dessutom sämre i sökmotorer. Därför behöver bilder optimeras för att fungera bra på webb.
Undvik tunga 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.
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 50-60 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.
Mått på bilder
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 918 pixlar bred. En bild som ska visas i den ytan behöver med andra ord inte vara bredare än så. En bild som är 1 000 pixlar skalas ned till rätt storlek. Och det är ju en siffra lätt att komma ihåg.
Bilder på fullbreddssidor som saknar vänstermeny kan max ta upp en bredd på 1 248 pixlar.
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 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.
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 918 x 516 pixlar
Videoformat 4:3: Startbild 918 x 688 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.