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%.

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.

du kan også manuelt sjekke om bildene er for store. Høyreklikk på et bilde > 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).

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.

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

Erstatt Det Gamle Bildet Med Det Nye

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

Test Siden På Nytt I GTmetrix

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

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:

Trinn 2: Finn dine mobile bakgrunnsdimensjoner levert Av GTmetrix:

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

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

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

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.

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

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.

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

Imagify

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

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