Hoe afbeeldingen correct te formatteren in WordPress (PageSpeed Insights + GTmetrix Item)

Als u uw site via PageSpeed Insights of GTmetrix hebt uitgevoerd, kunt u een aanbeveling zien om afbeeldingen correct te formatteren.

om afbeeldingen in WordPress juist te maken, vouwt u het item uit in PageSpeed Insights en bekijkt u welke afbeeldingen te groot zijn. Wijzig ze naar de juiste afmetingen (gevonden in uw GTmetrix legacy rapport). Vervang ten slotte de oude afbeelding door de nieuwe. Test uw site opnieuw en het moet 100% zijn.

afbeeldingen met de juiste grootte

aangezien PageSpeed Insights alleen niet-geoptimaliseerde afbeeldingen toont voor de enkele pagina die u test, begin met de grootte van de afbeeldingen op de hele site die op uw website verschijnen (logo -, zijbalk-en voettekstafbeeldingen). Volgende, uitvoeren van andere pagina ‘ s door PageSpeed Insights en het formaat van uw afbeeldingen op die.

kan ik een plugin gebruiken om afbeeldingen automatisch te vergroten of verkleinen?
niet waarschijnlijk. U kunt een maximale breedte + hoogte in de meeste afbeelding optimalisatie plugins. Maar verschillende gebieden van uw site vragen om specifieke afmetingen (afbeeldingen moeten dienovereenkomstig worden aangepast).

Maak een spiekbriefje met afbeeldingsdimensie.
de beste manier om fouten in de juiste grootte te voorkomen is om de afmetingen van de verschillende gebieden van uw website te leren kennen (sliders, widgets, logo, volledige breedte blog afbeeldingen, enz.). Vervolgens, Maak een afbeelding dimensie cheat sheet met de afmetingen van elk gebied. Als u uw afbeeldingsafmetingen cheat sheet volgt en de grootte van afbeeldingen wijzigt voordat u het uploadt, moet u nooit fouten in de juiste grootte van afbeeldingen hebben.

vind extra grote afbeeldingen in GTmetrix Legacy-rapporten

GTmetrix legacy-rapporten tonen u de juiste afmetingen voor uw grote afbeeldingen.

Maak een gratis GTmetrix-account aan en ga naar Accounts > Default to Legacy Reports > enable.

voer een pagina uit via GTmetrix en bekijk de sectie “geschaalde afbeeldingen serveren”. Breid hun aanbevelingen uit en je ziet de juiste afmetingen waar deze afbeeldingen naar moeten worden aangepast.

Schaalafbeeldingen tonen GTmetrix

u kunt ook handmatig controleren of afbeeldingen te groot zijn. Klik met de rechtermuisknop op een afbeelding > afbeeldingsadres kopiëren.

Afbeeldingsadres kopiëren

plak vervolgens de URL van de afbeelding in een nieuw tabblad. Als u de afbeelding op uw website vergelijkt met uw afbeelding URL, zult u zien dat er een merkbaar verschil in hun grootte. Dat betekent dat het beeld moet worden geschaald. Door het vergelijken van de twee variaties van uw afbeeldingen side-by-side, kunt u zien hoe groot de afbeelding is eigenlijk (en waarom de pagina het is op kan worden Laden langzaam).

geschaald vs ongeparfumeerde afbeelding

Formaat wijzigen om de afmetingen te corrigeren

Download de oude afbeelding en open deze in uw afbeeldingsbewerkingsprogramma van uw keuze (Ik gebruik GIMP). Formaat wijzigen en / of bijsnijden tot de afmetingen aanbevolen door GTmetrix. Sommige beeldbewerkingstools laten u afbeeldingen comprimeren en EXIF-gegevens verwijderen, waardoor de afbeelding nog sneller wordt geladen.

afbeeldingsgrootte schalen Gimp

u kunt afbeeldingen ook direct bijsnijden en verkleinen in WordPress:

afbeelding schalen in WordPress Media Editor

Vervang de oude afbeelding door de nieuwe

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

ongeparfumeerde Widgetafbeelding

Scaled Widget Image

hertest de pagina in GTmetrix

hertest de pagina in GTmetrix (of PageSpeed Insights) en de fout moet worden opgelost.

geschaalde afbeeldingen weergeven WordPress

afbeeldingen op mobiel

afbeeldingen op de juiste grootte aanpassen is anders op mobiel.

als u zich aanmeldt voor een Premium GTmetrix-account, kunt u uw mobiele snelheid testen op Android. De kans is groot dat u zult zien meer dienen geschaald beeld fouten als uw site is niet met behulp van adaptieve afbeeldingen, wat betekent automatisch formaat van afbeeldingen voor mobiele apparaten (Dit wordt meestal gedaan door een plugin).

Stap 1: Voer uw site via GTmetrix Android-Test:

GTmetrix Mobiele Test

Serveer Geschaalde Afbeeldingen Op Mobiele

Stap 2: het Vinden van uw mobiele achtergrond dimensies die door GTmetrix:

Maximale Achtergrond Breedte

Stap 3: Het installeren van een Adaptieve Beelden plugin (ik adviseer ShortPixel of Adaptive Images).

Shortpixel adaptieve afbeeldingen

Stap 4: Stel de afmetingen in die door GTmetrix worden geleverd als de maximale breedte van de achtergrond.

Achtergrond maximale breedte

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

GTmetrix Mobile Test

Stap 5: configureer andere instellingen in uw plugin voor adaptieve afbeeldingen (ShortPixel bevat WebP-ondersteuning, lazy loading images, smart cropping en het verwijderen van EXIF-gegevens). Deze kunnen ook helpen.

formaat van afbeeldingen op meerdere pagina ‘s

als u dezelfde afbeelding op meerdere pagina’ s/berichten gebruikt en deze moet worden gerepareerd, kunt u de grootte van de afbeelding wijzigen, de HTML kopiëren en de plugin beter Zoeken Vervangen gebruiken om deze op meerdere pagina ‘ s te repareren.

Stap 1: Installeer de Better Search Replace plugin.

Stap 2: kopieer de HTML van de oude afbeelding en plak deze in het veld “Zoeken naar” in de plugin beter Zoeken Vervangen. U kunt de WordPress teksteditor gebruiken om de afbeelding HTML te zien. Opmerking: Beter Zoeken vervangen zal alleen een afbeelding vervangen als het de EXACTE HTML bevat die u invoert in de plugin.

beter Zoeken Vervangen voor afbeeldingen

Stap 3: kopieer de HTML van de nieuwe afbeelding en plak deze in het veld “vervangen door”.

dienen geschaalde afbeelding HTML

Stap 4: Selecteer de tabellen (bijv. berichten) u wilt gescand en schakel het vinkje “run as dry scan.”

Stap 5: Klik op “Search / Replace” en de plugin zal de oude afbeelding vervangen door de nieuwe.

Maak een spiekbriefje voor Afbeeldingsafmetingen

zoals ik al eerder zei, moet u de afmetingen van alle delen van uw website meten zodat u afbeeldingen kunt wijzigen voordat u ze uploadt. U kunt deze afmetingen vinden in GTmetrix (alleen als u de juiste grootte image fouten) of u kunt ze ook vinden in uw thema ‘ s CSS stylesheet.

voorbeeld:

  • afbeeldingen met schuifregelaar: 1900 (w) x 400 (h)
  • Carrouselafbeeldingen: 115 (w)
  • Widgetafbeeldingen: 414 (w)
  • volledige breedte blogpost afbeeldingen: 680 (w)
  • uitgelichte afbeeldingen: 250 (w) x 250 (h)
  • Yoast Facebook OG image: 1200(w) x 628(h) – step 11
  • Yoast Twitter OG image 1024(w) x 512(h) – step 11

680 pixelbreedte rechthoek

de breedte van mijn blog is 680px, dus elke afbeelding op dit bericht is aangepast naar 680px.

WordPress Plugins om afbeeldingen correct te Grootte

de meeste image optimization plugins hebben de optie om afbeeldingen te verkleinen, maar dit is niet erg effectief bij het proberen om fouten in GTmetrix te herstellen, omdat verschillende gebieden van uw website om verschillende dimensies vroegen. Het is meer om ervoor te zorgen dat uw beelden niet absoluut enorm zijn. Zoals de Imagify plugin zegt, mag de maximale breedte niet kleiner zijn dan uw grootste miniatuur.

Smush

Resize Images Smush

Imagify

Resize Images Imagify

EHH Image Optimizer

Resize Images EWWW

Andere Manieren Voor het Optimaliseren van Afbeeldingen

ik schreef een volledige tutorial over het optimaliseren van afbeeldingen in WordPress inclusief:

  • comprimeren van afbeeldingen
  • weergeven van afbeeldingen van een CDN
  • wijzigen van GIFS
  • verwijderen van EXIF-gegevens
  • Lazy loading images + videos
  • Cloudflare Mirage, Polish, Hotlink Protection

GTmetrix Image Optimizations

op zoek naar meer snelheid Tutorials?
hier zijn andere tutorials die ik schreef:

  • WordPress Speed Guide (Deze gids duurde eeuwig)
  • hoe WP Rocket in te stellen (de cache plugin adviseer ik)

ik heb ook een geweldige video op WordPress snelheid optimalisatie:

Veelgestelde vragen

hoe repareer ik afbeeldingen correct?

Download de afbeelding, wijzig deze om de afmetingen te corrigeren die door GTmetrix legacy reports zijn geleverd, en vervang de oude afbeelding door de nieuwe.

kan ik een plugin gebruiken om afbeeldingen goed te maken?

Nee, verschillende secties van uw website vragen om verschillende afbeeldingsafmetingen. U moet uw afbeeldingen schalen om deze unieke dimensies te passen.

welke afbeeldingen moet ik eerst aanpassen?

begin met het schalen van afbeeldingen die op meerdere pagina ‘ s verschijnen, zoals uw logo -, zijbalk-en voettekstafbeeldingen.

Waar vind ik de juiste afmetingen van een afbeelding?

GTmetrix legacy-rapporten vertellen u de juiste afmetingen van elke afbeelding wanneer u het item op het tabblad PageSpeed uitvouwt.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.