SocialsFYI

Image Optimizer

Verbeter hoe afbeeldingen op je website laden met één script-tag. Handig voor websites die sneller en netter moeten voelen, zonder meteen een hele rebuild te doen.

Terug naar socials.fyi Installatie Hulp nodig? T-Unlimited

Wat doet dit?

Slimmere afbeeldingsweergave zonder gedoe

Deze tool helpt websites om afbeeldingen slimmer te laden. Denk aan lazy loading voor beelden onder de vouw, async decoding voor een soepelere render en automatische prioriteit voor belangrijke afbeeldingen bovenaan de pagina.

Lazy loading
Afbeeldingen buiten beeld laden later in, zodat de eerste pagina sneller voelt.
Async decoding
Helpt browsers afbeeldingen netter te verwerken zonder onnodige blokkades.
Slimme prioriteit
Belangrijke afbeeldingen bovenaan krijgen voorrang waar dat logisch is.
Werkt snel
Je hoeft geen afbeeldingen handmatig opnieuw te uploaden om direct basiswinst te pakken.

Belangrijk

Wat dit niet doet

Geen magische compressie
Deze script-tag maakt van zware JPG’s niet ineens perfect geoptimaliseerde AVIF’s.
Geen vervanging van echte optimalisatie
Voor structurele winst wil je ook kijken naar formaten, resoluties, CDN en front-end code.
Wel een sterke eerste stap
Ideaal om zonder veel moeite direct je image-loading slimmer te maken.

Snelle winst of volledig geregeld

Zelf plakken is prima. Maar echte performance-winst zit meestal dieper.

Deze tool is een sterke eerste stap voor slim image loading. Wil je daarnaast ook betere formaten, minder render-blocking assets, nettere caching en een hogere PageSpeed-score? Dan is het vaak slimmer om de hele front-end even goed te laten nalopen.

Zelf installeren Laat mij dit doen

Installatie

Zo voeg je het toe aan je website

1. Open de code van je website of het custom code-gedeelte van je CMS.

2. Zoek onderaan de pagina naar </body>.

3. Plaats het script daar net boven.

4. Sla je pagina op en test daarna of afbeeldingen onder de vouw netjes lazy loaden.

Standaard script-tag
<script src="https://socials.fyi/imgfix/v2.js" defer></script>

Gebruik dit als je gewoon snel wilt starten, zonder extra instellingen.

Voor niet-technische gebruikers
Gebruik je een websitebouwer of CMS? Dan plaats je deze code meestal in:
  • • custom code / custom scripts
  • • footer code
  • • tracking / scripts / integraties
  • • vlak voor de sluitende </body> tag

Twijfel je waar dat zit? Dan kan ik dat ook gewoon voor je inregelen.

Optioneel

Meer controle met configuratie

Wil je iets meer controle, dan kun je vóór het script een configuratieblok plaatsen. Daarmee kun je bijvoorbeeld debug aanzetten, het gedrag iets agressiever maken of het aantal high-priority afbeeldingen beperken. 

<script>
window.IMGFIX_CONFIG = {
  mode: 'balanced',
  enableLazy: true,
  enableAsync: true,
  enablePriority: true,
  observeMutations: true,
  debug: false,
  rootSelector: 'body',
  maxHighPriority: 1
};
</script>
<script src="https://socials.fyi/imgfix/v2.js" defer></script>
enableLazy
Afbeeldingen onder de vouw later laden.
enableAsync
Afbeeldingen slimmer laten decoderen.
enablePriority
Belangrijke afbeeldingen voorrang geven.
observeMutations
Ook afbeeldingen meenemen die later in de pagina verschijnen.
debug
Laat in de console zien wat het script doet.
maxHighPriority
Hoeveel afbeeldingen bovenaan extra prioriteit mogen krijgen.

Uitsluiten

Afbeelding overslaan met data-imgfix-ignore

Wil je een specifieke afbeelding met rust laten, voeg dan data-imgfix-ignore toe aan die img-tag. Handig voor logo’s, hero-afbeeldingen, sliders of beelden die je al bewust zelf hebt ingesteld. 

<img src="/images/hero.jpg" alt="Hero afbeelding" data-imgfix-ignore>
Let op
Dit is alleen een voorbeeld van hoe die attribuut werkt. Gebruik hier je eigen afbeelding-pad en alt-tekst.

Snelle scenario’s

Wanneer gebruik je wat?

Gewoon snel starten
Gebruik alleen de standaard script-tag als je zonder gedoe lazy loading en async decoding wilt toevoegen.
Meer controle nodig
Gebruik het configuratieblok als je debug wilt aanzetten of het gedrag wilt finetunen.
Bepaalde afbeeldingen overslaan
Gebruik data-imgfix-ignore voor logo’s, hero’s, sliders of andere kritieke beelden.

Voor wie?

Handig voor websites die nét slimmer moeten laden

Landing pages
Vooral handig als je veel afbeeldingen of sfeerbeelden onder de vouw hebt.
MKB-sites en portfolio’s
Snelle winst zonder meteen je hele codebase open te trekken.
Webshops
Kan helpen bij productoverzichten en categoriepagina’s met veel beeldmateriaal.
CMS-sites
Ook handig als je via WordPress, Framer of iets soortgelijks niet overal even makkelijk bij kunt.

FAQ

Korte antwoorden op logische vragen

Werkt dit op elke website?
Niet op letterlijk elke setup, maar op veel gewone HTML-, PHP- en CMS-sites werkt dit prima als basislaag.
Maakt dit mijn afbeeldingen kleiner?
Niet automatisch. Daarvoor moet je ook kijken naar formaten zoals WebP of AVIF, compressie en responsive images.
Kan ik bepaalde afbeeldingen overslaan?
Ja, met data-imgfix-ignore kun je individuele afbeeldingen uitsluiten.
Kan dit PageSpeed helpen?
Vaak wel, vooral bij lazy loading en image-prioriteiten. Maar voor echte topscores moet je meestal breder optimaliseren.

Van script-tag naar echte optimalisatie

Wil je niet alleen sneller laden, maar je hele website technisch strakker hebben staan?

Deze tool helpt met image loading, maar echte winst zit vaak ook in afbeeldingsformaten, bestandsgrootte, caching, lazy loading, render-blocking assets en front-end ballast. Via T-Unlimited help ik bedrijven met websites die niet alleen sneller laden, maar ook netter aanvoelen en technisch beter staan ingericht.

Handig als je betere prestaties wilt zonder zelf te hoeven rommelen in code, hosting of front-end optimalisatie.

Laat mijn site optimaliseren Bekijk T-Unlimited