Sådan optimeres dine billeder til at være SEO venlige (Komplet guide)

Dit websteds ydelse er afhængig af flere faktorer, der spænder fra den specifikke webhost, du vælger, over at følge retningslinjer for tilgængelighed på webstedet, til de billedfilstørrelser, du bruger.


Formatering af dem til den rette størrelse kan imidlertid reducere kvaliteten på grund af de ændringer, du foretager. Den gode nyhed er, at du kan opretholde optimal billedkvalitet og få den rigtige størrelse med et par teknikker og tricks.

Hvad er billedoptimering?

dimensioner af billedoptimeringWebsider kan opleve en betydelig afmatning, når der er store billeder. Dette kan reducere indlæsningstider og gøre den samlede oplevelse delvis for dine besøgende.

At reducere filstørrelsen er billedoptimering. Du kan bruge et script eller et plugin til dette.

Dette resulterer i hurtigere indlæsningstid for dine sider. Tabsløs og tabt komprimering er de to mest almindelige optimeringsmetoder.

Fordelene ved billedformatering

gennemsnitlige billedstørrelser på nettetDet anslås, at cirka 54 procent af den samlede vægt af en webside skyldes billeder.

Når du arbejder med webstedsoptimering, skal dine billeder være din første opgave på grund af dette. Fordelene ved billedformatering inkluderer:

  • Forbedret sideindlæsningshastighed
  • Det er hurtigere at oprette sikkerhedskopier
  • Mindre serverlagringsplads kræves
  • Forbedret SEO med det rigtige SEO-plugin
  • Mindre båndbredde bruges

Sådan forbedres ydeevnen med billedoptimering

Målet er at jævne balance mellem acceptabel kvalitet og den lavest mulige filstørrelse. Der er mere end en måde for dig at gøre dette på. Inden upload, komprimering af dine billeder er en almindelig mulighed. Du kan bruge et værktøj eller et plugin til dette formål (her er et par).

Det er vigtigt at overveje den type komprimering og filformat, du bruger. Den rigtige kombination gør det muligt at reducere størrelsen på dit billede med op til fem gange.

Eksperimenter med forskellige filformater og komprimeringstyper for at bestemme den bedste kombination til dine behov.

Vælg det bedste filformat

For at vælge den bedste filtype er det vigtigt at vide, hvilke der er tilgængelige. Disse er de mest almindelige:

  • JPEG: Denne type anvender tabsfri og tabt optimering. Du kan finde en solid balance mellem filstørrelse og kvalitet ved at justere kvalitetsniveauet.
  • PNG: Denne type har en tendens til at have en større filstørrelse, men billederne har højere kvalitet. Du kan bruge tabsfri eller tabsfri komprimering.
  • GIF: Dette er ideelt til animerede billeder. Du kan kun bruge tabsfri komprimering. Den bruger kun 256 farver.

billedfilformater

Der er andre muligheder, men disse er blandt de mest almindelige og lette at arbejde med. Andre muligheder inkluderer JPEG XR og WebP. Ikke alle browsere understøtter disse to, så vær opmærksom på dette.

De kan imidlertid være et levedygtigt valg. For eksempel sammenlignet med et sammenligneligt JPEG-billede er der i gennemsnit en reduktion på 30 procent filstørrelse med WebP.

På grund af manglen på universal support til disse to muligheder, skal din applikation have yderligere logik på dine servere eller applikation for at give den relevante ressource:

  • Billedoptimering er en service, der leveres af nogle CDN’er, herunder levering af WebP og JPEG XR.
  • For at opdage klienten skal du give det bedste tilgængelige billedformat og kontrollere de understøttede formater, det er muligt at tilføje yderligere applikationslogik.
  • Visse open source-værktøjer automatiserer samtale, optimering og visning af passende aktiver.

Størrelse vs. komprimeringskvalitet

Lav komprimering har en tendens til at give en højere kvalitet, men filstørrelserne er typisk større. Det modsatte er sandt med høj komprimering. Filerne er mindre, men kvaliteten er tilbøjelig til at falde.

billedkvalitet vs komprimering

Ideelt set ønsker du i alt en til to MB til din webside’s samlede vægt. Så overvej hvor mange billeder du skal bruge og divider dette tal med ca. 1,5. Dette giver dig størrelsen pr. Billede, der giver mulighed for den bedste ilastningshastighed.

Lossless vs. Lossy Optimization

Dette er de to typer komprimering, du vil bruge. Det er vigtigt at forstå, hvad de gør:

  • tabsløs vs tabskompressionLossless: Dette komprimerer data, og det er et filter. Før gengivelse af billedet, skal det være ukomprimeret. Kvaliteten reduceres dog ikke. Der er flere værktøjer, der udfører tabsfri komprimering.
  • lossy: Dette eliminerer nogle data, og det er et filter. Vær opmærksom på, hvor meget reduktion du gør, fordi det ødelægger billedet. Du kan bruge forskellige billedredigerere og værktøjer til at justere billedets kvalitetsindstillinger.

Den optimale konfiguration af enten tabsfri eller tabskonfiguration afhænger af dine egne kriterier, såsom forvekslingen mellem indførte artefakter og filstørrelse, og billedindholdet.

Der er ikke en enkelt universel indstilling, der gælder for alle billeder. I sidste ende vil du lege med forskellige billeder for at se, hvilke der fungerer bedst.

Ændre størrelse på billeder til skalering

Takket være lydhøre sider på websteder, f.eks. WordPress, får du flere filstørrelser i dit mediebibliotek. Din browser kan vælge den størrelse, der er bedst, og downloade den. Størrelsen, som browseren vælger, er baseret på enhedens opløsning.

ændre størrelse på billede i wordpress

Den originale fil forbliver uberørt og bevaret. Du kan bruge plugins for at undgå at gemme originalen for at spare diskplads, hvis du foretrækker det.

Udskiftning og eliminering af billeder

Har du brug for alle billederne på en webside? Hvis ikke, fjern dem, der er unødvendige. Men hvis alle er relevante for indholdet, kan du overveje at udskifte billeder af større eller lavere kvalitet med bedre muligheder.

I nogle tilfælde kan webfonte og CSS-effekter komme i stedet for billeder, mens de stadig giver en dejlig visuel æstetik på siden. Med web-skrifttyper kan pæne skrifttyper hjælpe dig med at forbedre anvendeligheden og give et mere skræddersyet look til dine sider.

Det kan også forbedre din læsbarhed og branding. Bare sørg for, at du stadig let kan søge, vælge og ændre størrelsen på teksten, uden at den har problemer med læsbarheden.

CSS-effekter inkluderer elementer, såsom skygger og gradueringer. Disse kan også yderligere branding. Animationer kan give visuel appel på din webside på hvert zoomniveau og opløsning. Sammenlignet med billedfiler er disse en brøkdel af bytes.

Raster vs. vektorbilleder

rastor vs vektor

Raster og vektor er to af de primære billedfiltyper. Pixel-baserede programmer, en scanner eller et kamera bruges til at oprette rasterbilleder.

Disse er vidt brugt på internettet og mere almindeligt anvendte. Vektorsoftware bruges til at oprette vektorbilleder. Disse er almindelige for billeder, der går til fysiske produkter, og inden for engineering, CAD og 3D-grafik.

Vectorbilleder er uafhængige af opløsning og zoom. Når geometriske former er involveret, er vektor ideel. Når billeder er komplekse og har et væld af detaljer og uregelmæssige former, foretrækkes rasterbilleder.

Rastergrafik koder for hver pixels individuelle værdier i et rektangulært gitter for at repræsentere et billede. Vektorgrafik repræsenterer et billede ved hjælp af punkter, linjer og polygoner.

Implikationer af skærmbilledet med høj opløsning

Det er vigtigt at skelne mellem de to forskellige pixeltyper, der inkluderer enhedspixel og CSS-pixels. Flere enhedspixels kan være til stede i en enkelt CSS-pixel. Detaljen på skærmen bliver finere med flere enhedspixels.

css-pixel vs enhedspixelFor at drage fuld fordel af de højere enhedspikseltællinger skal billedaktiverne have flere detaljer.

Denne opgave er ideel til vektorbilleder, da de kan give skarpe resultater når gengivet i enhver opløsning.

Da rasterbilleder bruger et pr-pixel-grundlag for at kode billeddata, er de mere udfordrende. Dette er, mens rasterfilstørrelser øges, når pixels øges.

Så skærme i høj opløsning har brug for billeder i høj opløsning for at høste fordelene. Vectorbilleder er bedst til højopløsningsskærme da de altid giver skarpe resultater på grund af at være uafhængige af opløsningen.

Husk bare, at uanset opløsningen er billedoptimeringsteknikkerne de samme.

Optimering af vektorbilleder

Skalerbar vektorgrafik (SVG) understøttes af alle moderne browsere.

Dette er ideelt til todimensionel grafik, og formatet er XML-billedbaseret. SVG-filer kan oprettes manuelt ved hjælp af den teksteditor, du foretrækker, eller med de fleste vektorbaserede softwaretyper.

For at reducere størrelsen på SVG-filer skal de minimeres. GZIP skal bruges, når SVG-filer komprimeres.

Optimering af rasterbilleder

Et gitter med pixels udgør et rasterbillede. De individuelle pixels er på et todimensionalt gitter. For eksempel udgør en sekvens på 10.000 pixels et billede på 100 x 100 pixels. Hver pixel koder for gennemsigtighed og farveinformation.

raster tungRGBA-værdier gemmes af hver pixel. Disse inkluderer:

  • Rød kanal
  • Blå kanal
  • Grøn kanal
  • Alfakanal (gennemsigtighed)

256 nuancer (værdier) tildeles internt af browseren. Pr. Kanal oversættes dette til otte bit. Pr. Pixel er dette fire byte. Dette gør det muligt at beregne filstørrelsen ved hjælp af gitterdimensioner. Det kræver ikke meget for filstørrelsen at blive meget stor.

Så for at reducere størrelsen på billedfilen er der et par strategier:

  • Reducer billedets bit-dybde. Du kan gøre dette ved at bruge en mindre farvepallet.
  • Optimer de data, som de enkelte pixels lagrer.

Værktøjer og parameterindstilling

Der er ikke noget perfekt billedværktøj, et sæt optimeringsparametre eller format, der fungerer til ethvert billede. Billedindholdet og dets tekniske og visuelle krav afgør, hvilket du skal bruge.

Når du først har fundet et godt indstillingssæt, kan du bruge det til lignende billeder i fremtiden for at spare tid. Sørg dog for, at du aldrig antager, at de samme indstillinger skal bruges til at komprimere alle billeder.

At lære om et par almindelige værktøjer kan hjælpe dig med at træffe det rigtige valg. Disse fire er blandt de mest anvendte:

  • Gifsicle: Dette giver dig mulighed for at optimere og oprette forskellige GIF-billeder.
  • Optipng: Dette bruges til at give mulighed for tabfri PNG-optimering.
  • jpegtran: Denne giver dig mulighed for at optimere JPEG-billeder.
  • Pngquant: Dette bruges til at give mulighed for tabt PNG-optimering.

Leverer skalerede billedaktiver

Der er to primære kriterier, du skal overveje, når du udfører billedoptimering:

  • Optimering af billedets samlede antal pixels.
  • Optimering af hvor mange byte der er nødvendigt for at kode hver pixel i et billede.

billedformat træStørrelsen på din billedfil nedbrydes til samlede pixels multipliceret med det samlede antal byte, der er nødvendigt for individuel pixelkodning. Dette er det. Husk dette, når du arbejder på at bestemme den optimale størrelse for billedfilerne på dit websted.

På grund af dette er den mest effektive og lette måde at optimere billeder på at sikre dig, at du ikke sender flere pixels, som du absolut har brug for for at vise aktivet i browseren til dets tilsigtede størrelse.

Så, ikke bare stole på din browser til at omskalere billeder. Dette kan få dem til at blive vist i en lavere opløsning. Det bruger også en masse ekstra CPU-ressourcer.

Det er generelt ikke muligt at garantere den nøjagtige skærmstørrelse for hvert enkelt leveret aktiv. Det er dog vigtigt at sikre, at du holder alle unødvendige pixels til et minimum.

Det er også vigtigt, at du leverer dine store aktiver så tæt som muligt på deres visningsstørrelse.

Tjekliste til billedoptimering

Alle oplysningerne her giver dig mulighed for at optimere dine billeder, så dine websider er hurtigere. Du vil stadig være i stand til at bruge smukke billeder, men de vil ikke medføre en betydelig afmatning med din sides indlæsningstid.

Dette vil gøre dine besøgende glade og forbedre den samlede funktion af dit websted. Overvej følgende checklistepunkter, når du optimerer dine billeder:

  • Overvej vektorformater, da de fungerer til høj opløsning og flere enheder, fordi de er uafhængige af skala og opløsning.
  • Alle SVG-aktiver skal komprimeres og minimeres. Dette fjerner de unødvendige metadata.
  • For rasterformater, leg dig rundt med de optimale kvalitetsindstillinger. Dette kan spare dig for et betydeligt antal bytes.
  • For hvert aktiv skal du regne ud dine funktionelle krav og vælge det bedste format til rasterbilleder.
  • Automatiser hver gang du kan for at sikre ensartet billedoptimering.
  • Server skalerede billeder, så den naturlige billedstørrelse og skærmstørrelsen er så længe som muligt.

For at opsummere det, er der både en videnskab og en kunst til billedoptimering. De videnskabelige algoritmer og teknikker, der er meget udviklet.

Manglen på endelige svar vedrørende individuel billedkomprimering er kunsten. I sidste ende skal du lege rundt og eksperimentere. Dette giver dig mulighed for at tage det bedste valg til dine billedfiler, og hvordan de bidrager til din websidehastighed.

Med den stigende popularitet og sofistikering af tredjeparts webstedsbyggere som Wix er det let for designere at blive slurvede, men forblive fokuseret på at udvikle og vedligeholde gode billedoptimeringsprocesser, uanset om man slapper af en skabelon eller bygger en side fra bunden.

Referencer og billedkreditter:

  • 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