socialsfyi Zeg eens hallo

socialsfyi / Image Optimizer

Image Optimizer

Een klein script dat afbeeldingen slimmer laat laden. Eén regel toevoegen, en je kunt het meteen uitproberen.

Terug naar socials.fyi Installatie

Wat doet dit?

Afbeeldingen laden wanneer je ze nodig hebt

Afbeeldingen verderop op de pagina hoeven niet meteen geladen te worden. Dit script regelt dat, helpt de browser met het verwerken van afbeeldingen en geeft belangrijke beelden bovenaan voorrang.

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.

Goed om te weten

Handig script, geen toverstaf.

Het script verandert hoe afbeeldingen laden. Het maakt de bestanden zelf niet kleiner. Zijn je afbeeldingen erg zwaar? Kies dan ook een passend formaat en verklein ze voordat je ze uploadt.

Zelf installeren Vraag het even

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

Zelf de instellingen aanpassen

Wil je zelf bepalen hoe het script werkt? Zet dan dit configuratieblok vóór de script-tag. Je kunt bijvoorbeeld debugmeldingen aanzetten of het aantal afbeeldingen met hoge prioriteit aanpassen. 

<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.

Voorbeelden

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

Veelgestelde 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.

Loop je ergens tegenaan?

Kom je er niet uit? Stuur gerust een bericht.

Niet iedere website reageert hetzelfde. Werkt het script bij jou niet zoals verwacht, of twijfel je over een instelling? Laat even weten wat er gebeurt en op welke pagina. Dan kan ik met je meekijken.

Wil je verder met de techniek achter je website? Dat kan ook via T-Unlimited.

Stel je vraag Bekijk T-Unlimited