Hvordan Riktig Størrelse Bilder I WordPress (PageSpeed Insights + GTmetrix Item)

hvis du kjørte nettstedet ditt gjennom PageSpeed Insights eller GTmetrix, kan du se en anbefaling til riktig størrelse bilder.

for å få riktig størrelse på Bilder I WordPress, utvid elementet I PageSpeed Insights og se hvilke bilder som er for store. Endre størrelsen på dem til de riktige dimensjonene(funnet i GTmetrix legacy report). Til slutt, erstatt det gamle bildet med det nye. Test nettstedet ditt på nytt, og det skal være 100%.

 Bilder I Riktig Størrelse

Siden PageSpeed Insights bare viser ikke-optimaliserte bilder for enkeltsiden du tester, kan Du begynne med å endre størrelsen på bilder på hele nettstedet som vises på nettstedet ditt (bilder med logo, sidebar og bunntekst). Kjør deretter andre sider gjennom PageSpeed Insights og endre størrelsen på bildene dine på dem.

Kan jeg bruke en plugin til å endre størrelsen på bilder automatisk?
Ikke sannsynlig. Du kan angi en maksimal bredde + høyde i de fleste bilde optimalisering plugins. Men forskjellige områder av nettstedet ditt krever bestemte dimensjoner (bilder må endres tilsvarende).

Opprett et bilde dimensjon jukselapp.
Den beste måten å unngå riktig størrelse bildefeil er å lære dimensjonene på de ulike områdene nettstedet ditt(glidere, widgets, logo, full bredde blogg bilder, etc). Deretter oppretter du et bilde dimensjon jukselapp med hvert områdets dimensjoner. Hvis du følger bilde dimensjoner cheat sheet og endre størrelsen på bildene før du laster opp, bør du aldri ha riktig størrelse bildefeil.

Finn Store Bilder I GTmetrix Legacy Reports

GTmetrix legacy reports viser deg de riktige dimensjonene for de store bildene dine.

Opprett En Gratis GTmetrix-konto Og gå Til Kontoer > standard Til Eldre Rapporter > aktiver.

Kjør en side Gjennom GTmetrix og se delen» server skalerte bilder». Utvid deres anbefalinger, og du vil se de riktige dimensjonene disse bildene skal endres til.

 Server Skalerte Bilder GTmetrix

du kan også manuelt sjekke om bildene er for store. Høyreklikk på et bilde > kopier bildeadresse.

 Kopier Bildeadresse

lim deretter INN bildeadressen i en ny nettleserfane. Hvis du sammenligner bildet som vises på nettstedet ditt med bildeadressen din, vil du se at det er en merkbar forskjell i størrelsene. Det betyr at bildet må skaleres. Ved å sammenligne de to variantene av bildene dine side ved side, kan du se hvor stort bildet faktisk er (og hvorfor siden det er på, kan lastes sakte).

Skalert vs Uskalert Bilde

Endre Størrelse På Bilder For Å Korrigere Dimensjoner

Last ned det gamle bildet og åpne det i ditt bilderedigeringsverktøy (jeg bruker GIMP). Endre størrelse og / eller beskjær bildet til dimensjonene Som Anbefales Av GTmetrix. Noen bilderedigeringsverktøy lar deg komprimere bilder og fjerne EXIF-data som vil gjøre bildebelastningen enda raskere.

 Skalering Bilde GIMP

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

Skaleringsbilde I WordPress Media Editor

Erstatt Det Gamle Bildet Med Det Nye

Last opp ditt nye bilde Til WordPress, og erstatt det gamle bildet med Det nye.

 Uskalert Widget Bilde

Scaled Widget Image

Test Siden På Nytt I GTmetrix

Test siden På Nytt I GTmetrix (Eller PageSpeed Insights) og feilen bør rettes.

Tjene Skalerte Bilder WordPress

Riktig Størrelse Bilder På Mobil

Riktig størrelse bilder er annerledes på mobil.

hvis du registrerer deg for en premium GTmetrix-konto, kan du teste mobilhastigheten din På Android. Sjansene er at du vil se flere server-skalerte bildefeil hvis nettstedet ditt ikke bruker adaptive bilder, noe som betyr at du automatisk skalerer bilder for mobile enheter (dette gjøres vanligvis av et plugin).

Trinn 1: Kjør nettstedet ditt Gjennom GTmetrix Android Test:

GTmetrix Mobile Test

Serve Skalerte Bilder På Mobil

Trinn 2: Finn dine mobile bakgrunnsdimensjoner levert Av GTmetrix:

Maksimal Bakgrunnsbredde

Trinn 3: Installer En Adaptive Images plugin(jeg anbefaler ShortPixel Eller Adaptive Bilder).

 Adaptive Kortpikselbilder

Trinn 4: Angi dimensjonene Gitt Av GTmetrix som maksimal bakgrunnsbredde.

 Maksimal Bredde I Bakgrunnen

Trinn 5: Kjør nettstedet ditt på Nytt gjennom Gtmetrixs mobiltest for å sikre at det ikke er noen feil.

GTmetrix Mobile Test

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

Endre Størrelse På Bilder På Flere Sider

hvis du bruker det samme bildet på flere sider / innlegg,og det må løses, kan du endre størrelsen på bildet, kopiere DET HTML, og deretter bruke better Search Replace plugin for å fikse det på flere sider.

Trinn 1: Installer Bedre Søk Erstatt plugin.

Trinn 2: Kopier DET gamle bildets HTML og lim det inn i «Søk etter» – feltet i better Search Replace plugin. Du kan bruke WordPress Tekstredigerer for å se bildets HTML. Merk: Bedre Søk Erstatt vil bare erstatte et bilde hvis den inneholder nøyaktig HTML du skriver inn i plugin.

 Bedre Søk Erstatt For Bilder

Trinn 3: Kopier DET nye bildets HTML og lim det inn i Feltet «Erstatt med».

 Server Skalert Bilde HTML

Trinn 4: Velg tabellene (f.eks. og fjern merket for » kjør som tørr skanning.»

Trinn 5: Klikk «Søk / Erstatt»og plugin vil erstatte det gamle bildet med den nye.

Create An Image Dimensions Cheat Sheet

som jeg nevnte tidligere, bør du måle dimensjonene på alle områder av nettstedet ditt slik at du kan endre størrelsen på bilder før du laster dem opp. Du kan finne disse dimensjonene I GTmetrix (bare hvis du har riktig størrelse bildefeil), eller du kan også finne dem i temaets CSS stilark.

Eksempel:

  • Bilder Med Glidebryter: 1900 (w) x 400 (h)
  • Bilder Med Karusell: 115 (w)
  • Bilder Med Widget: 414 (w)
  • bilder Med full bredde i blogginnlegget: 680 (w)
  • Utvalgte bilder: 250 (b) x 250 (h)
  • Yoast Facebook og bilde: 1200 (b) x 628 (h) – trinn 11
  • Yoast Twitter og bilde 1024 (b) x 512 (h) – trinn 11

680 Pixel Bredde Rektangel

bloggens bredde er 680px, så hvert enkelt bilde på dette innlegget har blitt endret til 680px.

WordPress Plugins Til Riktig Størrelse Bilder

de fleste image optimization plugins har muligheten til å endre størrelse på bilder, men dette er ikke veldig effektivt når du prøver å fikse feil I GTmetrix, siden ulike områder av nettstedet ditt krevde forskjellige dimensjoner. Det er mer for å sørge for 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 Imagify

Endre Størrelse På Bilder EWWW

Andre Måter Å Optimalisere Bilder

Jeg Skrev En Full Tutorial På Å Optimalisere Bilder I WordPress Som Inkluderer:

  • Komprimere bilder
  • Vise bilder fra EN CDN
  • Endre STØRRELSE PÅ GIF-ER
  • Fjerne EXIF-data
  • Lazy loading images + videos
  • Cloudflare Mirage, Polish, Hotlink Protection

GTmetrix Bildeoptimaliseringer

Leter Du Etter Flere Hastighetsopplæringer?
Her er andre tutorials jeg skrev:

  • WordPress Speed Guide(denne guiden tok evig)
  • Hvordan Sette OPP WP Rocket (cache plugin jeg anbefaler)

jeg har også en fantastisk video På WordPress speed optimization:

Vanlige Spørsmål

hvordan løser jeg bilder i riktig størrelse?

Last ned bildet, endre størrelsen på det for å korrigere dimensjoner fra GTmetrix legacy reports, og erstatt det gamle bildet med det nye.

Kan jeg bruke en plugin til riktig størrelse bilder?

nei, ulike deler av nettstedet krever forskjellige bildedimensjoner. Du må skalere bildene dine for å passe de unike dimensjonene.

Hvilke bilder skal jeg begynne å endre størrelsen først?

start med å skalere bilder som vises på flere sider, for eksempel logo, sidebar og bunntekstbilder.

Hvor finner jeg de riktige dimensjonene til et bilde?

GTmetrix legacy-rapporter forteller deg de riktige dimensjonene for hvert bilde når du utvider elementet i PageSpeed-fanen.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.