Från och med januari 2019 finns det över 1,94 miljarder webbplatser. Det är mycket konkurrens. Vad är ett bra sätt att sticka ut? Fantastiska bilder. Synen dominerar faktiskt alla andra sinnen när det gäller att interagera och absorbera information.
Här är tre snabba fakta som hjälper dig att förstå hur viktiga bilder är för människor (och SEO):
- 90 % av all data som överförs av hjärnan är visuell.
- Den mänskliga hjärnan bearbetar en bild på samma tid som det skulle ta att läsa 1000 ord. (Ja, det visar sig att det gamla ordspråket har sina rötter i vetenskapliga fakta.)
- Återkallningsvärdet för visuellt innehåll är även efter tre dagar 65 %, medan återkallningsvärdet för skriven text bara är 10 %.
Med majoriteten av sökvolymen som kommer från telefoner, och i kombination med att människors uppmärksamhetsintervall har minskat till åtta sekunder, är det viktigt att webbplatser kan erbjuda en snabb användarupplevelse, utan slitningar och trevlig.
Bildoptimering är en viktig del av detta pussel.
Vad kan bildoptimering göra för mina användare (och för SEO)?
- Genom att sakta ner din webbplats på några sekunder kan du minska avvisningsfrekvensen och förbättra bevarandet av webbplatsen.
- Det hjälper till att förbättra sidladdningshastigheten, vilket är en viktig Google-rankningsfaktor.
- Det kan bidra till att göra dina sökord mer framträdande. Läs mer om det här.
- Det hjälper till med omvänd bildsökning, vilket kan vara ett stort mervärde, särskilt om ditt företag är produktbaserat.
- Många enheter och stationära datorer använder högupplösta skärmar, vilket ökar behovet av bilder av god kvalitet.
Grundläggande bildoptimeringstips
Det här är några tips som vem som helst kan ansöka om för vilken typ av webbplats som helst (även WordPress), så att du inte bara är utlämnad till dina utvecklare och designers.
1. Välj rätt bildtyp: vektor eller raster?
- Vektorbilder De är enkla, skapade genom användning av linjer, punkter och polygoner. Vektorbilder appliceras bäst på former, logotyper, ikoner och platta bilder. De har ingen pixelering när de zoomas in, vilket gör dem lämpliga för högupplösta enheter. Dessutom kan du använda samma bildfil på flera plattformar (liksom för responsiv webbdesign) utan att behöva använda flera varianter.
- plotbilder, å andra sidan, är bilder som är gjorda av rektangulära rutnät, var och en packad med flera färgvärden (pixlar). Rasterbilder ger djup åt bilderna du vill förmedla, vilket ger det en känslomässig och psykologisk dragningskraft eftersom dessa bilder ser verkliga ut. Men om de inte hanteras på ett bra sätt kan dessa kraftigt hindra din sajts laddningshastighet! Dessutom kan du behöva spara flera varianter av filer för att säkerställa att de är kompatibla på olika plattformar och passar responsiva layouter.
Här är en tabell som Google delade för att hjälpa dig förstå pixel-till-byte-förhållandet. Kort sagt, du får en uppfattning om hur tung en bild kan vara baserat på dess dimensioner.
Källa: Google.
Google nämnde också att det tar fyra byte minne för att leverera en pixel. Föreställ dig om du hade flera bilder på en webbplats med 800 X 800 pixlar. vår sida skulle ta åtminstone något runt 625 kBps. Eller i enklare termer, föreställ dig en elefant som deltar i ett kaninlopp.
Slutsats
Jag skulle föreslå att du använder en kombination av båda klokt. Ett idealiskt förhållande kan vara 40 % vektorbilder och 60 % rasterbilder.
2. Välj det bästa bildformatet: SVG, JPG, PNG eller GIF?
Bästa formatet för vektorbilder:
SVG är det enda och bästa alternativet för vektorbilder. På grund av dess platta bilder drar du också nytta av hög kvalitet som är lätt skalbar.
De bästa formaten för rasterbilder:
- PNG: Ger högkvalitativa bilder med stora filstorlekar. Det kan bara föreslås för de tillfällen då du vill spara alla detaljer i bilden.
- JPG: Den ger bilder av bra kvalitet som inte är tunga vad gäller filstorlek. Detta är dock förlustbilder, vilket innebär att du kommer att förlora några mindre bilddetaljer permanent. JPG är utan tvekan det föredragna bildformatet, vilket ger dig bekvämligheten med problemfri nedladdning och uppladdning av bilder. På grund av detta är de de mest använda: cirka 72,3 % av webbplatserna använder JPG-bildformat och de flesta telefoner sparar bilder som “.JPG”-filer. De rekommenderas särskilt för e-handel och sociala medier.
- GIF: Om du letar efter animering är GIF ett idealiskt val eftersom det stöder 256 olika färger valda från 24-bitars RGB-färgrymden. För närvarande använder endast 26,6 % av webbplatserna GIF-format.
Här är en tabell som kan hjälpa dig att svara på vilket bildformat som är bäst att använda.
Källa: W3Techs
Obs: Uppgifterna i diagrammet ovan är från 15 maj 2019.
3. Ändra storlek på bilder
Med ett moln fullt av enheter är det uppenbart varför folk blir förvirrade över idealiska bildstorlekar.
Observera att bildstorlek och bildfilstorlek är två olika saker. Här kommer vi att förklara hur du kan få den ideala bildstorleken (även kallad bildmått).
Som en del av bilddimensioner kommer vi även att titta på bildförhållanden.
Vad är ett bildförhållande?
Bildförhållande anger bredden och höjden på en bild och skrivs i “x:y”-format.
För att det är viktigt?
Kommer du ihåg när du försökte skala en bild och bokstavligen blåste den ur proportion? Det är precis vad det räddar dig från. Att referera till bildförhållandet medan du beskär eller ändra storlek på bilder hjälper dig att bibehålla bearbetbarheten och skönheten i bilddimensionerna.
Du kan kolla in den här bilden som Shutterstock skapade för att lista några vanliga bildförhållanden.
Bild- och tabelldatakälla: Shutterstock
| bildförhållande | Typiska mått (tum) | Typiska mått (pixlar) | Idealisk för |
| elva | 8×8 | 1080×1080 | Profilfoton på sociala medier och skärmar på mobila enheter |
| 3:2 | 6×4 | 1080×720 | Fotografi och tryck |
| 4:3 | 8×6 | 1024 x 768 pixlar | TV, bildskärmar och digitalkameror. |
| 16:9 | 1920 x 1080 och 1280 x 720 | Presentationer, bildskärmar och widescreen-tv |
Med hänvisning till tabellen ovan är det bättre att fokusera på bildförhållandet 1:1 och 4:3 som är lämpliga för sociala medier, mobilskärmar, fotografering och utskrift.
Du kan ha dina egna dimensionsmallar baserade på det innehållshanteringssystem (CMS) du använder.
Enligt Squarespace är den mest idealiska storleken för bildoptimering i ett CMS 1500 och 2500 pixlar.
Här är ett snabbt och enkelt svar för att identifiera de vanligaste bildstorlekarna på webben.
Källa: Shutterstock
Slutsats
Från personlig observation kan jag föreslå att du använder 1080 X 1080 pixlar och 1500 X 2500 pixlar.
Om du är för lat för att gå igenom alla dessa detaljer kan du också prova att skala bilden från hörnpilen samtidigt som du håller ned “Skift”-tangenten. Fungerar för vissa plattformar.
4. Namnge bilder: bästa praxis
Sökmotorer har ögonlösa hjärnor, så om du inte namnger dina bilder korrekt kommer de inte att kunna “läsa” dina bilder och ranka dig därefter. Det är här dina sökord kommer in i bilden. Som jag nämnde ovan, om du namnger dina bilder bra kan du förbättra din sökordstäthet och rankingchanser.
Låt oss förklara detta med ett exempel:
- Hur folk vanligtvis sparar bilder: “Slumpmässiga/slumpmässiga siffror och alfabet”, “Blommor kan dansa” och “Vad tänkte jag på?”
- Hur folk ska spara bilder – “Fem-tips-för-bildoptimering” och “den-ideala-metoden-för-namngivning-bilder-2019”
Namnge dina bilder med små bokstäver med streck emellan och lämna inte mellanslag. Som du har sett använde jag nyckelordet “bildoptimering” i exemplet “fem tips för bildoptimering”. Du kommer att bli förvånad över hur mycket det hjälper i rankningen.
Kusin
Du kan också använda följande för att förbättra sökordsanvändningen i ditt webbplatsinnehåll:
- Alt-text (om din bild laddas långsamt visas denna text i stället för bilden så att användarna kan få en uppfattning om vad som ska finnas där.)
- Bildtexter (text som ger en kort beskrivning som hjälper användare att lära sig mer om bilden).
Plus, om du har en e-handelssida kan du till och med använda strukturerad data för att ge sökmotorn mer specifik information om färg, typ, storlek och fler av dina produkter.
5. Komprimera bytestorleken på bildfiler
Att komprimera en fil är möjligen den enklaste men mest avgörande delen av bildoptimering eftersom det är direkt relaterat till webbplatsens laddningstid. Punkt ett till fyra förbereder dig för det här sista steget av bildoptimering.
Två levande exempel på hur mycket laddningstid din slutresultat kan kosta:
- Amazon.com såg en minskning med en procent i försäljningen för varje 100 ms ökning av sidladdningstid.
- Google såg en minskning av intäkterna med 20 procent för varje 500 ms ökning av visningstiden för sökresultat.
Vilken är den ideala bildfilstorleken?
En filstorlek under 70kb är vad du bör sikta på. För stora filer nära 300 kb är det bästa du kan uppnå en filstorlek på 100 kb. Om du gör det förhindrar du att dina bilder tar extra millisekunder att ladda, samtidigt som du får förlustbringande komprimerade bilder som inte kompromissar med visuell kvalitet.
Hur kan du minska filstorleken på en bild?
Allt du behöver göra är att placera dessa filer på en filkomprimeringssida och du är klar. Här är några bra och gratis onlineverktyg för bildfilskomprimering:
- TinyPNG / TinyJPG – (Komprimerar .png- och .jpg-filer – 135 kb reducerat till 43,9 kb – Gör upp till 20 bilder åt gången – Dropbox stöds)
- Bildoptimerare – (Komprimerar .png- och .jpg-filer – 135kb reducerat till 49kb – gör bara 1 fil åt gången)
- WeCompress – (Komprimerar .png, .jpg och andra filer – 135kb reducerat till 48kb – gör bara 1 fil åt gången)
- EzGif – (Komprimerar .gif och andra filer – 2 MB reducerat till 1,77 MB – gör bara 1 fil åt gången. Låter dig också redigera gif-filen innan du komprimerar den.)
Bonustips
- Använd webbteckensnitt istället för bilder med text eftersom de ser bättre ut, inte behöver skalas med bilden, tar mindre plats och sparar laddningstid.
- Använd en upplösning på 72 dpi för dina bilder.
Avslutande anteckningar
Du kan använda alla dessa bildoptimeringstips och fortfarande vara fast med en webbplats som laddas på 13 sekunder eller ännu värre. Det är då du kanske vill fråga dig själv:
- Behöver jag alla dessa bilder?
- Vilka bilder är överflödiga?
- Var är det bästa stället att placera bilder på sajten?
Webbplatsens innehåll, både visuellt och skriftligt, har en sammanflätad relation som stimulerar känslor och inspirerar människor att engagera sig mer i din produkt eller tjänst. Människor (eller åtminstone jag) bedömer ett företag efter dess webbplats, så berätta gärna vad den senaste fantastiska webbplatsen du besökte var. Eller vad har du gjort för att optimera bilden?
