Het beste afbeeldingsformaat voor WordPress is WebP voor foto's en afbeeldingen, met JPG en PNG als automatische fallback, en SVG voor logo's en pictogrammen. WordPress beheert een groot deel van het internet en afbeeldingen zijn meestal het zwaarste op elke pagina die het aanbiedt. Het formaat dat u uploadt, bepaalt dus direct hoe snel uw site laadt en hoe goed deze scoort. WordPress regelt veel voor je, genereert meerdere formaten van elke upload, maar zal niet het ideale formaat kiezen, tenzij je dit instelt. In deze handleiding wordt besproken welk formaat u moet gebruiken, hoe WordPress afbeeldingen verwerkt en welke instellingen en plug-ins een WordPress-site snel houden.

Waarom het afbeeldingsformaat zo belangrijk is op WordPress

Op een typische WordPress-pagina zijn afbeeldingen verantwoordelijk voor het merendeel van de bytes die een bezoeker downloadt. Dat betekent het afbeeldingsformaat is de grootste hefboom voor paginasnelheid, en de paginasnelheid wordt rechtstreeks doorgegeven aan Core Web Vitals, die Google gebruikt als rangschikkingssignaal. Een thema kan klein zijn en de hosting snel, maar een pagina gevuld met te grote JPG's zal nog steeds crawlen. Het kiezen van een efficiënt formaat en het laten aanbieden van versies van de juiste grootte door WordPress is de optimalisatie met de grootste impact die de meeste sites kunnen maken, en het kost niets anders dan een beetje installatie.

Hoe WordPress omgaat met het uploaden van afbeeldingen

Wanneer u een afbeelding uploadt, slaat WordPress deze niet alleen op. Het genereert automatisch meerdere kopieën met gewijzigd formaat, thumbnail, medium, large en full, zodat het formaat geschikt is voor elke context. Het bouwt ook de responsieve srcset-markering op, zodat browsers de juiste grootte per apparaat kiezen. Dit is krachtig, maar het werkt vanaf wat u ook uploadt, dus een origineel van 5000 pixels produceert opgeblazen kopieën op elk formaat. Het uploaden van een redelijk groot, efficiënt gecomprimeerd origineel betekent dat elke gegenereerde versie ook lean is.

WebP: de moderne standaard

WebP is het formaat waarop moet worden gestandaardiseerd. Het produceert bestanden 25 tot 35% kleiner dan JPG bij dezelfde kwaliteit, ondersteunt transparantie zoals PNG, en wordt nu ondersteund door elke huidige browser. WordPress ondersteunt WebP-uploads sinds versie 5.8, en met de juiste plug-in kan het automatisch WebP-versies van uw bestaande JPG's en PNG's aanbieden, waarbij terugvalt naar het origineel voor elke browser die deze niet kan weergeven. Het verplaatsen van een mediabibliotheek naar WebP is vaak de grootste snelheidswinst die een WordPress-site kan behalen.

JPG en PNG als fallback

WebP betekent niet dat je de oudere formaten moet opgeven. JPG blijft de veilige terugvalmogelijkheid voor foto's en PNG voor afbeeldingen die transparantie vereisen, en een goede optimalisatieplug-in behoudt de originelen, zodat elke browser zonder WebP-ondersteuning nog steeds een werkende afbeelding krijgt. In de praktijk upload je zoals gewoonlijk een JPG of PNG en genereert en verzendt de plug-in ernaast een WebP, waarbij het kleinere bestand wordt afgeleverd waar het kan. Dit geeft u de besparingen van WebP zonder enig compatibiliteitsrisico. Daarom is dit de aanbevolen configuratie in plaats van alleen WebP.

SVG voor logo's en pictogrammen

Voor uw logo en interfacepictogrammen verslaat SVG elk rasterformaat. Het is vector, zodat het haarscherp blijft bij elke schermdichtheid uit één klein bestand. WordPress staat om veiligheidsredenen standaard geen SVG-uploads toe, omdat een SVG een script kan bevatten, dus schakel je dit in met een plug-in die de bestanden bij het uploaden opschoont. Eenmaal ingeschakeld, is een logo dat als SVG wordt weergegeven kleiner en scherper dan een PNG-equivalent en hoeven er nooit meerdere formaten te worden gegenereerd. Reserveer SVG voor logo's, pictogrammen en eenvoudige afbeeldingen, nooit foto's.

Het kiezen van de juiste afbeeldingsformaten

WordPress genereert verschillende formaten, maar jij bepaalt de afmetingen. Stel de groot formaat tot niet breder dan uw inhoudsgebied, vaak rond de 1200 tot 1600 pixels, dus afbeeldingen over de volledige breedte zijn niet onnodig groot. Het uploaden van een foto van 4000 pixels terwijl uw inhoudskolom 800 pixels breed is, verspilt bandbreedte, zelfs nadat het formaat van WordPress is gewijzigd, omdat de grootste gegenereerde kopie nog steeds te groot is. Zorg ervoor dat uw geregistreerde afbeeldingsformaten overeenkomen met de daadwerkelijke lay-out van uw thema, en elke afbeelding die op de site wordt weergegeven, blijft in verhouding tot waar deze wordt weergegeven.

Compressie- en optimalisatieplug-ins

Een optimalisatieplug-in automatiseert de hele pijplijn. Populaire opties comprimeer elke upload, genereer WebP-versies en verwijder onnodige metadata, allemaal zonder dat u een afbeelding met de hand aanraakt. Velen optimaliseren ook uw bestaande bibliotheek in bulk, waarbij jarenlange verzamelde JPG's en PNG's in één keer naar WebP worden geconverteerd. Sommigen verplaatsen de verwerking naar hun eigen servers om uw hosting te sparen. Welke u ook kiest, het effect is hetzelfde: afbeeldingen komen automatisch gecomprimeerd en in het beste formaat op de pagina terecht, wat veel betrouwbaarder is dan te onthouden dat u ze allemaal handmatig moet optimaliseren.

Lui laden van afbeeldingen

Bij Lazy Load worden afbeeldingen uitgesteld totdat een bezoeker er dichtbij scrollt, zodat bij het aanvankelijk laden van een pagina alleen datgene wordt opgehaald wat direct zichtbaar is. WordPress maakt lazyloading standaard mogelijk op afbeeldingen onder de vouw, waarbij het laadkenmerk automatisch wordt toegevoegd. Dit versnelt de eerste verf merkbaar op pagina's met veel afbeeldingen. De enige uitzondering is je grootste afbeelding boven de vouw, vaak de held, die gretig moet worden geladen, zodat de statistiek Grootste inhoudsvolle verf niet wordt vertraagd. Met de meeste optimalisatieplug-ins kunt u die afbeelding met één enkele instelling uitsluiten van lazyloading.

Metagegevens verwijderen

Foto's bevatten metadata, cameramodel, GPS-locatie, kleurprofielen, die een website zelden nodig heeft en die extra gewicht toevoegen. Als u deze metagegevens verwijdert, wordt elk bestand kleiner zonder zichtbare verandering, en de meeste optimalisatieplug-ins doen dit als onderdeel van compressie. Het verwijderen van GPS-gegevens heeft ook een privacyvoordeel, aangezien u waarschijnlijk niet wilt publiceren waar een foto is gemaakt. De enige metadata die het waard is om te bewaren is het kleurprofiel als de kleurnauwkeurigheid ertoe doet. Anders is het strippen ervan een gratis, onzichtbare verkleining van de hele bibliotheek.

Een aanbevolen WordPress-afbeeldingsconfiguratie

Zet het in elkaar en de installatie is eenvoudig. Registreer afbeeldingsformaten die overeenkomen met de lay-out van uw thema. Installeer een optimalisatieplug-in die uploads comprimeert, WebP genereert en bedient met fallbacks, en metadata verwijdert. Schakel opgeschoonde SVG in voor uw logo en pictogrammen. Houd de standaard lazyloading van WordPress aan, maar laad je heldenafbeelding gretig. Upload vervolgens eenvoudig originelen van redelijk formaat en laat de pijplijn de rest doen. Als dit is geïmplementeerd, wordt elke afbeelding op de site automatisch gecomprimeerd, in de juiste grootte weergegeven en in het beste formaat weergegeven, en blijft de site snel naarmate de bibliotheek groeit.

AVIF: de

volgende stap voorbij WebP

AVIF is het nieuwste efficiënte formaat en WordPress ondersteunt het ook. Het comprimeert zelfs kleiner dan WebP, vaak weer 20% kleiner, met dezelfde visuele kwaliteit, met ondersteuning voor transparantie en brede kleuren. Browserondersteuning is nu breed, maar iets achter bij WebP, dus AVIF werkt het beste met een WebP- of JPG-fallback. Sommige optimalisatieplug-ins kunnen naast WebP automatisch AVIF genereren. Voor een site die de laatste paar kilobytes van elke afbeelding wegjaagt, is AVIF de moeite waard om in te schakelen, hoewel WebP voorlopig het veilige primaire formaat blijft.

De mediatheek en het huishouden

Na verloop van tijd vult een WordPress-mediabibliotheek zich met ongebruikte afbeeldingen, oude versies en duplicaten die back-ups opblazen en de beheerder rommelig maken. Door periodiek ongebruikte media op te ruimen, blijft de bibliotheek beheersbaar en uw back-ups leunen. Plug-ins kunnen afbeeldingen identificeren die niet aan een bericht of pagina zijn gekoppeld, maar het is de moeite waard om deze te controleren voordat u ze verwijdert, omdat sommige afbeeldingen worden gebruikt op manieren die de scan niet kan detecteren. Een opgeruimde mediabibliotheek is gemakkelijker om mee te werken en geeft, eenmaal geoptimaliseerd, een duidelijk beeld van hoeveel ruimte uw afbeeldingen daadwerkelijk in beslag nemen.

Miniaturen opnieuw genereren na een themawijziging

Wanneer u van thema verandert of uw geregistreerde afbeeldingsformaten wijzigt, hebben bestaande uploads nog steeds hun oude gegenereerde formaten. Door miniaturen opnieuw te genereren, wordt elk formaat opnieuw opgebouwd vanaf de originelen om aan de nieuwe dimensies te voldoen, wat een speciale plug-in in bulk in de hele bibliotheek doet. Als u dit overslaat, kunnen afbeeldingen uitgerekt lijken of in het verkeerde formaat worden weergegeven onder het nieuwe thema. Het is een eenmalige stap na elke wijziging in uw afbeeldingsformaten, en als u deze uitvoert, blijft de hele bibliotheek consistent met hoe het huidige thema afbeeldingen daadwerkelijk weergeeft.

CDN-levering voor afbeeldingen

Een contentleveringsnetwerk versnelt de levering van afbeeldingen door bestanden vanaf een server in de buurt van elke bezoeker aan te bieden. Een CDN slaat uw afbeeldingen op in de cache van edge-locaties over de hele wereld, zodat een lezer ver van uw host nog steeds snel afbeeldingen krijgt. Veel WordPress-optimalisatie- en caching-plug-ins integreren een CDN, en sommige afbeeldingsspecifieke CDN's worden ook on-the-fly geconverteerd en van grootte aangepast, waarbij het formaat en de afmetingen automatisch worden verwerkt. Voor een site met een wereldwijd publiek of veel verkeer verwijdert een CDN de levering van afbeeldingen als knelpunt en ontlast tegelijkertijd uw oorspronkelijke server.

Uitgelichte afbeeldingen en sociale previews

De uitgelichte afbeelding van elk bericht heeft een dubbele functie: deze verschijnt in uw thema en, via Open Graph-tags, als voorbeeld wanneer het bericht wordt gedeeld. Stel aanbevolen afbeeldingen in op een formaat dat geschikt is voor sociale previews, ongeveer 1200 bij 630, zodat gedeelde links er scherp uitzien in de feed. Een SEO-plug-in wijst de weergegeven afbeelding meestal automatisch toe aan de Open Graph-tag. Als we dit goed doen, betekent dit dat elk bericht dat wordt gedeeld een schone afbeelding met de juiste grootte toont in plaats van een bijgesneden miniatuur of helemaal niets.

Uw beeldprestaties testen

Meet na het optimaliseren het resultaat. Tools zoals PageSpeed Insights rapporteren over beeldgerelateerde problemen, het markeren van te grote afbeeldingen, ontbrekende moderne formaten en afbeeldingen zonder afmetingen die een lay-outverschuiving veroorzaken. Ze sluiten rechtstreeks aan bij Core Web Vitals, zodat hun advies aansluit bij wat Google meet. Het uitvoeren van een test voor en na een optimalisatie-passage laat precies zien hoeveel sneller de pagina is geworden en benadrukt elke afbeelding die deze nog tegenhoudt. Beschouw deze rapporten als een checklist om het laatste gewicht uit uw afbeeldingen te halen.

Veel voorkomende WordPress-afbeeldingsfouten

Een paar gewoonten vertragen WordPress-sites stilletjes. Camerabeelden met volledige resolutie uploaden, compressie overslaan en WebP niet inschakelen zijn de meest voorkomende, waarbij elk grote bestanden achterlaat waar kleine bestanden zouden volstaan. Anderen omvatten het vergeten om de afmetingen van afbeeldingen in te stellen, wat een lay-outverschuiving veroorzaakt, en het gebruik van een langzame plug-in met veel functies die meer gewicht toevoegt dan het bespaart. Elk van deze problemen is eenvoudig op te lossen met de bovenstaande instellingen. Door deze te vermijden, blijft een WordPress-site snel groeien, in plaats van dat hij jaar na jaar langzaam groeit terwijl de bibliotheek vol raakt.

Wat is het beste afbeeldingsformaat voor WordPress?

WebP voor foto's en afbeeldingen, met JPG- en PNG-fallbacks, en SVG voor logo's. WebP-bestanden zijn 25 tot 35% kleiner dan JPG bij dezelfde kwaliteit en elke huidige browser ondersteunt ze.

Ondersteunt WordPress WebP?

Ja, sinds WordPress 5.8. U kunt WebP rechtstreeks uploaden, en een optimalisatieplug-in kan automatisch WebP-versies van bestaande JPG's en PNG's aanbieden met fallbacks.

Kan ik SVG-bestanden uploaden naar WordPress?

Uit veiligheidsoverwegingen niet standaard. Een plug-in die SVG's opschoont bij het uploaden maakt het veilig mogelijk, waarna logo's en pictogrammen die als SVG worden weergegeven kleiner en scherper zijn dan PNG.

Heb ik een plug-in voor beeldoptimalisatie nodig?

Het wordt sterk aanbevolen. Een plug-in comprimeert uploads, genereert WebP en verwijdert metadata automatisch, wat veel betrouwbaarder is dan het handmatig optimaliseren van elke afbeelding.

Moet ik het formaat van afbeeldingen wijzigen voordat ik ze upload naar WordPress?

Ja. Upload niet breder dan uw inhoudsgebied, vaak 1200 tot 1600 pixels. Een enorm origineel zorgt ervoor dat elk formaat dat WordPress ervan genereert, ook te groot is.

Ondersteunt WordPress AVIF?

Ja. AVIF comprimeert ongeveer 20% kleiner dan WebP met dezelfde kwaliteit, en sommige optimalisatieplug-ins genereren deze automatisch. Serveer het met een WebP- of JPG-fallback voor volledige browserondersteuning.

Moet ik een CDN gebruiken voor WordPress-afbeeldingen?

Voor een wereldwijde site of site met veel verkeer wel. Een CDN slaat afbeeldingen op edge-locaties wereldwijd op in de cache, zodat bezoekers op afstand ze snel ontvangen en de belasting van uw oorspronkelijke server komt.

Waarom zien mijn afbeeldingen er verkeerd uit nadat ze van thema zijn veranderd?

Omdat bestaande uploads hun oude gegenereerde formaten behouden. Door miniaturen opnieuw te genereren, wordt elk formaat opnieuw opgebouwd vanaf de originelen om overeen te komen met de afmetingen van het nieuwe thema.

Moet ik WordPress-afbeeldingen lui laden?

Ja, en WordPress maakt lazyloading standaard mogelijk op afbeeldingen onder de vouw. Houd hem aan, maar laad je belangrijkste heldenafbeelding boven de vouw gretig, zodat deze de grootste inhoudsvolle verf niet vertraagt.