{
 "id": 37022,
 "slug": "2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje",
 "url": "https://agents.willem.com/fy/posts/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/",
 "source_url": "https://willem.com/fy/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/",
 "language": "fy",
 "date": "2018-09-26",
 "published": "2018-09-26T00:00:00+02:00",
 "created": "2025-06-26T22:10:20.991000+02:00",
 "updated": "2026-10-20T09:19:12.822000+02:00",
 "title": "Ôfbyldings optimalisearje foar it web en prestaasje",
 "subtitle": "Bestânsgrutte ferkleine mei jpegoptim, optipng, pngcrush en pngquant",
 "summary": "Ien manier om dyn website fluggere te meitsjen is him lytser te meitsjen. Net mei lytse letters, mar mei minder bytes! Mear as de helte fan it gewicht fan in gemiddelde website komt fan ôfbyldings. Dochs optimalisearje tige min minsken har ôfbyldings foar it web en de prestaasje, tiid om út te finen hoefolle bytes do besparje kinst!",
 "topics": [
  "cloud",
  "data",
  "howto",
  "networking",
  "programming",
  "server",
  "web",
  "webdesign",
  "work"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary and the Fryske Akademy Foarkarswurdlist (hunspell fy_NL); official 2015 spelling",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "fy",
  "source_language": "en"
 },
 "translations": [
  {
   "language": "en",
   "title": "Optimising images for the web and performance",
   "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/"
  },
  {
   "language": "nl",
   "title": "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": "de",
   "title": "Bilder für Web und Performance optimieren",
   "url": "https://agents.willem.com/de/posts/2018-09-26_bilder-fur-web-und-performance-optimieren/",
   "source_url": "https://willem.com/de/2018-09-26_bilder-fur-web-und-performance-optimieren/"
  },
  {
   "language": "es",
   "title": "Optimización de imágenes para la web y el rendimiento",
   "url": "https://agents.willem.com/es/posts/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/",
   "source_url": "https://willem.com/es/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/"
  },
  {
   "language": "fr",
   "title": "Optimiser les images pour le web et les performances",
   "url": "https://agents.willem.com/fr/posts/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/",
   "source_url": "https://willem.com/fr/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/"
  },
  {
   "language": "it",
   "title": "Ottimizzare le immagini per il web e le prestazioni",
   "url": "https://agents.willem.com/it/posts/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/",
   "source_url": "https://willem.com/it/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/"
  },
  {
   "language": "pt",
   "title": "Otimizar imagens para a web e para o desempenho",
   "url": "https://agents.willem.com/pt/posts/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/",
   "source_url": "https://willem.com/pt/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/"
  },
  {
   "language": "pap",
   "title": "Optimalisá imagen pa web i rendimentu",
   "url": "https://agents.willem.com/pap/posts/2018-09-26_optimalisa-imagen-pa-web-i-rendimentu/",
   "source_url": "https://willem.com/pap/2018-09-26_optimalisa-imagen-pa-web-i-rendimentu/"
  }
 ],
 "image": "https://willem.com/global/images/c806bdb54964.webp",
 "image_width": 2560,
 "images": [
  {
   "url": "https://willem.com/global/images/ec02ee9672ec.webp",
   "description": "Gemiddeld gewicht fan in webside, ferdield nei soart bestân (HttpArchive, septimber 2018)",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/e94033e684f1.webp",
   "description": "Bitmap-ôfbyldings binne as skaakboerden, wêrby't de piksels de fjilden binne",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-2.png"
  },
  {
   "url": "https://willem.com/global/images/3640b9482061.webp",
   "description": "Typyske dia op pace-cme.org",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/4c08bf11faa4.webp",
   "description": "Testôfbylding mei effen kleuren, fotografyske en tekstuele ynhâld",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/19c8b9866186.webp",
   "description": "Kwaliteit kontrolearje: links it orizjineel, rjochts pngquant",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-5.jpg"
  }
 ],
 "text": "Optimalisearje dyn website\nAs do dyn website optimalisearrest, laadt er fluggere. Om't in soad minsken fluch websites leaver hawwe, binne sykmasines lykas Google begûn de sidesnelheid te mjitten om de rangoarder fan dyn website yn de sykresultaten te bepalen.\nGemiddelde sidegrutte\nHoewol in soad webbouwers earst op HTML en skripts rjochtsje, bestiet it grutste part fan it gewicht fan in gemiddelde website út ôfbyldings (boarne HttpArchive (https://httparchive.org/reports/page-weight) page weight septimber 2018).\nIn effektive optimalisaasje fan ôfbyldings kin dus ûnbidich grutte gefolgen hawwe foar de snelheid fan dyn website.\nWat is ôfbyldingsoptimalisaasje?\nIn digitale ôfbylding is as in skaakboerd, in rjochthoek mei 8x8 swarte en wite fjilden. As do it skaakboerd net komprimearre opslaan soest, soest de kleur fan elk fjild apart opskriuwe (\"fjild ien is wyt, fjild twa is swart, fjild trije is wyt, fjild fiif is swart, ensfh\"). Dan hast 64 rigels nedich om it hiele boerd te beskriuwen, krekt, mar net tige effisjint.\nÔfbyldingsoptimalisaasje is it sykjen nei effisjintere wizen om de kleuren fan in ôfbylding te beskriuwen. Do koest it hiele skaakboerd yn ien rigel tekst beskriuwe: \"wikselje tusken swart en wyt, begjin mei wyt\", of noch effisjinter: \"werhelje wyt, swart\". By digitale ôfbyldings hjit dit kompresje, it algoritme besiket rigels fan weromkearende kleuren te werkennen.\nDer binne ferskillende algoritmen dy't allegearre har sterke en swakke punten hawwe. Guon prestearje better op foto's (mei miljoenen kleuren), wylst oaren better prestearje by ôfbyldings mei folle minder ferskillende kleuren (lykas in PowerPoint-dia). De goede kar fan algoritme is dyn earste prestaasjeboost.\nGewoane ôfbyldingsformaten\n- JPG is in tige gewoan ôfbyldingsbestânstype mei effektive kompresje foar ôfbyldings mei in soad ferskillende kleuren, lykas foto's. Dit formaat bestiet al sûnt 1992 en wurdt op hast elk apparaat stipe.\n- GIF is in oar âld ôfbyldingsbestânstype dat yn 1987 ûntwikkele waard. It is populêr om't it animaasje stipet. Technysk is it tige beheind ta mar 256 ferskillende kleuren per ôfbylding.\n- PNG waard yn 1994 ûntwikkele as ferfanging fan GIF fanwegen kontroverse oer it kompresjealgoritme fan GIF. It is populêr om't hast elk apparaat it stipet en PNG miljoenen kleuren stipet, ynklusyf transparânsje. It lit ferliesfrije kompresje ta, wat skerpe tekst en rigels garandearret, en makket dit formaat ideaal foar grafiken en logo's.\nKoartlyn binne der nije ôfbyldingsformaten yntrodusearre troch Google (webP) en Apple (HEIF), dy't noch bettere kompresje biede as JPG, GIF en PNG. Mar dizze formaten binne noch net breed oernommen.\nIt goede ôfbyldingsformaat kieze\nWat foar formaat it bêste is hinget ôf fan de eigentlike ynhâld fan dyn ôfbylding. Der is gjin universele regel dy't it bêste formaat foar in bepaalde ôfbylding bepaalt. Do kinst it bêste sels besykje en sjen wat der mei de bestânsgrutte bart as do dyn ôfbylding yn ferskillende formaten opslachst. In soad buroblêdprogramma's biede de opsje om in formaat te kiezen as do \"Bewarje as\" kiest.\nDo kinst begjinne mei JPG foar foto's en PNG foar ôfbyldings mei minder kleuren, lykas in logo, grafyk of PowerPoint-dia. Formaten lykas JPG hawwe ferskillende ynstellingen foar kompresjekwaliteit dy't ynfloed hawwe op de ôfbyldingskwaliteit en de bestânsgrutte. In legere kwaliteitsynstelling ferleget de ôfbyldingskwaliteit ta foardiel fan in lytser bestân, do moatst besykje in goede balâns te finen tusken kwaliteit en grutte.\nFerliesmakkende en ferliesfrije kompresje\nKompresjealgoritmen dy't kwaliteit ynruilje foar bestânsgrutte hjitte ferliesmakkende kompresje-algoritmen. Algoritmen dy't de oarspronklike ôfbyldingskwaliteit bewarje, hjitte op har beurt ferliesfrije kompresje-algoritmen.\nHoe optimalisearje do ôfbyldings\nAs do dyn JPG- of PNG-ôfbylding ienris hast, kinst him optimalisearje troch de goede ynstellingen foar it kompresjealgoritme te kiezen. Meitsje dy gjin soargen, do hoechst dit net hânmjittich te dwaan: do kinst automatyske optimalisaasjesoftware brûke om de optimale kompresje-ynstellingen foar in bepaalde ôfbylding te finen.\nJPG-ôfbyldings optimalisearje\nAs do Photoshop brûkst, kinst de ynboude funksje Save for the web brûke foar in redelik optimalisearre JPG-ôfbylding.\nOf do kinst in kommandorigelprogramma lykas jpegoptim brûke. Dit ark ferkleint JPG-bestannen troch de ynterne Huffman-tabellen te optimalisearjen, wat de prestaasje fan it kompresjealgoritme effektyf ferbetteret. Gemiddeld kinst in ferbettering ferwachtsje fan 10-15% sûnder ferlies fan ôfbyldingskwaliteit.\nIn oare manier om JPG-ôfbyldings te optimalisearjen is in online optimalisaasjetsjinst brûke, lykas TinyJPG (https://tinyjpg.com) of ImageOptim (https://imageoptim.com/api).\nAs do WordPress brûkst, kinst oerweagje in plugin te brûken dy't de ôfbyldingsoptimalisaasje foar dy docht, lykas Imagify fan xtremerain (https://www.xtremerain.com/imagify-advanced-optimization/).\nPNG-ôfbyldings optimalisearje\nPNG-bestannen kinne optimalisearre wurde mei Photoshop mei de funksje Save for the web. Om dyn PNG-bestannen noch better te optimalisearjen kinst in spesjalisearre app brûke, lykas ImageAlpha (https://pngmini.com) foar Mac of PNGGauntlet (https://pnggauntlet.com) foar Windows.\nDer binne online optimalisaasjetsjinsten foar PNG-bestannen, lykas TinyPNG (https://tinypng.com) en Compressor.io (https://compressor.io).\nOf do kinst kommandorigelprogramma's brûke lykas optipng, pngcrush of pngquant. It is de muoite wurdich om wat djipper yn dizze PNG-arkjes te dûken.\noptipng, pngcrush en pngquant teste\nFoar myn wurk as webûntwikkelder yntegrearje ik ôfbyldingsoptimalisaasje yn contentmanagementsystemen, sadat myn klanten har ôfbyldings makliker automatysk optimalisearje kinne. Doe't it tal klanten sterk groeide, rûn ik tsjin prestaasjeproblemen oan.\nOm mear prestaasje te finen besleat ik optipng, pngcrush en pngquant te testen. Ik hope goede ôfbyldingsoptimalisaasje te finen mei minder rekkenkrêft fan de server. Dat soe de prestaasje foar myn klanten ferbetterje.\nPACE-CME\nIen fan dy klanten is PACE-CME, in website (https://pace-cme.org) mei boarnen foar kardiovaskulêr ûnderwiis foar dokters. Dizze website befettet tûzenen PowerPoint-dia's dy't as PNG-bestannen opslein binne.\nOm de prestaasje te testen brûkte ik in spesjale testôfbylding dy't grutter en swierder is as in gewoane PowerPoint-dia. Dizze testôfbylding is in ôfbylding mei hege resolúsje en mingde ynhâld, dy't foar in part út foto's, tekst en effen kleuren bestiet.\nMetoade\nIk haw tests dien op in Quad-core Intel XEON-server mei 8GB RAM. Per PNG-optimalisaasjeark haw ik sawol de meast ekstreme ynstellingen brûkt (om te sjen wat it mei de bestânsgrutte dwaan kin), as de standert-ynstelling (om te sjen hoefolle fluggere de standertynstellingen binne en hoe't har útkomst him ferhâldt ta de bêste kompresje-ynstellingen).\nResultaten\n- orizjineel testôfbylding 2897KB\n- optipng ekstreem (-o7): 2510KB yn 2 minuten 36 sekonden / standert: 2536KB yn 4,9 sekonden\n- pngcrush ekstreem (-brute): 2510KB yn 1 minút 42 sekonden / standert: 2531KB yn 9,2 sekonden\n- pngquant ekstreem (-s 1): 744KB yn 5,2 sekonden / standert: 746KB yn 4,2 sekonden\nDe prestaasje fan pngquant is geweldich, it is folle fluggere en leveret ek noch folle lytsere bestannen. Dit is gjin magy, want it brûkt in oar, ferliesmakkend kompresjealgoritme. Dat betsjut dat ôfbyldings dy't mei pngquant optimalisearre binne in bytsje ôfbyldingskwaliteit ferlieze. Ik haw se goed fergelike en seach gjin ferskil.\nKonklúzje\nÔfbyldings optimalisearje foar it web en de prestaasje is echt wichtich. Lykas myn tests oantoand hawwe, kin de goede kar fan algoritme it ferskil meitsje.\nFoar my betsjutte dat pngquant kieze, mar dyn beslút kin oars wêze, ôfhinklik fan it soarte ôfbyldings dat do optimalisearje wolst.\nDe kaai om út dit berjocht mei te nimmen is dus: soargje foar dyn ôfbyldings. Dyn website wurdt folle fluggere, en wa hâldt der net fan in flugge website?",
 "word_count": 1143,
 "markdown_url": "https://agents.willem.com/fy/posts/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/post.md"
}