--- title: "Ôfbyldings optimalisearje foar it web en prestaasje" date: 2018-09-26 language: fy topics: ["cloud", "data", "howto", "networking", "programming", "server", "web", "webdesign", "work"] source_url: https://willem.com/fy/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/ --- # Ôfbyldings optimalisearje foar it web en prestaasje *Bestânsgrutte ferkleine mei jpegoptim, optipng, pngcrush en pngquant* > 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! ## Optimalisearje dyn website As 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. ### Gemiddelde sidegrutte Hoewol 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). ![Gemiddeld gewicht fan in webside, ferdield nei soart bestân (HttpArchive, septimber 2018)](https://willem.com/global/images/ec02ee9672ec.webp) In effektive optimalisaasje fan ôfbyldings kin dus ûnbidich grutte gefolgen hawwe foar de snelheid fan dyn website. ## Wat is ôfbyldingsoptimalisaasje? In 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. ![Bitmap-ôfbyldings binne as skaakboerden, wêrby't de piksels de fjilden binne](https://willem.com/global/images/e94033e684f1.webp) Ô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. Der 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. ## Gewoane ôfbyldingsformaten - **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. - **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. - **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. Koartlyn 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. ## It goede ôfbyldingsformaat kieze Wat 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. Do 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. ### Ferliesmakkende en ferliesfrije kompresje Kompresjealgoritmen 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. ## Hoe optimalisearje do ôfbyldings As 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. ### JPG-ôfbyldings optimalisearje As do Photoshop brûkst, kinst de ynboude funksje **Save for the web** brûke foar in redelik optimalisearre JPG-ôfbylding. Of 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. In oare manier om JPG-ôfbyldings te optimalisearjen is in online optimalisaasjetsjinst brûke, lykas TinyJPG (https://tinyjpg.com) of ImageOptim (https://imageoptim.com/api). As 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/). ### PNG-ôfbyldings optimalisearje PNG-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. Der binne online optimalisaasjetsjinsten foar PNG-bestannen, lykas TinyPNG (https://tinypng.com) en Compressor.io (https://compressor.io). Of 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. ## optipng, pngcrush en pngquant teste Foar 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. Om 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. ### PACE-CME Ien 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. ![Typyske dia op pace-cme.org](https://willem.com/global/images/3640b9482061.webp) Om 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. ![Testôfbylding mei effen kleuren, fotografyske en tekstuele ynhâld](https://willem.com/global/images/4c08bf11faa4.webp) ### Metoade Ik 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). ### Resultaten - **orizjineel** testôfbylding 2897KB - **optipng** ekstreem (-o7): 2510KB yn 2 minuten 36 sekonden / standert: 2536KB yn 4,9 sekonden - **pngcrush** ekstreem (-brute): 2510KB yn 1 minút 42 sekonden / standert: 2531KB yn 9,2 sekonden - **pngquant** ekstreem (-s 1): 744KB yn 5,2 sekonden / standert: 746KB yn 4,2 sekonden De 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. ![Kwaliteit kontrolearje: links it orizjineel, rjochts pngquant](https://willem.com/global/images/19c8b9866186.webp) ## Konklúzje Ô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. Foar my betsjutte dat pngquant kieze, mar dyn beslút kin oars wêze, ôfhinklik fan it soarte ôfbyldings dat do optimalisearje wolst. De 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?