{"id":24157,"date":"2024-01-07T12:45:44","date_gmt":"2024-01-07T12:45:44","guid":{"rendered":"https:\/\/yorkshiredesign.co.uk\/?page_id=24157"},"modified":"2025-04-17T12:01:12","modified_gmt":"2025-04-17T11:01:12","slug":"beeldoptimalisatie","status":"publish","type":"page","link":"https:\/\/yorkshiredesign.co.uk\/nl\/gids-voor-paginasnelheid\/beeldoptimalisatie\/","title":{"rendered":"Beeldoptimalisatie"},"content":{"rendered":"
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Afbeelding Optimalisatie<\/span><\/h1>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>
\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Knijpen<\/span> Die kb's<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Webdesign<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

Beeldoptimalisatie maakt uw website slanker<\/p>\n

Minder gewicht, meer snelheid<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n Ga naar Imagify<\/span>\n \t

\n\t \t\n\t \t\t\n\t \t\t\tGa naar Imagify\t\t\t\t<\/span>\t\n\t \t<\/span>\n\t \t\t \t
<\/div>\n\t <\/div>\n\t<\/a> <\/div>\n <\/div>\n<\/div>
\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Wat is Afbeelding<\/span> Optimalisatie?<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

Beeldoptimalisatie is een heel eenvoudig proces. Het is ook het enige dat uw site het meest zal versnellen, vooral als u een website met veel afbeeldingen heeft. In wezen betekent het optimaliseren van een afbeelding simpelweg het kleiner maken van de bestandsgrootte. De technologie evolueert voortdurend en tegenwoordig zijn WEBP en AVIF de beste beeldformaten om te gebruiken. Beide formaten worden volledig ondersteund door moderne browsers en gedetailleerde informatie over het technische aspect van deze beeldcompressietechnieken is beschikbaar op Deze webontwikkelaar<\/strong><\/a> bladzijde.<\/p>\n

Vanwege de kwaliteit van de moderne camera's en stockfoto's die beschikbaar zijn, kunnen de bestandsgroottes van afbeeldingen erg groot zijn \u2013 sommige zelfs 5-10 MB of meer. Afbeeldingen van dit formaat kunnen eenvoudigweg niet op websites worden gebruikt, omdat het downloaden ervan veel te lang duurt en ze bij u terechtkomen paginasnelheidscores<\/a> slecht. Wat u moet doen, is ze kleiner maken. Dit is waar beeldoptimalisatiesoftware in beeld komt.<\/p>\n

Beeldoptimalisatie kan op twee manieren worden gedaan: handmatig of met software. De handmatige methode is geweldig als u een nieuwe website<\/a>, maar voor bestaande websites, vaak met honderden of meer afbeeldingen, is het veel tijdeffectiever om beeldoptimalisatiesoftware te gebruiken. Er zijn nogal wat plug-ins voor beeldoptimalisatie beschikbaar, maar degene die ik het meest aanbeveel is Stel je voor<\/strong><\/a>. Het is gratis voor maximaal 200 afbeeldingen per maand, ondersteunt WEBP en werkt, naar mijn ervaring, met alle soorten websites.<\/p>\n

Net als voorheen zal ik een goede video leveren met een overzicht van de belangrijkste functies, terwijl ik tips schrijf en dingen waar je onderweg op moet letten.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Knijpen<\/span> Die kb's<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Webdesign<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

Beeldoptimalisatie maakt uw website slanker<\/p>\n

Minder gewicht, meer snelheid<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n Ga naar Imagify<\/span>\n \t

\n\t \t\n\t \t\t\n\t \t\t\tGa naar Imagify\t\t\t\t<\/span>\t\n\t \t<\/span>\n\t \t\t \t
<\/div>\n\t <\/div>\n\t<\/a>\n\t
\n\t\t
\n\t\t\t

Wat is Afbeelding<\/span> Optimalisatie?<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

Beeldoptimalisatie is een heel eenvoudig proces. Het is ook het enige dat uw site het meest zal versnellen, vooral als u een website met veel afbeeldingen heeft. In wezen betekent het optimaliseren van een afbeelding simpelweg het kleiner maken van de bestandsgrootte. De technologie evolueert voortdurend en tegenwoordig zijn WEBP en AVIF de beste beeldformaten om te gebruiken. Beide formaten worden volledig ondersteund door moderne browsers en gedetailleerde informatie over het technische aspect van deze beeldcompressietechnieken is beschikbaar op Deze webontwikkelaar<\/strong><\/a> bladzijde.<\/p>\n

Vanwege de kwaliteit van de moderne camera's en stockfoto's die beschikbaar zijn, kunnen de bestandsgroottes van afbeeldingen erg groot zijn \u2013 sommige zelfs 5-10 MB of meer. Afbeeldingen van dit formaat kunnen eenvoudigweg niet op websites worden gebruikt, omdat het downloaden ervan veel te lang duurt en uw paginasnelheidsscores negatief worden be\u00efnvloed. Wat u moet doen, is ze kleiner maken. Dit is waar beeldoptimalisatiesoftware in beeld komt.<\/p>\n

Beeldoptimalisatie kan op twee manieren worden gedaan: handmatig of met software. De handmatige methode is geweldig als u een nieuwe website maakt, maar voor bestaande websites, vaak met honderden of meer afbeeldingen, is het veel tijdeffectiever om beeldoptimalisatiesoftware te gebruiken. Er zijn nogal wat plug-ins voor beeldoptimalisatie beschikbaar, maar degene die ik het meest aanbeveel is Stel je voor<\/strong><\/a>. Het is gratis voor maximaal 200 afbeeldingen per maand, ondersteunt WEBP en werkt, naar mijn ervaring, met alle soorten websites.<\/p>\n

Net als voorheen zal ik een goede video leveren met een overzicht van de belangrijkste functies, terwijl ik tips schrijf en dingen waar je onderweg op moet letten.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Wat is Afbeelding<\/span> Optimalisatie?<\/h1>\n\n\t\t<\/div>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

Beeldoptimalisatie is een eenvoudig proces. Het is ook het enige dat uw site het meest zal versnellen, vooral als u een website met veel afbeeldingen heeft. In wezen betekent het optimaliseren van een afbeelding simpelweg het kleiner maken van de bestandsgrootte.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Webdesign<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

De technologie evolueert voortdurend en tegenwoordig zijn WEBP en AVIF de beste beeldformaten om te gebruiken.<\/p>\n

Beide formaten worden volledig ondersteund door moderne browsers en gedetailleerde informatie over het technische aspect van deze beeldcompressietechnieken is beschikbaar op Deze webontwikkelaar<\/strong><\/a> bladzijde.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

Vanwege de kwaliteit van de moderne camera's en stockfoto's die beschikbaar zijn, kunnen de bestandsgroottes van afbeeldingen erg groot zijn \u2013 sommige zelfs 5-10 MB of meer. Afbeeldingen van dit formaat kunnen eenvoudigweg niet op websites worden gebruikt, omdat het downloaden ervan veel te lang duurt en uw paginasnelheidsscores negatief worden be\u00efnvloed. Wat u moet doen, is ze kleiner maken. Dit is waar beeldoptimalisatiesoftware in beeld komt.<\/p>\n

Beeldoptimalisatie kan op twee manieren worden gedaan: handmatig of met software. De handmatige methode is geweldig als u een nieuwe website maakt, maar voor bestaande websites, vaak met honderden of meer afbeeldingen, is het veel tijdeffectiever om beeldoptimalisatiesoftware te gebruiken.<\/p>\n

Er zijn nogal wat plug-ins voor beeldoptimalisatie beschikbaar, maar degene die ik het meest aanbeveel is Stel je voor<\/strong><\/a>. Het is gratis voor maximaal 200 afbeeldingen per maand, ondersteunt WEBP en werkt, naar mijn ervaring, met alle soorten websites.<\/p>\n

Net als voorheen zal ik een goede video leveren met een overzicht van de belangrijkste functies, terwijl ik tips schrijf en dingen waar je onderweg op moet letten.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>

<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Hoe te gebruiken Stel je voor<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Hoe Optimaliseer<\/span> Jouw afbeeldingen<\/h2>\n\n\t\t<\/div>\n\t<\/div>\n
\n
\n

\n \n <\/span>\n <\/span>\n <\/span>\n Ding over branding<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Imagify biedt drie optimalisatieniveaus: standaard, agressief en ultra. Bij deze niveaus draait het in wezen allemaal om de beeldkwaliteit. Een van de nadelen van beeldoptimalisatie is dat u wel degelijk beeldkwaliteit verliest. Het is slechts klein en normaal gesproken onmerkbaar, maar het kan merkbaar worden als ultrahoge beeldkwaliteit belangrijk voor u is. Dit zou vaak het geval zijn op websites zoals fotografie-, kunst- of sieradensites enz.<\/p>\n

Doet het Degraderen<\/span> Afbeeldingen Veel?<\/p>\n

Veel hangt af van het type afbeeldingen dat je gebruikt. Standaardkwaliteit zal ze bijvoorbeeld helemaal niet verslechteren, terwijl ultra ze enigszins pixeliseert, maar niet te veel. Deze website is bijvoorbeeld ingesteld op de kwaliteit 'agressief'. Het voordeel is dat de afbeeldingen veel kleiner zijn dan de standaardinstelling en dus sneller laden, met nauwelijks verlies van beeldkwaliteit.<\/p>\n

Sommige mensen gaan direct voor de ultrastand en merken echt het verschil. Wanneer u begint met optimaliseren, Zorg ervoor dat u het vakje aanvinkt om de originelen te behouden<\/strong>. Zo kun je, als de ultra-instelling je niet bevalt, terugkeren naar een hogere kwaliteit.<\/p>\n

Over het algemeen zal de agressieve instelling uw afbeeldingen met ongeveer 15% in kwaliteit verminderen tot een 85%-niveau. Dit is voor het menselijk oog niet waarneembaar en de meest voorkomende setting. Als de beeldkwaliteit niet van cruciaal belang is, of als u afbeeldingen in cartoonstijl gebruikt in plaats van foto's, kies dan voor ultra. Het is nog steeds volkomen acceptabel. Normaal gesproken haal je met een ultra-instelling ongeveer 85% van je beeldformaat af. Dit betekent dat een afbeelding van 1 MB wordt teruggebracht tot een grootte van tussen de 100 en 150 pond, wat een enorm verschil maakt voor de laadtijd en paginasnelheid van de pagina<\/a> scoort.<\/p>\n

Kan ik Doe alles<\/span> Mijn afbeeldingen \u00e9\u00e9n keer aan?<\/p>\n

Ja dat kan \u2013 bekijk de video voor een handleiding over hoe Imagify werkt. A De beste tip is om ook uw thema op te nemen<\/a> map in de optimalisaties. Uw thema zal veel afbeeldingen bevatten, waarvan sommige rond uw website zullen worden gebruikt. Door uw themaafbeeldingen in te voegen, maximaliseert u de afbeeldingen die u op uw website kunt optimaliseren.<\/p>\n

Om te bepalen hoeveel afbeeldingen u moet optimaliseren, kijkt u in uw mediabibliotheek. Het zal je vertellen hoeveel afbeeldingen je hebt. Vermenigvuldig dit vervolgens met 4 (gemiddeld). Dit komt omdat WordPress meerdere versies van uw afbeeldingen maakt voor responsief ontwerp (miniatuur, 300 x 300 px, enz.). Je moet optimaliseer elke versie van elke afbeelding<\/a> om de volledige voordelen van beeldoptimalisatie op alle apparaten te benutten.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Handmatige optimalisatie<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Handmatige beeldoptimalisatie is echt iets voor de puristen. Een voordeel hiervan is dat u een volledig geoptimaliseerde afbeelding uploadt, op het juiste formaat, en dat u dus helemaal geen beeldoptimalisatiesoftware hoeft te gebruiken. U bespaart ook serverruimte omdat er geen afbeeldingen op volledige grootte staan. Het is echter behoorlijk tijdrovend, dus voor de meeste mensen zou ik aanraden om gewoon Imagify te gebruiken.<\/p>\n

Ik heb De tijd<\/span> \u2013 Wat is erbij betrokken?<\/p>\n

Ten eerste moet u de afbeeldingsafmetingen kennen die u gebruikt. Daar bestaat een goede handleiding voor afbeeldingsformaten en best practices<\/strong><\/a> op deze pagina. Zodra u uw afbeeldingsformaten kent, kunt u grote afbeeldingen bijsnijden tot de exacte grootte met behulp van een afbeeldingssoftwaretool. Paint.net<\/strong><\/a> is gratis en normaal gesproken goed genoeg hiervoor.<\/p>\n

Nadat u uw afbeeldingen op het juiste formaat heeft gemaakt, kunt u deze optimaliseren met behulp van een online tool. Een van de beste die er al jaren is TinyPNG.com<\/strong><\/a>. U uploadt eenvoudig uw afbeeldingen en downloadt vervolgens de veel kleinere versie die wordt gemaakt. Twee tips bij het uploaden van deze afbeeldingen naar WordPress:<\/p>\n

Ten eerste klinkt het raar, maar zorg ervoor dat u de nieuw geoptimaliseerde versie vanuit de map 'Downloads' naar uw website uploadt. Het is zo gemakkelijk om de verkeerde te uploaden vanaf uw bureaublad of waar u uw afbeeldingen ook opslaat. Ten tweede: gebruik een iets andere naam voor de nieuwe afbeeldingstitel. Dit komt door caching. Het kan zijn dat uw WordPress-installatie de nieuwe afbeeldingsgrootte geruime tijd niet herkent als u de afbeelding met dezelfde bestandsnaam uploadt.<\/p>\n

Nadat u dit heeft gedaan, kunt u nog een stap verder gaan en de nieuw geoptimaliseerde afbeeldingen naar het WEBP-formaat converteren. Doe dit voordat u ze uploadt. Ga naar de CloudConvert<\/strong><\/a> website. Het volgt precies hetzelfde proces als TinyPNG, behalve dat u ervoor kiest om ze naar WEBP te converteren. Download vervolgens de bestanden en upload ze naar uw server.<\/p>\n

Het gebruik van software zoals Imagify is een stuk eenvoudiger, maar uiteindelijk zul je onbewerkte, geoptimaliseerde afbeeldingen ge\u00fcpload hebben, zodat je geen beeldconversietools hoeft te gebruiken, of dat er voortdurend WEBP-conversies actief zijn.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Moet ik WEBP gebruiken?<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

WEBP is een nieuwer afbeeldingsformaat ontwikkeld door Google. De afbeeldingen zijn veel kleiner dan de traditionele JPG- en PNG-formaten en dus moet je ze gebruiken \u2013 op voorwaarde dat je server de conversie van traditionele afbeeldingen naar WEBP ondersteunt.<\/p>\n

WEBP ontstond eigenlijk in 2010, maar wordt desondanks nog steeds gezien als een 'opkomend' format. Je leest misschien dat je de originele JPG\/PNG-afbeeldingen nodig hebt als reserve, evenals de WEBP-formaten, maar de waarheid is dat Chrome, Firefox, Safari en alle andere grote browsers dit ondersteunen, dus het is nu prima om alleen WEBP-versies te hebben.<\/p>\n

Doet mijn server Steun<\/span> Hen?<\/p>\n

Imagify heeft een automatische instelling om dit op uw server in te schakelen. De meeste beeldoptimalisatieprogramma's die naar WEBP converteren, doen dit. Het zal controleren en u vertellen of uw server geen WEBP-afbeeldingen zal weergeven. Wat er eigenlijk moet gebeuren, is dat WordPress uw afbeeldingsbestanden op twee manieren moet herschrijven om te kunnen werken. Sommige servers staan dit toe, andere niet:<\/p>\n

De beste manier is via fototags. Dit is een HTML5-opdracht die de deel naar een label. Het is vrij eenvoudig, maar niet alle servers ondersteunen het. De tweede manier is om de bestanden te herschrijven via het .htaccess-bestand. Dit is niet de beste manier om dit te doen, omdat het bijdraagt aan serververzoeken bij het laden van pagina's. Het is echter nog steeds nuttig om WEBP te gebruiken als u het op deze manier moet doen.<\/picture>\n

Kinsta is NGINX en is al ingesteld voor WEBP voor het geval je een niet-compatibele serverconfiguratie hebt.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Hoe lang duurt het?<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Imagify is een geautomatiseerd proces dat zeer snel is. De benodigde tijd is afhankelijk van de afbeeldingsformaten die u gebruikt. Het optimaliseren van een normaal beeld van minder dan 1 MB duurt enkele seconden.<\/p>\n

Vergeet niet om het aantal weergegeven afbeeldingen in uw mediabibliotheek met 4 te vermenigvuldigen, zodat alle responsieve formaten kunnen worden geoptimaliseerd. Stel dat u 100 afbeeldingen heeft, dan worden er 400 geoptimaliseerd. Vermenigvuldig dat met gemiddeld 5 seconden per stuk en je krijgt het idee. Dat zal iets meer dan een half uur in beslag nemen.<\/p>\n

Grotere afbeeldingen kunnen langer duren en het kan erg lang duren voordat winkels klaar zijn. Als u bijvoorbeeld 10.000 mediabibliotheekafbeeldingen heeft, moet u 40.000 responsieve afbeeldingen optimaliseren. Vermenigvuldig dat met elk 5 seconden en je kijkt naar 2\/3 dagen om je afbeeldingen te optimaliseren.<\/p>\n

De gemiddelde website heeft echter lang niet zoveel afbeeldingen, dus het proces zou binnen ongeveer een uur voltooid moeten zijn.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

Stel je voor \u2013 Bekijk de video<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t\n\t\t\t