OptiPNG: ook de smalbandsurfer telt

Tijdens het ontwerpen van TheHotSeat.be werd al snel duidelijk dat het een website zou worden die veel afbeeldingen bevat. Niet meteen afbeeldingen in de zin van echte foto’s, maar veeleer grafische elementen die het ontwerp een meerwaarde geven. Denk maar aan het subtiele motiefje dat in de bovenste donkere balk te zien is, de schaduw in het groene vlak hierboven of de lijntjes achter deze tekst.

Het nadeel van afbeeldingen

Afbeeldingen kunnen een webpagina een stuk aantrekkelijker maken, maar ze moeten natuurlijk wel telkens gedownload worden door de bezoeker zodat die ze op zijn scherm kan zien. En daar wringt het schoentje een beetje: de bestandsgrootte van afbeeldingen is doorgaans een stuk groter dan die van gewone html-tekst. Dat zorgt voor langere downloadtijden voor de bezoeker.

Een breedbandsurfer zal daar waarschijnlijk niets van merken, maar bij hen die via tragere verbindingen het web doorkruisen, kan zo’n afbeeldingsintensieve site nogal wat frustratie teweegbrengen. Stel je maar eens voor dat je telkens 15 seconden moet wachten vooraleer je een pagina op je favoriete website te zien krijgt…

Afbeeldingen optimaliseren met Photoshop

Afbeeldingen optimaliseren is dus de boodschap: hierbij ga ik op zoek naar de beste verhouding tussen een kleine bestandsgrootte en een hoge afbeeldingskwaliteit. Door de afbeeldingen te comprimeren via diverse compressiemethodes kan je vaak de bestandsgrootte van een beeldje serieus verminderen, zonder dat dat de kwaliteit van de afbeelding erbarmelijk hoeft te maken.

Het dialoogvenster ‘Opslaan voor web & apparaten’ (Eng: ‘Save for web & devices’) in Photoshop helpt je hierbij grandioos: je kan verschillende bestandstypes overlopen (jpg, gif of png) en meteen zien welk type de beste verhouding oplevert tussen bestandsgrootte en afbeeldingskwaliteit. Maar als je kiest voor png-24 als bestandstype, dan zijn er weinig extra opties die je zelf kan instellen om tot een nog kleiner beeldje te komen. Photoshop maakt heel gewoon een png-bestand van je afbeelding en dat is te nemen of te laten.

Verwelkom OptiPNG

Omdat op het web elke byte telt, ben ik op zoek gegaan naar een manier om de door Photoshop gegenereerde png-bestanden nog verder te comprimeren. En daarbij stootte ik op het fantastische OptiPNG. Het is een open-source command line programma, beschikbaar voor Mac én PC, dat automatisch tientallen png-compressiemethodes uittest op je beeldje en dan uiteindelijk de methode die het kleinste aantal bytes oplevert zal toepassen.

De resultaten met de png-afbeeldingen voor deze website waren verbazingwekkend. In de meeste gevallen genereerde OptiPNG een nieuw png-beeldje dat gemiddeld zo’n 10% kleiner was in bestandsgrootte. En de compressie is ‘lossless’, wat wil zeggen dat er geen zichtbaar kwaliteitsverlies optreedt. Nu lijkt 10% misschien niet zoveel, maar als er 20 afbeeldingen op één webpagina voorkomen, dan scheelt dat natuurlijk wél een slok op een borrel.

De smalbandsurfer zal je er dankbaar voor zijn. En daar draait het natuurlijk om, want een goede website moet altijd toegankelijk, duidelijk en prettig zijn voor zoveel mogelijk gebruikers.

Hoe je OptiPNG kan installeren en gebruiken, komt aan bod in een volgende blogpost.  Heb je zelf ervaring met OptiPNG of ander png-optimalisatiegereedschap? Laat dan zeker iets weten in een reactie op deze blogpost.

Categorieën: Ontwerp, Opinies, Photoshop,