När man jobbar som webbutvecklare gör man allt för att tillgodose sina besökare med det absolut bästa. En av alla pusselbitar som ska falla på plats är bilder. Man säger att en bild säger mer än tusen ord, jag skulle säga mer.
När man arbetar med sina bilder vill man ha bra kvalité men samtidigt reducerad storlek för att bilden ska laddas snabbt för en besökare. Man måste tänka på att alla inte har snabb bandbredd hos sin internetleverantör eller alltid ha bra täckning på sitt 3G / 4G från mobilen. Bilder som laddas upp på vår webbplats är reducerade med upp till 75% (ibland mer) från dess original storlek. Trotts detta är det minimal förlust av kvalitén på bilden.
Detta gör vi för att få snabbare hemsida och tillgodose den bästa användarupplevelsen när besökare surfar webbplatser vi har hand om.
Bra bilder trotts reducering
En bild som man idag tar med en Android mobil eller iPhone tar bilder på storlek från 2 MB och uppåt. Vi ser att allt fler laddar upp dessa bilder direkt på sin blogg / hemsida utan att förmiska dess storlek. Detta är ett stort misstag. Användaren som måste ladda ner stora bilder i sin webbläsare och mobil innan den visas. Detta gör att en webbplats blir segladdad och att många besökare lämnar innan att en sida ens laddas färdigt. Utan att många vet om det så påverkar detta också sökmotoroptimeringen för en webbplats. Det kommer att göra att mindre besökare kommer att hitta till en sida från sökmotorerna.
Steg 1 – Förminska en bild
Om man vill reducera brus i bilder samt förminska dess storlek skulle jag rekommendera denna guiden från Office (Obs krävs Windows operativsystem). Detta är det absolut snabbaste sättet att åtgärda bildstorleken på. Men för den som är lite mer noggrann och vill gå steget längre finns även en guide från Adobe Photoshop. Har man detta programmet kan man reducera en bild väldigt mycket och se skillnad när man bara ändra en bild någon procent. Tycker man att reduceringen har blivit för aggresiv kan man enkelt höja kvalitén genom att öka procenten.
Steg 2 – Reducering genom smush
Efter man gjort bildstorleken mindre enligt steg 1 kan man även använda sig av smush. Tekniskt sett sammaställer smush flera färger och gör detta till 1 färg som tas ifrån samma ställe. Detta gör att endast 1 färg i en bild behöver laddas och inte alla färger som dessutom är i samma färgskala. Lysande funktion!
Det finns flera tjänster online som dessutom är gratis. För den som använder sig av WordPress finns det även ett plugin som sköter smush automatiskt. Gör dig själv och dina besökare en tjänst och använd dig av smush och få bättre prestanda på din hemsida eller blogg. Det blir snabbare, snyggare och mer professionellt ur en webbutvecklares ögon.
Vilken typ – GIF, PNG, JPG eller JPEG?
Om denna artikeln intresserade dig rekommenderas även denna som berättar om bildtypen GIF, PNG, JPG eller JPEG som är bäst för en hemsida. Mycket bra läsning där du även kan se skillnaden på bilderna.