Format och vikt på bilder
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. Stora filer gör att sidorna laddar långsamt, särskilt på mobiltelefoner och vid sämre internetuppkopplingar. Långa laddningstider påverkar dessutom webbplatsens synlighet, eftersom sidor som presterar sämre i nedladdningstid rankas lägre i sökmotorerna.
Vikten av bra originalbilder
För att en bild ska kunna komprimeras utan att förlora för mycket kvalitet är det viktigt att utgå från en högkvalitativ originalbild. En bild som redan är lågupplöst eller suddig blir ännu sämre vid komprimering. Använd därför alltid bilder i så hög kvalitet som möjligt innan du optimerar dem för webbpublicering.
Bra att tänka på vid bildredigering
WebP
Bildformatet WebP ger en avsevärt mindre filstorlek jämfört med JPEG-bilder utan märkbar kvalitetsförlust. Använd WebP-bilder om du har tillgång till programvara som hanterar formatet.
I Photoshop väljer du WebP-formatet genom att spara din bild som kopia. Du hittar WebP-formatet i listan över filtyper i spara-dialogen. I nästa steg väljer du att bilden ska vara "Lossy". Sätt bildkvaliteten till Medium. Testa och se hur bilderna blir på din sida. Om bilden blir för dålig kan du öka i kvalitet men bilden får helst inte överstiga 100 kb.
I Affinity Photo väljer du WebP-formatet genom att exportera bilden. Du hittar WebP-formatet i listan över filtyper i nästföljande dialog. Välj medium-kvalitet, det vill säga ca 50 procent. Testa och se hur bilderna blir på din sida. Om bilden blir för dålig kan du öka i kvalitet men bilden får helst inte överstiga 100 kb.
JPEG och PNG
- Exportera istället för att spara: När du sparar JPEG- och PNG-bilder för webb, använd "Exportera som..." och inte "Spara som...". Spara-alternativet behåller onödig information i bilden och kan göra filen större än nödvändigt.
- JPEG: Vid export, välj en kvalitet på ca 50-60 procent. Det ger en högkvalitativ bild som är tillräcklig i nästan alla sammanhang (förutsatt att originalbilden är bra) samtidigt som filstorleken minskar och webbens prestanda förbättras.
- PNG: Använd endast för bilder med platta färger och hårda kanter, t.ex. logotyper och illustrationer utan gradienter. För foton och bilder med många färgnyanser är JPEG eller WebP bättre alternativ.
Genom att använda rätt format och optimera bilder på rätt sätt kan vi säkerställa en snabbare webbplats och en bättre upplevelse för våra besökare.
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 för vilka spaltbredder som gäller i pixlar på sidorna.
Exempelvis är högerytan på en sida med vänstermeny 920 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 920 x 518 pixlar
Videoformat 4:3: Startbild 920 x 690 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.