Hvordan optimalisere bildene dine slik at de er SEO-vennlige (komplett guide)

Resultatene til nettstedet ditt er avhengig av flere faktorer som spenner fra den spesifikke webverten du velger, over å følge retningslinjene for tilgjengelighet på nettstedet, til bildefilstørrelsene du bruker.


Formatering av dem for riktig størrelse kan imidlertid redusere kvaliteten på grunn av endringene du gjør. Den gode nyheten er at du kan opprettholde optimal bildekvalitet og få riktig størrelse med noen få teknikker og triks.

Hva er Image Optimization?

dimensjoner for bildeoptimaliseringNettsider kan oppleve en betydelig nedgang når store bilder er til stede. Dette kan redusere lastetidene og gjøre den generelle opplevelsen delvis for besøkende.

Å redusere filstørrelsen er bildeoptimalisering. Du kan bruke et skript eller en plugin for dette.

Dette resulterer i raskere lastetid for sidene dine. Tapløs og tapt komprimering er de to vanligste optimaliseringsmetodene.

Fordelene med bildeformatering

gjennomsnittlige bildestørrelser på nettetDet anslås at omtrent 54 prosent av totalvekten til en webside skyldes bilder.

Når du jobber med optimalisering av nettsteder, bør bildene være din første oppgave på grunn av dette. Fordelene med bildeformatering inkluderer:

  • Forbedret sidehastighet
  • Det er raskere å lage sikkerhetskopier
  • Mindre serverlagringsplass er nødvendig
  • Forbedret SEO med riktig SEO-plugin
  • Mindre båndbredde brukes

Slik forbedrer du ytelsen med bildeoptimalisering

Målet er å jevne balansen mellom akseptabel kvalitet og lavest mulig filstørrelse. Det er mer enn en måte å gjøre dette på. Før du laster opp, er komprimering av bilder et vanlig alternativ. Du kan bruke et verktøy eller en plugin til dette formålet (her er noen).

Det er viktig å vurdere hvilken type komprimering og filformat du bruker. Den rette kombinasjonen gjør det mulig å redusere størrelsen på bildet med opptil fem ganger.

Eksperimenter med forskjellige filformater og komprimeringstyper for å finne den beste kombinasjonen for dine behov.

Velg det beste filformatet

For å velge den beste filtypen, er det viktig å vite hvilke som er tilgjengelige. Dette er de vanligste:

  • JPEG: Denne typen benytter tapsfri og tapt optimalisering. Du kan oppnå en solid balanse av filstørrelse og kvalitet ved å justere kvalitetsnivået.
  • PNG: Denne typen har en større filstørrelse, men bildene har høyere kvalitet. Du kan bruke tapsfri eller tapsfri komprimering.
  • GIF: Dette er ideelt for animerte bilder. Du kan bare bruke tapsfri komprimering. Den bruker bare 256 farger.

bildefilformater

Det er andre alternativer, men disse er blant de vanligste og enkle å jobbe med. Andre alternativer inkluderer JPEG XR og WebP. Ikke alle nettlesere støtter disse to, så vær klar over dette.

De kan imidlertid være et levedyktig valg. Sammenlignet med et sammenlignbart JPEG-bilde er det for eksempel en reduksjon på 30 prosent filstørrelse med WebP i gjennomsnitt.

På grunn av mangelen på universell støtte for disse to alternativene, trenger applikasjonen din ytterligere logikk på serverne eller applikasjonen din for å gi den aktuelle ressursen:

  • Bildeoptimalisering er en tjeneste som tilbys av noen CDN-er, inkludert WebP og JPEG XR-levering.
  • For å oppdage klienten, gi det beste bildeformatet som er tilgjengelig, og sjekk de støttede formatene. Det er mulig å legge til tilleggsprogrammer.
  • Enkelte open source-verktøy automatiserer samtalen, optimaliseringen og serveringen av passende eiendeler.

Størrelse vs. komprimeringskvalitet

Lav komprimering har en tendens til å gi en høyere kvalitet, men filstørrelsene er vanligvis større. Det motsatte er sant med høy komprimering. Filene er mindre, men kvaliteten har en tendens til å synke.

bildekvalitet vs komprimering

Helst vil du ha en til to MB for nettsidens samlede vekt. Så vurder hvor mange bilder du trenger å bruke og del dette tallet med omtrent 1,5. Dette gir deg størrelsen per bilde som gir den beste lastehastigheten.

Lossless vs. Lossy Optimization

Dette er de to typene komprimering du vil bruke. Det er viktig å forstå hva de gjør:

  • tapsfri og tapsfri komprimeringLossless: Dette komprimerer data, og det er et filter. Før du gjengir bildet, må det være ukomprimert. Imidlertid reduseres ikke kvaliteten. Det er flere verktøy som utfører tapsfri komprimering.
  • lossy: Dette eliminerer noen data, og det er et filter. Vær oppmerksom på hvor mye reduksjon du gjør fordi det vil forringe bildet. Du kan bruke forskjellige bilderedigerere og verktøy for å justere bildets kvalitetsinnstillinger.

Den optimale konfigurasjonen av enten tapsfri eller tapt konfigurasjon avhenger av dine egne kriterier, for eksempel avveining mellom innførte gjenstander og filstørrelse, og bildeinnhold.

Det er ikke en eneste universell innstilling som gjelder alle bilder. Til syvende og sist vil du leke med forskjellige bilder for å se hvilke som fungerer best.

Endre størrelse på bilder til skala

Takket være responsive sider på nettsteder, for eksempel WordPress, vil du få flere filstørrelser i mediebiblioteket. Nettleseren din kan velge den størrelsen som er best og laste ned den. Størrelsen nettleseren velger er basert på enhetens oppløsning.

endre størrelse på bilde i wordpress

Den originale filen forblir uberørt og beholdt. Du kan bruke plugins for å unngå å lagre originalen for å spare diskplass hvis du foretrekker det.

Bytte ut og eliminere bilder

Trenger du alle bildene på en webside? Hvis ikke, fjern de som er unødvendige. Men hvis alle er relevante for innholdet, kan du vurdere å erstatte bilder av større eller lavere kvalitet med bedre alternativer.

I noen tilfeller kan nettfonter og CSS-effekter plassere bilder mens de fremdeles gir en fin visuell estetikk på siden. Med nettfonter kan fine skrifttyper bidra til å forbedre brukervennligheten og gi et mer skreddersydd utseende på sidene dine.

Det kan også forbedre lesbarheten og merkevarebyggingen din. Bare sørg for at du fremdeles enkelt kan søke, velge og endre størrelse på teksten uten at det har problemer med lesbarhet.

CSS-effekter inkluderer elementer, for eksempel skygger og gradueringer. Også disse kan videreføre merkevarebygging. Animasjoner kan gi visuell appell på hjemmesiden din på alle zoomnivåer og oppløsninger. Sammenlignet med bildefiler er dette en brøkdel av bytene.

Raster vs. vektorbilder

rastor vs vektor

Raster og vektor er to av de primære bildefiltypene. Pixelbaserte programmer, en skanner eller et kamera brukes til å lage rasterbilder.

Disse er mye brukt på internett og ofte brukt. Vektorprogramvare brukes til å lage vektorbilder. Dette er vanlig for bilder som går på fysiske produkter, og innen engineering, CAD og 3D-grafikk.

Vektorbilder er uavhengige av oppløsning og zoom. Når geometriske former er involvert, er vektor ideell. Når bilder er sammensatte og har et vell av detaljer og uregelmessige former, foretrekkes rasterbilder.

Rastergrafikk koder hver piksel individuelle verdier i et rektangulært rutenett for å representere et bilde. Vektorgrafikk representerer et bilde ved hjelp av punkter, linjer og polygoner.

Implikasjoner av skjerm med høy oppløsning

Det er viktig å skille mellom de to forskjellige pikseltyper, som inkluderer enhetspiksler og CSS-piksler. Flere enhetspiksler kan være til stede i en enkelt CSS-piksel. Detaljene på skjermen blir finere med flere enhetspiksler.

css-piksel vs enhetspikselFor å dra full nytte av de høyere enhetens pikselverdier, må bildeenhetene ha mer detaljering.

Denne oppgaven er ideell for vektorbilder siden de kan gi skarpe resultater når gjengitt i en hvilken som helst oppløsning.

Siden rasterbilder bruker en pikselbasis for å kode bildedata, er de mer utfordrende. Dette er mens rasterfilstørrelsene øker når pikslene øker.

Så høyoppløselige skjermer trenger bilder med høy oppløsning for å høste fordelene. Vektorbilder er best for skjermer med høy oppløsning siden de alltid gir skarpe resultater på grunn av at de er uavhengige av oppløsningen.

Bare husk at uansett oppløsning, er bildoptimaliseringsteknikkene de samme.

Optimalisering av vektorbilder

Scalable Vector Graphics (SVG) støttes av alle moderne nettlesere.

Dette er ideelt for todimensjonal grafikk, og formatet er XML-bildebasert. SVG-filer kan opprettes for hånd ved hjelp av teksteditoren du foretrekker eller med de fleste vektorbaserte programvaretyper.

For å redusere størrelsen på SVG-filer, bør de være minifisert. GZIP bør brukes når du komprimerer SVG-filer.

Optimalisering av rasterbilder

Et rutenett med piksler utgjør et rasterbilde. De enkelte pikslene er på et todimensjonalt rutenett. For eksempel utgjør en sekvens på 10.000 piksler et bilde på 100 med 100 piksler. Hver piksel koder for åpenhet og fargeinformasjon.

raster tungRGBA-verdier lagres av hver piksel. Disse inkluderer:

  • Rød kanal
  • Blå kanal
  • Grønn kanal
  • Alfakanal (åpenhet)

256 nyanser (verdier) tildeles internt av nettleseren. Per kanal oversettes dette til åtte biter. Per piksel er dette fire byte. Dette gjør det mulig å beregne filstørrelsen ved hjelp av rutenettdimensjoner. Det krever ikke mye for filstørrelsen blir veldig stor.

Så for å redusere størrelsen på bildefilen, er det noen strategier:

  • Reduser bildets bitdybde. Du kan gjøre dette ved å bruke en mindre fargepallete.
  • Optimaliser dataene som de enkelte pikslene lagrer.

Verktøy og parameterstilling

Det er ikke noe perfekt bildeverktøy, sett med optimaliseringsparametere eller format som fungerer for hvert bilde. Innholdet på bildet, og dets tekniske og visuelle krav, vil avgjøre hvilket du skal bruke.

Når du har funnet et godt innstillingssett, kan du bruke det til lignende bilder i fremtiden for å spare tid. Forsikre deg imidlertid om at du aldri antar at de samme innstillingene skal brukes til å komprimere alle bilder.

Å lære om noen få vanlige verktøy kan hjelpe deg med å ta det riktige valget. Disse fire er blant de mest brukte:

  • Gifsicle: Dette lar deg optimalisere og lage forskjellige GIF-bilder.
  • Optipng: Dette brukes for å tillate tapsfri PNG-optimalisering.
  • Jpegtran: Denne lar deg optimalisere JPEG-bilder.
  • Pngquant: Dette brukes for å tillate tap av PNG-optimalisering.

Leverer skalerte bildeaktiver

Det er to primære kriterier du må ta i betraktning når du utfører bildeoptimalisering:

  • Optimaliser et bildes totale antall piksler.
  • Optimaliser hvor mange byte som er nødvendig for å kode hver piksel i et bilde.

bildeformatstreetStørrelsen på bildefilen din brytes ned til totale piksler multiplisert med den totale byten som er nødvendig for individuell pikselkoding. Det var det. Husk dette når du jobber for å bestemme den optimale størrelsen for bildefilene på nettstedet ditt.

På grunn av dette er den mest effektive og enkle måten å optimalisere bilder på å sørge for at du ikke sender flere piksler som du absolutt trenger for å vise eiendelen i nettleseren til den tiltenkte størrelsen.

Så, ikke bare stol på nettleseren din for å omskalere bilder. Dette kan føre til at de vises i lavere oppløsning. Den bruker også mye ekstra CPU-ressurser.

Det er generelt ikke mulig å garantere den nøyaktige visningsstørrelsen for hver leverte eiendel. Det er imidlertid viktig å sørge for at du holder alle unødvendige piksler til et minimum.

Det er også viktig at du leverer de store eiendelene dine så nært du kan til visningsstørrelsen.

Sjekkliste for optimalisering av bilder

All informasjonen her lar deg optimalisere bildene dine slik at websidene dine er raskere. Du vil fremdeles kunne bruke vakre bilder, men de vil ikke føre til en betydelig nedgang med sidenes lastetid.

Dette vil gjøre de besøkende glade og forbedre den generelle funksjonen til nettstedet ditt. Tenk på følgende sjekklistepunkter når du optimaliserer bildene dine:

  • Vurder vektorformater siden de fungerer for høyoppløselig og flere enheter fordi de er uavhengige av skala og oppløsning.
  • Alle SVG-eiendeler skal komprimeres og minifiseres. Dette fjerner unødvendige metadata.
  • For rasterformater kan du leke med de beste kvalitetsinnstillingene. Dette kan spare deg for et betydelig antall byte.
  • For hver eiendel, finn ut funksjonskravene dine og velg det beste formatet for rasterbilder.
  • Automatiser når du kan for å sikre jevn bildeoptimalisering.
  • Server skalerte bilder slik at den naturlige bildestørrelsen og skjermstørrelsen blir så lik som mulig.

For å oppsummere det, er det både en vitenskap og en kunst til bildeoptimalisering. Algoritmene og teknikkene som er høyt utviklet fungerer som vitenskapen.

Mangelen på definitive svar angående individuell bildekompresjon er kunsten. Til syvende og sist skal du leke og eksperimentere. Dette lar deg gjøre det beste valget for bildefiler og hvordan de bidrar til nettsidens hastighet.

Med den økende populariteten og sofistikasjonen til tredjeparts nettstedbyggere som Wix, er det enkelt for designere å bli slurvete, men holde seg fokusert på å utvikle og opprettholde gode bildeoptimaliseringsprosesser enten de smeller ned en mal eller bygger et nettsted fra bunnen av.

Referanser og bildekreditt:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map