Älskar du inte bilder?

De kan förvandla en text till en engagerande upplevelse medan du läser. Bilder förbättrar ett blogginlägg, gör det lättare att dela det och anger tonen och varumärket för hela din webbplats.

Och vet du vad? Vi är fast inbäddade för att reagera på bilder. Därför är det ett kraftfullt verktyg att använda bilder i ditt innehåll när du marknadsför din blogg.

Men om du inte är försiktig kan bilderna stå för mer än hälften (eller mer) av webbsidans totala storlek. För bara några år sedan var den genomsnittliga storleken på en webbsida 600-700 000 kB. Nu är den genomsnittliga storleken 2 MB och den ökar varje år.

Det är enormt!

Den främsta orsaken till detta är att flera bilder används allt oftare på webbsidor och att dessa bilder inte är korrekt dimensionerade och optimerade, vilket innebär att de inte sparas eller kompileras på ett webbvänligt sätt utan istället blir för stora på dina sidor.

De flesta av oss låter dock optimeringen av bilderna vara en eftertanke och vill hellre göra de roliga sakerna, som att skapa ett episkt inlägg eller nätverka med andra bloggare inom din nisch.

Men om sidorna är för stora innebär det att laddningshastigheten påverkas. Du kanske inte tycker att det är en stor sak om du har en höghastighetsanslutning, men många av dina besökare har inte det. Dessutom gillar Google inte långsam laddning av sidor och det kan påverka din SEO negativt.

Varför du behöver optimera bilder

Du arbetar hårt för att skapa ett fantastiskt innehåll och du spenderar otaliga timmar med att marknadsföra din blogg och nätverka med andra bloggare, så det sista du vill är att potentiella besökare ska överge din webbplats innan den ens laddas!

Studier visar att upp till 40 % av besökarna klickar på bakåtknappen om en webbplats tar längre tid än tre sekunder att ladda.

Jag vet att tre sekunder inte är så lång tid, men när du har en mobilanslutning och väntar på att en webbplats ska laddas kan en sekund kännas som en evighet.

Eftersom många av dina besökare kanske använder långsammare mobilanslutningar är det uppenbart att du måste minska sidstorleken. Och vi vet redan vad som är den största orsaken till att sidstorleken blir för stor - det är dina bilder.

Onödigt stora bilder tar också upp utrymme på ditt webbhotellskonto. Vissa av er har kanske ett webbhotell med "obegränsat" lagringsutrymme, men många premiumwebbhotell begränsar dig till cirka 10 GB lagringsutrymme på lägre nivåer. Detta kan snabbt fyllas upp, särskilt om du har flera bildtunga webbplatser på samma konto.

Så hur kan du se om bilderna saktar ner din webbplats? Testa webbplatsens hastighet med Google PageSpeed Insights.

Om Google rapporterar om ooptimerade bilder som ett problem kan du ta reda på vad du behöver veta för att åtgärda det.

Grunderna för bildoptimering

När det gäller optimering av bilder på din blogg finns det några olika saker som du måste vara medveten om: filtyp, bildstorlek och dimensioner, hur du serverar dina bilder och bildkomprimering.

Låt oss titta närmare på vart och ett av dessa områden.

Filtyp

Bilder på webben sparas vanligtvis i filformatet PNG eller JPEG - eller GIF för animationer. Vem älskar inte de roliga animerade GIF:erna som flödar runt på webben?

Nu är det tekniskt sett okej Om du sparar dina bilder i något av dessa format kommer besökarens webbläsare inte att ha några problem med att visa din webbsida - men för bästa kvalitet och optimering bör du hålla dig till följande regler:

• JPEG - används för fotografier och design där människor, platser eller saker är med.
• PNG - bäst för grafik, logotyper, textintensiva designer, skärmdumpar och när du behöver bilder med transparent bakgrund.
• GIF - om du behöver animationer, annars använd PNG.

Varför finns det då olika format?

PNG används traditionellt för att spara logotyper och grafik, eftersom det bevarar den ursprungliga bildkvaliteten - ingen vill ha suddig text och pixliga former. Men om du försöker spara ett foto som PNG kommer det att se fantastiskt ut, men filstorleken kommer att vara mindre än fantastisk.

JPEG används traditionellt för att spara foton. En del av bilddata kastas bort för att skapa en drastiskt mindre filstorlek, men eftersom foton innehåller en mängd olika färger och naturliga variationer är kvalitetsförlusten vanligtvis omärklig för det mänskliga ögat.

Vi kommer att gå in mer i detalj på komprimering senare, men om du bara kommer ihåg två saker, kom ihåg: JPEG för foton och PNG för text/grafik.

Bildmått

Har du någonsin laddat en webbsida och lagt märke till att en liten bild (till exempel en huvudbild) tar f-o-r-e-v-e-r att ladda ner? Så långsamt att du kan se varje rad komma in? Du tänker dig själv: Hur kan en så liten bild ta så lång tid att ladda ner?

Och när det händer med en stor headerbild är det ännu värre eftersom det kan stoppa hela sidladdningen.

Anledningen till detta är att bloggaren inte har ändrat storlek och optimerat sin bild på rätt sätt, och i fallet med vårt exempel med headshot kan det vara så att han eller hon har laddat upp en JPEG med full upplösning direkt från sin DSLR-kamera.

Och det är en stor fil!

En webbläsare skalar (vanligtvis) en bild från dess ursprungliga dimensioner så att den passar bra på sin plats på en webbsida. Det som ser ut som en liten bild på skärmen kan i själva verket vara ett stort foto på 10 megapixel som skalats ner i realtid av webbläsaren.

Vissa plattformar för webbpublicering skapar automatiskt flera varianter av din bild med full upplösning i olika storlekar, men om så inte är fallet bör du ändra storleken på dina bilder i förväg i ett bildredigeringsverktyg som Photoshop, Lightroom, Pixlr - eller till och med MS Paint. Det kan vara skillnaden mellan en 50 000-kronorsfil och en 5 MB-fil.

WordPress skapar till exempel automatiskt tre (eller fler, beroende på temat) kopior av den uppladdade bilden - alla med olika dimensioner - som du kan använda i blogginlägg, i stället för att alltid använda bilden i full storlek.

Om du har för vana att ladda upp stora bilder med stockfoton och vill spara utrymme på ditt värdkontot kan du använda WordPress-pluginet Imsanity.

Den ändrar storlek och ersätter originalbilden till något mer lätthanterligt, så även om du infogar bilden i full storlek i ditt inlägg blir det inte så illa.

När den är aktiverad kan Imsanity också söka i dina befintliga bilder och ändra storlek i enlighet med detta.

Servering av dina bilder

Hur du visar dina bilder för besökarna handlar inte direkt om att optimera dem i sig, men det kan ha en dramatisk inverkan på sidans laddningstid.

De flesta bloggare använder sina bilder direkt från sitt webbhotellskonto och det är oftast bra, men om du verkligen vill få ut så mycket prestanda som möjligt ur din webbplats kan det göra stor skillnad om du använder ett Content Delivery Network (CDN) som webbhotell för dina bilder.

Ett CDN består av strategiskt placerade webbservrar i datacenter över hela världen. Dessa servrar är värd för dubbla kopior av dina bilder och när en besökares webbläsare begär en bild från din webbplats, leder CDN automatiskt webbläsaren till den server som geografiskt sett ligger närmast dem.

Detta innebär att besökare från exempelvis Europa får bilderna från en lokal europeisk server, snarare än från en server i USA eller någon annanstans. Eftersom svarstiden och nätverksfördröjningen minskar laddas bilderna ner mycket snabbare, vilket minskar sidans laddningstid.

Blogging Wizard använder Sucuri (det innehåller en brandvägg för säkerhet och ett CDN), men det finns andra kvalitetsleverantörer som Amazons Cloudfront eller KeyCDN. Till och med det populära CloudFlare, som inte är ett CDN i egentlig mening, erbjuder ett CDN gratis och är lätt att installera i de flesta delade hostingpaket.

Komprimering av bilder

När det gäller optimering av dina bilder finns det inget som minskar filstorleken mer än avancerad förlustkomprimering av bilder.

De flesta bildredigeringsverktyg som Visme eller Photoshop sparar filer med hjälp av JPEG-komprimering med förlust, eftersom det ger den bästa minskningen av filstorleken. Även om bildkvaliteten försämras något, kan du med hjälp av bildkomprimering med förlust minska stora bilder till webbvänliga storlekar.

Jag är säker på att många som använder Photoshop kan se det som en Spara för webben Även verktyg för bildredigering online, som PicMonkey eller Visme, optimerar dina bilder.

Men visste du att det finns verktyg som kan ta din "optimerade" bild från Photoshop eller andra redigeringsverktyg, bearbeta och komprimera den med ytterligare 40 % (eller mer), och fortfarande har den sett nästan identisk ut för det mänskliga ögat?

Här är några gratis och betalda verktyg som hjälper dig att göra dina bilder webbvänliga.

Skrivbordsverktyg

ImageAlpha / ImageOptim

För Mac-användare är ImageOptim ett kostnadsfritt verktyg som jag använder varje dag för att optimera PNG-bilder - mestadels skärmdumpar - innan jag laddar upp dem. Verktygen är enkla att använda, det är bara att dra och släppa filerna, men du måste göra en bild i taget.

Proffstips : För de tekniskt kunniga finns ImageOptim-CLI, där du kan optimera en hel mapp med bilder på en gång.

ImageAlpha är en PNG-kompressor med förlust och kan göra underverk när det gäller att krympa PNG-filer, medan ImageOptim utför avancerad förlustfri komprimering (med möjlighet till förlust) och tar bort onödiga metadata från PNG-, JPEG- och GIF-filer.

För mina PNG-bilder kör jag dem först genom ImageAlpha:

Här reducerades min skärmdump från 103K till 28K.

Jag körde den sedan genom ImageOptim och sparade ytterligare 10 %.

JPEGmini

Jag optimerar mina JPEG-filer med den stationära appen JPEGmini, som finns för både Mac och Windows.

I Lite-versionen kan du optimera upp till 20 bilder per dag gratis, och det kostar 19,99 dollar att ta bort begränsningen.

Proffstips : Avancerade användare som vill integrera JPEGmini i Photoshop eller Lightroom med hjälp av ett insticksprogram kan köpa Pro-versionen för 99,99 dollar.

Verktyg online, moln och SaaS

TinyPNG

Om du letar efter ett högkvalitativt verktyg för bildkomprimering på nätet kan du använda TinyPNG (TinyPNG optimerar även JPEG-filer trots namnet), en webbapplikation där du kan dra upp till 20 bilder på 5 MB eller mindre till din webbläsare och optimera dem alla på en gång.

De har också ett API för utvecklare och tillhandahåller ett WordPress-plugin som automatiskt optimerar dina bilder när de laddas upp.

TinyPNG ger dig 500 kostnadsfria bildoptimeringar per månad och därefter tar du ut 0,002-0,009 dollar per bild, beroende på volym.

500 bilder per månad kan låta mycket, men när du tänker på att WordPress ofta skapar tre till fem varianter av varje bild i olika storlekar, verkar 500 bilder inte vara så mycket. att många Lyckligtvis är kostnaden per bild budgetvänlig.

EWWW Image Optimizer

Om du inte är beredd att spendera pengar och inte vill ha problem med att optimera dina bilder manuellt kan det kostnadsfria insticksprogrammet EWWW Image Optimizer för WordPress optimera dina uppladdade bilder automatiskt.

Du kan välja ett premiumabonnemang som utför förlustkomprimering, men gratisversionen utför endast förlustfri komprimering så besparingarna är inte lika stora. Det sparar tid och är bättre än ingenting.

Observera: En fullständig genomgång finns i vårt inlägg om verktyg för bildkomprimering.

Avslutar det hela

Vissa förutspår att den genomsnittliga storleken på webbsidor kommer att närma sig 3 MB år 2017, så nu är det dags att börja optimera dina bilder.

Kom ihåg att alla dina besökare inte har höghastighetsanslutningar, och att en överbelastad sida och långsam laddningstid kan påverka din ranking hos Google. Om du vill lätta på belastningen, så att säga, kan du börja optimera dina bilder redan i dag.

Var uppmärksam på dina bildmått och ändra storlek på för stora lagerbilder eller bilder från en digitalkamera till en lämplig storlek.

Dra nytta av modern bildkomprimering med datorprogram som JPEGmini eller molnverktyg som TinyPNG eller Kraken och integrera dem i WordPress med ett plugin om möjligt.

Om din publiceringsplattform automatiskt skapar varianter av originalbilden i storlek, välj en av dessa för ditt blogginlägg, istället för den ursprungliga bilden i full storlek.

Relaterad läsning: 7 sätt att minska storleken på PDF-filer.