Afbeeldingsafmetingen specificeren in WordPress (GTmetrix-item)

Nodig hebben beeldafmetingen opgeven in WordPress?


Dit betekent dat u een breedte en hoogte moet toevoegen aan de HTML van afbeelding of CSS. Als een afbeelding geen gespecificeerde afbeeldingsafmetingen heeft, verschijnt deze als een fout in uw GTmetrix-rapport en GTmetrix vertelt u zelfs de juiste breedte en hoogte die aan die afbeelding moet worden toegevoegd.

Specificeer afbeeldingsafmetingen WordPress

Het enige wat u hoeft te doen is de afbeelding op uw WordPress-site te lokaliseren, de HTML te bekijken en vervolgens een breedte en hoogte toe te voegen, zoals deze:

1. Zoek Specify Image Dimension Error In GTmetrix

GTmetrix toont alleen fouten voor de enkele pagina die u test.

Voer een willekeurige pagina door GTmetrix uit en kijk welke afbeeldingen fouten in de afbeeldingsdimensie bevatten.

Specificeer afbeeldingsafmetingen GTmetrix

2 Kopieer de breedte en hoogte van de afbeelding van GTmetrix

Kopieer vervolgens de breedte + hoogte van de afbeelding (geleverd door GTmetrix).

Afmetingen afbeelding GTmetrix

3. Zoek de afbeelding op uw website

Nu moeten we de afbeelding op uw WordPress-site lokaliseren.

De WordPress visuele editor specificeert automatisch afbeeldingsafmetingen voor u, dus er zijn hier meestal geen fouten voor afbeeldingen. In sommige delen van uw website worden de afbeeldingsafmetingen echter mogelijk niet automatisch gespecificeerd (mogelijk paginabouwers, schuifregelaars, widgets en handgecodeerde HTML of CSS). Je moet leren welke Oppervlakte van uw WordPress-site geeft u de fouten.

Zoek WordPress Widget Image

Specificeer de widget Afbeeldingsafmetingen

4. Voeg de breedte + hoogte toe aan de HTML van de afbeelding

Zodra u de afbeelding heeft gevonden, bekijkt u de HTML en merkt u dat er geen bepaalde breedte + hoogte is. Het enige dat u hoeft te doen, is deze als volgt in de HTML in te voegen: width = ”135 ″ height =” 135 ″

Specificeer afbeeldingsafmetingen WordPress

5. Test de pagina opnieuw in GTmetrix

Sla wijzigingen op en start de pagina opnieuw via GTmetrix. De afbeelding met fouten moet worden gerepareerd.

100% Geef afbeeldingsafmetingen op

6. Gebruik de plug-in Afbeeldingafmetingen specificeren

De Geef de plug-in Afbeeldingafmetingen op scant uw site voor iedereen tags die een breedte + hoogte missen en ze automatisch toevoegen. Ik had echter geen succes met deze plug-in.

Geef de plug-in Afbeeldingafmetingen op

7. Fix Specificeer afbeeldingsdimensiefouten op meerdere pagina’s

Komt dezelfde afbeelding voor op meerdere pagina’s / berichten en bevat afbeeldingsafwijkingsfouten?

U kunt de plug-in Better Search Replace gebruiken om uw logo, widgetafbeeldingen en andere afbeeldingen die op meerdere pagina’s verschijnen, te repareren zonder ze afzonderlijk te hoeven doorlopen. Het kan tijd besparen.

Stap 1: Installeer de Beter zoeken Vervang plug-in.

Stap 2: Voeg in het veld ‘Zoeken naar’ de HTML van de afbeelding toe zonder de opgegeven breedte + hoogte. Voeg in het veld “Vervangen door” de nieuwe versie van de afbeelding toe die wel de breedte + hoogte bevat.

Stap 3: Selecteer de tabel (len) waarop u de plug-in wilt scannen en afbeeldingen wilt vervangen. Je kunt een dry run doen als je het wilt testen, anders vink je die optie uit en klik je op “Zoeken / vervangen uitvoeren”.

Beter zoeken Afbeeldingen vervangen

Stap 4: De plug-in voert de zoekopdracht uit / vervangt de afbeelding op alle tabellen die u hebt gekozen. Als u klaar bent, vertelt Better Search Replace u hoeveel tabellen het heeft gescand en hoeveel afbeeldingen het heeft vervangen.

Andere beeldoptimalisaties

Ik schreef een volledige tutorial over afbeeldingen optimaliseren in WordPress inclusief:

  • Afbeeldingen comprimeren
  • Afbeeldingen weergeven via een CDN
  • Het formaat van GIFS wijzigen
  • EXIF-gegevens verwijderen
  • Lui laden van afbeeldingen + video’s
  • Cloudflare Mirage, Polish, Hotlink Protection

Beeldoptimalisaties in GTmetrix

Op zoek naar meer tutorials over WordPress-snelheid?
Hier zijn andere tutorials die ik heb geschreven:

  • Hoe WP Rocket in te stellen (de cache-plug-in die ik aanbeveel)
  • Cloudways versus SiteGround (de twee beste hosts die ik aanbeveel)
  • Hoe ik 100% GTmetrix-scores kreeg (WordPress Speed ​​Guide)

Ik heb ook een geweldige video over optimalisatie van WordPress-snelheid:

Ik hoop dat deze tutorial je heeft geholpen en dat je geen afbeeldingsafmetingsfouten meer hebt!

Veel Gestelde Vragen

&# x2705; Hoe specificeert u de afmetingen van een afbeelding?

Zoek de fout in GTmetrix en noteer de juiste breedte + hoogte van de afbeelding (geleverd door GTmetrix). Zoek vervolgens de afbeelding in uw WordPress-dashboard en bekijk de HTML-code. Voeg vervolgens een breedte + hoogte toe aan de HTML van de afbeelding. Voorbeeld: width = ”680 ″ height =” 340 ″

&# x2705; Waar vind ik het juiste beeldformaat?

GTmetrix vertelt u de juiste afmetingen van afbeeldingen die geen gespecificeerde breedte + hoogte hebben onder Specify Image Dimensions.

&# x2705; Hoe optimaliseer je afbeeldingen in GTmetrix?

Dit betekent dat je afbeeldingen zonder verlies moet comprimeren met een plug-in zoals ShortPixel of Imagify. Ik gebruik ShortPixel.

&# x2705; Hoe dien je geschaalde afbeeldingen in?

Als u geschaalde afbeeldingsfouten in GTmetrix heeft weergegeven, betekent dit dat u afbeeldingen uploadt die te groot zijn en dat ze moeten worden verkleind tot de juiste afmetingen. Uw schuifregelaars, portfolio-afbeeldingen, widgetafbeeldingen, blogfoto’s op volledige breedte en andere secties van uw website vragen om specifieke afmetingen. U moet de grootte van afbeeldingen wijzigen voordat u ze uploadt, zodat ze daar bij passen.

Stuur me een reactie als je nog vragen hebt.

Proost,
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