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%.
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
- ændre størrelse på billeder for at rette dimensioner
- udskift det gamle billede med det nye
- Retest siden i Gtmetrik
- korrekt størrelse billeder på mobil
- ændre størrelse på billeder på flere sider
- Opret et billede dimensioner snydeark
- Plugins til korrekt størrelse billeder
- andre måder at optimere billeder
- Ofte Stillede Spørgsmål
- Hvordan løser jeg korrekt størrelse billeder?
- kan jeg bruge et plugin til korrekt størrelse billeder?
- hvilke billeder skal jeg begynde at ændre størrelsen først?
- Hvor finder jeg et billedes korrekte dimensioner?
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.
du kan også manuelt kontrollere, om billederne er for store. Højreklik på et billede > 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).
æ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.
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.
Retest siden i Gtmetrik
Retest siden i Gtmetrik (eller PageSpeed Insights), og fejlen skal rettes.
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:
Trin 2: Find din mobil baggrund dimensioner:
Trin 3: installer en Adaptive billeder plugin (jeg anbefaler Shortpiksel eller Adaptive billeder).
Trin 4: Indstil de dimensioner, der leveres af Gtmetrik som baggrundens maksimale bredde.
Trin 5: Kør din side igen gennem gtmetricks mobile test for at sikre, at der ikke er nogen fejl.
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.
Trin 3: Kopier det nye billedes HTML og indsæt det i feltet “Erstat med”.
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
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
Imagify
YV billedoptimering
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
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.