Hoe u geschaalde afbeeldingen op uw WordPress-website kunt weergeven

Heeft u uw website alleen door een prestatietesttool geleid om te horen dat u “geschaalde afbeeldingen moet weergeven”? In feite vertelt de tool u dat u de afmetingen van uw afbeeldingen moet aanpassen zodat ze overeenkomen met hoe ze op uw site worden weergegeven.


Gelukkig heeft WordPress een aantal geweldige tools om je te helpen. U kunt een plug-in voor beeldoptimalisatie gebruiken om automatisch geschaalde afbeeldingen weer te geven – of u kunt afbeeldingen zelf schalen met behulp van een aantal verschillende technieken. Als u dit doet, kunt u de laadtijden van uw pagina optimaliseren en uw bouncepercentages verbeteren.

In dit stuk leggen we uit waarom het zo belangrijk is om geschaalde afbeeldingen correct weer te geven. Vervolgens bieden we enkele handige oplossingen om het proces zo eenvoudig mogelijk te maken. Laten we beginnen!

Dit is waarom u geschaalde afbeeldingen moet weergeven

Een geschaalde afbeelding is in wezen een afbeelding die is aangepast aan de exacte afmetingen waarvoor u deze gebruikt. Aan de ene kant zal een afbeelding die te klein en opgeschaald is, wazig zijn. Aan de andere kant, terwijl een browser een afbeelding te groot maakt, wordt deze onnodig toegevoegd aan de bestandsgrootte van de pagina.

Bovendien zorgen grote afbeeldingen ervoor dat de browser tijd en middelen besteedt om ze te laden in plaats van de pagina zelf zo snel mogelijk te laden. Dit kan de laadtijden van uw pagina aanzienlijk vertragen en de prestaties van uw website negatief beïnvloeden.

Als uw thema bijvoorbeeld een afbeelding van 100 x 100 px weergeeft, wilt u een afbeelding laden die precies 100 x 100 px is. Als u een afbeelding laadt van 50 x 50 px, ziet deze er wazig uit wanneer deze wordt vergroot tot 100 px. Aan de andere kant, als u een afbeelding laadt van 200 x 200 px, ziet deze er geweldig uit, maar u hoeft de pagina niet groter te maken omdat deze nog steeds alleen bij 100 px wordt weergegeven.

Natuurlijk kunnen langzamere pagina’s bezoekers wegjagen. Ze kunnen niet alleen een minder gunstige gebruikerservaring (UX) promoten, maar ze kunnen ook uw bouncepercentage verhogen wanneer gebruikers gefrustreerd raken en wegklikken van uw site.

Daarom benadrukt bijna elke prestatietesttool de noodzaak om geschaalde afbeeldingen weer te geven:

De waarschuwing Serve Scaled Images in GTmetrix

Drie plug-ins om u te helpen bij het weergeven van geschaalde afbeeldingen in WordPress

Het goede nieuws is dat een van de gemakkelijkste manieren om geschaalde afbeeldingen correct weer te geven, is om een ​​plug-in te gebruiken om u te helpen. Met de volgende opties kunt u eenvoudig uw zware afbeeldingen optimaliseren en uw opgeblazen pagina’s opschonen. Laten we kijken!

1. Optimole

Ons eerste aanbod is Optimole. Deze handige plug-in optimaliseert uw afbeeldingen en levert ze op de perfecte grootte voor verschillende apparaten. Het helpt u dus niet alleen bij het weergeven van geschaalde afbeeldingen, maar het kan ze ook automatisch schalen naar de optimale grootte op basis van het apparaat van een gebruiker.

Het heeft een minimaal installatieproces, wat geweldig is als je maximale kwaliteit nodig hebt met minimale poespas.

Naast het schalen en comprimeren van uw afbeeldingen, bedient Optimole ze ook via een wereldwijd content delivery network (CDN) aangedreven door Amazon CloudFront, wat uw laadtijden over de hele wereld versnelt.

Met het gratis abonnement kunt u onbeperkte afbeeldingen optimaliseren en schalen voor maximaal ~ 5.000 maandelijkse bezoeken. Daarna beginnen betaalde abonnementen vanaf slechts $ 9 per maand.

2. Smush

Een andere plug-in die u kunt gebruiken om correct geschaalde afbeeldingen weer te geven, is Smush. Dit is een zeer gewaardeerde en populaire keuze die uw afbeeldingen optimaliseert door ze allemaal te scannen, onnodige gegevens weg te halen en vervolgens een ideaal formaat in te stellen. Zodra het klaar is, wordt elke afbeelding opgeslagen in uw Mediatheek.

Om uw afbeeldingen te schalen, kunt u ervoor zorgen dat afbeeldingen automatisch worden aangepast aan afmetingen boven bepaalde dimensies om te voldoen aan de vereisten van uw site.

Bovendien heeft de plug-in de mogelijkheid om tot 50 afbeeldingen tegelijk te ‘smashen’ en u kunt instellen dat elke afbeelding automatisch wordt geoptimaliseerd terwijl deze wordt geladen. Bovendien kunt u instellen dat afbeeldingen in elke map worden gecomprimeerd, inclusief afbeeldingen die zijn opgeslagen op cloudservices.

Om deze reden is de gratis versie een geweldige plek om te beginnen en zal het onbeperkte afbeeldingen optimaliseren, hoewel individuele afbeeldingen niet groter mogen zijn dan 5 MB.

3. ShortPixel

Onze laatste aanbeveling is ShortPixel. Deze plug-in is de perfecte keuze voor diegenen die op zoek zijn naar een hoogwaardige beeldcompressie en schaaloplossing met een beperkt budget. Het kan gratis tot 100 afbeeldingen per maand optimaliseren. Bovendien is het eenvoudig en gemakkelijk te gebruiken.

ShortPixel kan u met name helpen om WordPress-afbeeldingen automatisch te schalen terwijl u ze uploadt naar de door u opgegeven afmetingen.

ShortPixel wordt ook geleverd met verliesloze en verliesgevende beeldcompressie voor JPEG, PNG, en GIF afbeeldingen – u kunt ook pdf’s optimaliseren. Het biedt u de mogelijkheid om afbeeldingen (inclusief WebP) automatisch te converteren terwijl u ze uploadt of om ze handmatig af te handelen.

Zoals hierboven vermeld, kunt u met de gratis versie tot 100 afbeeldingen per maand optimaliseren. Daarnaast beginnen betaalde abonnementen vanaf $ 4,99 per maand om tot 5000 afbeeldingen per maand te optimaliseren.

Geschaalde afbeeldingen in WordPress weergeven zonder een plug-in te gebruiken (3-methoden)

Als u liever geschaalde afbeeldingen zonder plug-in wilt weergeven, zijn er andere manieren om dit te doen. U kunt bijvoorbeeld afbeeldingen bijsnijden in uw mediabibliotheek, ze aanpassen in uw beheerdersmedia-instellingen of een afbeeldingseditor gebruiken zoals de open-source GIMP of Photoshop.

Voordat we echter bespreken hoe we geschaalde afbeeldingen kunnen weergeven zonder een plug-in te gebruiken, moeten we een native-functie noemen die bij WordPress wordt genoemd srcset. Deze kernfunctie zorgt ervoor dat uw afbeeldingen reageren op verschillende schermformaten. Het werkt door de browser drie verschillende opties aan te bieden, die vervolgens degene zullen gebruiken die het meest geoptimaliseerd is voor die gebruiker. Dit helpt natuurlijk enigszins bij het laden van pagina’s, maar het schalen van afbeeldingen geeft je nog meer prestaties.

Nu we het daarover hebben, laten we eens kijken naar onze eerste methode: afbeeldingen bijsnijden in WordPress.

1. Afbeeldingen bijsnijden in uw mediabibliotheek

Uw eerste aanloophaven om deze methode te bereiken, is door naar uw WordPress-backend te gaan. Klik in een van uw berichten of pagina’s op de afbeelding die u wilt schalen en selecteer deze Bewerk afbeelding:

De knop 'Afbeelding bewerken' in WordPress.

Vanaf daar moet je naar de Mediatheek scherm, kies uw afbeelding en klik op Bewerk afbeelding koppeling. Op het volgende scherm is de optie om uw afbeelding te schalen:

Hoe u geschaalde afbeeldingen handmatig kunt weergeven vanuit het WordPress-dashboard

U krijgt de originele afmetingen voor de afbeelding te zien en een vak om uw nieuwe geschaalde afmetingen in te voeren. Houd er echter rekening mee dat bestandsnamen vaak worden opgeslagen met een reeks extra tekens, wat van invloed kan zijn op u als u een specifieke SEO-strategie voor afbeeldingen gebruikt.

2. Pas de beeldformaten aan in de Instellingen> Media scherm

U kunt uw afbeeldingen ook schalen door de instellingen in WordPress rechtstreeks aan te passen. Om dit te doen, navigeert u naar WordPress en gaat u naar Instellingen> Media:

The Settings data-lazy-src=

Hier kunt u de breedte en hoogte wijzigen voor de miniatuur-, middelgrote en grote afbeeldingsformaten.

WordPress maakt vervolgens automatisch geschaalde versies van elke afbeelding met deze formaten. In de WordPress-editor kunt u kiezen welk formaat u wilt invoegen.

Er moet echter worden opgemerkt dat, hoewel u in sommige gevallen met deze instellingen de laadtijden van pagina’s kunt verbeteren, ze uw afbeeldingen niet onder alle omstandigheden perfect zullen optimaliseren. Hiervoor kunt u de laatste handmatige methode overwegen.

3. Gebruik een afbeeldingseditor (zoals GIMP of Photoshop)

Natuurlijk is onze laatste methode om uw afbeeldingen handmatig te schalen het gebruik van een offline afbeeldingseditor. Je zou deze methode misschien als de meest voor de hand liggende beschouwen, hoewel het misschien wel de meest efficiënte beschikbare optie is. In Photoshop kun je bijvoorbeeld naar gaan Beeld in de werkbalk en selecteer Afbeeldingsgrootte:

Afbeeldingsgrootte wijzigen in Photoshop om afbeeldingen te schalen

Er verschijnt een pop-upscherm met de basisafmeting voor uw afbeelding. Vervolgens kunt u de afbeelding naar wens schalen voordat u deze uploadt naar WordPress.

Hoe u geschaalde afbeeldingen in Photoshop kunt weergeven

Naast breedte en hoogte heb je hier ook nog enkele andere opties. De resolutie van de afbeelding kan bijvoorbeeld hoger of lager worden ingesteld, afhankelijk van uw behoeften (72 PPI is meestal de standaard voor internet).

Conclusie

Of uw website nu langzaam draait of u zoekt gewoon naar een andere manier om de prestaties te optimaliseren, het is een must om te leren hoe u geschaalde afbeeldingen effectief kunt weergeven. Met de perfecte specificaties op uw plaats kan uw site snel verlichting aansturen.

In dit artikel hebben we besproken hoe afbeeldingen handmatig kunnen worden geschaald en we hebben hiervoor drie handige plug-ins aangeboden. Als een korte samenvatting zijn ze:

  1. Optimole: Deze plug-in biedt een set-and-forget-methode voor het weergeven van geschaalde afbeeldingen.
  2. Smush: Een populaire en zeer gewaardeerde oplossing voor beeldoptimalisatie.
  3. ShortPixel: Voor degenen die de voorkeur geven aan een lichtgewicht optie, is deze plug-in de perfecte keuze.

Heeft u vragen over het weergeven van geschaalde afbeeldingen of wat het betekent om geschaalde afbeeldingen weer te geven? Vraag ze in de comments hieronder!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map