{
 "id": 37022,
 "slug": "2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance",
 "url": "https://agents.willem.com/nl/posts/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/",
 "source_url": "https://willem.com/nl/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/",
 "language": "nl",
 "date": "2018-09-26",
 "published": "2018-09-26T00:00:00+02:00",
 "created": "2025-06-26T22:10:20.991000+02:00",
 "updated": "2025-07-22T16:42:50.825000+02:00",
 "title": "Afbeeldingen optimaliseren voor web en performance",
 "subtitle": "Verklein bestandsgrootte met jpegoptim, optipng, pngcrush en pngquant",
 "summary": "Een manier om je website sneller te maken is door hem kleiner te maken. Niet met kleine lettertypes, maar met minder bytes! Meer dan de helft van het gewicht van een gemiddelde website wordt veroorzaakt door afbeeldingen. Toch optimaliseren maar heel weinig mensen hun afbeeldingen voor het web en de prestaties, tijd om te ontdekken hoeveel bytes je kunt besparen!",
 "topics": [
  "cloud",
  "data",
  "howto",
  "networking",
  "programming",
  "server",
  "web",
  "webdesign",
  "work"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "translation": {
  "language": "en",
  "url": "https://agents.willem.com/en/posts/2018-09-26_optimising-images-for-the-web-and-performance/",
  "source_url": "https://willem.com/en/2018-09-26_optimising-images-for-the-web-and-performance/"
 },
 "image": "https://willem.com/global/images/c806bdb54964.webp",
 "image_width": 2560,
 "images": [
  {
   "url": "https://willem.com/global/images/ec02ee9672ec.webp",
   "description": "Gemiddeld webpagina-gewicht, verdeeld per bestandstype (HttpArchive, september 2018)",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/e94033e684f1.webp",
   "description": "Bitmap-afbeeldingen zijn als schaakborden, waarbij de pixels de vierkanten zijn",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-2.png"
  },
  {
   "url": "https://willem.com/global/images/3640b9482061.webp",
   "description": "Typische slide op pace-cme.org",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/4c08bf11faa4.webp",
   "description": "Test afbeelding, met effen kleuren, fotografische en tekstuele inhoud",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/19c8b9866186.webp",
   "description": "Kwaliteit inspecteren: links origineel, rechts pngquant",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-5.jpg"
  }
 ],
 "text": "Optimaliseer je website\nAls je je website optimaliseert, laadt deze sneller. Omdat veel mensen snelle websites prefereren, zijn zoekmachines zoals Google begonnen met het meten van de paginasnelheid om de ranking van je website in de zoekresultaten te bepalen.\nGemiddelde paginagrootte\nHoewel veel websitebouwers zich eerst richten op HTML en scripts, bestaat het grootste deel van het gewicht van een gemiddelde website uit afbeeldingen (Bron HttpArchive (https://httparchive.org/reports/page-weight) pagina gewicht september 2018).\nEen effectieve afbeeldingsoptimalisatie kan daarom ongelooflijke effecten hebben op de snelheid van je website.\nWat is afbeeldingsoptimalisatie?\nEen digitale afbeelding is als een schaakbord, een rechthoek met 8x8 zwarte en witte vierkanten. Als je het schaakbord ongecomprimeerd zou opslaan, zou je de kleur van elk vierkant afzonderlijk opschrijven (\"vierkant één is wit, vierkant twee is zwart, vierkant drie is wit, vierkant vijf is zwart, enz.\"). Het zou 64 regels kosten om het hele bord te beschrijven, hoewel nauwkeurig is dit niet erg efficiënt.\nAfbeeldingsoptimalisatie is het vinden van efficiëntere manieren om de kleuren van een afbeelding te beschrijven. Je zou het hele schaakbord in één regel tekst kunnen beschrijven: \"wissel af tussen zwart en wit, begin met wit\", of nog efficiënter: \"herhaal wit, zwart\". Bij digitale afbeeldingen wordt dit compressie genoemd, het algoritme probeert reeksen van terugkerende kleuren te identificeren.\nEr zijn verschillende algoritmen die allemaal hun sterke en zwakke punten hebben. Sommige presteren beter op foto's (met miljoenen kleuren), terwijl anderen beter presteren met afbeeldingen met minder verschillende kleuren (zoals een PowerPoint-dia). Het kiezen van het juiste algoritme is je eerste prestatieboost.\nVeelvoorkomende afbeeldingsformaten\n- JPG is een veelgebruikt afbeeldingsbestandstype met effectieve compressie voor afbeeldingen met veel verschillende kleuren, zoals foto's. Dit afbeeldingsformaat bestaat al sinds 1992 en wordt op bijna elk apparaat ondersteund.\n- GIF is een ander oud afbeeldingsbestandstype dat in 1987 werd ontwikkeld. Het is populair omdat het animatie ondersteunt. Technisch gezien is het erg beperkt tot slechts 256 verschillende kleuren per afbeelding.\n- PNG werd in 1994 ontwikkeld als vervanging voor GIF vanwege controverse over het compressie-algoritme van de GIF. Het is populair omdat bijna elk apparaat het ondersteunt en PNG ondersteuning biedt voor miljoenen kleuren, inclusief transparantie. Het maakt verliesloze compressie mogelijk, waardoor scherpe tekst en lijnen worden gegarandeerd, waardoor dit formaat perfect geschikt is voor grafieken en logo's.\nOnlangs werden nieuwe afbeeldingsformaten geïntroduceerd door Google (webP) en Apple (HEIF), die een nog betere compressie bieden in vergelijking met JPG, GIF en PNG. Maar deze formaten moeten nog breed worden toegepast.\nHet juiste afbeeldingsformaat kiezen\nWelk formaat het beste is voor je afbeelding, hangt af van de daadwerkelijke inhoud van je afbeelding. Er is geen universele regel die het beste formaat voor een bepaalde afbeelding bepaalt. Je kunt het beste zelf proberen, kijken wat er met de bestandsgrootte gebeurt als je je afbeelding in verschillende formaten opslaat. Veel desktopprogramma's bieden de mogelijkheid om een formaat te kiezen wanneer je \"Opslaan als\" selecteert.\nJe kunt beginnen met JPG voor foto's en PNG voor afbeeldingen met minder kleuren, zoals een logo, afbeelding of PowerPoint-dia. Formaten zoals JPG bieden verschillende instellingen voor compressiekwaliteit die van invloed zijn op de beeldkwaliteit en de bestandsgrootte. Een lagere kwaliteitsinstelling zal de beeldkwaliteit verminderen ten gunste van een kleiner bestand, je moet proberen een goede balans te vinden tussen kwaliteit en grootte.\nLossy en Lossless compressie\nCompressie-algoritmen die kwaliteit inruilen voor bestandsgrootte worden lossy compressie-algoritmen genoemd. Als alternatief worden algoritmen die de oorspronkelijke beeldkwaliteit behouden, lossless compressie-algoritmen genoemd.\nHoe afbeeldingen te optimaliseren\nZodra je je JPG- of PNG-afbeelding hebt, kun je deze optimaliseren door de juiste instellingen voor het compressie-algoritme te selecteren. Maak je geen zorgen, je hoeft dit niet handmatig te doen: je kunt geautomatiseerde optimalisatiesoftware gebruiken om de optimale compressie-instellingen voor een bepaalde afbeelding te vinden.\nJPG-afbeeldingen optimaliseren\nAls je Photoshop gebruikt, kun je de ingebouwde functie Opslaan voor web gebruiken om een redelijk geoptimaliseerde JPG-afbeelding te krijgen.\nAls alternatief kun je een commandoregelprogramma zoals jpegoptim gebruiken. Deze tool verkleint JPG-bestanden door de interne Huffman-tabellen te optimaliseren - waardoor de prestaties van het compressie-algoritme effectief worden verbeterd. Gemiddeld kun je een verbetering van 10-15% verwachten zonder verlies van beeldkwaliteit.\nEen andere manier om JPG-afbeeldingen te optimaliseren is door een online optimizer te gebruiken, zoals TinyJPG (https://tinyjpg.com) of ImageOptim (https://imageoptim.com/api).\nAls je WordPress gebruikt, kun je overwegen een plugin te gebruiken om afbeeldingsoptimalisatie voor je te doen, zoals Imagify van xtremerain (https://www.xtremerain.com/imagify-advanced-optimization/).\nPNG-afbeeldingen optimaliseren\nPNG-bestanden kunnen worden geoptimaliseerd met Photoshop met behulp van de functie Opslaan voor web. Om je PNG-bestanden nog beter te optimaliseren, kun je een gespecialiseerde app gebruiken, zoals ImageAlpha (https://pngmini.com) voor Mac of PNGGauntlet (https://pnggauntlet.com) voor Windows.\nEr zijn online optimizers beschikbaar voor PNG-bestanden, zoals TinyPNG (https://tinypng.com) en Compressor.io (https://compressor.io).\nAls alternatief kun je commandoregelprogramma's zoals optipng, pngcrush of pngquant gebruiken. Het is de moeite waard om deze PNG-tools wat dieper te bekijken.\nOptipng vs pngcrush vs pngquant testen\nVoor mijn werk als webontwikkelaar integreer ik afbeeldingsoptimalisatie in contentmanagementsystemen, waardoor het voor mijn klanten gemakkelijker wordt om hun afbeeldingen automatisch te optimaliseren. Naarmate het aantal klanten aanzienlijk is gegroeid, liep ik tegen prestatieproblemen aan.\nOm meer prestaties te vinden, besloot ik optipng, pngcrush en pngquant te testen. Ik hoopte een goede afbeeldingsoptimalisatie te vinden met minder verwerkingskracht van de server. Dit zou de prestaties voor mijn klanten verbeteren.\nPACE-CME\nEen dergelijke klant is PACE-CME, een website (https://pace-cme.org) met bronnen voor cardiovasculaire educatie voor artsen. Deze website bevat duizenden PowerPoint-dia's opgeslagen als PNG-bestanden.\nOm de prestaties te testen, gebruikte ik een speciale testafbeelding die groter en zwaarder is dan een typische PowerPoint-dia. Deze testafbeelding is een afbeelding met hoge resolutie met gemengde inhoud, bestaande uit gedeeltelijk foto's, tekst en effen kleuren.\nMethode\nIk heb tests uitgevoerd op een Quad-core Intel XEON-server met 8 GB RAM. Per PNG-optimalisatietool heb ik zowel de meest extreme instellingen gebruikt (om te zien wat het met de bestandsgrootte kon doen) als de standaardinstelling (om te zien hoeveel sneller de standaardinstellingen zijn en hoe hun output zich verhoudt tot de beste compressie-instellingen).\nResultaten\n- originele testafbeelding 2897KB\n- optipng extreem (-o7): 2510KB in 2 minuten 36 seconden / standaard: 2536KB in 4,9 seconden\n- pngcrush extreem (-brute): 2510KB in 1 minuut 42 seconden / standaard: 2531KB in 9,2 seconden\n- pngquant extreem (-s 1): 744KB in 5,2 seconden / standaard: 746KB in 4,2 seconden\nDe prestaties van pngquant zijn verbluffend, het is veel sneller en levert tegelijkertijd een veel kleinere bestandsgrootte. Dit is echter geen magie, aangezien het een ander, lossy compressie-algoritme gebruikt. Dit betekent dat afbeeldingen die via pngquant zijn geoptimaliseerd, een beetje beeldkwaliteit verliezen. Ik heb ze van dichtbij vergeleken en kon het verschil niet zien.\nConclusie\nHet optimaliseren van afbeeldingen voor web en prestaties is erg belangrijk. Zoals mijn tests hebben aangetoond, kan het kiezen van het juiste algoritme het verschil maken.\nVoor mij betekende dit het kiezen van pngquant, maar jouw beslissing kan anders zijn, afhankelijk van het type afbeeldingen dat je wilt optimaliseren.\nDe belangrijkste les van deze blogpost is om aandacht te besteden aan afbeeldingen. Je website zal veel sneller zijn - en wie houdt er niet van een snelle website?",
 "word_count": 1175,
 "markdown_url": "https://agents.willem.com/nl/posts/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/post.md"
}