Hoe u geschaalde afbeeldingen kunt weergeven in WordPress (item in GTmetrix)

Moet geschaalde afbeeldingen weergeven in WordPress?


Dit betekent alleen dat u grote afbeeldingen moet verkleinen om ze kleiner te maken.

GTmetrix vertelt u welke afbeeldingen moeten worden geschaald en de juiste afmetingen moeten worden bijgesneden of het formaat ervan moet worden aangepast. Wijzig vervolgens de grootte van de afbeelding (schaal) en vervang oude afbeeldingen door nieuwe.

Serveer geschaalde afbeeldingen

Aangezien GTmetrix alleen niet-geoptimaliseerde afbeeldingen toont voor de enkele pagina die u test, moet u beginnen met schalen over de hele site afbeeldingen afbeeldingen die op meerdere pagina’s verschijnen (uw logo, zijbalk- en voettekstafbeeldingen). Leid vervolgens uw andere pagina’s door GTmetrix en schaal individuele afbeeldingen daarop.

Kan ik een plug-in gebruiken om afbeeldingen automatisch te schalen?
Niet aannemelijk. U kunt een maximale breedte + hoogte instellen in de meeste plug-ins voor beeldoptimalisatie. Maar verschillende delen van uw site vragen om specifieke afmetingen (afbeeldingen moeten dienovereenkomstig worden geschaald).

Maak een spiekvel voor afbeeldingsdimensies.
De beste manier om geschaalde afbeeldingsfouten te voorkomen, is door de afmetingen van elk gebied van uw website te leren kennen (schuifregelaars, widgets, logo, blogbeelden met volledige breedte, enz.). Maak vervolgens een spiekbriefje met afbeeldingsdimensies met de afmetingen van elk gebied. Als u het spiekbriefje van uw afbeeldingsafmetingen volgt en het formaat van afbeeldingen wijzigt voordat u uploadt, mag u nooit meer geschaalde afbeeldingsfouten weergeven.

1. Zoek extra grote afbeeldingen in GTmetrix

Voer een pagina door GTmetrix uit en bekijk geschaalde afbeeldingsfouten op het tabblad PageSpeed. Vouw hun aanbevelingen uit en je ziet de juiste afmetingen voor elke afbeelding. Houd er rekening mee dat GTmetrix alleen fouten toont voor de enkele pagina die u test.

Serveer geschaalde afbeeldingen GTmetrix

Je kan ook handmatig controleren of afbeeldingen zijn geschaald. Klik eerst met de rechtermuisknop en kopieer het afbeeldingsadres.

Afbeeldingsadres kopiëren

Plak vervolgens de afbeeldings-URL in een nieuw browsertabblad. Als u de afbeelding op uw website vergelijkt met uw afbeeldings-URL, ziet u dat er een merkbaar ander formaat is. Dat betekent dat de afbeelding moet worden geschaald. Door de twee varianten van uw afbeelding naast elkaar te vergelijken, kunt u zien hoe groot de afbeelding eigenlijk is (en waarom de pagina waarop deze staat mogelijk erg langzaam laadt).

Geschaald versus niet-geschaald beeld

2. Formaat van afbeeldingen wijzigen om afmetingen te corrigeren

Download de oude afbeelding en open deze in uw beeldbewerkingstool naar keuze (ik gebruik GIMP). Wijzig het formaat en / of snijd de afbeelding bij tot de afmetingen die worden aanbevolen door GTmetrix. Met veel beeldbewerkingstools kunt u afbeeldingen comprimeren en verwijderen EXIF-gegevens waardoor de afbeelding nog sneller wordt geladen.

Afbeelding GIMP schalen

U kunt afbeeldingen ook bijsnijden en het formaat wijzigen direct in WordPress:

Afbeelding schalen in WordPress Media Editor

3. Vervang de oude afbeelding door de nieuwe

Upload uw nieuwe afbeelding naar WordPress en vervang vervolgens de oude afbeelding door de nieuwe.

Ongeschaalde widgetafbeelding

Geschaalde widgetafbeelding

4. Test de pagina opnieuw in GTmetrix

Test de pagina opnieuw in GTmetrix en u zou geen geschaalde afbeeldingsfouten meer mogen hebben.

100% dienen geschaalde afbeeldingen

5. Serveer geschaalde afbeeldingen op mobiel

Het weergeven van geschaalde afbeeldingen is anders op mobiel.

Als u zich aanmeldt voor een gratis GTmetrix-account, kunt u uw testen mobiele websitesnelheid op Android. De kans is groot dat u meer geschaalde afbeeldingsfouten ziet als uw site niet wordt gebruikt adaptieve afbeeldingen, wat betekent dat afbeeldingen automatisch worden aangepast voor mobiele apparaten (dit wordt meestal gedaan door een plug-in).

Stap 1: Voer uw site uit via de Android-test van GTmetrix:

GTmetrix mobiele test

Serveer geschaalde afbeeldingen op mobiel

Stap 2: Vind uw mobiele achtergrondafmetingen geleverd door GTmetrix:

Maximale achtergrondbreedte

Stap 3: Installeer een Adaptive Images-plug-in van ShortPixel of Adaptieve afbeeldingen.

Adaptieve afbeeldingen van ShortPixel

Stap 4: Stel de door GTmetrix verstrekte afmetingen in als de achtergrond maximale breedte.

Achtergrond maximale breedte

Stap 5: Voer uw site opnieuw uit via de mobiele test van GTmetrix om er zeker van te zijn dat er geen fouten zijn.

GTmetrix mobiele test

Stap 5: Configureer andere instellingen in uw plug-in voor adaptieve afbeeldingen (ShortPixel omvat WebP-ondersteuning, lui laden van afbeeldingen, slim bijsnijden en verwijderen van EXIF-gegevens). Deze kunnen ook helpen.

6. Formaat van afbeeldingen op meerdere pagina’s wijzigen

Als u dezelfde afbeelding op meerdere pagina’s gebruikt en deze moet worden geschaald, kunt u de grootte van de afbeelding wijzigen, de HTML kopiëren en vervolgens de plug-in Beter zoeken vervangen gebruiken om deze op meerdere pagina’s te repareren.

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

Stap 2: Kopieer de HTML van de oude afbeelding en plak deze in het veld “Zoeken naar” in de plug-in Betere zoekactie vervangen. Je kunt de WordPress Teksteditor om de HTML van de afbeelding te zien. Let op: Better Search Replace zal een afbeelding alleen vervangen als deze de exacte HTML bevat die u in de plug-in invoert.

Stap 3: Kopieer de HTML van de nieuwe afbeelding en plak deze in het veld ‘Vervangen door’.

Serveer Scaled Image HTML

Stap 4: Selecteer de tabellen (bijv. Berichten) die u wilt scannen en schakel dry scan uit.

Stap 5: Klik op “Zoeken / vervangen” en de plug-in zal de oude afbeelding vervangen door de nieuwe.

7. Maak een Cheatsheet voor afbeeldingsafmetingen

Zoals ik eerder al zei, moet u de afmetingen van alle delen van uw website meten, zodat u de grootte van afbeeldingen kunt wijzigen voordat u ze uploadt. Je kunt deze dimensies vinden in GTmetrix (alleen als je geschaalde afbeeldingsfouten hebt) of je kunt ze ook vinden in de CSS-stylesheet van je thema.

Voorbeeld:

  • Schuifafbeeldingen: 1900 (b) x 400 (h)
  • Carrouselafbeeldingen: 115 (w)
  • Widgetafbeeldingen: 414 (w)
  • Afbeeldingen van blogpost met volledige breedte: 680 (w)
  • Uitgelichte afbeeldingen: 250 (b) x 250 (h)
  • Yoast Facebook OG-afbeelding: 1200 (b) x 628 (h) – stap 11
  • Yoast Twitter OG-afbeelding 1024 (b) x 512 (h) – stap 11

680 Pixel breedte rechthoek

De breedte van mijn blog is 680 px, dus elke afzonderlijke afbeelding in dit bericht is verkleind tot 680 px.

8. WordPress-plug-ins om geschaalde afbeeldingen weer te geven

De meeste plug-ins voor beeldoptimalisatie hebben de optie om de grootte van afbeeldingen te wijzigen, maar dit is niet erg effectief wanneer u fouten in GTmetrix probeert op te lossen, omdat verschillende delen van uw website verschillende afmetingen vereisten. Het is meer om ervoor te zorgen dat uw afbeeldingen niet absoluut enorm zijn. Zoals de Imagify-plug-in zegt, mag de maximale breedte niet kleiner zijn dan uw grootste miniatuur.

Smush

Formaat van afbeeldingen wijzigen Smush

Stel je voor

Resize afbeeldingen Imagify

EWW Image Optimizer

Formaat van afbeeldingen wijzigen EWWW

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:

Veel Gestelde Vragen

&# x2705; Kan ik een plug-in gebruiken om geschaalde afbeeldingen weer te geven?

Nee, verschillende secties van uw website vragen om verschillende afbeeldingsafmetingen. U moet afbeeldingen schalen om in die unieke afmetingen te passen.

&# x2705; Wat is de gemakkelijkste manier om een ​​afbeelding te schalen??

Download de afbeelding, bijsnijden / formaat wijzigen in een programma zoals Photoshop of Gimp, en vervang de oude afbeelding door de nieuwe.

&# x2705; Welke afbeeldingen moet ik als eerste gaan schalen?

Begin met het schalen van afbeeldingen die op meerdere pagina’s verschijnen, zoals uw logo, zijbalk, afbeeldingen, voettekstafbeeldingen en andere.

&# x2705; Waar vind ik de juiste afmetingen van een afbeelding?

GTmetrix vertelt u de juiste afmetingen van elke afbeelding wanneer u het item uitbreidt op het tabblad PageSpeed.

&# x2705; Hoe optimaliseer ik een afbeelding volledig?

Schaal het naar de juiste afmetingen, comprimeer het en verwijder EXIF-gegevens met behulp van een afbeeldingsprogramma of een plug-in en zorg ervoor dat u afbeeldingsafmetingen specificeert (stel de breedte en hoogte van de afbeelding in) in de HTML.

Ik hoop dat je deze tutorial nuttig vond! Als je nog steeds geschaalde afbeeldingsfouten op je WordPress-site hebt, laat dan een reactie achter met je vraag en ik zal je hoe dan ook helpen..

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