TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

4

Google er den dominerende søkemotoren blant engelsktalende brukere. På grunn av dette faktum følger WordPress -nettstedseiere seriøst retningslinjene og mulighetene som vises i Google PageSpeed ​​Insights -verktøyet. En av de populære advarslene i PageSpeed-verktøyet er å fikse bilder som serveres i tradisjonelt format til serverbilder i neste generasjons formater. I denne artikkelen vil vi forklare hvordan du kan fikse denne advarselen på WordPress -nettsteder for å optimalisere bildene dine.

Relatert: Hvordan fikse kumulativt layoutskifte i WordPress?

Advarsel i Google PageSpeed ​​Insights

Gå til verktøysiden for Google PageSpeed ​​Insights og test nettadressen til nettstedet ditt. Du bør se en mulighet som viser "Serverbilder i neste generasjons formater" som nedenfor. Du kan se den potensielle størrelsesbesparelsen for hvert bilde og den estimerte besparelsen i sidelastetid.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

Advarsel om sidehastighet Vis bilder i neste generasjons formater

Merk: Google sier at dette er en mulighet, og vil ikke påvirke resultatene for PageSpeed. Å fjerne denne advarselen øker imidlertid poenget i virkeligheten betraktelig.

Bildeformater fra Next-Gent

Før vi går videre, må du forstå bildeformatene. Det er tre tradisjonelle og populære bildeformater:

  • Joint Photography Experts Group (JPEG eller JPG) – støtter komprimering uten tap
  • Portable Network Graphics (PNG) – støtter gjennomsiktig og tapsfri komprimering og utskifting av GIF
  • Graphics Interchange Format (GIF) – et bitmap -format støtter looping av flere rammer.

Nå er det nye neste generasjons formater anbefalt for nettsteder:

  • WebP – utviklet av Google for bedre komprimering
  • JPEG 2000 – forbedring fra JPEG -standarder for bildekomprimering
  • JPEG XR – JPEG format for utvidet rekkevidde utviklet av Microsoft

Du kan sjekke Googles galleri for å sammenligne forskjellige bilder visuelt. Neste generasjons formater bidrar til å redusere bildestørrelsen betraktelig og øker dermed sidehastigheten. I henhold til Wikipedia støtter 92% av nettleserne WebP -format, noe som gjør det til en lovende erstatning for det tradisjonelle formatet. Derfor må du begynne å bruke WebP-format for å bli kvitt visningsbilder i neste generasjons formater, advarsel i PageSpeed ​​Insights-verktøyet.

Konvertering av bildeformater

Selv om Google skyver det lette bildeformatet, er de ikke veldig populære blant programutviklere. Mange applikasjoner støtter ikke å lage bilder i disse formatene. For eksempel tilbyr SnagIt -det populære skjermfangingsverktøyet for bloggere-ikke noe alternativ for å lage bilder i neste generasjons format. Du kan lage i tradisjonelt format som PNG eller JPEG.

Nå som det er vanskelig å finne et program for å lage neste generasjons bildeformater. I stedet kan du laste opp PNG- eller JPEG-bilder på WordPress-nettstedet ditt og bruke en plugin for å konvertere dem til et av de neste generasjons bildeformatene. Dette er en effektiv og enkel måte, ettersom du ikke trenger å endre arbeidsmodellen din.

Siden Google er den eieren av WebP -format, støtter mange plugins å konvertere tradisjonelle bilder til WebP -format. Her vil vi forklare hvordan du konverterer bildene dine til WebP og fikser "vis bilder i neste generasjons format" i PageSpeed ​​Insights-verktøyet.

WebP -plugins for WordPress

Det er ganske mange populære plugins tilgjengelig for WebP -konvertering.

SG Optimizer for SiteGround

Hvis du er vert på SiteGround, er det beste alternativet å bruke SG Optimizer -plugin. Dette vil gå ut av boksen for å konvertere og servere WebP -bilder fra serveren din. Du kan velge komprimeringsnivå for å kontrollere kvaliteten på de konverterte bildene mens du beholder alle originale bilder. Se vår tidligere artikkel om hvordan du viser WebP -bilder i SiteGround.

  • Du kan ganske enkelt aktivere alternativet "Generer WebP -kopier av nye bilder" under "SG Optimizer> Bildeoptimalisering".
  • Klikk på "Generer massevis av WebP-filer" -knappen for å generere WebP-bilder for alle dine eksisterende bilder med tapsfrie eller forhåndsdefinerte tapsfulle komprimeringsnivåer.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

WebP -alternativ i SG Optimizer -plugin

SEO -tilbud: Optimaliser nettstedet ditt med Semrush Pro 14 dagers gratis prøveperiode.

Smush Pro

Smush er en annen populær plugin for bildekomprimering med mer enn 1 million aktive installasjoner. WebP er imidlertid et premiumalternativ i denne pluginen, og du må betale et abonnement på $ 5 per måned (årsplan) for å bruke denne funksjonen.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

Smush Pro WebP -alternativ

Autoptimaliser

Denne pluginen tilbyr optimalisering av bilder med WebP -konvertering ved hjelp av ShortPixel CDN -tjeneste. Selv om dette er et godt alternativ for å kombinere CDN og WebP, er det en fangst. Du har en grense for å vise opptil 100 bilder per måned gratis. Hvis du trenger mer, må du betale $ 3,99 per måned for å starte premiumplanen for opptil 5000 bilder. Dette vil være et kostbart alternativ når du vil komprimere og vise et stort antall bilder. Hvis du vil teste Autoptimize, går du til delen "Innstillinger> Autoptimering> Bilder" etter at du har installert og aktivert programtillegget.

  • Aktiver avmerkingsboksen "Optimaliser bilder".
  • Velg bildeoptimaliseringsnivået som glanset, tapt eller tapt.
  • Merk av i boksen som sier "Last WebP eller AVIF i nettlesere som støttes?"
  • Vil du aktivere "Lazy-load images?" avmerkingsboks.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

WebP -innstillinger i Autoptimize Plugin

Klikk på "Lagre endringer" -knappen og test siden PageSpeed ​​Insights -verktøyet på nettstedet ditt. Du bør se advarselen "Vis bilder i neste generasjons formater" er forsvunnet nå. Du vil imidlertid begynne å se en advarsel i WordPress -adminpanelet om at ShortPixel -kvoten din brukes, og du må oppgradere planen.

Gratis WebP -plugins

Heldigvis er det få gratis plugins som WebP Express og WebP Converter for Media. I denne artikkelen vil vi forklare prosessen med WebP Converter for Media plugin.

Installer WebP Converter for Media Plugin

Logg deg på WordPress -administrasjonspanelet ditt og naviger til delen "Plugins> Add New". Skriv "webp" i søkeboksen for å filtrere resultatene og finne ut WebP Converter for Media -plugin. Klikk på "Installer" -knappen og aktiver deretter programtillegget på nettstedet ditt.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

Installer WebP Converter for Media Plugin

Aktiver WebP -bildekonvertering

Etter at du har aktivert programtillegget, vil du se en melding som nedenfor og klikke på knappen "Fremskynd nettstedet mitt". Alternativt kan du gå til "Innstillinger> WebP -omformer" -menyen for å nå pluginens innstillingsside.

  • Velg bildelastemodus som "via .htaccess (anbefalt)".
  • Velg JPEG, JPG og PNG for filutvidelser som støttes.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

Bildelastemodus og filutvidelser

  • For en liste over støttede kataloger, velg alternativet "/opplastinger". Sørg for at du viser bildene fra standard WordPress -opplastingsmappe. Hvis du har flyttet bildene dine til underdomenet, velger du den katalogen slik at programtillegget fungerer som det skal.
  • For konverteringsmetoden, velg alternativet "GD (anbefalt)".
  • Velg til slutt bildekvaliteten i henhold til ditt behov. Programtillegget bruker 85% som standardkvalitetsverdi for WebP -konvertering.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

Katalogkonvertering og kvalitet

Programtillegget bruker også noen ekstra funksjoner for ytterligere bildeoptimalisering. Du kan la standardverdiene være som de er eller sjekke og aktivere/deaktivere de nødvendige verdiene for ditt behov. Du kan for eksempel velge hurtigbufring for WebP -filer som vi anbefaler, og velge fjerning av større WebP -filer. Klikk på "Lagre endringer" -knappen etter at du har valgt alle alternativene.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

Ekstra funksjoner

Regenerere bilder

WebP Converter for Media plugin tilbyr også et alternativ for å regenerere alle bildene dine for å konvertere dem til WebP -format. Dette er nyttig hvis du har lastet opp bilder på nettstedet før du installerer programtillegget.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

Regenerer WebP -bilder

Sjekk i Google Chrome

Etter å ha regenerert alle eksisterende bilder, kan du åpne nettstedet i Google Chrome og sjekke. Du bør se at WebP -bildene blir vist fra delen for utviklerverktøy. Du kan lese denne artikkelen om hvordan du kontrollerer at WebP -bilder vises i Chrome -nettleseren. Hvis du har aktivert hurtigbufring av nettleseren, kan du bare kopiere bildens URL og se filnavnet inneholder .webp.

Serverstøtteproblem

Dessverre støtter ikke alle webservere WebP -konvertering. Du kan finne dette hvis delen "Konverteringsmetode" er deaktivert under plugininnstillingene. Serveren din burde ha støttet GD- eller Imagick -biblioteket for å kunne støtte WebP -format. Ellers vil programtillegget vise feil, og du bør ikke kunne bruke WebP -konvertering. Så langt vi har testet, støtter Bluehost delte hosting -servere ikke WebP -konvertering, og du vil se en feilmelding som nedenfor.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

Serverkonfigurasjonsfeil for WebP

I dette tilfellet må du diskutere med verten for å aktivere nødvendig støtte for WebP -bilder.

Aktiver hurtigbufring for WebP -bilder ved hjelp av WP Rocket

Som nevnt tilbyr WebP Converter for Media plugin et alternativ for å aktivere hurtigbufring av nettlesere for WebP -bilder. Dette vil hjelpe deg med å øke hastigheten på sidelastingen ved å instruere nettleserne til å lagre bildene i bufferen når brukeren åpner de samme bildene igjen. Dette alternativet er imidlertid ikke tilgjengelig med mange andre plugins, og du bør kombinere dette med innstillingene for hurtigbufring. For eksempel, hvis du bruker WP Rocket, må du aktivere avmerkingsboksen for hurtigbufring av nettlesere under "Bilder" -delen. Dette gjør pluginet i stand til å lagre WebP -bilder og lagre dem i nettleserne som støttes.

Hvordan fikse Serve Images i neste generasjons formater i WordPress?

Aktiver WebP -støtte i WP Rocket

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon