Optimera bilder till hemsidan – både Mac och PC
Vill du att din hemsida ska laddas snabbt och kännas både proffsig och lättnavigerad – för både besökaren och Google? Då behöver dina bilder vara i rätt storlek och format.
Här går jag igenom vad du behöver ha koll på när du optimerar dina bilder, och tipsar om en minikurs där du får se exakt hur du gör – steg för steg.
Vad är en lämplig storlek på en bild för webben?
Det viktigaste är att filstorleken (bildens "vikt") hålls låg – helst mellan 100–300 kB och aldrig över 500 kB.
För att minska vikten kan du justera bildens mått i antal pixlar:
Horisontella bilder (ex. banners): minst 1500 px, gärna upp till 2500 px i bredd
Vertikala eller kvadratiska bilder: runt 1000 px i bredd
Tips – Skapa gärna egna bilder eller använd licensierade bilder. Bildbanker som Unsplash fungerar fint – men unika bilder du skapat själv hjälper dig sticka ut i sökresultaten.
Exempel på originalbild
När du har en bild som du laddat hem från en bildbank eller laddat in från din kamera så är den ofta väldigt stor och tung.
Till exempel den här bilden som jag hämtade från Unsplash:
Storlek: 5760 x 3840 pixlar
Filstorlek: 6 MB
Du kommer till originalbilden och kan ladda hem den genom att klicka på bilden nedan.
Photo by Jud Mackrill on Unsplash
Vad händer när du laddar upp stora bilder?
Om du laddar upp en originalbild direkt till din hemsida utan att först optimera den, är risken stor att bilden:
laddar långsamt (speciellt på mobil eller dålig uppkoppling)
drar ner prestandan på hela sidan
påverkar din placering i sökmotorer negativt
Därför är det viktigt att minska storleken på bilden – utan att försämra dess visuella kvalitet.
Vill du se exakt hur du gör – steg för steg?
Jag har skapat en minikurs där jag bland annat visar hur du optimerar bilder – som tidigare låg i detta inlägg – och lagt över guiderna för både Mac och PC i en fri modul.
På så sätt slipper jag uppdatera på flera ställen, och du får en tydlig och uppdaterad vägledning med bilder och instruktioner.
Här är tre guider du har fri tillgång till:
1. Optimera bilder på Mac (Förhandsvisning):
Justera mått i pixlar
Spara en optimerad version med nytt filnamn
2. Optimera bilder på PC (Foton):
Anpassa mått med bevarade proportioner
Spara som ny bild med nytt namn
3. Komprimera bilder med TinyPNG:
Minska storlek utan att tappa kvalitet
Ladda ner den optimerade versionen
I kursens övriga moduler får du bland annat tips om:
filnamn
mappar och
hur du skapar egna bilder till din webbplats.
☞ Gå till minikursen – Samla, spara, optimera – bilder till din webb
Tips om Unsplash i Squarespace
Bildbanken Unsplash är inbyggd i Squarespace. När du lägger till en bild i ett bildblock kan du klicka på “Add an image” → “Select from library” eller “Browse stock images” för att välja bland fria eller premiumbilder.
Men – även om bilderna automatiskt optimeras till viss del när du väljer dem via biblioteket, så rekommenderar jag ändå att du:
laddar ner bilden från Unsplash manuellt
optimerar den själv i rätt storlek och format
döper om bildfilen till något beskrivande
På så sätt har du även bilden sparad som backup, kan använda den i andra kanaler, och får bättre kontroll över bildens kvalitet och SEO.
Sammanfattning att ta med dig
Genom att minska filstorleken, välja rätt mått och döpa dina bilder beskrivande, gör du stor skillnad för hur din hemsida upplevs – både av besökare och sökmotorer.
I minikursen Samla, spara, optimera – bilder till din webb hittar du enkla steg-för-steg-guider för Mac, PC och TinyPNG – allt samlat på ett ställe.
Ta gärna en titt på kursen om du vill få bättre ordning på dina bilder och samtidigt ge din webbplats en extra skjuts i rätt riktning.
Lycka till med optimeringen ♡
