Optimera Bilder för Webben - Förbättra Laddningstid & Användarupplevelse -

Bilder är en viktig del av webbplats innehåll.

Och eftersom laddningstiden är en rankningsfaktor för sökmotorerna är det viktigt att vara uppmärksam på optimerade bilder. I den här artikeln får du lära dig om de många olika sätten att optimera bilder för webbplatser och på så sätt förbättra laddningstiden och användarupplevelsen.

Det gamla talesättet gäller även för webbplatser: En bild säger mer än tusen ord. Och eftersom vi för närvarande lever i en tid där visuellt innehåll omger oss alltid och överallt är användningen av bilder på din webbplats av särskild vikt.

Innehållsförteckning

Varför behöver vi bilder?

Vi människor tänker i bilder, minns i bilder, drömmer i bilder …

Bilder på webbplatser drar till sig vår uppmärksamhet, de riktar våra ögon, väcker känslor och säkerställer att vi är mer benägna att klicka.

Bilder tas, förstås, ses och gör att man kommer ihåg snabbare.

Bilder drar uppmärksammar sig omedelbart.

Förutom användbarheten och användarupplevelsen är det ofta helt enkelt en fråga om innehåll. Så många ämnen och fakta som kan förklaras och visas mycket snabbare med en bild. Så det finns många goda skäl att använda bilder på webbplatser men vid användning av bilder bör vissa aspekter noga övervägas så att det inte blir en negativ upplevelse för besökaren.

Varför ska bilder optimeras?

Det finns flera aspekter att ta hänsyn till när du skapar och optimerar en bild:

Användbarheten av en bild

Självklart är första prioritet ett bra val av motiv: bilden ska vara så unik och passande som möjligt och inte en av de vanliga klyschbilderna. Men detta går med nödvändighet hand i hand med frågan: behövs verkligen bilden?

Vi har precis lärt oss lite om de olika betydelserna en bild kan ha: Framkalla känslor som drar till sig uppmärksamhet och förmedlar innehåll. Alla bilder behöver inte uppfylla alla aspekter på samma sätt. Men åtminstone varje bild bör undersökas för detta. Det behövs inte ett gäng bilder som bara är dekorativa tillbehör.

Att representera praktiskt taget varje innehåll i en artikel som en bild är också överdrivet. Låter väldigt allmänt: Men mixen gör skillnaden. Bilder och text ska komplettera varandra på ett meningsfullt sätt. Du kan lära dig mer om samspelet mellan text och bild på sidan Innehållsdesign.

Det finns så många olika motiv och typer av bilder.

Många webbplatser förlitar sig på många bilder. Kolla därför noga var motiv kan reduceras. Kanske är de överflödiga eller inte tillräckligt viktiga. Varje sparad bild är i grunden en bra bild.

En bild som inte används behöver inte laddas.

Allra i början är det alltså frågan om en bild överhuvudtaget krävs. Är det oersättligt för att förstå innehållet? Det är inte ovanligt att bilder i stort format används, som i första hand är avsedda att se ”fina ut”. Storformat landskapsbilder, till exempel, som inte ens har en direkt koppling till ämnet för webbplatsen eller innehållet. Trots all ”visualitet” som vi utsätts för och där det betyder att ”häva sig själv” och uppmärksamma sig själv:

Kanske är det ibland tillrådligt att använda färre bilder och istället förfina typografin!

För stor dataset

Förutom den materiella frågan om innebörden av en bild är den tekniska sidan: bildformat och filstorlek. Eftersom situationen är att på de flesta webbplatser orsakar bilder de största mängderna data, vilket följande grafik visar som ett exempel:

En genomsnittlig sida innehåller upp till en megabyte bilder (för de flesta företagswebbplatser misstänker jag mycket större mängder data).

Så problemet med många webbplatser är att de genererar för mycket data. Och här är bilder orsaken och erbjuder de största optimeringsmöjligheterna

Välj rätt bildformat och komprimera sedan bilderna. Eftersom ju mindre bildfilerna är, desto mindre mängd data, desto snabbare läses sidan in. Ju bättre användarupplevelse för dina besökare och desto bättre för sökmotorrankningen.

Det är inte ovanligt att komprimering sparar en tvåsiffrig procentandel av datamängden.

Verktyg som Pingdom Website Speed Test kan användas för att mäta hastigheten på en webbplats. Samtidigt matas även data som ”Innehållsstorlek efter innehållstyp” ut:

Mängden data per innehållstyp är alltid mycket avslöjande.
Mängden data kan alltså analyseras och optimeras potential kan identifieras.

Så den första hänsynen bör alltid vara:

Behöver du verkligen den här bilden ?

Och i så fall är det dags för bildoptimering.

Vägar till bildoptimering

Alla har nu förstått den första optimeringsmetoden:

Bilder som inte används behöver inte laddas och optimeras!

Men om bilder ska användas så är det första beslutet bildformatet:

Pixel eller vektor

Det första beslutet är om det är/bör vara en pixel eller vektorgrafik. Kort sagt består pixelbilder av många små, små pixlar som ser ut som en mosaik när de sätts ihop. Men vi ser bara helheten (och inte de enskilda pixlarna). De små pixlarna gör att detaljer kan visas bra, men mängden data är också stor som ett resultat.

Vektorer, å andra sidan, är att förstå som matematiska punkter och förbindelselinjer. De behöver därför inte lika mycket lagringsutrymme (eftersom bara dessa punkter, anslutningar och fyllningar måste sparas), men de kan inte visa lika mycket detaljer heller. De kan skalas utan kvalitetsförlust, vilket inte är möjligt med pixelbilder.

Vektorer kan skalas till vilken storlek som helst.

Ett fotorealistiskt motiv är därför alltid en pixelbild. Vektorformat är lämpliga för ikoner, logotyper eller illustrationer.

De viktigaste bildformaten i korthet:

Det finns olika sätt att välja bildformatkriterier, eftersom det finns flera olika filformat tillgängliga. Förutom beslutet om man ska använda pixlar eller raster är det framför allt optimeringsmetoden (förlustfri vs. förlustfri) och visningsalternativen.

Bildkomprimering: förlustig vs förlustfri

Bildfiler komprimeras ofta för att minska mängden data.

Vid en kompression med förlust eller förlust

Vid förlust: Information tas bort från bilden eller sammanfattas. Detta resulterar i en kvalitetsförlust som kan vara mer eller mindre synlig. Detta beror sedan på styrkan på kompressionen. Ju starkare komprimering, desto större kvalitetsförlust, men desto mindre mängd data i bilden.

Vid en förlustfri komprimering behålls bildkvaliteten, men samtidigt görs ett försök att minska mängden data. Detta kan till exempel göras genom att kombinera vissa redundanser såsom samma färgtoner för enskilda pixlar.

Följande fem filformat är av särskilt intresse för webben:

JPG: För bilder med många detaljer och många färger

JPG, ibland skrivet som JPEG, står för Joint Photographic Experts Group och var speciellt designad för framkallad för att lagra fotografier. JPG är förmodligen det vanligaste bildformatet på webben.

JPG-formatet är särskilt lämpligt för bilder med fotorealistiska motiv som är av god kvalitet men med en relativt liten datamängd. Den förlustgivande kompressionen blir snabbt uppenbar med större monokroma områden.

JPG-bildformategenskaper:

Väl lämpad för fotorealistiska bilder med många färger.
Optimeringsalternativ: Kompressionsjusterbar.
Relativt litet minnesbehov (beroende på komprimering).
Komprimerad med kvalitetsförlust, mer eller mindre synliga artefakter.
Tung komprimering = lågt minnesbehov = dålig bildkvalitet.
Låg komprimering = stort lagringsbehov = bra bildkvalitet.

Jämfört med de två format som redan presenterats är PNG-formatet (Portable Networks Graphics) fortfarande ett relativt ungt bildformat, vilket är ett alternativ till GIF-en var inslagen.

PNG format

Kompressionen av PNG är inte lika förlustig som med JPG. Mängden data är större för detta. PNG kan sparas som 24-bitars (PNG-24) och som 8-bitars (PNG-8). 24-bitarsvarianten är så att säga standarden för fotorealistiska motiv (med möjlighet till över 16 miljoner färger). 8-bitars varianten kan bara visa 256 möjliga färger och är därför endast lämplig för motiv med få detaljer.

PNG-bildformategenskaper:

bra bildkvalitet
Möjlighet till transparens
förlustfri komprimering
En PNG-bild med transparens (w som bara delvis märks på vit bakgrund).

GIF: rörliga bilder

GIF-formatet kan endast visa bilder med maximalt 256 färger (8 bitar). Den används därför främst till motiv med ett litet färgspektrum, som logotyper, ikoner, illustrationer eller navigeringsbilder. Egentligen är GIF-formatet nu nästan överflödigt. Med sina få färger är den olämplig för fotorealistiska motiv. Den kan visa OH-film, men det kan även PNG-8.

Vad GIF har för fördel över de andra två är möjligheten att spela upp (korta) animationer eller snarare enskilda bilder efter varandra.

Dessa så kallade GIF-animationer kan nu även delvis ersättas av CSS3-animationer (och/eller JavaScript). Emellertid kan de då och då också användas effektivt för att förklara gränssnitt med små mängder data eller är också populära bland de så kallade cinemagraphs eller som små animerade bilder att dela med sig av i de stora sociala nätverken, som följande exempel visar.

SVGSVG-formatet (Scalable Vector Graphics) är enda vektorformatet i denna serie. Så det finns ingen bildstorlek med pixeldimensioner.

Vektorgrafik har några fördelar jämfört med pixelgrafik: Eftersom de består av punkter, linjer och kurvor som är matematiskt exakt beskrivna, är de upplösningsoberoende och kan därför skalas efter behov. Jämfört med pixelgrafik, som måste spara varenda färgpixel, sparas bara parametrar här, så att de vanligtvis har ett väldigt litet minnesbehov.

SVG

Som HTML5 kan SVG-grafik också integreras på webbplatser utan plugin. Alla moderna webbläsare (inklusive IE9 och högre) kan hantera dem. Överallt där det finns motiv med enkelt grafiskt innehåll är SVG-formatet lämpligt, till exempel för logotyper, diagram eller (enkla) illustrationer.

SVG-bildformategenskaper:

SVG:er är skalbara i både webbläsare och bildredigeringsverktyg utan kvalitetsförlust.
Google indexerar också SVG.
Mindre filstorlek (i de flesta fall) än PNG- eller JPG-filer
Lämplig för alla vektorformat och motiv.
Lämpar sig även för animationer.

WebP

Under de senaste åren har några nya pixelformat utvecklats som redan kan användas, men som inte har har ändå implementerats i stor skala. Detta inkluderar bland annat WebP-formatet. Detta är Googles egenutvecklade bildformat för små filstorlekar och laddningstider. Den kan komprimera både förlustfria och förlustfria och har ett lägre lagringskrav än JPG-filer.

Internet Explorer stöder inte formatet alls och Safari endast delvis.

Beroende på grafikprogrammet krävs dock verktyg eller plugins för att konvertera en bild till WebP-format.

Du kan hitta mer om WebP-formatet i artikeln WebP – Googles bildformat för snabbare webbplatser.

Bildupplösningen

Innan en pixelbild integreras i en webbplats bör den föras till rätt storlek, dvs bildmått. Bildmått anges i pixlar. I vardagsspråk pratar man gärna om bildupplösningen här, men det betyder faktiskt något annat.

Bildmåtten är den rena pixelinformationen. Till exempel 800 x 600 pixlar. Då är pixeln 800 pixlar bred och 600 pixlar hög. Så stor är bilden.

Bildupplösningen betyder faktiskt hur många pixlar på en viss längdenhet. Till exempel hur många pixlar per centimeter eller tum (eftersom amerikanska längdenheter ofta används här). Detta är intressant när det kommer till specifika längder, som tryck. En bild måste ha en viss storlek i centimeter eller tum, t.ex. 15 x 10 cm.

Och här är det viktigt hur många pixlar som ska finnas inom en cm. Ju fler, desto finare bildupplösning. 300 pixlar per tum krävs för professionella utskrifter Det är här upplösningen på 72 dpi för webben runt.

Bildupplösningen är för bilder för webben spelar ingen roll, bildens mått är viktiga.

De korrekta bildmåtten är resultatet av den önskade visningsstorleken på bilden på hemsidan. Naturligtvis varierar detta från webbplats till webbplats och från bild till bild.

Typiska bildstorlekar

Inga standardmått kan anges, eftersom naturligtvis är varje skärmdesign strukturerad på olika sätt. Ändå kan du nämna några typiska bildmått

Bild för ett bildspel: ca bredd 1 280 px – 1 600 px
Bred bild med en kolumn layout: ca bredd 1 280 px
Bild med layout med två kolumner: ca bredd 600 px
Bild med tre-kolumn layout: ca bredd 400 px
Bild för fyra kolumn layout: ca bredd 180 px
Bilder i kontinuerlig text: ca bredd 300 px – 400 px

JPEG Optimizer

Namnet säger allt: JPG-filer kan optimeras med detta. Men inte bara kompressionshastigheten kan justeras. Bildmåtten kan också justeras. Önskad ny bildbredd anges och höjden justeras sedan proportionellt.

Efter optimeringen jämförs med gamla och nya data, så att du får en bra jämförelse. Framför allt är andelen sparade filer övertygande.

Optimizilla

Med Optimizilla-verktyget kan upp till 20 JPG- och PNG-filer skapas, laddas upp och komprimeras på en gång. Mängden sparade filer visas sedan stor och tydlig för varje bild. Om du vill göra ännu finare justeringar kan du ställa in komprimeringen för varje bild individuellt. Ett ZIP-arkiv med de komprimerade bilderna kan sedan laddas ner.

Det här verktyget ersätter i princip de två populära komprimeringsverktygen Compress JPEG och komprimera PNG, som var och en endast var lämplig för ett filformat.

Responsiva bilder

Poängen ”bildupplösning” handlade om bildmåtten i pixlar och att bilden skulle vara optimerad för utdatastorleken.

Med responsiv webbdesign är det dock är oftast så att bildmåtten (ska) ändras flexibelt. Det finns inte bara ”en” bildstorlek här, utan många olika. Den formatfyllande bilden på en stor bildskärm är naturligtvis totalt ”överdimensionerad” på en smartphone.

För högupplösta skärmar som Apple kan du visa bilder med en större pixelstorlek.

Olika skärmupplösningar kan visa olika bilder (med olika dimensioner). Detta kan realiseras med hjälp av brytpunkter.

Verktyget Adaptiva bilder är intressant. Detta ger lämplig bildstorlek för respektive skärm för besökaren. Lämpliga bildstorlekar skapas i realtid så att säga. Detta sparar inte bara laddningstid för användaren, utan sparar också skapandet av olika bildstorlekar i förväg:

Ett annat spännande verktyg är Responsive Generator för bildbrytpunkter. Här kan du skapa olika versioner av en uppladdad bild. Brytpunkterna för detta kan ställas in flexibelt med regulatorn:

Alternativ till bilder

Bildstorlek, filformat, responsiv webbdesign – det finns mycket att tänka på. Och den kan optimeras ytterligare vid behov. Och eventuellt INNAN du bestämmer dig för en bild. Så det finns möjlighet att göra helt utan bilder

CSS3-tekniker

CSS3 tekniker tillåter effekter som tidigare bara kunde implementeras på webbplatser med pixelbilder. Skuggor, kurvor, rotationer, förvrängningar, transparens, gradienter eller blandningslägena (blandningslägen) som är så populära i Photoshop och andra kan nu implementeras helt enkelt via CSS.

Om sådana ”effekter” implementeras med CSS3 istället för pixelbilder, sparar detta en betydande mängd data.