Elsker du ikke bilder?

De kan forvandle et tekststykke til en engasjerende opplevelse mens du leser. Bilder forbedrer et blogginnlegg, gjør det mer delbart og setter tonen og merkevaren på hele nettstedet ditt.

Og vet du hva? Vi er hardwired til å svare på bilder. Derfor er det å inkludere bilder i innholdet ditt et kraftig verktøy du kan bruke når du markedsfører bloggen din.

Men hvis du ikke er forsiktig, kan bilder utgjøre over halvparten (eller mer) av nettsidens totale størrelse. For bare noen få år siden var gjennomsnittsstørrelsen på en nettside 600–700K. Nå er gjennomsnittet 2 MB og det øker hvert år.

Det er enormt!

Hovedgrunnen til at dette skjer er fordi flere bilder blir brukt oftere på nettsider, og disse bildene er ikke riktig størrelse og optimalisert. Dette betyr at de ikke er lagret eller kompilert på en nettvennlig måte, og at de i stedet blåser opp sidene dine.

De fleste av oss lar imidlertid optimalisere bilder som en ettertanke og vil heller like å gjøre de morsomme tingene. som å lage et episk innlegg eller å bygge nettverk med andre bloggere i din nisje.

Men å ha oppblåst side betyr at sidens lastehastighet påvirkes. Du tror kanskje ikke dette er en stor sak hvis du har en høyhastighetsforbindelse, men mange av de besøkende er det ikke. Google liker heller ikke sakte lasting av sider, og det kan påvirke SEO negativt.

Hvorfor du trenger å optimalisere bilder

Du jobber hardt medskaper fantastisk innhold, og du bruker utallige timer på å markedsføre bloggen din og bygge nettverk med andre bloggere, så det siste du ønsker er at potensielle besøkende skal forlate nettstedet ditt før det i det hele tatt laster!

Studier viser at opptil 40 % av besøkende klikker tilbake-knappen hvis et nettsted tar lengre tid enn tre sekunder å laste.

Jeg vet, tre sekunder er egentlig ikke så lenge, men når du er på en mobilforbindelse og venter på en nettstedet å laste, kan et sekund virke som en evighet.

Og siden mange av de besøkende kan være på tregere mobilforbindelser, blir det klart – du må redusere sidestørrelsen. Og vi vet allerede hva den største forbryteren av sidestørrelsesoppblåsthet er – det er bildene dine.

Unødvendig store bilder tar også opp plass på hostingkontoen din. Mens noen av dere kanskje har hosting med "ubegrenset" lagringsplass, begrenser mange premium hostingleverandører deg til rundt 10 GB lagringsplass på lavere nivåplaner. Dette kan fylles opp raskt, spesielt hvis du er vert for flere, bildetunge nettsteder på samme konto.

Så, hvordan kan du finne ut om bildene dine bremser nettstedet ditt? Test nettstedets hastighet med Google PageSpeed ​​Insights.

Hvis Google rapporterer uoptimaliserte bilder som et problem, er dette det du trenger å vite for å fikse det.

Grunnleggende bildeoptimalisering

Når det gjelder å optimalisere bilder på bloggen din, er det noen forskjellige ting du må væreklar over: filtype, bildestørrelse og dimensjoner, hvordan du viser bildene dine og bildekomprimering.

La oss se nærmere på hvert av disse områdene.

Filtype

Bilder på nettet lagres vanligvis i PNG- eller JPEG-filformatet – eller GIF for animasjon. Hvem elsker ikke de morsomme animerte GIF-ene som flyter rundt på nettet!

Nå er det teknisk sett ok hvis du lagrer bildene dine i begge formatene – den besøkendes nettleser vil ikke ha problemer med å vise nettsiden din – men for best kvalitet og optimalisering, hold deg til følgende regler:

• JPEG – bruk for fotografier og design der mennesker, steder eller ting vises
• PNG – best for grafikk , logoer, teksttunge design, skjermbilder og når du trenger bilder med gjennomsiktig bakgrunn
• GIF – hvis du trenger animasjon, bruk ellers PNG

Så hvorfor finnes det forskjellige formater ?

Vel, PNG brukes tradisjonelt for å lagre logoer og grafikk fordi det bevarer den originale bildekvaliteten – ingen vil ha uskarp tekst og pikselerte former. Men hvis du prøver å lagre et bilde som en PNG, vil det se fantastisk ut, men den resulterende filstørrelsen vil være mindre enn fantastisk.

JPEG brukes tradisjonelt for å lagre bilder. Noen av bildedataene blir kastet for å lage en drastisk mindre filstørrelse, men siden bilder inneholder et bredt utvalg av farger og naturlige variasjoner, er kvalitetenstapetvanligvis umerkelig for det menneskelige øyet.

Vi skal gå nærmere inn på komprimering senere, men foreløpig, hvis du bare husker to ting, husk: JPEG for bilder og PNG for tekst/grafikk.

Bildedimensjoner

Har du noen gang lastet opp en nettside og lagt merke til at et lite bilde (kanskje et hodebilde, for eksempel) tar f-o-r-e-v-e-r å laste ned? Så sakte at du kan se hver linje komme inn? Du tenker for deg selv, hvordan kan et så lite bilde ta så lang tid å laste ned?

Og når det skjer med et stort overskriftsbilde, er det enda verre fordi det kan stoppe hele sideinnlastingen.

Grunnen til at dette skjer er fordi bloggeren ikke har endret størrelse og optimalisert bildet sitt, og i tilfellet med hodebildeeksemplet vårt, kan han ha lastet opp en JPEG med full oppløsning direkte fra DSLR-kameraet hans eller hennes.

Og det er en enorm fil!

Du skjønner, en nettleser vil (vanligvis) skalere et bilde fra dets opprinnelige dimensjoner slik at det passer fint på sin plass på en nettside. Det som ser ut til å være et lite bilde på skjermen, kan virkelig være et stort bilde på 10 megapiksler, nedskalert i sanntid av nettleseren.

Nå vil noen nettpubliseringsplattformer automatisk lage flere varianter av fulloppløsningsbildet ditt i forskjellige størrelser, men hvis ikke, bør du endre størrelsen på bildene dine på forhånd i et bilderedigeringsprogram som Photoshop, Lightroom, Pixlr – eller til og med MS Paint. Det kan bety forskjellenmellom en 50K-fil og 5MB en.

WordPress, for eksempel, vil automatisk lage tre (eller flere, avhengig av temaet ditt) kopier av det opplastede bildet – alle med forskjellige dimensjoner – som du kan bruke i blogginnlegg, i stedet for alltid å bruke bildet i full størrelse.

Hvis du har for vane å laste opp store arkivbilder og ønsker å spare plass på vertskontoen din, kan du bruke WordPress-pluginen Imsanity har ryggen din.

Den endrer størrelsen og erstatter originalbildet til noe mer håndterlig, så selv om du setter inn bildet i full størrelse i innlegget ditt, blir det ikke så ille.

Når den er aktivert, kan Imsanity også søke i de eksisterende bildene dine og endre størrelse deretter.

Servering av bildene dine

Hvordan du viser bildene dine til de besøkende handler ikke bare om å optimalisere dem i seg selv , men det kan ha en dramatisk innvirkning på sidens lastetid.

De fleste bloggere viser bildene sine rett fra hostingkontoen sin, og det er vanligvis greit, men hvis du virkelig ønsker å presse ut hver bit av ytelsen nettstedet ditt, så kan hosting av bildene dine på et Content Delivery Network (CDN) utgjøre en stor forskjell.

Et CDN består av strategisk plasserte nettservere plassert i datasentre over hele verden. Disse serverne er vert for dupliserte kopier av bildene dine, og når en besøkendes nettleser ber om et bilde fra nettstedet ditt, sender CDN automatisk nettleseren til enserver som geografisk er nærmest dem.

Dette betyr at besøkende fra for eksempel Europa vil motta bilder fra en lokal europeisk server, i stedet for en fra USA eller andre steder. Siden responstid og nettverksforsinkelse reduseres, laster bildene ned mye raskere, noe som reduserer sidens lastetid.

Bloggingsveiviseren bruker Sucuri (den inkluderer en brannmur for sikkerhet så vel som en CDN), men det finnes andre kvalitetsleverandører som Amazons Cloudfront eller KeyCDN. Selv den populære CloudFlare, som strengt tatt ikke er en CDN, tilbyr en CDN gratis og er enkel å sette opp i de fleste delte hostingpakker.

Bildekomprimering

Når det gjelder å optimalisere din bilder, ingenting reduserer filstørrelsen mer enn avansert bildekomprimering med tap.

De fleste bilderedigeringsverktøy som Visme eller Photoshop vil lagre filer ved å bruke JPEG-komprimering med tap, siden den har de beste filstørrelsesreduksjonene. Så selv om bildekvaliteten er litt redusert, reduserer bruk av bildekomprimering med tap av bilder enorme bilder til nettvennlige størrelser.

Jeg er sikker på at mange som bruker Photoshop kan se funksjonen Lagre for nett . som det aller meste av bildeoptimalisering. Og selv nettbaserte bilderedigeringsverktøy som PicMonkey eller Visme optimaliserer bildene dine også.

Men visste du at det finnes verktøy som kan ta det "optimaliserte" bildet ditt fra Photoshop eller andre redigeringsverktøy, knuse og komprimere det med ytterligere 40 % (eller mer),og fortsatt ser det nesten ut som det menneskelige øyet?

Her er noen gratis og betalte verktøy for å hjelpe deg med å knuse bildene dine ned til nettvennlig status.

Skrivebordsverktøy

ImageAlpha / ImageOptim

For Mac-brukere er ImageOptim et gratis skrivebordsverktøy som jeg bruker hver dag for å optimalisere PNG-bilder – for det meste skjermbilder – før jeg laster dem opp. Disse verktøyene er enkle å bruke, du bare drar og slipper filene dine, men du må lage ett bilde om gangen.

Profftips : For de teknologikyndige finnes ImageOptim– CLI, hvor du kan optimere en hel mappe med bilder på en gang.

ImageAlpha er en PNG-kompressor med tap og kan gjøre underverker for å krympe PNG-filer mens ImageOptim utfører avansert tapsfri (med mulighet for tapsfri) komprimering – og det fjerner unødvendige metadata fra PNG-, JPEG- og GIF-filer.

For PNG-bildene mine kjører jeg dem først gjennom ImageAlpha:

Her reduserte det skjermbildet mitt fra 103K til 28K.

Jeg kjørte den deretter gjennom ImageOptim og sparte 10 ekstra %.

JPEGmini

For JPEG-filene mine optimaliserer jeg dem med JPEGmini-appen på skrivebordet, tilgjengelig for både Mac og Windows.

Lite-versjonen lar deg optimalisere opptil 20 bilder om dagen gratis, og koster $19,99 for å fjerne grensen.

Profftips : Avanserte brukere som ønsker å integrere JPEGmini i Photoshop eller Lightroom ved hjelp av en plugin kan kjøpe Pro-versjonen for$99,99.

Online / Cloud / SaaS-verktøy

TinyPNG

Hvis du leter etter et høykvalitets online bildekomprimeringsverktøy, TinyPNG (det optimerer JPEG filer også til tross for navnet) er en nettapp som lar deg dra opptil 20 5MB eller mindre bilder inn i nettleseren din, og få dem optimalisert på en gang.

De har også et utvikler-API og lager en WordPress tilgjengelig plugin som automatisk kan optimalisere bildene dine ved opplasting.

TinyPNG gir deg 500 gratis bildeoptimaliseringer per måned, og belastes deretter fra $0,002–0,009 per bilde, avhengig av volum.

Nå 500 bilder per måned kan høres ut som mye, men når du tenker på det faktum at WordPress ofte lager tre til fem varianter av hvert bilde i forskjellige størrelser, virker ikke 500 bilder som så mange for den produktive bloggeren. Heldigvis er kostnaden per bilde budsjettvennlig.

EWWW Image Optimizer

Hvis du ikke er klar til å bruke penger, og du ikke vil bli plaget med å optimalisere bildene dine manuelt, gratis EWWW Image Optimizer-plugin for WordPress kan automatisk optimalisere de opplastede bildene dine.

Du kan velge et premiumabonnement som utfører tapskomprimering, men gratisversjonen utfører kun tapsfri komprimering, slik at besparelsene er t nesten like betydelig. Det vil spare deg tid og er bedre enn ingenting.

Merk: For en fullstendig oversikt, sjekk utinnlegget vårt om bildekomprimeringsverktøy.

Avslutte det

Med noen mennesker som forutsier at den gjennomsnittlige nettsidestørrelsen vil nærme seg 3MB innen 2017, er det nå på tide å begynne å optimalisere bildene dine.

Husk at ikke alle de besøkende vil ha høyhastighetsforbindelser, og sideoppblåsthet og langsomme sideinnlastingstider kan potensielt påvirke rangeringen din hos Google. For å hjelpe deg med å lette belastningen, så å si, ta for vane med å optimalisere bildene dine i dag.

Vær oppmerksom på bildedimensjonene og endre størrelsen på alt for store arkivbilder eller bilder fra et digitalkamera til et passende størrelse.

Deretter kan du dra nytte av moderne bildekomprimering med skrivebordsapper som JPEGmini, eller skyverktøy som TinyPNG eller Kraken – integrer dem i WordPress med en plugin hvis mulig.

Til slutt, hvis din publiseringsplattformen oppretter automatisk endrede størrelsesvarianter av originalbildet ditt, velg en av disse for blogginnlegget ditt, i stedet for den originale, full størrelse.

Relatert lesning: 7 måter å redusere Størrelse på PDF-filer.