Hvordan servere skalerte bilder i WordPress (element i GTmetrix)

Trenger å tjene skalerte bilder i WordPress?


Dette betyr bare at du må endre størrelse på store bilder for å bli mindre.

GTmetrix forteller deg hvilke bilder som må skaleres og de riktige dimensjonene de skal beskjæres eller endres til. Deretter endrer du størrelse på (skalerer) bildet og erstatter gamle bilder med de nye.

Server skalerte bilder

Siden GTmetrix bare viser uoptimerte bilder for den ene siden du tester, kan du starte med å skalere hele området bilder bilder som vises på flere sider (din logo, sidefelt og bunntekst bilder). Deretter kjører du de andre sidene dine gjennom GTmetrix og skalerer individuelle bilder på disse.

Kan jeg bruke en plugin for automatisk skalering av bilder?
Ikke sannsynlig. Du kan angi en maksimal bredde + høyde i de fleste bildeoptimaliseringsprogramtillegg. Men forskjellige områder på nettstedet ditt krever spesifikke dimensjoner (bilder må skaleres tilsvarende).

Lag et jukseark for en bildedimensjon.
Den beste måten å unngå å servere skalerte bildefeil er å lære dimensjonene til hvert område på nettstedet ditt (glidebrytere, widgeter, logo, bloggbilder med full bredde osv.). Deretter oppretter du et jukseark for bildedimensjoner som viser dimensjonene til hvert område. Hvis du følger bildedimensjonene dine for jukseark og endrer størrelse på bilder før du laster opp, skal du aldri ha vist skalerte bildefeil igjen.

1. Finn store bilder i GTmetrix

Kjør en side gjennom GTmetrix og se på servere skalerte bildefeil i kategorien PageSpeed. Utvid anbefalingene deres, så ser du de riktige dimensjonene hvert bilde skal endres til. Husk at GTmetrix bare viser feil for den ene siden du tester.

Server skalerte bilder GTmetrix

Du kan også sjekk manuelt om bilder skaleres. Først høyreklikk og kopier bildeadresse.

Kopier bildeadresse

Deretter limer du inn URL-adressen til bildet i en ny nettleserfane. Hvis du sammenligner bildet som vises på nettstedet ditt med nettadressen til bildet, vil du se at det er en annen forskjellig størrelse. Det betyr at bildet må skaleres. Ved å sammenligne de to variantene av bildet ditt side om side, kan du se hvor stort bildet faktisk er (og hvorfor siden det ligger på kan lastes veldig tregt).

Skalert vs uskalert bilde

2. Endre størrelse på bilder for å korrigere dimensjoner

Last ned det gamle bildet og åpne det i det valgte redigeringsverktøyet ditt (jeg bruker GIMP). Endre størrelse på og / eller beskjær bildet til dimensjonene som er anbefalt av GTmetrix. Mange bilderedigeringsverktøy lar deg komprimere bilder og fjerne EXIF-data noe som gjør at bildet lastes enda raskere.

Skalering av bilde GIMP

Du kan også beskjære og endre størrelse på bilder direkte i WordPress:

Skalering av bilde i WordPress Media Editor

3. Bytt ut det gamle bildet med det nye

Last opp det nye bildet til WordPress, og erstatt deretter det gamle bildet med det nye.

Uskalert widgetbilde

Skaleret widgetbilde

4. Test siden på nytt i GTmetrix

Prøv siden på nytt i GTmetrix, og du skulle ikke ha tjent skalerte bildefeil lenger.

100% tjene skalerte bilder

5. Server skalerte bilder på mobil

Servering av skalerte bilder er annerledes på mobilen.

Hvis du registrerer deg for en gratis GTmetrix-konto, kan du teste din mobil nettsted hastighet på Android. Sjansen er stor for at du ser flere servere skalerte bildefeil hvis nettstedet ditt ikke bruker tilpasningsdyktige bilder, som betyr automatisk endre størrelse på bilder for mobile enheter (dette gjøres vanligvis av en plugin).

Trinn 1: Kjør nettstedet ditt gjennom GTmetrixs Android-test:

GTmetrix mobil test

Server skalerte bilder på mobil

Steg 2: Finn dine mobile bakgrunnsdimensjoner levert av GTmetrix:

Maksimal bakgrunnsbredde

Trinn 3: Installer en Adaptive Images-plugin fra ShortPixel eller Adaptive bilder.

ShortPixel adaptive bilder

Trinn 4: Angi dimensjonene gitt av GTmetrix som maksimal bredde i bakgrunnen.

Maksimal bredde i bakgrunnen

Trinn 5: Kjør nettstedet ditt gjennom GTmetrix sin mobile test for å sikre at det ikke er noen feil.

GTmetrix mobil test

Trinn 5: Konfigurer andre innstillinger i din adaptive bilder-plugin (ShortPixel inkluderer WebP-støtte, lat lasting av bilder, smart beskjæring og fjerning av EXIF-data). Disse kan hjelpe også.

6. Endre størrelse på bilder på flere sider

Hvis du bruker det samme bildet på flere sider og det må skaleres, kan du endre størrelse på bildet, kopiere det HTML og deretter bruke plugin Better Search Replace for å fikse det på flere sider.

Trinn 1: Installer Bedre søk Erstatt plugin.

Steg 2: Kopier HTML-koden til det gamle bildet og lim det inn i “Søk etter” -feltet i plugin Better Search Replace. Du kan bruke WordPress Text Editor for å se HTML-koden til bildet. Merk: Bedre søk erstatt erstatter bare et bilde hvis det inneholder den nøyaktige HTML-koden du oppgir i plugin-modulen.

Trinn 3: Kopier HTML-koden til det nye bildet og lim det inn i feltet “Erstatt med”.

Server skalert bilde HTML

Trinn 4: Velg tabellene (f.eks. Innleggene) du vil skanne, og fjern merket for tørrskanning.

Trinn 5: Klikk på “Søk / erstatt”, og pluginen erstatter det gamle bildet med det nye.

7. Lag et bilde Dimensions Cheat Sheet

Som jeg nevnte tidligere, bør du måle dimensjonene til alle områdene på nettstedet ditt, slik at du kan endre størrelse på bilder før du laster dem opp. Du kan finne disse dimensjonene i GTmetrix (bare hvis du har vist skalerte bildefeil), eller du kan også finne dem i temaets CSS-stilark.

Eksempel:

  • Skyvebilder: 1900 (w) x 400 (h)
  • Karusellbilder: 115 (w)
  • Widget-bilder: 414 (w)
  • Fullbredd blogginnlegg: 680 (w)
  • Utvalgte bilder: 250 (w) x 250 (h)
  • Yoast Facebook OG-bilde: 1200 (w) x 628 (h) – trinn 11
  • Yoast Twitter OG image 1024 (w) x 512 (h) – trinn 11

680 piksler bredde rektangel

Bloggens bredde er 680px, så hvert eneste bilde i dette innlegget har blitt endret størrelse til 680px.

8. WordPress-plugins for å tjene skalerte bilder

De fleste bildeoptimaliseringsprogramtillegg har muligheten til å endre størrelse på bilder, men dette er ikke veldig effektivt når du prøver å fikse feil i GTmetrix, siden forskjellige områder på nettstedet ditt krever forskjellige dimensjoner. Det er mer for å sikre at bildene dine ikke er helt enorme. Som Imagify-plugin sier, bør maksimal bredde ikke være mindre enn ditt største miniatyrbilde.

Smush

Endre størrelse på bilder Smush

Imagify

Endre størrelse på bilder Forestill deg

EWW Image Optimizer

Endre størrelse på bilder EWWW

Andre bilderoptimaliseringer

Jeg skrev en full tutorial på optimalisere bilder i WordPress som inkluderer:

  • Komprimere bilder
  • Serverer bilder gjennom et CDN
  • Endre størrelse på GIFS
  • Fjerner EXIF-data
  • Lat lasting av bilder + videoer
  • Cloudflare Mirage, polsk, Hotlink Protection

Bildeoptimaliseringer i GTmetrix

Leter du etter flere WordPress Speed ​​Tutorials?
Her er andre opplæringsprogrammer jeg skrev:

  • Hvordan sette opp WP Rocket (cache-pluginen jeg anbefaler)
  • Cloudways vs. SiteGround (de to beste vertene jeg anbefaler)
  • Hvordan jeg fikk 100% GTmetrix-poengsummer (WordPress Speed ​​Guide)

Jeg har også en fantastisk video om WordPress-hastighetsoptimalisering:

ofte stilte spørsmål

&# X2705; Kan jeg bruke en plugin for å tjene skalerte bilder?

Nei, forskjellige deler av nettstedet ditt krever forskjellige bildedimensjoner. Du må skalere bilder for å passe til de unike dimensjonene.

&# X2705; Hva er den enkleste måten å skalere et bilde på?

Last ned bildet, beskjær / endre størrelse på det i et program som Photoshop eller Gimp, og erstatt deretter det gamle bildet med det nye.

&# X2705; Hvilke bilder skal jeg begynne å skalere først?

Begynn med å skalere bilder som vises på flere sider som din logo, sidefelt, bilder, bunntekstbilder og andre.

&# X2705; Hvor finner jeg et bildes riktige dimensjoner?

GTmetrix forteller deg de riktige dimensjonene for hvert bilde når du utvider elementet i kategorien PageSpeed.

&# X2705; Hvordan optimaliserer jeg et bilde fullt ut?

Skaler det til de riktige dimensjonene, komprimerer det og fjern EXIF-data ved hjelp av et bildeprogram eller en plugin, og sørg for at du angir bildedimensjoner (angi bredden og høyden på bildet) i HTML.

Jeg håper du synes denne opplæringen var nyttig! Hvis du fremdeles har servert skalerte bildefeil på WordPress-nettstedet ditt, må du legge igjen en kommentar med spørsmålet ditt, så hjelper jeg deg uansett.

Jubel,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map