Hur väljer jag rätt bildstorlek och komprimering?

Vilken typ av bilder handlar denna guide om?

Denna guide rör bakgrundsbilder, bildspel, splashbilder samt övriga bilder som inte är artikelbilder. När du laddar upp en bild av en artikel till E37 sparas den automatiskt om i flera storlekar för att dina besökare inte ska behöva ladda onödigt stora filer när till exempel en tumnagelbild för artikeln ska visas. Denna guide tar därför inte upp storleksval eller komprimering av artikelbilder, se då istället guiden Ladda upp bilder på en artikel. 

Kortfattat om vad du inte bör göra

Du har tillgång till högupplösta bilder som du vill ladda upp till din webbshop. Ifall du direkt lägger ut dessa i en widget för bildspel eller splash och sedan laddar om din webbplats för att kontrollera att det fungerar så kommer det gissningsvis se ut som att allt fungerar. Men filernas storlek kommer att vara onödigt stora vilket resulterar i att din sida kommer ladda långsamt, användare som laddar dina bilder från mobiltelefon kommer snabbt använda upp sin surf-pott och det kommer att gå åt onödigt mycket datatrafik då kunder besöker din webbshop. (Utnyttjande av datatrafik utöver vad som ingår i grundabonnemanget för molndrift debiteras enligt prislista.) 

Antal pixlar och filstorlekar

Anledningen till att större bilder inte alltid är bättre är att bildens antal pixlar är kopplat till filens storlek (i kb) och större filer tar längre tid för besökarna på din sida att ladda. Förhållandet mellan bildens storlek och bildens antal pixlar är kvadratiskt. En bild på 1000px X 500px har 500 000 pixlar. Men om vi förminskar bilden till halva bredden och halva höjden, 500px X 250px så får den istället 125 000 pixlar, dvs en fjärdedel så många pixlar som originalet.

En bildfil som visas på en webbsida bör inte skalas upp med html då detta resulterar i "stora pixlar". Samtidigt blir det ingen verklig kvalitetsvinst för bilden om den förminskas med html, det resulterar bara i att besökaren behöver ladda ned en onödigt stor fil. Så betänk hur många pixlar på skärmen bilden ska ta upp på sidan och förminska/beskär sedan bilden till denna storlek.

Du kan läsa mer om hur du förminskar och beskär en bild här.

Komprimering

Antalet pixlar är kopplat till bildens filstorlek, men filstorleken är också beroende på vilken komprimering bilden har. En bild med flera pixlar kan därför ta mindre plats på disk än en okomprimerad bild med färre pixlar. För fotografiska bilder är jpeg/jpg-formatets komprimering den vanligaste och bästa.

Fördelen med att komprimera en jpeg-bild är såklart att filstorleken sjunker. Nackdelen är att bilden får så kallade artefakter på sig, rutliknande block av 16x16 eller 32x32 pixlar som får något ändrade färger och ljusnivåer.

Ovan visas två jpg-bilder, den vänstra med en hög kvalitet, (dvs en låg komprimeringsgrad) och den högra med maximal komprimeringsgrad (och därmed låg kvalitet). Den vänstra bilden är 32,6kb och den högra 4,25kb. Båda bilderna har samma antal pixlar, men den högra bilden har tydliga artefakter. 

Typiskt vill du välja en bildkvalitet där komprimeringsgraden är ok men artefakterna inte är synliga. I Photoshop kan man med funktionen Spara för webb (Ctrl+Shift+Alt+S) om man väljer jpeg som filformat välja bildkvalitet och få en förhandsvisning av hur de olika komprimeringarna ser ut. Ofta är ca 60% kvalitet lagom, men om har du har liten text eller viktiga detaljer i bilden kan du behöva spara bilden i närmare 80%.

Tänk på att artefakterna som tillkommer när du sparar en jpeg-bild adderas med varandra. Så om du öppnar din sparade jpeg, gör någon ändring och sedan igen sparar om den i jpeg-format kommer du få extra artefakter på bilden. Därför är det bättre att istället öppna den okomprimerade originalbilden och göra dina ändringar på den, spara en arbetskopia och sedan krympa bilden till rätt antal pixlar och spara som jpeg på nytt.

Du kan läsa mer om jpeg-formatet i Kamera & Bilds fotoskola .

Filarean

När du laddat upp en bild till E37 kan du i Filarean se bildens storlek, både filstorlek i kb och antal pixlar. Du hittar Filaren genom att i admin klicka Webbplats -> Filarea. Om du ser att du har en bild som tar upp mer än 500 kb så är detta ett klart tecken på att filen troligen bör krympas och/eller komprimeras.

I Exemplet ovan är bilden bottenbild.jpg 3053,4 kb stor och bör alltså helt klart göras mindre. Bilden är dessutom 5032px X 2920px stor vilket är större än en skärm med någon normal upplösning kan visa utan att skrolla, så vi kan nog med säkerhet säga att bilden bör skalas ned.

Efter komprimering så tar bilden upp bara 61,2 kb, dvs endast en femtiondedel av originalfilen utan någon synlig förlust i kvalitet när bilden visas på en webbsida.