Optimera bilderna på din hemsida för en bättre användarupplevelse
Som webbdesigner vet jag att man ibland tar den snabbaste vägen och slänger upp en originalfil direkt från fotografen. Det är förståeligt att det känns alldeles för tidskrävande att öppna varje bild i Photoshop för att exportera dem i rätt storlek och format. Och kanske har du inte ens tillgång till ett bildredigeringsprogram.
Men sanningen är att du verkligen kommer att ha nytta av att se över bilderna på din hemsida, speciellt om den innehåller många och stora bilder.
3 anledningar till att optimera bilderna på din hemsida
- Snabbare laddningstid: Ingenting kan få en besökare att ge upp snabbare än en långsam webbsida. Genom att optimera dina bilder kan du påskynda laddningstiden av din hemsida betydligt. Minska filstorleken på bilderna och minska därmed den tid det tar för dem att laddas ner. Det resulterar i en smidigare och snabbare användarupplevelse. En snabbt laddad sida gör ett professionellt intryck och lockar besökare att stanna längre.
- Förbättrad sökmotoroptimering (SEO): En viktig faktor för att ranka högre i sökresultatet är webbsidans prestanda, inklusive laddningstid. Genom att optimera bilderna på din hemsida kan du förbättra din SEO. Google uppskattar snabba sidor och rankar dem högre. Genom att synas högre i sökresultaten får du mer organisk trafik och ökar dina chanser att nå ut till en bredare publik.
- Bättre mobilanpassning: I dagens mobila era är det avgörande att ha en webbsida som fungerar sömlöst på olika enheter, särskilt på mobil. Genom att optimera bilderna säkerställer du att din hemsida laddas snabbt och ser bra ut även om besökaren använder en smartphone eller surfplatta.
Så gör du - 3 steg för att optimera bilder till din hemsida
Nu när du vill lägga ner den där extra omsorgen för att optimera bilderna på din hemsida, så har du de tre viktigaste stegen här:
1. Välj rätt filformat
Ett passande filformat är viktigt för att minska filstorleken på bilderna. Ett av de mest effektiva filformaten är WebP. Detta "nya" filformat, utvecklat av Google, är speciellt anpassat för bilder på webben och erbjuder överlägsen komprimering utan att förlora kvalitet.
Att exportera bilder till WebP är enkelt i Photoshop genom att välja "Spara en kopia..." och sedan välja WebP som filformat. Tyvärr erbjuder inte Canva möjligheten att exportera till WebP för tillfället.
För vektorbaserad grafik såsom logotyper, ikoner och illustrationer, är SVG allra bäst. Det är ett vektorformat som skapar bilder med matematiska formler, vilket gör att de kan skalas om till vilken storlek som helst utan att förlora skärpa. Detta ger en knivskarp bild oavsett skärmstorlek.
Så skippa gamla hederliga JPEG och PNG-filer och ta steget över till WebP och SVG för skarpare bilder med mindre filstorlek.
2. Anpassa bildstorleken
Ta reda på hur stor bilden kommer att visas på din hemsida på en normalstor skärm. Ofta behöver du inte använda en bild som är större än så. Om du har köpt bilder från en bildbank eller fått leverans från en fotograf kan bilderna vara upp till 6000 pixlar breda. Men oftast behöver du inte använda en bild som är bredare än max 2000 pixlar.
Genom att ändra bildstorleken till den faktiska visningsstorleken kan du minska filstorleken betydligt utan att kompromissa med kvaliteten.
3. Komprimera bilden
Slutligen, när du sparar ut bilden, se till att komprimera den. Genom att komprimera bilden minskar du filstorleken ytterligare utan att förlora för mycket bildkvalitet. Testa dig fram för att hitta rätt balans mellan bildkvalitet och filstorlek. Dra ner kvaliteten på bilden så mycket som möjligt utan att det blir uppenbart för blotta ögat.
Bonustips!
Glöm inte att ge bilden ett beskrivande filnamn för att förbättra sökbarheten och SEO för din hemsida.
Klart!
Nu har du sett till att din hemsida är snabbare, har bättre möjligheter att synas högre upp i Googles sökresultat och erbjuder en bra användarupplevelse, särskilt på mobila enheter. Det är toppen för dina möjligheter att dra in fler affärer med hjälp av din hemsida!
