hvordan man korrekt størrelse billeder i PageSpeed Insights (PageSpeed Insights)

hvis du kørte din hjemmeside gennem PageSpeed Insights eller Gtmetriks, kan du se en anbefaling til korrekt størrelse billeder.

hvis du vil formatere billederne korrekt, skal du udvide elementet i PageSpeed Insights og se, hvilke billeder der er for store. Ændre størrelsen på dem til de korrekte dimensioner (findes i din gamle rapport). Til sidst skal du udskifte det gamle billede med det nye. Test din hjemmeside igen, og den skal være 100%.

billeder i korrekt størrelse

da PageSpeed Insights kun viser uoptimerede billeder for den enkelte side, du tester, skal du starte med at ændre størrelsen på billeder over hele siden, der vises på din hjemmeside (logo, sidebjælke og sidefodbilleder). Kør derefter andre sider gennem PageSpeed Insights og ændre størrelsen på dine billeder på dem.

kan jeg bruge et plugin til automatisk at ændre størrelsen på billeder?
ikke sandsynligt. Du kan indstille en maksimal bredde + højde i de fleste billedoptimerings plugins. Men forskellige områder af din hjemmeside kræver specifikke dimensioner (billeder skal ændres i overensstemmelse hermed).

Opret et billede dimension cheat sheet.
den bedste måde at undgå korrekt størrelse billedfejl er at lære dimensionerne af de forskellige områder din hjemmeside (skydere, kontroller, logo, fuld bredde blog billeder, etc). Opret derefter et snydeark med billeddimension med hvert områdes dimensioner. Hvis du følger dit billeddimensioner snydeark og ændrer størrelsen på billeder, før du uploader, skal du aldrig have billedfejl i korrekt størrelse.

Find overdimensionerede billeder i Legacy Reports

legacy reports viser dig de korrekte dimensioner for dine store billeder.

Opret en gratis konto og gå til konti > standard til ældre rapporter > aktiver.

Kør en side gennem Gtmetrik og se afsnittet “serve scaled images”. Udvid deres anbefalinger, og du vil se de korrekte dimensioner, som disse billeder skal ændres til.

Server skalerede billeder Gtmetrik

du kan også manuelt kontrollere, om billederne er for store. Højreklik på et billede > kopier billedadresse.

Kopier billedadresse

indsæt derefter billedets URL i en ny fane. Hvis du sammenligner billedet vist på din hjemmeside med dit billede URL, vil du se, at der er en mærkbar forskel i deres størrelser. Det betyder, at billedet skal skaleres. Ved at sammenligne de to variationer af dine billeder side om side kan du se, hvor stort billedet faktisk er (og hvorfor den side, det er på, muligvis indlæses langsomt).

skaleret vs ikke-skaleret billede

ændre størrelse på billeder for at rette dimensioner

Hent det gamle billede, og åbn det i dit valgte billedredigeringsværktøj (jeg bruger GIMP). Ændre størrelsen og / eller beskære billedet til de dimensioner, der anbefales af GTM. Nogle billedredigeringsværktøjer giver dig mulighed for at komprimere billeder og fjerne EKSIF-data, hvilket gør billedbelastningen endnu hurtigere.

skalering af billede GIMP

du kan også beskære og ændre størrelsen på billeder direkte i:

udskift det gamle billede med det nye

Upload dit nye billede til det nye.

ikke-skaleret kontrolbillede

skaleret kontrolbillede

Retest siden i Gtmetrik

Retest siden i Gtmetrik (eller PageSpeed Insights), og fejlen skal rettes.

Serve skalerede billeder Tryk

korrekt størrelse billeder på mobil

korrekt størrelse af billeder er anderledes på mobil.

hvis du tilmelder dig en premium-konto, kan du teste din mobilhastighed på Android. Chancerne er, at du vil se flere serveringsskalerede billedfejl, hvis din side ikke bruger adaptive billeder, hvilket betyder automatisk at ændre størrelsen på billeder til mobile enheder (dette gøres normalt af et plugin).

Trin 1: Kør din hjemmeside gennem Android Test:

mobil Test

Server skalerede billeder på mobil

Trin 2: Find din mobil baggrund dimensioner:

maksimal baggrund bredde

Trin 3: installer en Adaptive billeder plugin (jeg anbefaler Shortpiksel eller Adaptive billeder).

Shortpiksel Adaptive billeder

Trin 4: Indstil de dimensioner, der leveres af Gtmetrik som baggrundens maksimale bredde.

maksimal Baggrundsbredde

Trin 5: Kør din side igen gennem gtmetricks mobile test for at sikre, at der ikke er nogen fejl.

Mobile Test

Trin 5: Konfigurer andre indstillinger i dit plugin til adaptive billeder (Shortpiksel inkluderer understøttelse af Internet, doven indlæsning af billeder, Smart beskæring og fjernelse af eksterne data). Disse kan også hjælpe.

ændre størrelse på billeder på flere sider

hvis du bruger det samme billede på flere sider/indlæg, og det skal løses, kan du ændre størrelsen på billedet, kopiere det HTML og derefter bruge Better Search Replace plugin til at rette det på flere sider.

Trin 1: Installer Better Search Replace plugin.

Trin 2: kopier det gamle billedes HTML og indsæt det i feltet “Søg efter” i pluginet Better Search Replace. Du kan bruge teksteditoren til at se billedets HTML. Bemærke: Better Search Replace erstatter kun et billede, hvis det indeholder den nøjagtige HTML, du indtaster i plugin ‘ et.

bedre søgning Erstat efter billeder

Trin 3: Kopier det nye billedes HTML og indsæt det i feltet “Erstat med”.

Server skaleret billede HTML

Trin 4: Vælg tabellerne (f.eks. indlæg) du ønsker scannet og fjern markeringen “Kør som tør scanning.”

Trin 5: Klik på” Søg/Erstat”, og pluginet erstatter det gamle billede med det nye.

Opret et billede dimensioner snydeark

som jeg nævnte tidligere, skal du måle dimensionerne på alle områder på din hjemmeside, så du kan ændre størrelsen på billeder, før du uploader dem. Du kan finde disse dimensioner i Gtmetrik (kun hvis du har korrekt størrelse billedfejl), eller du kan også finde dem i dit temas CSS-stilark.

eksempel:

  • Slider images: 1900 (B) 400 (h)
  • Karruselbilleder: 115(B)
  • Kontrolbilleder: 414(B)
  • fuld bredde blogindlæg billeder: 680 (B)
  • udvalgte billeder: 250(B) 250(h)
  • Yoast Facebook og image: 1200 (B) 628 (h – – step 11
  • Yoast kvidre og image 1024 (B) 512 (h – – step 11

680 rektangel

min blogs bredde er 680ph, så hvert enkelt billede på dette indlæg er blevet ændret til 680ph.

Plugins til korrekt størrelse billeder

de fleste billede optimering plugins har mulighed for at ændre størrelsen på billeder, men dette er ikke meget effektiv, når de forsøger at rette fejl i Gtmetrick, da forskellige områder af din hjemmeside opfordrede til forskellige dimensioner. Det er mere for at sikre, at dine billeder ikke er helt enorme. Som Imagify-pluginet siger, bør den maksimale bredde ikke være mindre end din største miniaturebillede.

Smush

ændre størrelse på billeder Smush

Imagify

ændre størrelse på billeder Imagify

YV billedoptimering

ændre størrelse på billeder

andre måder at optimere billeder

jeg skrev en fuld tutorial om optimering af billeder i:

  • komprimering af billeder
  • servering af billeder fra en CDN
  • ændring af størrelse GIF
  • fjernelse af EKSIF-data
  • doven indlæsning af billeder + videoer
  • Cloudflare Mirage, polsk, Hotlink beskyttelse

billede optimeringer

Leder du efter flere hastighed Tutorials?
her er andre tutorials jeg skrev:

  • Speed Guide (Denne vejledning tog for evigt)
  • Sådan Setup Rocket (cache plugin jeg anbefale)

jeg har også en fantastisk video om optimering af hastighed:

Ofte Stillede Spørgsmål

Hvordan løser jeg korrekt størrelse billeder?

Hent billedet, ændre størrelsen på det for at rette dimensioner, der leveres af gamle rapporter, og udskift derefter det gamle billede med det nye.

kan jeg bruge et plugin til korrekt størrelse billeder?

Nej, forskellige dele af din hjemmeside kræver forskellige billeddimensioner. Du skal skalere dine billeder, så de passer til de unikke dimensioner.

hvilke billeder skal jeg begynde at ændre størrelsen først?

Start med at skalere billeder, der vises på flere sider som dit logo, sidebjælke og sidefodsbilleder.

Hvor finder jeg et billedes korrekte dimensioner?

gamle rapporter fortæller dig de korrekte dimensioner af hvert billede, når du udvider elementet under fanen PageSpeed.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.