Tools om eenvoudig afbeeldingen te verkleinen

1 september 2022 | Alle berichten van Burnio, Burnio, Checklist, Handleiding, Veenendaal

Je kunt de meest mooie foto’s maken met de telefoons en camera’s tegenwoordig. Voor gebruik op een website is het nog steeds aan te raden niet te grote bestanden te gebruiken. Maar hoe verklein je te grote bestanden voordat je die naar een website upload? Je kunt op onze websites wel grote bestanden uploaden en die verkleinen we dan automatisch voor je, maar het bespaart je flink veel tijd als je vooraf al je afbeeldingen optimaliseert voor gebruik op het internet.

Bestandsformaten

In hoge resolutie fotograferen levert vaak hoge resolutie bestanden in het formaat .HEIC of .NEF op bijvoorbeeld. Vaak worden .png of .jpg bestanden gebruikt voor afbeeldingen op websites. Tegenwoordig is het voor een goede snelheid van je site nog beter om afbeeldingen in moderne resoluties toe te voegen, zoals .svg en .WebP. We geven je hier een paar tips voor online tools en programma’s / apps om bestanden te verkleinen, optimaliseren of comprimeren.

  • Afbeeldingen voor je site zouden eigenlijk niet groter moeten zijn dan 500kb.
  • Een afbeelding die over de volle breedte wordt gebruikt op je site hoeft niet breder te zijn dan 2500 pixels
  • Alle andere afbeeldingen op je site hoeven niet groter te zijn dan 1500 pixels breedte
  • Kies zoveel mogelijk voor WebP afbeeldingen

1. Squoosh – 1 afbeelding tegelijk

De Sqoosh online app is perfect boor het uitgebreid online verkleinen of optimaliseren van losse afbeeldingen.

Je sleept eenvoudig een afbeelding naar de pagina. Aan de rechterkant kun je de afbeelding aanpassen via ‘resize’ of ‘reduce palette’. Meestal gebruiken we alleen de functie resize.
Onder compress kun je kiezen voor het soort bestand wat het moet worden. Kies daar voor .MozJPEG of Browser JPEG of WebP.
Je kunt daarna nog de kwaliteit instellen. 75% is vaak al meer dan voldoende.

Je ziet rechts onderaan in het blauwe vlak meteen de procentuele besparing en de uiteindelijke bestandsgrootte. Via de blauwe knop met het downloadicoon kun je het gecomprimeerde bestand downloaden.

Klik links bovenaan op het rode vlak met het witte kruis en je kunt nog een afbeelding comprimeren.

2. ImageOptim – meerdere afbeeldingen

ImageOptim is een programma wat je op je Mac of Windows PC kunt installeren en geheel gratis.

Na installatie open je het programma. Je kunt een complete map aan bestanden naar dit programmavenster slepen. Zodra er een groen icoontjes voor komt te staan is de afbeelding geoptimaliseerd.

Let op: Dit programma maakt geen kopie van het oorspronkelijke bestand, maar vervangt het bestaande, grote bestand door de nieuwe, geoptimaliseerde versie.

3. Bulkresize – meerdere afbeeldingen

Bulkresize werkt in je browser en je kunt hier een hele serie afbeeldingen in slepen of via [Kies afbeeldingen] uploaden.

Je kunt in de tweede stap diverse instellingen aanpassen en vervolgens alle bestanden als een complete map weer opslaan. Kant en klaar voor gebruik op je website!

4. WebUtils Bulk image compress

WebUtils bulk image compress helpt je bij het comprimeren en converteren van afbeeldingen naar WebP, JPG, PNG, AVIF en JXL. Er is geen limiet, maar de snelheid valt wat tegen.

5. Compressor.io

Compressor.io geeft je de mogelijkheid om JPG, PNG, SVG, GIF en WebP bestanden te optimaliseren.

6. SVG OMG

SVGOMG is speciaal voor het verkleinen van SVG bestanden. Je kunt hiermee ook SVG bestanden bekijken als dat op je computer niet lukt.

7. Tinypng

Tinypng is een al wat oudere tool en kun je gebruiken voor het optimaliseren van WebP, PNG en JPG bestanden. Je kunt tot 20 bestanden of 5 Mb per keer uploaden.

Meer informatie over bestandsformaten en optimalisatie

Het maken en bewerken van een afbeelding is vakwerk. Maar met tooltjes kun je zelf natuurlijk een behoorlijk professioneel resultaat behalen. Professioneel maken wij afbeeldingen in PhotoShop of Adobe Illustrator. Voor het bewerken van foto’s gebruiken we Adobe Lightroom. Dus heb je geen tijd of zin in het optimaliseren van je afbeeldingen? Laat het dan aan ons over. Neem contact op via info@burnio.nl voor meer informatie.

Bij beeldbewerking horen ook de nodige vaktermen. Hieronder geven we een beknopte uitleg van een aantal veelvoorkomende termen.

Lossy of lossless

Lossy comprimeren betekent dat de afbeelding achteruit gaat in kwaliteit.

Lossless betekent dat de afbeelding geen kwaliteit gaat verliezen na comprimeren.

PNG bestanden

PNG formaten staan bekend om hun lossless manier van opslaan. Afbeeldingen behouden hun kwaliteit na het comprimeren. Dit zorgt voor strakke lijnen en duidelijke kleurcontrasten.

En PNG bestanden hebben de mogelijkheid van een transparante achtergrond.

  • Alle afbeeldingen waar bestandsgrootte niet zoveel verschil maakt.
  • Afbeeldingen met scherpe randen, veel kleur, maar weinig kleurverloop
  • Afbeeldingen met transparantie

JPG bestanden

JPEG of JPG is een lossy formaat. Dit betekent dat na het comprimeren er ook achteruitgang in kwaliteit is.

JPG bestanden zijn al een stuk kleiner dan PNG bestanden en daarom meer geschikt voor gebruik online. Denk ook aan het formaat van de foto in pixels.

De breedte is vaak veel te groot. Bestanden van meer dan 1920 pixels breed heb je voor web bijna nooit nodig. Voor drukwerk heb je hoge resolutie nodig, maar voor weergave op schermen is dat zeker niet noodzakelijk. En het scheelt je veel laadtijd en dus ook vindbaarheid als je afbeeldingen op de pagina ook de juiste breedte hebben. Als een afbeelding niet groter wordt weergegeven op de site dan 350 pixels, dan heeft het niet zoveel zin om een veel grotere afbeelding te uploaden.

  • Afbeeldingen met veel kleur en details (foto’s)
  • Afbeeldingen zonder scherpe randen en zonder transparantie

SVG en WebP

Dit zijn twee moderne bestandsformaten en zullen de komende jaren PNG en JPG verdringen als bestandsformaten (voor zover dat al niet het geval is).

SVG is niet direct een afbeelding, maar een bestandje (XML) wat beschrijft hoe de afbeelding eruit moet zien. SVG is voor vectorafbeeldingen en niet voor pixels. Bestanden kunnen dan oneindig geschaald worden zonder kwaliteitsverlies. En de bestanden zijn daarom ook een stuk kleiner dan JPG of PNG. En SVG ondersteunt de mogelijkheid om een afbeelding te voorzien van animatie. Je kent vast het GIF animatie bestandsformaat. SVG kan dat ook, maar dan scherper en in betere kwaliteit.
Nadeel is dat niet alle websites SVG ondersteunen of goed weergeven.

  • Afbeeldingen op vectorbasis (graphics, logo, cartoons)
  • Afbeeldingen met animatie

WebP bestaat pas sinds 2007 en is vooral door Google bedoeld om bestandsgroottes te verkleinen. Het ondersteunt zowel lossy als lossless comprimeren en kan een JPG bestand tot 34% en PNG tot wel 45% verkleinen. Intussen hebben de meeste internetbrowsers dit bestandsformaat omarmd. Ook Apple heeft besloten dit bestandsformaat te ondersteunen. Dus deze zul je de komende jaren steeds meer tegenkomen. Adobe PhotoShop 2022 kan intussen al WebP bestanden exporteren. Illustrator kan ze openen, maar nog niet exporteren.

  • Afbeeldingen die je normaal als JPG of PNG op de site zou plaatsen om de bestandsgrootte kleiner te maken.
  • Beste bestandsformaat op dit moment op je site

Lees meer over WebP bij Adobe >

Waarom Burnio? Kies voor kwaliteit en snelheid!