Er du ikke vild med billeder?

De kan forvandle et stykke tekst til en engagerende oplevelse, mens du læser. Billeder forbedrer et blogindlæg, gør det mere delbart og sætter tonen og brandet for hele dit websted.

Og ved du hvad? Vi er skabt til at reagere på billeder. Derfor er det et effektivt redskab at indarbejde billeder i dit indhold, når du markedsfører din blog.

Men hvis du ikke passer på, kan billederne udgøre over halvdelen (eller mere) af din websides samlede størrelse. For blot et par år siden var den gennemsnitlige størrelse af en webside 600-700 KB. Nu er den gennemsnitlige størrelse 2 MB, og den stiger hvert år.

Det er enormt!

Hovedårsagen til dette er, at der oftere og oftere anvendes flere billeder på websider, og at disse billeder ikke er korrekt dimensioneret og optimeret. Det betyder, at de ikke gemmes eller kompileres på en webvenlig måde, men i stedet fylder dine sider op.

De fleste af os lader dog optimering af billeder ligge som en eftertanke og vil hellere nyde at lave de sjove ting som at lave et episk indlæg eller netværke med andre bloggere i din niche.

Men hvis siderne er for store, betyder det, at din indlæsningshastighed påvirkes. Du tror måske ikke, at det er så vigtigt, hvis du har en højhastighedsforbindelse, men det er mange af dine besøgende ikke. Desuden bryder Google sig ikke om langsomt indlæsende sider, og det kan påvirke din SEO negativt.

Hvorfor du skal optimere billeder

Du arbejder hårdt på at skabe fremragende indhold, og du bruger utallige timer på at promovere din blog og netværke med andre bloggere, så det sidste du ønsker er, at potentielle besøgende forlader dit websted, før det overhovedet er indlæst!

Undersøgelser viser, at op til 40 % af de besøgende klikker på tilbage-knappen, hvis det tager mere end tre sekunder at indlæse et websted.

Jeg ved godt, at tre sekunder ikke er så lang tid, men når du har en mobilforbindelse og venter på, at et websted skal indlæses, kan et sekund virke som en evighed.

Og da mange af dine besøgende måske bruger langsommere mobilforbindelser, står det klart, at du skal have reduceret sidestørrelsen. Og vi ved allerede, hvad der er den største årsag til, at siderne bliver for store - det er dine billeder.

Unødvendigt store billeder optager også plads på din hostingkonto. Mens nogle af jer måske har hosting med "ubegrænset" lagerplads, begrænser mange premium-hostingudbydere dig til omkring 10 GB lagerplads på de lavere abonnementer. Dette kan hurtigt blive fyldt op, især hvis du hoster flere billedtunge websteder på den samme konto.

Hvordan kan du så se, om dine billeder bremser dit websted? Test dit websted med Google PageSpeed Insights.

Hvis Google rapporterer uoptimerede billeder som et problem, skal du vide, hvad du skal vide for at løse problemet.

Grundlæggende om billedoptimering

Når du skal optimere billeder på din blog, er der nogle få forskellige ting, du skal være opmærksom på: filtype, billedstørrelse og -dimensioner, hvordan du serverer dine billeder og billedkomprimering.

Lad os se nærmere på hvert af disse områder.

Filtype

Billeder på nettet er normalt gemt i PNG- eller JPEG-filformatet - eller GIF for animationer. Hvem elsker ikke de sjove animerede GIF'er, der flyder rundt på nettet!

Nu er det teknisk set okay Hvis du gemmer dine billeder i et af de to formater, vil din besøgendes browser ikke have problemer med at vise din webside - men for at opnå den bedste kvalitet og optimering skal du holde dig til følgende regler:

• JPEG - bruges til fotografier og design, hvor personer, steder eller ting er vist
• PNG - bedst til grafik, logoer, teksttunge designs, skærmbilleder, og når du har brug for billeder med gennemsigtig baggrund
• GIF - hvis du har brug for animation, ellers brug PNG

Hvorfor er der så forskellige formater?

PNG bruges traditionelt til at gemme logoer og grafik, fordi det bevarer den oprindelige billedkvalitet - ingen ønsker sløret tekst og pixelerede figurer. Men hvis du prøver at gemme et foto som PNG, vil det se fantastisk ud, men den resulterende filstørrelse vil være mindre end fantastisk.

JPEG bruges traditionelt til at gemme fotos. Nogle af billeddataene smides væk for at opnå en drastisk mindre filstørrelse, men da fotos indeholder en lang række forskellige farver og naturlige variationer, er tabet i kvalitet normalt umærkeligt for det menneskelige øje.

Vi vil gå mere i detaljer om komprimering senere, men hvis du kun husker to ting, skal du huske: JPEG til fotos og PNG til tekst/grafik.

Billeddimensioner

Har du nogensinde åbnet en webside og bemærket, at et lille billede (f.eks. et hovedbillede) tager f-o-r-e-v-e-r at downloade? Så langsomt, at du kan se hver linje komme ind? Du tænker ved dig selv, hvordan kan et så lille billede være så lang tid om at downloade?

Og når det sker med et stort header-billede, er det endnu værre, fordi det kan trække hele indlæsningen af siden i langdrag.

Grunden til, at dette sker, er, at bloggeren ikke har ændret størrelsen og optimeret sit billede korrekt, og i vores eksempel med et hovedbillede har han eller hun måske uploadet et JPEG-billede i fuld opløsning direkte fra sit DSLR-kamera.

Og det er en stor fil!

En webbrowser skalerer (normalt) et billede i forhold til dets oprindelige dimensioner, så det passer godt ind på sin plads på en webside. Det, der ser ud til at være et lille billede på skærmen, kan i virkeligheden være et stort 10 megapixel-foto, som browseren har nedskaleret i realtid.

Nogle webpubliceringsplatforme vil automatisk oprette flere variationer af dit billede i fuld opløsning i forskellige størrelser, men hvis ikke, bør du ændre størrelsen på dine billeder på forhånd i et billedredigeringsprogram som Photoshop, Lightroom, Pixlr - eller endda MS Paint. Det kan betyde forskellen mellem en fil på 50K og en på 5MB.

WordPress opretter f.eks. automatisk tre (eller flere, afhængigt af dit tema) kopier af dit uploadede billede - alle med forskellige dimensioner - som du kan bruge i blogindlæg, i stedet for altid at bruge billedet i fuld størrelse.

Hvis du har for vane at uploade store billeder af stockfotos og ønsker at spare plads på din hostingkonto, kan du bruge WordPress-plugin'et Imsanity til at hjælpe dig.

Den ændrer størrelsen og erstatter det originale billede til noget mere håndterbart, så selv hvis du indsætter billedet i fuld størrelse i dit indlæg, vil det ikke være så slemt.

Når Imsanity er aktiveret, kan den også søge i dine eksisterende billeder og ændre størrelsen i overensstemmelse hermed.

Servering af dine billeder

Hvordan du viser dine billeder til dine besøgende handler ikke udelukkende om optimering af dem i sig selv, men det kan have en dramatisk indvirkning på din sidelæsningstid.

De fleste bloggere serverer deres billeder direkte fra deres hostingkonto, og det er normalt fint, men hvis du virkelig ønsker at få mest muligt ud af dit websted, kan det gøre en stor forskel at hoste dine billeder på et Content Delivery Network (CDN).

Et CDN består af strategisk placerede webservere, der er placeret i datacentre over hele verden. Disse servere er vært for kopier af dine billeder, og når en besøgendes browser anmoder om et billede fra dit websted, omdirigerer CDN automatisk browseren til den server, der geografisk set er tættest på dem.

Det betyder, at besøgende fra f.eks. Europa får billederne serveret fra en lokal europæisk server i stedet for en server fra USA eller andre steder. Da svartiden og netværkslatenstiden er reduceret, downloades billederne meget hurtigere, hvilket reducerer indlæsningstiden på siden.

Blogging Wizard bruger Sucuri (det omfatter en firewall til sikkerhed samt et CDN), men der findes andre kvalitetsudbydere som Amazons Cloudfront eller KeyCDN. Selv det populære CloudFlare, som ikke er et CDN i sig selv, tilbyder et CDN gratis og er let at opsætte i de fleste delte hostingpakker.

Komprimering af billeder

Når det gælder optimering af dine billeder, er der intet, der reducerer filstørrelsen mere end avanceret tabsgivende billedkomprimering.

De fleste billedredigeringsværktøjer som Visme eller Photoshop gemmer filer ved hjælp af tabsgivende JPEG-komprimering, da det giver den bedste reduktion af filstørrelsen. Så selv om billedkvaliteten er en smule forringet, reduceres store billeder ved hjælp af tabsgivende billedkomprimering til webvenlige størrelser.

Jeg er sikker på, at mange, der bruger Photoshop, måske vil se dens Gem til web funktionen som det eneste rigtige til optimering af billeder. Og selv online billedredigeringsværktøjer som PicMonkey eller Visme optimerer også dine billeder.

Men vidste du, at der findes værktøjer, der kan tage dit "optimerede" billede fra Photoshop eller andre redigeringsværktøjer, knuse og komprimere det med yderligere 40 % (eller mere), og stadig få det til at se næsten identisk ud for det menneskelige øje?

Her er nogle gratis og betalte værktøjer, der kan hjælpe dig med at få dine billeder ned til webvenlig status.

Desktop-værktøjer

ImageAlpha / ImageOptim

For Mac-brugere er ImageOptim et gratis desktop-værktøj, som jeg bruger hver dag til at optimere PNG-billeder - for det meste skærmbilleder - før jeg uploader dem. Disse værktøjer er nemme at bruge, du skal bare trække og slippe dine filer, men du skal gøre det med et billede ad gangen.

Pro tip : For de teknisk kyndige er der ImageOptim-CLI, hvor du kan optimere en hel mappe med billeder på én gang.

ImageAlpha er en tabsgivende PNG-kompressor og kan gøre underværker med hensyn til at skrumpe PNG-filer, mens ImageOptim udfører avanceret tabsfri komprimering (med mulighed for tabsgivende) - og fjerner unødvendige metadata fra PNG-, JPEG- og GIF-filer.

Mine PNG-billeder kører jeg først gennem ImageAlpha:

Her reducerede den mit skærmbillede fra 103K til 28K.

Derefter kørte jeg det gennem ImageOptim og sparede yderligere 10 %.

JPEGmini

Jeg optimerer mine JPEG-filer med JPEGmini-programmet, der findes til både Mac og Windows.

Lite-versionen giver dig mulighed for at optimere op til 20 billeder om dagen gratis, og det koster 19,99 USD at fjerne denne begrænsning.

Pro tip : Avancerede brugere, der ønsker at integrere JPEGmini i Photoshop eller Lightroom ved hjælp af et plugin, kan købe Pro-versionen for 99,99 $.

Online / Cloud / SaaS-værktøjer

TinyPNG

Hvis du leder efter et online værktøj til billedkomprimering af høj kvalitet, er TinyPNG (det optimerer også JPEG-filer på trods af navnet) en webapp, som giver dig mulighed for at trække op til 20 billeder på 5 MB eller mindre ind i din browser og få dem optimeret på én gang.

De har også et API til udviklere og stiller et WordPress-plugin til rådighed, som automatisk kan optimere dine billeder ved upload.

TinyPNG giver dig 500 gratis billedoptimeringer om måneden, og derefter opkræves der gebyrer på mellem 0,002-0,009 USD pr. billede, afhængigt af mængden.

500 billeder om måneden lyder måske af meget, men når du tænker på, at WordPress ofte opretter tre til fem variationer af hvert billede i forskellige størrelser, så virker 500 billeder ikke som at mange Heldigvis er prisen pr. billede budgetvenlig.

EWWWW Image Optimizer

Hvis du ikke er klar til at bruge penge, og du ikke vil være besværet med at optimere dine billeder manuelt, kan det gratis EWWWW Image Optimizer-plugin til WordPress automatisk optimere dine uploadede billeder.

Du kan vælge et premium-abonnement, der udfører lossy compression, men den gratis version udfører kun lossless compression, så besparelserne er ikke nær så betydelige. Det sparer dig dog tid og er bedre end ingenting.

Bemærk: Du kan få en komplet oversigt i vores indlæg om værktøjer til billedkomprimering.

Afslutning

Da nogle forudser, at den gennemsnitlige websidestørrelse vil nærme sig 3 MB i 2017, er det nu, du skal begynde at optimere dine billeder.

Husk, at det ikke er alle dine besøgende, der har højhastighedsforbindelser, og at sider, der er for tunge og langsom indlæsning af siderne, potentielt kan påvirke din placering hos Google. For at lette belastningen, så at sige, kan du gøre det til en vane at optimere dine billeder i dag.

Vær opmærksom på dine billeddimensioner, og tilpas størrelsen på alt for store lagerfotos eller billeder fra et digitalkamera til en passende størrelse.

Udnyt derefter moderne billedkomprimering med desktop-apps som JPEGmini eller cloud-værktøjer som TinyPNG eller Kraken - og integrer dem i WordPress med et plugin, hvis det er muligt.

Hvis din udgivelsesplatform automatisk opretter variationer af dit originale billede i en anden størrelse, kan du vælge en af disse til dit blogindlæg i stedet for det originale billede i fuld størrelse.

Relateret læsning: 7 måder at reducere størrelsen af PDF-filer på.