Stol på os, du vil ikke have, at Google hader dit websted. Heldigvis kan du reducere dit billedes filstørrelser for at forbedre dit websteds ydeevne. Et problem med formatering af dem er, at ændringer ofte reducerer deres kvalitet (hvilket igen kan få den besøgende til at hade dit websted). Det er ikke en dårlig ting, så længe du ikke gør dem grimme. Der er nogle tricks og teknikker, der giver dig mulighed for at reducere billedets filstørrelse og stadig holde dem smukke nok til stolt at kunne vise dem på dit websted. Så lad os se på, hvordan du formaterer dine billeder uden at gøre dem grimme, samt hvordan vi optimerer billeder til web og ydeevne.

Fordelene ved at formatere dine billeder

For det første, hvorfor har du brug for at formatere dine billeder? Hvad er fordelene? Der er mange fordele ved at optimere dine billeder til ydeevne. Ifølge HTTP Archive udgør billeder fra november 2018 i gennemsnit 21% af det samlede websites vægt. Så når det kommer til at optimere dit WordPress-websted, efter videoindhold, er billeder klart det første sted, du skal starte!

Det er vigtigere end scripts og skrifttyper. Og ironisk nok er en god billedoptimerings-workflow en af ​​de nemmeste ting at implementere, men alligevel overser mange webstedsejere dette.

Gennemsnitlige byte pr. side (KB)

Gennemsnitlige byte pr. side (KB)

Her er et kig på de største fordele.

Billeder udgør i gennemsnit 21% af en websides samlede vægt. 😮 Optimer dem!Click to Tweet

Sådan optimeres billeder til web og ydeevne

Det primære mål med formatering af dine billeder er at finde balancen mellem den laveste filstørrelse og en acceptabel kvalitet. Der er mere end en måde at udføre næsten alle disse optimeringer på. En af de mest populære måder er blot at komprimere dem, før de uploades til WordPress. Normalt kan dette gøres i et værktøj som Adobe Photoshop eller Affinity Photo. Nogle af disse opgaver kan også udføres ved hjælp af plugins, som vi vil gå nærmere ind på nedenfor.

De to primære ting, der skal overvejes, er filformatet og typen af ​​komprimering, du bruger. Ved at vælge den rigtige kombination af filformat og type af ​​komprimering kan du reducere din billedstørrelse med så meget som 5 gange. Du bliver nødt til at eksperimentere med hvert billede eller filformat for at se, hvad der fungerer bedst.

Skift din WordPress host for at optimere dine billeder og se over 45% hastighedsforøgelser i sidebelastning. Prøv Kinsta gratis.

Vælg det rigtige filformat

Før du begynder at ændre dine billeder, skal du sikre dig, at du har valgt den bedste filtype. Der er flere typer filer, du kan bruge:

Der er flere andre, såsom JPEG XR og WebP, men de understøttes ikke universelt af alle browsere. Ideelt set skal du bruge JPEG eller JPG til billeder med masser af farve og PNG til enkelte billeder.
(Foreslået læsning: JPG vs JPEG: Forståelse af det mest almindelige billedfilformat)

Kompressions-kvalitet vs størrelse

Her er et eksempel på, hvad der kan ske, når du komprimerer et billede for meget. Den første bruger en meget lav komprimeringshastighed, hvilket resulterer i den højeste kvalitet (men større filstørrelse). Den anden bruger en meget høj komprimeringshastighed, hvilket resulterer i et billede af meget lav kvalitet (men mindre filstørrelse). Bemærk: Det originale billede uberørt er 2,06 MB.

Lav kompression (høj kvalitet) JPG - 590 KB

Lav kompression (høj kvalitet) JPG – 590 KB

Høj kompression (lav kvalitet) JPG - 68 KB

Høj kompression (lav kvalitet) JPG – 68 KB

Som du kan se, er det første billede ovenfor 590 KB. Det er ret stort for et foto! Det er generelt bedst, hvis du kan holde en websides samlede vægt under 1 eller 2 MB i størrelse. 590 KB ville allerede være en fjerdedel af det. Det andet billede ser naturligvis forfærdeligt ud, men så er det kun 68 KB. Hvad du vil gøre er at finde et lykkeligt medium mellem din komprimeringshastighed (kvalitet) og filstørrelsen.

Så vi tog billedet igen med en medium komprimeringshastighed, og som du kan se nedenfor, ser kvaliteten godt ud nu, og filstørrelsen er 151 KB, hvilket er acceptabelt for et foto i høj opløsning. Dette er næsten 4 gange mindre end det originale foto med lav kompression. Typisk skal enklere billeder som PNG’er være under 100 KB eller mindre for at opnå den bedste ydeevne.

Medium komprimering (god kvalitet) JPG - 151 KB

Medium komprimering (god kvalitet) JPG – 151 KB

Lossy vs Lossless Optimization

Det er også vigtigt at forstå, at der er to typer kompression, du kan bruge, Lossy og Lossless.

Lossy – dette er et filter, der fjerner nogle af dataene. Dette forringer billedet, så du bliver nødt til at være forsigtig med, hvor meget billedet skal reduceres. Filstørrelsen kan reduceres med et stort beløb. Du kan bruge værktøjer som Adobe Photoshop, Affinity Photo eller andre billedredaktører til at justere kvalitetsindstillingerne for et billede. Eksemplet, vi brugte ovenfor, bruger komprimering med lossy.

Lossless – dette er et filter, der komprimerer dataene. Dette reducerer ikke kvaliteten, men det kræver, at billederne ukomprimeres, før de kan gengives. Du kan udføre en lossless komprimering på dit skrivebord ved hjælp af værktøjer som Photoshop, FileOptimizer eller ImageOptim.

Det er bedst at eksperimentere med dine kompressionsteknikker for at se, hvad der fungerer bedst for hvert billede eller format. Hvis dine værktøjer har muligheden, skal du sørge for at gemme billedet til internettet. Dette er en mulighed i mange billedredaktører og giver dig kvalitetsjusteringer, så du kan udføre optimal komprimering. Du mister noget af kvaliteten, så eksperimenter med at finde den bedste balance, du kan, uden at gøre billederne grimme.

Billede-optimeringsværktøjer- og programmer

Der er mange værktøjer og programmer derude, både premium og gratis, som du kan bruge til at optimere dine billeder. Nogle giver dig værktøjerne til at udføre dine egne optimeringer, og andre gør arbejdet for dig. Vi er personligt store fans af Affinity Photo, da det er billigt og giver dig næsten identiske funktioner som Adobe Photoshop.

Komprimering af foto i Affinity Photo

Komprimering af foto i Affinity Photo

Her er nogle ekstra værktøjer og programmer, du kan tjekke ud:

Ændring af størrelse på billeder til skalering

Tidligere var det meget vigtigt, at du uploader billeder til skalering og ikke lader CSS ændre størrelsen på dem. Dette er dog ikke længere så vigtigt, da WordPress 4.4 nu understøtter responsive billeder (ikke nedskaleret af CSS). Dybest set opretter WordPress automatisk flere størrelser af hvert billede, der uploades til mediebiblioteket. Ved at inkludere de tilgængelige størrelser på et billede i en srcset-attribut kan browsere nu vælge at downloade den mest passende størrelse og ignorere de andre. Se et eksempel på, hvordan din kode faktisk ser ud nedenfor.

Eksempel på srcset responsive billeder i kode

Eksempel på srcset responsive billeder i kode

Så med flere og flere HiDPI-skærme i dag kan det være godt at finde et lykkeligt medium. Sig 2x eller 3x dit websites kolonne- eller div-størrelse, men stadig mindre end den oprindelige størrelse. Browseren viser den korrekte baseret på enhedens opløsning.

WordPress-mediebiblioteket opretter thumbnails baseret på dine indstillinger. Imidlertid er originalen stadig bevaret og uberørt. Hvis du vil ændre størrelsen på dine billeder og spare diskplads ved ikke at gemme originalen, kan du bruge et gratis plugin som Imsanity.

WordPress medieindstillinger

WordPress medieindstillinger

Imsanity giver dig mulighed for at indstille en sanity limit, så alle uploadede billeder begrænses til en rimelig størrelse, der stadig er mere end stor nok til behovene på et typisk websted.

Imsanity tilslutter sig WordPress umiddelbart efter upload af billedet, men inden WordPress-behandling finder sted. Så WordPress opfører sig nøjagtigt det samme på alle måder, bortset fra at det vil være som om bidragyderen havde skaleret deres billede til en rimelig størrelse inden upload.

Rengør dit mediebibliotek

Hvis du leder efter et værktøj til at spare plads, mens du også renser dit mediebibliotek, kan du bruge Media Cleaner til at finde ubrugte mediefiler. Pluginet scanner alle dine mediefiler og viser ubrugte i Media Cleaner Dashboard, så du kan gennemse og slette dem.

Media Cleaner implementerer et smart affaldssystem: Når filer slettes, flyttes de til en papirkurv. På den måde er du i stand til at teste dit websted et stykke tid og sørge for, at alt er i orden. Hvis der mangler en fil eller en mediepost, kan du nemt gendanne den med et klik eller bare tømme papirkurven, hvis alt ser godt ud for dig.

Image Optimization Plugins, du kan bruge

Heldigvis med WordPress behøver du ikke udføre al formatering eller komprimering manuelt. Du kan bruge plugins til at udføre mindst noget af arbejdet automatisk for dig. Der er flere plugins, der automatisk optimerer dine billedfiler, når du uploader dem. De optimerer endda billeder, som du allerede har uploadet. Dette er en praktisk funktion – især hvis du allerede har et websted fyldt med billeder. Her er et kig på nogle af de bedste plugins til at formatere dine billeder for bedre ydelse.

Det er dog vigtigt, at du ikke kun stoler på selve plugins. For eksempel skal du ikke uploade 2 MB billeder til dit WordPress-mediebibliotek. Dette kan resultere i at opsluge dine web-hosts diskplads meget hurtigt. Den bedste metode er hurtigt at ændre størrelsen på billedet i et billedredigeringsværktøj og derefter uploade det og bruge et af følgende plugins til at reducere det yderligere.

Imagify Image Optimizer

Imagify Image Optimizer-plugin

Imagify Image Optimizer-plugin

Imagify er oprettet af det samme team, der udviklede WP Rocket, som de fleste af jer sandsynligvis er bekendt med. Det er WooCommerce, NextGen Gallery og WP Retina kompatibelt. Det har også en bulk-optimeringsfunktion, og du kan vælge mellem tre forskellige niveauer af kompression, normal, aggressiv og ultra. Det har også en gendannelsesfunktion, så hvis du er utilfreds med kvaliteten, kan du med et enkelt klik gendanne og komprimere igen på et niveau, der bedre passer til dine behov. Der er en gratis og en premium version. Du er begrænset til en kvote på 25 MB billeder pr. måned med en gratis konto.

At slippe af med det originale billede og ændre størrelsen på dine større billeder kan også gøres med dette plugin.

Ændr størrelsen på billeder i Imagify

Ændr størrelsen på billeder i Imagify

Imagify komprimerer også billeder på deres tredjeparts-servere, ikke din, hvilket er meget vigtigt, når det kommer til ydeevne. Imagify bør ikke bremse dit WordPress-websted.

ShortPixel Image Optimizer

ShortPixel-plugin

ShortPixel-plugin

ShortPixel Image Optimizer er et gratis plugin, der komprimerer 100 billeder om måneden og komprimerer flere typer filer, herunder PNG, JPG, GIF, WebP og endda PDF-filer. Det vil gøre både lossy og lossless billedkomprimering. Det konverterer CMYK til RGB. Det tager dine billeder og thumbnails ind i skyen til behandling og bringer dem derefter tilbage til dit websted for at erstatte originalerne. Det opretter en backup af de originale filer, så du manuelt kan gendanne dem, hvis du vil. Det konverterer gallerifiler i bulk. Der er ingen grænse for filstørrelsen.

Optimole

Optimole-plugin

Optimole-plugin

Optimole er et WordPress-plugin til billedoptimering, der automatisk reducerer dine billeders størrelse uden noget arbejde fra din ende. Det har en stor fordel, når det kommer til dit websteds indlæsningshastighed, da det er helt cloud-baseret og aldrig serverer billeder, der er større, end de burde, aka det viser den perfekte billedstørrelse til den besøgendes visning og browser.

Desuden giver pluginet lazy loading og effektiv udskiftning af billeder – det nedjusterer billedkvaliteten, hvis den besøgende har en langsommere internetforbindelse – hvilket får det til at skille sig ud fra mængden. Den registrerer også automatisk brugerens browser og serverer WebP, hvis den understøttes.

Alle de billeder, som Optimole komprimerer, serveres via en hurtig CDN. Du kan prøve Optimole gratis eller opgradere til premium-planen, hvis du har brug for ekstra båndbredde og behandlingsplads.

EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud-plugin

EWWW Image Optimizer Cloud-plugin

EWWW Image Optimizer Cloud hjælper dig med at gøre dine billeder mindre og dit websted hurtigere med mindre besværlig start. Uden størrelsesbegrænsninger og masser af fleksibilitet kan du bruge standardindstillingerne eller tilpasse pluginet helt efter eget valg. Alle EWWW IO-brugere kan bruge Bulk Optimizer til at komprimere deres eksisterende billeder eller bruge mediebiblioteket til at vælge og vælge bestemte billeder, der skal komprimeres.

Yderligere mapper kan scannes for at sikre, at hvert enkelt billede på dit websted er korrekt optimeret. EWWW IO giver dig endda mulighed for at konvertere dine billeder til næste generations formater som WebP eller finde det bedste billedformat til et billede med konverteringsmuligheder i flere format. Billedkomprimering starter kun med 0,003 USD pr. billede.

Skift din WordPress host for at optimere dine billeder og se over 45% hastighedsforøgelser i sidebelastning. Prøv Kinsta gratis.

Premium komprimerings-API giver dig mulighed for at tage komprimering til et helt nyt niveau uden at ofre kvaliteten, hvilket låser op for PDF-komprimering og inkluderer bekvem 30-dages backups af billeder. ExactDN-funktionen, der starter ved 9 USD. pr. måned, bringer automatisk komprimering (uden behov for komprimering på serversiden), automatisk ændring af størrelse og alle fordelene ved et CDN for hurtigere resultater og endnu mere ydeevne på tværs af enhver enhedsstørrelse.

Optimus Image Optimizer

Optimus Image Optimizer-plugin

Optimus Image Optimizer-plugin

Optimus WordPress Image Optimizer bruger lossless komprimering til at optimere dine billeder. Tabsløs betyder, at du ikke kan se noget tab af kvalitet. Det understøtter WooCoomerce og multi-site og har en god bulk-optimeringsfunktion til dem med allerede store eksisterende mediebiblioteker. Det er også kompatibelt med WP Retina WordPress-plugin. Der er en gratis og premium version. I premiumversionen betaler du en gang årligt, og du kan komprimere et ubegrænset antal billeder. Hvis du kombinerer det med deres Cache Enabler-plugin, kan du også dykke ned i WebP-billeder, som er et nyt letvægts billedeformat fra Google.

WP Smush

WP Smush-plugin

WP Smush-plugin

WP Smush har både en gratis og premium version. Det reducerer den skjulte information fra billederne for at reducere størrelsen uden at reducere kvaliteten. Det scanner billeder og reducerer dem, når du uploader dem til dit websted. Det scanner også billeder, som du allerede har uploadet, og reducerer dem også. Det smusher op til 50 filer på én gang i bulk. Du kan også smushe manuelt, hvis du vil. Det smusher JPEG-, GIF- og PNG-billedtyper. Filstørrelser er begrænset til 1 MB.

TinyPNG (also compressed JPGs)

TinyPNG-plugin

TinyPNG-plugin

TinyPNG bruger TinyJPG- og TinyPNG-tjenesterne (den gratis konto giver dig mulighed for at komprimere omkring 100 billeder om måneden) for at optimere dine JPG- og PNG-billeder. Det komprimerer automatisk nye billeder og bulk-komprimerer dine eksisterende billeder automatisk. Det konverterer CMYK til RBG for at spare plads. Det komprimerer JPEG-billeder op til 60% og PNG-billeder op til 80% uden et synligt tab i billedkvalitet. Det har ikke en grænse på filstørrelse.

ImageRecycle

ImageRecycle - Image & PDF optimizer plugin

ImageRecycle – Image & PDF optimizer plugin

ImageRecyle pluginet er et automatisk billede- og PDF-optimeringsprogram. Dette plugin fokuserer ikke kun på billedkomprimering, men også på PDF-filer. En virkelig praktisk funktion er muligheden for at indstille den mindste filstørrelse til komprimering. For eksempel, hvis du har billeder, der er 80 KB i størrelse, kan du få det til automatisk at udelukke dem fra komprimering. Dette sikrer, at billeder og filer aldrig komprimeres for meget. Det inkluderer også bulk-optimering og automatisk ændring af billede. Bemærk: De har en gratis 15-dages prøveperiode, men dette er en premium service, og billeder uploades og komprimeres ved hjælp af deres servere. De opkræver ikke pr. måned, men snarere det samlede antal komprimerede billeder, der starter ved 10 USD for 10.000.

Optimer billeder til web case study

Vi besluttede at lave vores egen lille casestudie og test for at vise dig, hvor meget optimering af dine billeder til internettet kan påvirke dit WordPress-websteds samlede hastighed.

Ukomprimerede JPG’er

Vi uploadede først 6 ukomprimerede JPG’er, som alle var over 1 MB i størrelse, til vores testsite. (Se de originale ukomprimerede JPG’er). Vi kørte derefter 5 tests gennem Pingdom og tog gennemsnittet. Som du kan se fra nedenstående hastighedstest var vores samlede indlæsningstid 1,55 sekunder, og den samlede sidestørrelse var 14,7 MB.

Hastighedstest med ukomprimerede JPG'er

Hastighedstest med ukomprimerede JPG’er

Komprimerede JPG’er

Vi komprimerede derefter JPG’erne ved hjælp af Imagify WordPress-pluginet ved hjælp af den “aggressive indstilling.” (Se de nye komprimerede JPG’er, som stadig ser lige så smukke ud). Vi kørte derefter 5 tests gennem Pingdom og tog gennemsnittet. Som du kan se fra hastighedstesten nedenfor, blev vores samlede indlæsningstid reduceret til 476 ms, og den samlede sidestørrelse blev reduceret til 2,9 MB. Vores samlede indlæsningstider blev reduceret med 54,88%, og sidestørrelsen blev reduceret med 80,27%.

Hastighedstest med komprimerede JPG'er

Hastighedstest med komprimerede JPG’er

Der er næsten ingen anden optimering, du kan foretage på dit websted, der får dig over 50% nedgang i belastningstider. Derfor er billedoptimering så vigtig, at ovenstående proces alt blev automatiseret af pluginet. Det er en praktisk tilgang til et hurtigere WordPress-websted. Den eneste anden dramatiske optimering, du kunne foretage, ville være at ændre dine WordPress-hosts. Mange kunder, der flytter til Kinsta, ser hastighedsstigninger på over 45%. Forestil dig at flytte til Kinsta og optimere dine billeder!

Ved at optimere dine billeder, uanset om det bruger et fotoredigeringsværktøj eller et WordPress-plugin, kan du også rette advarslen “Optimer billeder”, du får i Google PageSpeed Insights (som vist nedenfor.)

PageSpeed Insights optimerer advarsel om billeder

PageSpeed Insights optimerer advarsel om billeder

Hvis du har andre advarsler om optimering fra hastighedstest værktøjer, skal du sørge for at tjekke vores indlæg på Google PageSpeed Insights og vores dybtgående Pingdom-gennemgang.

Vi har taget vores viden om effektiv webstedsadministration i stor skala og gjort det til et e-bog- og videokursus. Klik her for at downloade 2020-guiden til styring af 40+ WordPress-websteder!

Brug af SVG’er

En anden anbefaling er at bruge SVG’er sammen med dine andre billeder. SVG er et skalerbart vektorformat, der fungerer godt til logoer, ikoner, tekst og enkle billeder. Her er et par grunde til, at:

Genki skrev en god artikel, hvor han sammenligner størrelsen på SVG vs PNG vs JPEG. Nedenfor er et par takeaways fra hans test, hvor han sammenlignede de tre forskellige billedtyper.

JPG (optimized size: 81.4 KB)

JPG size
JPG-billede

PNG (optimized size: 85.1 KB)

PNG size
PNG-billede

SVG (optimized size: 6.1 KB)

SVG size
SVG-billede

Som du kan se ovenfor, er SVG et fald i filstørrelsen på 92,51% sammenlignet med JPG. Og sammenlignet med PNG, 92,83%. Se vores vejledning om, hvordan du bruger SVG’er på dit WordPress-websted.

Bedste praksis

Her er nogle generelle bedste fremgangsmåder, når det kommer til, hvordan du optimerer billeder til internettet:

Glem ikke at optimere dine billeder, ellers kan dit WordPress-sted føles som om det er langsomt. Og du ved, hvor frustrerende 'langsom' er! 🐌Click to Tweet

Når du har formateret dine billeder til bedre ydeevne og fulgt de bedste fremgangsmåder, vil dit websted blive bedre værdsat af søgemaskiner, browsere og netværk og indlæses hurtigere for dine læsere. Åh, og sørg for at tjekke vores tutorial om hotlinking for at forhindre folk i at stjæle dine billeder og båndbredde.

Har du formateret dine billeder for bedre ydeevne? Formaterer du dem manuelt, bruger du et plugin eller begge dele? Er der et andet værktøj eller plugin, du vil anbefale? Har du noget at tilføje? Fortæl os om dine teknikker og bedste praksis i kommentarerne nedenfor!


Spar tid, omkostninger og maksimer webstedets ydeevne med:

  • Øjeblikkelig hjælp fra WordPress-hostingeksperter, 24/7.
  • Cloudflare Enterprise integration.
  • Globalt publikum når med 28 datacentre verden over.
  • Optimering med vores indbyggede Application Performance Monitoring.

Alt dette og meget mere, i en plan uden langsigtede kontrakter, assisteret migration og en 30-dages pengene-tilbage-garanti. Tjek vores planer, eller tal med salgsteamet for at finde den plan, der passer til dig.