Bilder är en av de viktigaste elementen i en anständig webbplats. De tar tag i besökarnas uppmärksamhet, gör ditt innehåll mer delbart och tvinga dina användare att vidta åtgärder (till exempel köpa dina produkter).

Om du lägger till högupplösta bilder, eller de med stora filstorlekar, kan det göra din webbplats långsam och ge dålig användarupplevelse för slutanvändaren. Det finns ingen ursäkt för att leverera en dålig användarupplevelse med de många verktyg där ute som kan hjälpa dig att komprimera dina bilder utan märkbar kvalitetsförlust och till och med automatisera processen för dig.

I denna artikel kommer jag att visa dig många sätt att optimera bilder för användning på webben och mer specifikt på WordPress-webbplatser.

Välj rätt filformat

JPEG och PNG är två av de mest populära bildfilformat på webben. JPEG är ett komprimerat format som vanligtvis används för foton som innehåller många färger, medan PNG-filer är mycket bättre för foton med text, illustrationer, logotyper, skärmdumpar och transparenta bilder. Ett annat vanligt format är den GIF som bäst passar till bilder med få färger eller bilder med stora områden av samma färg. GIF används mest för animerade bilder på webben idag.

Den flesta bildredigeringsprogrammet låter dig spara din fil i många olika format. Att välja rätt format kommer att se till att du får den skarpaste bilden som ska kunna förbättra användarupplevelsen på din webbplats.

Använd rätt storlek och upplösning

Du måste vara försiktig när du lägger till bilder på din webbplats. Det anses vara den bästa praxis att spara dina bilder i samma bredd och höjd som den kommer att visas på webbplatsen och i minsta möjliga filstorlek utan att förlora kvalitet.

Komprimera dina bilder innan du laddar upp dem

Det finns många verktyg där ute som hjälper dig att komprimera dina bilder innan de laddas upp till din server. Photoshop har till exempel en praktisk funktion för "spara för webb och enheter" som gör det möjligt att välja format och kvalitetsinställningar. Du kommer också att se filstorleken för din bild när du tillämpar en viss inställning. Andra verktyg för bildhantering som GIMP erbjuder liknande alternativ.

Online-komprimeringsverktyg finns också, till exempel Picresize, Kraken.io och TinyPNG, där du kan ladda upp dina högupplösta bilder, optimera dem och ladda ner det komprimerade formatet för användning på webben.

Komprimera bilder efter uppladdning

Flera plugins finns för detta ändamål, och en av de mer populära är WP Smush som hjälper till att optimera JPEG, PNG eller GIF-format individuellt eller i bulk med dedikerade servrar. Det tar enkelt ut metadata och oanvända färger från filerna för att sänka filstorleken. Med den fria versionen är du begränsad till bilder 1 MB och under, men du kan ta bort denna begränsning genom att uppgradera till Pro-versionen som tillåter upp till 5 MB.

En annan stor plugin med liknande funktioner är EWWW Image Optimizer som kan hjälpa dig att konvertera dina bilder till det format som ger lägsta möjliga filstorlek.

Det finns andra tillgängliga på WordPress-förvaret, så gärna utforska. Det är de två jag har använt tidigare, och de båda fungerar bra, så de borde vara bra nog för dig också.

Tag dina bilder korrekt

Förutom att ändra dina bilder, är det ett bra sätt att ge en bra upplevelse på din webbplats genom att märka dina bilder ordentligt. Det betyder alltid att du använder attributet " alt " om bilden inte kunde laddas eller för skärmsläsare så att dina besökare får en textbaserad beskrivning av bilden. Det hjälper också sökmotorerna att indexera bilder bättre på din webbplats och kan hämta dig en betydande mängd söktrafik.

Att lägga till bildtext vid behov är ett annat bra sätt att hjälpa dina webbplatsbesökare att förstå bilden bättre. Seriering av korrekt beskrivande titelkoder och bildfilnamn hjälper på samma sätt. Så, istället för att spara dina bilder som " FXSCSUYE.jpg ", använd en beskrivande titel och namn med nyckelord som är relevanta för ditt ämne och webbplats. Detta är också bra från en SEO-ståndpunkt.

Lazy-Loading

Lazy Loading är en teknik som används av många webbplatser för att spara bandbredd genom att bara ladda bilder när en användare bläddrar till bildens visningsram. De första bilderna laddas omedelbart, men andra väntar tills användaren ligger i närheten av bilden innan den laddas. Lägga till den här funktionen på din webbplats kommer att spara bandbredd för dig och din användare och förbättra hastigheten på dina webbsidor. BJ Lazy Load är ett bra plugin för att lägga till Lazy Loading till din WordPress-webbplats.

Använd ett Content Delivary Network

Med hjälp av ett innehållsleveransnätverk (CDN) kommer belastningen på din server att minska avsevärt och öka prestandan på din webbplats. En CDN kommer helt enkelt att betjäna resurser från servern närmast platsen för den användare som begär det. Om en besökare från Beijing exempelvis begär en bild, och den CDN du använder har en server i Seoul och Sydney, kommer bilden att serveras från servern i Seoul.

MaxCDN är en högt rankad CDN som du kan försöka, och det finns andra som CloudFlare, CDN.net och mer.

Slutsats

Optimering av bilder för användning på webben är ett av de största sätten att förbättra webbplatsens sidladdningstid och övergripande användarupplevelse. Om du har några andra optimeringstekniker du vill dela, gör det så i kommentarerna nedan.