Hvordan optimalisere bilder for nettprestasjoner uten å miste kvaliteten

Visste du at optimalisering av bildene dine før du laster opp til WordPress kan ha stor innvirkning på nettstedets hastighet?


Når du starter en ny blogg, laster mange nybegynnere ganske enkelt bilder uten å optimalisere dem for nettet. Disse store bildefilene gjør nettstedet ditt tregere.

Du kan fikse dette ved å bruke beste praksis for optimalisering av bilder som en del av din vanlige bloggrutine.

I denne artikkelen vil vi vise deg hvordan du optimaliserer bildene dine for raskere nettprestasjon uten å miste kvaliteten. Vi vil også dele automatiske plugins for bildeoptimalisering for WordPress som kan gjøre livet ditt enkelt.

Hvordan optimalisere bildene dine i WordPress (trinn for trinn)

Siden dette er en omfattende guide for optimalisering av bilder for nett, har vi laget en oversikt over innholdsfortegnelsen:

    Hva er bildeoptimalisering? (Optimaliserte vs uoptimerte bilder)

    Bildeoptimalisering er en prosess for å lagre og levere bilder i minst mulig filstørrelse uten å redusere den totale bildekvaliteten.

    Selv om prosessen høres sammensatt ut, er den faktisk ganske enkel i disse dager. Du kan bruke en av de mange programtilleggene og verktøyene for å optimalisere bilder automatisk med opptil 80% uten synlig tap i bildekvalitet.

    Her er et eksempel på et optimalisert versus uoptimert bilde:

    Optimaliserte vs uoptimerte bilder i WordPress

    Som du kan se, kan det samme bildet, når det er optimalisert, være 75% mindre enn originalen uten tap av kvalitet.

    Hvordan fungerer Image Optimization?

    Enkelt sagt fungerer optimalisering av bilder ved å bruke komprimeringsteknologi som “Lossy” og “Lossless”, noe som hjelper til med å redusere den totale filstørrelsen uten at det blir merkbart tap av kvalitet.

    Hva betyr det å optimalisere bilder?

    Hvis du noen gang har mottatt en anbefaling om å optimalisere bilder av din WordPress-hostingstøtte eller med et hastighetstestverktøy, er alt det betyr at du trenger å redusere filstørrelsen på bildene dine ved å optimalisere dem for web.

    Hvorfor er bildeoptimalisering viktig? Hva er fordelene med bildeoptimalisering?

    Selv om det er mange fordeler med å optimalisere bildene, er nedenfor de beste du bør vite:

    • Raskere nettstedets hastighet
    • Forbedrede SEO-rangeringer
    • Høyere total konverteringsfrekvens for salg og potensielle kunder
    • Mindre lagring og båndbredde (noe som kan redusere hosting og CDN-kostnader)
    • Raskere sikkerhetskopiering av nettsteder (reduserer også kostnadene for lagring av sikkerhetskopier)

    Utenfor video er bilder det neste tyngste elementet på en webside. I følge HTTP-arkiv, bilder utgjør i gjennomsnitt 21% av den totale nettsidens vekt.

    Siden vi vet raske nettsteder rangerer høyere i søkemotorer (SEO) og har bedre konverteringer, er bildeoptimalisering noe som enhver bedriftsnettsted må gjøre hvis de vil lykkes på nettet.

    Nå lurer du kanskje på hvor stor forskjell billedoptimalisering virkelig kan gjøre?

    I følge en Strangeloop-studie kan en forsinkelse på ett sekund i belastningstiden på nettstedet koste deg 7% av salget, 11% færre sidevisninger og 16% reduksjon i kundetilfredshet..

    Hvordan hastighet påvirker nettstedet ditt

    Hvis dette ikke er nok grunner til å få fart på nettstedet ditt, bør du vite at søkemotorer som Google også gir foretrukket SEO-behandling til raskere lasting av nettsteder.

    Dette betyr at ved å optimalisere bildene dine for web, kan du både forbedre nettstedets hastighet og øke WordPress SEO-rangeringer.

    Videoopplæring

    Abonner på WPBeginner

    Hvis du foretrekker skriftlige instruksjoner, bare fortsett å lese.

    Hvordan lagre og optimalisere bilder for ytelse på nettet?

    Nøkkelen til vellykket bildeoptimalisering for webytelse er å finne den perfekte balansen mellom laveste filstørrelse og akseptabel bildekvalitet.

    De tre tingene som spiller en enorm rolle i bildeoptimalisering er:

    • Bildefilformat (JPEG vs PNG vs GIF)
    • Komprimering (Høyere komprimering = mindre filstørrelse)
    • Bildedimensjoner (høyde og bredde)

    Ved å velge riktig kombinasjon av de tre, kan du redusere bildestørrelsen med opptil 80%.

    La oss se på hver av disse i flere detaljer.

    1. Bildefilformat

    For de fleste nettstedseiere er de eneste tre bildefilformatene som virkelig betyr noe JPEG, PNG og GIF. Å velge riktig filtype spiller en viktig rolle i bildeoptimalisering.

    For å holde ting enkelt, vil du bruke JPEG-er for bilder eller bilder med mange farger, PNG-er for enkle bilder eller når du trenger gjennomsiktige bilder, og GIF for animerte bilder..

    For de som ikke vet forskjellen mellom hver filtype, er PNG-bildeformat ukomprimert, noe som betyr at det er et bilde av høyere kvalitet. Ulempen er at filstørrelsene er mye større.

    På den annen side er JPEG et komprimert filformat som reduserer bildekvaliteten litt for å gi en betydelig mindre filstørrelse.

    Mens GIF bare bruker 256 farger sammen med tapsfri komprimering, noe som gjør det til det beste valget for animerte bilder.

    På WPBeginner bruker vi alle tre bildeformater basert på bildetypen.

    2. Komprimering

    Det neste er bildekomprimering som spiller en enorm rolle i optimalisering av bilder.

    Det er forskjellige typer og nivåer av bildekomprimering tilgjengelig. Innstillingene for hver vil variere avhengig av bildekomprimeringsverktøyet du bruker.

    De fleste bilderedigeringsverktøy som Adobe Photoshop, On1 Photo, GIMP, Affinity Photo og andre har innebygde bildekomprimeringsfunksjoner.

    Du kan også lagre bilder normalt og deretter bruke et webverktøy som TinyPNG eller JPEG Mini for enklere bildekomprimering.

    Selv om det er litt manuelt, lar disse to metodene deg komprimere bilder før du laster dem opp til WordPress, og det er dette vi gjør på WPBeginner.

    Det er også flere populære WordPress-plugins som Optimole, EWWW Image Optimizer og andre som automatisk kan komprimere bilder når du først laster dem opp. Mange nybegynnere og til og med store selskaper foretrekker å bruke disse bildoptimaliseringspluginene fordi det er enkelt og praktisk.

    Vi vil dele mer om disse WordPress-programtilleggene senere i artikkelen.

    3. Bildedimensjoner

    Normalt, når du importerer et bilde fra telefonen eller et digitalt kamera, har det en veldig høy oppløsning og store fildimensjoner (høyde og bredde).

    Disse bildene har vanligvis en oppløsning på 300 DPI og dimensjoner fra 2000 piksler og mer. Disse høykvalitetsfotoene er godt egnet for publisering på trykk eller på skrivebordet. De er ikke egnet for nettsteder.

    Å redusere fildimensjoner til noe mer fornuftig kan redusere bildefilens størrelse betydelig. Du kan ganske enkelt endre størrelse på bilder ved å bruke et program for redigering av bilder på datamaskinen.

    For eksempel optimaliserte vi et bilde med 1,8 MB original filstørrelse, 300 DPI-oppløsning og bildedimensjoner på 4900 × 3200 piksler.

    Vi valgte jpeg-format for høyere komprimering og endret dimensjoner til 1200 × 795 piksler, og det reduserte bildefilens størrelse til 103 KB. Det er 94% mindre enn den opprinnelige filstørrelsen.

    Nå som du kjenner til de tre viktige faktorene i bildeoptimalisering, la oss se på forskjellige verktøy for bildeoptimalisering for eiere av nettsteder.

    Beste verktøy for bildeoptimalisering og programmer

    Som vi nevnte tidligere, har de fleste bilderedigeringsprogramvare innstillinger for bildeoptimalisering og komprimering.

    Utenfor bildedigeringsprogramvaren er det også flere kraftige gratis bildeoptimaliseringsverktøy som du kan bruke til å optimalisere bilder for nettet (med bare noen få klikk).

    Vi anbefaler å bruke disse verktøyene for å optimalisere bilder før du laster dem opp til WordPress, spesielt hvis du er perfeksjonist.

    Denne metoden hjelper deg å spare diskplass på din WordPress hosting-konto, og den garanterer det raskeste bildet med den beste kvaliteten siden du manuelt går gjennom hvert bilde.

    Adobe Photoshop

    Adobe Photoshop er en førsteklasses programvare som har en funksjon for å lagre bilder optimalisert for nettet. Bare åpne bildet og klikk på alternativet “File» Save for Web “.

    Dette åpner en ny dialogboks. Til høyre kan du angi forskjellige bildeformater. For JPEG-format vil du se forskjellige kvalitetsalternativer. Når du velger alternativene, vil den også vise filstørrelsen nederst til venstre.

    Lagring av bilder optimalisert for nettet ved hjelp av Photoshop

    GIMP

    GIMP er et gratis og åpen kildekode-alternativ til populære Adobe Photoshop. Det kan brukes til å optimalisere bildene dine for nettet. Ulempen er at det ikke er like enkelt å bruke som noen andre løsninger på denne listen.

    Først må du åpne bildet i GIMP og deretter velge Fil »Eksporter som alternativ. Dette vil åpne dialogboksen Lagre fil. Gi filen et nytt navn, og klikk deretter på eksportknappen.

    Eksporter bilde i GIMP

    Dette vil øke alternativene for eksport av bilder. For jpeg-filer kan du velge komprimeringsnivå for å redusere filstørrelse. Til slutt, klikk på eksportknappen for å lagre den optimaliserte bildefilen.

    TinyPNG

    TinyPNG er en gratis webapp som bruker en smart lossy komprimeringsteknikk for å redusere størrelsen på PNG-filene dine. Alt du trenger å gjøre er å gå til nettstedet deres og laste opp bildene dine (enkel dra & miste).

    Bruke TinyPNG for å optimalisere bilder for WordPress

    De vil komprimere bildet, og gi deg nedlastingslenken. Du kan bruke søsterens nettsted, TinyJPG, for JPEG-bildekomprimering.

    De har også en utvidelse for Adobe Photoshop, og det er det vi bruker som en del av vår billedredigeringsprosess fordi den kombinerer det beste fra TinyPNG og TinyJPG i Photoshop..

    For utviklere har de et API for å konvertere bilder automatisk, og for nybegynnere har de en WordPress-plugin som automatisk kan gjøre det for deg (mer om dette senere).

    JPEG Mini

    JPEGmini bruker en tapsfri komprimeringsteknologi som reduserer størrelsen på bilder betydelig uten å påvirke deres persepsjonelle kvalitet. Du kan også sammenligne kvaliteten på originalbildet og det komprimerte bildet.

    JPEGMini verktøy for online komprimering

    Du kan bruke nettversjonen deres gratis, eller kjøpe programmet til datamaskinen din. De har også et betalt API for å automatisere prosessen for serveren din.

    ImageOptim

    ImageOptim er et Mac-verktøy som lar deg komprimere bilder uten å miste kvaliteten ved å finne de beste komprimeringsparametrene og fjerne unødvendige fargeprofiler.

    ImageOptim

    Windows-alternativ til dette er Trimage.

    Beste plugin-er for optimalisering av bilder for WordPress

    Vi tror at den beste måten å optimalisere bildene dine er ved å gjøre det før du laster dem opp til WordPress. Imidlertid, hvis du driver et nettsted med flere forfattere eller trenger en automatisert løsning, kan du prøve et WordPress-komprimeringsplugin.

    Nedenfor er vår liste over de beste WordPress-komprimeringene for bildekomprimering:

    1. Optimole – populær plugin av teamet bak ThemeIsle.
    2. EWWW Image Optimizer
    3. Komprimere JPEG & PNG-bilder – plugin av TinyPNG-teamet nevnt ovenfor i artikkelen.
    4. Forestill deg – plugin av det populære WP Rocket-plugin-teamet.
    5. ShortPixel Image Optimizer
    6. WP Smush
    7. reSmush.it

    Hvis du bruker en av disse WordPress-bildoptimaliseringspluginene, vil du hjelpe deg med å øke hastigheten på nettstedet ditt.

    Endelige tanker og beste fremgangsmåter for optimalisering av bilder

    Hvis du ikke lagrer bilder optimalisert for nett, må du begynne å gjøre det nå. Det vil utgjøre en enorm forskjell på nettstedets hastighet, og brukerne vil takke deg for det.

    For ikke å nevne, raskere nettsteder er bra for SEO, og du vil sannsynligvis se en økning i søkemotorrangeringene.

    Utenfor optimalisering av bilder, er de to tingene som vil hjelpe deg med å få fart på nettstedet ditt ved å bruke et WordPress-cache-plugin og bruke en WordPress CDN.

    Alternativt kan du bruke et administrert WordPress hostingfirma fordi de ofte tilbyr både cache og CDN som en del av plattformen.

    Vi håper denne artikkelen hjalp deg med å lære hvordan du optimaliserer bildene dine i WordPress. Det kan også være lurt å se vår guide for hvordan du forbedrer WordPress-sikkerheten din og de beste WordPress-pluginsene for bedriftsnettsteder.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me