Ge­com­pri­meer­de af­beel­din­gen hebben een bijzonder positieve invloed op de laad­tij­den van websites. Maar hoe kunt u af­beel­din­gen zo com­pres­se­ren dat er zo min mogelijk verlies is, zonder merkbaar kwa­li­teits­ver­lies? En welke opties zijn er om dit te bereiken? In deze gids geven we u een duidelijk overzicht van tools voor het com­pri­me­ren van af­beel­din­gen.

Waarom zou ik mijn af­beel­din­gen com­pri­me­ren?

Te­gen­woor­dig zijn af­beel­din­gen en foto’s met een hoge resolutie heel gewoon. In de digitale fo­to­gra­fie nemen het aantal pixels en de be­stands­groot­te steeds verder toe. Of u nu af­beel­din­gen uploadt naar uw website of ze gewoon per e-mail verstuurt, het is altijd be­lang­rijk om de be­stands­groot­te zo klein mogelijk te houden. Vergeet niet: hoe kleiner het bestand, hoe minder tijd het kost om het over te zetten. Dit heeft twee voordelen:

  • Een snel laad­pro­ces verhoogt de te­vre­den­heid van bezoekers (vooral voor ge­brui­kers met mobiele in­ter­net­toe­gang).
  • Snelle laad­tij­den hebben een positief effect op de positie in zoek­ma­chi­nes

Het juiste ge­ge­vens­for­maat voor online af­beel­din­gen

Voordat u uw af­beel­din­gen online zet, moet u het be­stands­for­maat van de af­beel­din­gen con­tro­le­ren. Niet elk grafisch formaat is geschikt voor gebruik op internet. Hier zijn vijf formaten die u kunt gebruiken:

  • JPG/JPEG: JPG is een van de meest gebruikte af­beel­dings­for­ma­ten. Het kan 16,7 miljoen kleuren weergeven en biedt robuuste com­pres­sie­ver­hou­din­gen. JPG’s worden meestal gebruikt voor het opslaan van foto’s of foto-achtige af­beel­din­gen, met name die met veel ver­schil­len­de kleuren en sterke con­tras­ten.
  • PNG: Dit formaat kan tussen 256 (PNG8) en 16,7 miljoen (PNG24) ver­schil­len­de kleuren weergeven en kan online worden gebruikt. In te­gen­stel­ling tot JPG’s kan dit formaat worden ge­com­pri­meerd zonder dat dit ten koste gaat van de kwaliteit. PNG-bestanden zijn zeer geschikt voor het opslaan van af­beel­din­gen, logo’s en teksten. Af­beel­din­gen met weinig kleuren kunnen worden ge­com­pri­meerd tot bestanden die slechts een fractie van de oor­spron­ke­lij­ke grootte van de af­beel­ding hebben.
  • WebP: WebP is een modern af­beel­dings­for­maat dat door Google is ont­wik­keld om betere com­pres­sie te bieden met behoud van een hoge beeld­kwa­li­teit. Het on­der­steunt zowel com­pres­sie met verlies als com­pres­sie zonder verlies, wat re­sul­teert in kleinere be­stands­groot­tes in ver­ge­lij­king met JPEG en PNG. Dankzij ef­fi­ci­Ć«n­te al­go­rit­men zoals voor­spel­len­de codering kan WebP af­beel­din­gen tot 30% kleiner com­pri­me­ren dan JPEG bij ver­ge­lijk­ba­re kwaliteit. Het formaat on­der­steunt ook trans­pa­ran­tie (al­fa­ka­naal) en animaties, waardoor het een veel­zij­dig al­ter­na­tief is voor PNG en GIF.
  • SVG: SVG (Scalable Vector Graphics) is een op XML gebaseerd af­beel­dings­for­maat dat wordt gebruikt voor vec­to­r­af­beel­din­gen. Omdat het gebaseerd is op wis­kun­di­ge be­schrij­vin­gen van vormen en lijnen, blijft de beeld­kwa­li­teit intact, ongeacht de schaal. In te­gen­stel­ling tot op pixels ge­ba­seer­de formaten kunnen SVG-bestanden aan­zien­lijk in grootte worden verkleind door middel van een­vou­di­ge code-op­ti­ma­li­sa­ties en gzip-com­pres­sie, zonder dat dit ten koste gaat van de visuele kwaliteit. SVG is vooral ideaal voor logo’s, pic­to­gram­men en il­lu­stra­ties op het web.
  • GIF: GIF-bestanden zijn nog steeds vrij ge­brui­ke­lijk op het web, ook al kunnen ze slechts 256 kleuren weergeven. Dit komt vooral omdat het GIF-formaat korte animaties on­der­steunt die zijn gemaakt op basis van een reeks af­beel­din­gen, die vooral populair zijn op sociale media en soort­ge­lij­ke platforms.

Optie 1: Af­beel­din­gen online com­pri­me­ren

Als u af­beel­din­gen wilt com­pri­me­ren zonder speciale software te in­stal­le­ren, kunt u uw af­beel­din­gen ook eenvoudig online op­ti­ma­li­se­ren. Hiervoor zijn er ver­schil­len­de aan­bie­din­gen op het internet waarmee u ze gratis kunt com­pri­me­ren. De tools ver­schil­len meestal wat betreft de be­schik­ba­re be­stands­for­ma­ten en mogelijke com­pres­sie­gra­den, en ze hebben vaak be­per­kin­gen wat betreft het aantal com­pres­sies dat kan worden uit­ge­voerd. Enkele van de beste op­los­sin­gen vindt u in de volgende pa­ra­gra­fen.

Op­ti­mi­zil­la

Met de online tool Op­ti­mi­zil­la van Mediafox Marketing kunt u tot 20 af­beel­din­gen tegelijk uploaden en com­pri­me­ren. De af­beel­din­gen moeten in JPEG- of PNG-formaat zijn. De we­bap­pli­ca­tie maakt gebruik van een com­bi­na­tie van ver­schil­len­de com­pres­sie­al­go­rit­men, die worden ge­ken­merkt door een goede ver­hou­ding tussen com­pres­sie en beeld­kwa­li­teit. Met de schuif­balk kunt u de mate van com­pres­sie instellen voordat u de re­sul­ta­ten af­zon­der­lijk of samen als ZIP-bestand downloadt.

Afbeelding: Image compression with Optimizilla
Once you’ve selected the desired com­pres­si­on level, confirm it in Op­ti­mi­zil­la by clicking ā€˜Apply’. In this example, the image size is reduced by 22 percent.

Om u te helpen de best mogelijke in­stel­lin­gen te vinden, biedt Op­ti­mi­zil­la u mi­ni­a­tu­ren van het origineel en de ge­com­pri­meer­de versie. Bovendien geeft de tool de res­pec­tie­ve be­stands­groot­te aan. Alle geüploade af­beel­din­gen worden na een uur au­to­ma­tisch van de servers van de provider ver­wij­derd.

Voordelen Nadelen
āœ“ InĀ­stelĀ­baĀ­re comĀ­presĀ­sieĀ­verĀ­houĀ­ding āœ— Beperkt tot 20 comĀ­presĀ­sies tegelijk
āœ“ MiĀ­niĀ­aĀ­tuurĀ­weerĀ­gaĀ­ve van originele en bewerkte versie

TinyPNG

TinyPNG maakt – in te­gen­stel­ling tot wat de naam doet vermoeden – niet alleen het com­pri­me­ren van PNG-bestanden mogelijk, maar ook van JPEG- en WebP-bestanden. In de gratis stan­daard­ver­sie kunt u maximaal 20 af­beel­din­gen van deze drie formaten te­ge­lij­ker­tijd op­ti­ma­li­se­ren, waarbij de maximale be­stands­groot­te per af­beel­ding beperkt is tot 5 megabyte.

Afbeelding: Screenshot of the TinyPNG website
After com­pres­si­on, TinyPNG will display the new size of the image file(s) and the saved file size (as a per­cen­ta­ge).

De voormedia-tool heeft een vooraf ingesteld com­pres­sie­ni­veau dat niet kan worden aangepast, maar dat de af­beel­dings­groot­te met wel 80% ver­min­dert. Gebruik de functie slepen en neer­zet­ten om de gewenste foto’s naar het weer­ge­ge­ven gebied te ver­plaat­sen en download ver­vol­gens de re­sul­ta­ten in JPEG- of PNG-formaat of als ZIP-bestand. U kunt ook uploaden naar de cloud­op­slag­dienst Dropbox.

Voordelen Nadelen
āœ“ ReĀ­sulĀ­taĀ­ten kunnen worden geüpload naar Dropbox āœ— Beperking van 20 geĀ­lijkĀ­tijĀ­diĀ­ge comĀ­presĀ­sies en een beĀ­standsĀ­grootĀ­te van 5 megabyte (in de stanĀ­daarĀ­dediĀ­tie)
āœ— ComĀ­presĀ­sieĀ­niĀ­veau is niet inĀ­stelĀ­baar

iLoveIMG

iLoveIMG is een complete online suite met handige tools voor het bewerken van af­beel­din­gen. Het in Barcelona ge­ves­tig­de ont­wik­ke­lings­team biedt ap­pli­ca­ties waarmee af­beel­din­gen kunnen worden bij­ge­sne­den, geschaald, ge­con­ver­teerd en zelfs ge­com­pri­meerd. Voor dat laatste se­lec­teert u ā€˜Compress IMAGE’ en voegt u ver­vol­gens het gewenste beeld­ma­te­ri­aal toe met behulp van de drag-and-drop-functie of de be­stands­brow­ser. Mogelijke formaten zijn JPEG, PNG, SVG en GIF.

Afbeelding: Screenshot of image compression with iLoveIMG
After com­pres­si­on, you can download the images with a simple click.

Hoewel iLoveIMG slechts ƩƩn standaard com­pres­sie­mo­dus heeft, biedt de tool ver­schil­len­de ex­port­op­ties. Het is niet alleen mogelijk om de re­sul­ta­ten naar de lokale harde schijf te down­lo­a­den, maar ook om ze naar Google Drive en Dropbox te uploaden en een down­lo­ad­link naar de ge­com­pri­meer­de af­beel­din­gen door te sturen. Als u niet tevreden bent met het com­pres­sie­re­sul­taat, kunt u het eenvoudig ver­wij­de­ren door op het prul­len­bak­pic­to­gram te klikken.

Voordelen Nadelen
āœ“ ReĀ­sulĀ­taĀ­ten kunnen worden geüpload naar Google Drive en Dropbox āœ— Slechts ƩƩn comĀ­presĀ­sieĀ­moĀ­dus
āœ“ Er zijn extra tools beĀ­schikĀ­baar voor bijĀ­snijĀ­den, schalen en conĀ­verĀ­teĀ­ren āœ— Geen voorĀ­beeldĀ­funcĀ­tie

Optie 2: Af­beel­din­gen com­pri­me­ren met Photoshop

U kunt uw af­beel­din­gen ook com­pri­me­ren met pro­fes­si­o­ne­le beeld­ver­wer­kings­pro­gram­ma’s. Photoshop is on­ge­twij­feld de markt­lei­der op dit gebied. Naast functies voor creatief ontwerp en op­ti­ma­li­sa­tie van fo­to­ma­te­ri­aal biedt de Adobe-tool ver­schil­len­de opties voor het wijzigen van het af­beel­dings­for­maat en het aanpassen van de af­beel­dings­groot­te. De optie ā€˜Opslaan voor web’, die Adobe speciaal heeft ge­ĆÆm­ple­men­teerd voor het op­ti­ma­li­se­ren van foto’s en af­beel­din­gen voor websites, is bijzonder praktisch voor web­si­te­be­heer­ders. In deze modus kunnen niet alleen de be­lang­rij­ke web­for­ma­ten GIF, PNG, WebP en JPEG worden ge­com­pri­meerd, maar ook het ras­ter­af­beel­dings­for­maat WBMP (Wireless Bitmap), dat is ontworpen voor mobiele apparaten.

RjA067CaQhY.jpg Om deze video weer te geven, zijn cookies van derden vereist. U kunt uw cookie-in­stel­lin­gen hier inzien en wijzigen.

Zodra u een af­beel­ding bewerkt in de we­bop­ti­ma­li­sa­tie­mo­dus van Photoshop, wordt er een nieuw venster geopend waarin u niet alleen de opgegeven doel­for­ma­ten kunt instellen, maar ook de gewenste af­beel­ding voor uw website kunt op­ti­ma­li­se­ren wat betreft kleur­diep­te en grootte. In het voor­beeld­ven­ster ver­ge­lijkt de Adobe-tool de originele af­beel­ding met de doel­af­beel­ding (inclusief in­for­ma­tie over de absolute be­stands­groot­te), zodat u ge­mak­ke­lijk het verschil kunt zien telkens wanneer u de af­beel­ding com­pri­meert.

Voordelen Nadelen
āœ“ Live preview voor maximaal drie comĀ­presĀ­sieĀ­reĀ­sulĀ­taĀ­ten āœ— Vereist veel reĀ­kenĀ­kracht
āœ“ Diverse beeldĀ­beĀ­werĀ­kingsĀ­funcĀ­ties beĀ­schikĀ­baar āœ— Hoge kosten

Optie 3: Af­beel­din­gen com­pri­me­ren met freeware en open-sour­ce­pro­gram­ma’s

Met Photoshop is het heel ge­mak­ke­lijk om af­beel­din­gen te com­pri­me­ren met desktopap­pli­ca­ties. Deze bieden niet alleen standaard aan­zien­lijk meer functies, maar hebben ook een voordeel ten opzichte van webtools, omdat ze zonder in­ter­net­ver­bin­ding kunnen worden gebruikt. Als u de grootte van uw web­si­te­af­beel­din­gen wilt ver­min­de­ren, hoeft u echter niet per se een pre­mi­um­op­los­sing te gebruiken, zoals een product van Adobe of een ander betaald al­ter­na­tief. Als u een beperkt budget heeft of niet ge­ĆÆn­te­res­seerd bent in com­plexe­re be­wer­kings­func­ties, kan een freeware- of open-sour­ce­pro­gram­ma u helpen om eer­ste­klas op­ti­ma­li­sa­tie­re­sul­ta­ten te bereiken als het gaat om foto’s, af­beel­din­gen, enz. Maar welke van de vele gratis tools zijn eigenlijk aan te bevelen?

IrfanView

Sinds 1996 is de af­beel­dings­vie­wer IrfanView een van de po­pu­lair­ste freeware-op­los­sin­gen voor Windows-pc’s. Volgens de ont­wik­ke­laar wordt de tool gemiddeld ongeveer een miljoen keer per maand ge­down­load! Dit in­druk­wek­ken­de aantal is waar­schijn­lijk te danken aan het aan­trek­ke­lij­ke li­cen­tie­mo­del: het is volledig gratis voor per­soon­lijk gebruik, terwijl voor com­mer­ci­eel gebruik een licentie vereist is die slechts een bedrag van twee cijfers kost.

Afbeelding: Screenshot of IrfanView
If you save your image as a JPEG using the standard version of IrfanView (without plugins), you can easily adjust the quality using a slider.

Standaard on­der­steunt de af­beel­dings­vie­wer talrijke af­beel­dings­for­ma­ten, zoals PNG, JPEG, GIF, BMP, WebP en nog veel meer. Zodra een af­beel­ding is ingevoegd, kan deze op elk moment naar deze formaten worden ge­con­ver­teerd. Als het echter gaat om het com­pri­me­ren van af­beel­din­gen specifiek voor het web, wordt de functie ā€˜Opslaan voor web’ aan­be­vo­len, die via een plug-in kan worden toe­ge­voegd. Met deze extensie kunt u stapels af­beel­din­gen en foto’s op­ti­ma­li­se­ren, terwijl u met de schuif­re­ge­laar kunt aanpassen in hoeverre de oor­spron­ke­lij­ke beeld­kwa­li­teit behouden moet blijven. Een voor­beeld­af­beel­ding en de ge­com­pri­meer­de be­stands­groot­te geven u een idee van hoe het eind­re­sul­taat eruit zal zien.

Voordelen Nadelen
āœ“ StaĀ­pelĀ­verĀ­werĀ­king mogelijk āœ— ComĀ­presĀ­sieĀ­pluĀ­gin alleen beĀ­schikĀ­baar in het Engels
āœ“ VoorĀ­beeldĀ­funcĀ­tie en inĀ­stelĀ­baar comĀ­presĀ­sieĀ­niĀ­veau

GIMP

Als je op zoek bent naar al­ter­na­tie­ven voor Photoshop uit de open-source sector, kom je on­ver­mij­de­lijk GIMP (GNU Image Ma­ni­pu­la­ti­on Program) tegen. Het grafische programma voor Linux, macOS en Windows, dat in 1998 werd uit­ge­bracht, maakt al jaren indruk vanwege zijn veel­zij­di­ge functies, die sterk lijken op die van het com­mer­ci­Ć«­le model van Adobe. Het on­der­steunt nu meer dan dertig be­stands­for­ma­ten, waaronder GIF, WebP, JPEG en PNG, die cruciale formaten zijn voor het web. Dit betekent dat je je af­beel­dings­be­stan­den op elk moment met de GIMP-software naar een van deze web­for­ma­ten kunt con­ver­te­ren.

Afbeelding: Screenshot of GIMP
Exporting image as WebP with GIMP

Naast het con­ver­te­ren van af­beel­din­gen naar een kleiner be­stands­for­maat, biedt GIMP ook ge­a­van­ceer­de ex­port­op­ties waarmee u af­beel­din­gen eenvoudig kunt com­pri­me­ren. Gebruik de schuif­re­ge­laar om de mate van com­pres­sie in te stellen. De uit­ge­brei­de opties zijn ook praktisch: als u bij­voor­beeld de ei­gen­schap ā€˜Pro­gres­sief’ activeert, is het resultaat iets groter, maar worden de af­zon­der­lij­ke gebieden in een bepaalde volgorde geladen, zodat zelfs na een korte laadtijd een ruw beeld van de hele af­beel­ding wordt weer­ge­ge­ven.

Voordelen Nadelen
āœ“ Open source āœ— Voorbeeld toont alleen de beĀ­standsĀ­grootĀ­te van het resultaat
āœ“ ComĀ­presĀ­sieĀ­graad is inĀ­stelĀ­baar

PNG­Gaunt­let

Het free­wa­re­pro­gram­ma PNG­Gaunt­let biedt een grafische ge­brui­kers­in­ter­fa­ce voor de drie open-source tools PNGOUT, OptiPNG en DeflOpt, die allemaal zijn ont­wik­keld voor het op­ti­ma­li­se­ren en com­pri­me­ren van af­beel­din­gen in PNG-formaat. De ap­pli­ca­tie, die alleen be­schik­baar is voor Windows, is daarom de perfecte oplossing voor het maken van zeer kleine logo’s, af­beel­din­gen en letters in PNG-formaat voor uw web­pro­ject. Naast PNG zelf zijn ook JPEG, GIF, TIFF en BMP mogelijke uit­voer­for­ma­ten voor het com­pres­sie- of con­ver­sie­pro­ces.

Afbeelding: Screenshot of the PNGGauntlet interface
If you tick ā€˜Overwrite Original Files’, PNG­Gaunt­let au­to­ma­ti­cally replaces the original image with the newly created file.

Er zijn twee manieren om uw af­beel­din­gen te com­pri­me­ren met PNG­Gaunt­let. U kunt de stan­daard­in­stel­lin­gen openen door een of meer af­beel­din­gen in te voegen en ver­vol­gens op ā€˜Op­ti­ma­li­se­ren!’ te klikken, of u kunt eerst een in­di­vi­du­e­le in­stel­ling se­lec­te­ren door de in­stel­lin­gen van de drie ge­ĆÆm­ple­men­teer­de tools aan te passen door op de knop met dezelfde naam te klikken. Ongeacht welke manier u kiest, de freeware-tool toont u de nieuwe grootte van het/de af­beel­dings­be­stand(en) (in ver­ge­lij­king met het origineel) als een per­cen­ta­ge nadat het com­pri­me­ren is gelukt.

Voordelen Nadelen
āœ“ EenĀ­vouĀ­diĀ­ge staĀ­pelĀ­verĀ­werĀ­king āœ— Geen voorĀ­beeldĀ­moĀ­dus
āœ“ InĀ­diĀ­viĀ­duĀ­eĀ­le aanĀ­pasĀ­sing van comĀ­presĀ­sieĀ­niĀ­veau mogelijk āœ— Beperkt tot PNG als uitĀ­voerĀ­forĀ­maat
āœ— Laatste versie dateert uit 2012

Ima­ge­Op­tim

Als u de af­beel­din­gen en foto’s van uw web­pro­ject wilt com­pri­me­ren en een open-source tool voor macOS nodig hebt, raden we Ima­ge­Op­tim van Kornel Lesinski aan. Dit programma met GPL-licentie com­bi­neert ver­schil­len­de tools voor beeldop­ti­ma­li­sa­tie, zoals MozJPEG, pngquant en SVGO, waarmee u niet alleen onnodige EXIF-metadata kunt ver­wij­de­ren, maar ook ver­schil­len­de af­beel­dings­for­ma­ten zoals JPEG, SVG, GIF en PNG kunt com­pri­me­ren.

Afbeelding: Screenshot of ImageOptim
Once you’ve dragged your file into the tool, the com­pres­si­on process begins au­to­ma­ti­cally. A green tick indicates that the com­pres­si­on was suc­ces­sful.

Met behulp van de drag-and-drop-functie kunt u de gewenste af­beel­dings­be­stan­den in Ima­ge­Op­tim plaatsen, waar het programma ze on­mid­del­lijk zal com­pri­me­ren. U kunt echter op elk moment wij­zi­gin­gen aan­bren­gen in de in­stel­lin­gen en het com­pres­sie­ni­veau aanpassen en opties toevoegen of ver­wij­de­ren. Klik gewoon op de drie puntjes om door te gaan. Klik daarna op ā€˜Opnieuw’ om de conversie nogmaals uit te voeren.

Voordelen Nadelen
āœ“ Diverse comĀ­presĀ­sieĀ­funcĀ­ties āœ— Geen voorĀ­beeldĀ­moĀ­dus
āœ“ Open source
Ga naar hoofdmenu