Hoe kun je foto’s verkleinen voor een website?

13 feb 2022 | fotografie, webdesign

jochem oomen | hoe foto's verkleinen voor website | Foto: Sander de Wilde

Als je foto’s in hoge resolutie op een website zet, dan kan dat voor de bezoeker niet zo fijn zijn. Dan duurt het namelijk langer voor je website laadt en zijn de mensen zo weg. Daarom is het belangrijk om je foto’s te verkleinen, maar ook om deze haarscherp te laten zijn. In dit artikel vind je een antwoord op deze vraag: hoe kun je foto’s verkleinen voor een website?

Als webdesigner en fotograaf krijg ik hier vaak mee te maken. Regelmatig moet ik een heel aantal foto’s verkleinen voor online gebruik en deze ook superscherp laten zijn. Dit is echt nodig, want een foto in hoge resolutie kan soms meer dan 30 megabyte zijn. De grootte van foto’s wordt overigens uitgedrukt in MB (megabyte) en KB (kilobyte). Doorgaans is de gulden regel: is je foto groter dan 200 KB, dan gaat een website vertragen. Is die kleiner, dan gaat je website sneller worden.

Wat de scherpte betreft: zelf heb ik de neiging om foto’s met maximaal 1920 pixels aan de langste zijde te exporteren. Zo is een foto ook op volledig scherm nog superduidelijk. Wil je de foto niet op groot scherm bekijken? Dan kun je deze ook exporteren aan 1200 of zelfs 800 pixels of minder aan de langste zijde. Dat scheelt enorm veel geheugen.

Maar hoe doe je dat eigenlijk, één of meerdere foto’s verkleinen? Er bestaan talloze manieren voor, waarvan ik er hieronder drie voor je uitlicht. Ook lees je wat mijn favoriete manier is.

Foto’s verkleinen is trouwens iets anders als foto’s bijsnijden of croppen. Lees hier hoe je foto’s kunt croppen.

Heb je nog geen goede foto’s voor je website? Lees hier hoe je aan goede foto’s voor je website komt

Foto’s verkleinen met onlineprogramma

Er bestaan een heleboel online tools om je foto’s te verkleinen. Eén van de meest populaire tools is Resize-Image.net. Hier volg je gewoon een online stappenplan om je foto’s up te loaden, te verkleinen en vervolgens te downloaden. Enorm gemakkelijk om te doen. En het is helemaal gratis!

Als je hiermee gaat verkleinen, hoef je maar een paar stappen uit te voeren: uploaden, verkleinen, output selecteren (zelf werk ik graag in JPEG) en eventueel de beeldkwaliteit optimaliseren. Vervolgens kan je je beeld downloaden. Ik raad je aan om goed te controleren of je beeld aan je eisen voldoet: is het nog scherp als je het verkleinde beeld hebt gedownload? Ja, fantastisch! Nee, doet het hele proces gerust (meermaals) overnieuw.

Foto’s verkleinen met offlineprogramma

Voordat ik echt serieus met fotografie bezig was, gebruikte ik graag het programma Faststone Photo Resizer. We spreken over de tijd dat je je foto’s moest verkleinen voordat je ze op social media als Facebook kon publiceren. Faststone Photo Resizer was mijn redder in nood. En dit programma is nog altijd erg handig en gratis.

Eigenlijk is het haast net zo eenvoudig als bovengenoemde online optie, alleen heb je iets meer mogelijkheden. Ik raad je aan om je te beperken tot de verkleinopties. Ook hier geldt weer dat je na het verkleinen goed controleert of je beeld nog altijd even scherp is zoals jij het graag wilt zien. Het kan geen kwaad om het opnieuw te doen. Vind je je weg niet in het programma? Op YouTube staan heel wat tutorials voor Faststone Photo Resizer.

Foto’s verkleinen met een vintage programma: Bridge

Als fotograaf en als webdesigner werk ik persoonlijk het liefst in Bridge van Adobe. Dit is een programma om beelden mee te beheren, te ordenen en ook om te verkleinen. En het is helemaal gratis. Tot voor kort was Bridge de letterlijke brug tussen de twee beeldbewerkingsprogramma’s Lightroom  en Photoshop: Bridge kan voorvertoningen van verschillende soorten bestanden maken en deze naast elkaar zetten. Bijvoorbeeld: een PSD-file (Photoshop) of JPEG, die je uit de Lightroom catalogus hebt geëxporteerd, kan Bridge in een map broederlijk naast elkaar laten zien. En als je deze verschillende bestandstypes wilt exporteren, dan kan je namelijk meteen aangeven in welke extensie je dat wil. Voor online gebruik exporteer ik mijn beelden doorgaans in JPEG.

Maar, hoe moet je hier nu mee verkleinen? Bij het onderdeel “essentiële elementen”, selecteer je het mapje wat je nodig hebt. Vervolgens kun je hierin je beelden selecteren. Als je dan op de rechtermuisknop drukt, dan selecteer je “exporteren naar” en “aangepast exporteren”. Er opent zich een venster waarin je je voorkeuren kunt opgeven. En daarna wordt alles geëxporteerd! En ja, ook deze fotograaf moet dit soms opnieuw doen omdat je in een donker beeld de pixeltjes kan tellen. En dat willen we natuurlijk niet echt.

Bridge is één van mijn favoriete tools. Op zoek naar nog meer tips? Ontdek hier mijn favoriete tools voor zowel webdesign als fotografie.

Waar moet je op letten bij verkleinen?

Minstens één keer per week verklein ik een heleboel foto’s voor online gebruik, bijvoorbeeld om op een website te plaatsen. Zoals ik hierboven al meermaals beschreven heb, is het dus enorm belangrijk dat je de pixels niet ziet! Dat komt gewoon veel professioneler over. Twijfel je, roep even de hulp in van een bevriend (amateur) fotograaf. Hij of zij heeft daar een oog voor en kan je vertellen of je de pixels wel of niet kan zien.

Verder kunnen blauwe luchten en fotostudioachtergronden de hel zijn bij het verkleinen: soms worden er ineens bepaalde partijen in je lucht of achtergrond als pixels zichtbaar, terwijl je origineel zo strak was. Ook hier geld weer: doe het proces gerust overnieuw en stel je waarden bij. Bij foto’s met blauwe luchten en fotostudioachtergronden moet ik regelmatig rond de 200 KB exporteren om het gewenste resultaat te verkrijgen.

Nog verder verkleinen? Kies voor webp of avif

Heb je een website met veel beeldmateriaal en wil je het nog verder verkleinen? Dan kun je kiezen voor het moderne bestandsformaat webp. Via een website als fotoverkleinen.nl kun je je foto uploaden die je gaat verkleinen, instellen en exporteren in het webp-formaat. Dit scheelt behoorlijk veel KB’s. En dat zonder kwaliteitsverlies!

Wil je nog veel verder verkleinen zonder kwaliteitsverlies? Dan kun je de opvolger van webp, het avif-formaat, uitproberen. Een beeld, dat je als avif exporteert, is soms maar de helft van hetzelfde beeld in webp-formaat. Het avif-formaat kun je onder andere verkrijgen door een online avif-converter te gebruiken.

Kort samengevat

Waar je mee werkt, maakt niet zozeer uit, zo lang je maar weet waar je mee bezig bent. Ben je een beginner of heb je niet zoveel affiniteit met fotografie, dan kun je het jezelf gemakkelijk maken en kiezen voor zowel gratis online tools. Ben je actief met fotografie bezig? Dan raad ik je Bridge aan. Verder kom je vaak in jpeg al een heel eind, maar wil je echt ruimte besparen op je site, dan kun je voor webp of avif kiezen.

Wil je safe zitten, zorg er dan voor dat je beelden nooit groter dan 200 KB zijn en maximaal 1920 pixels aan de langste zijde bevatten. Ga je veel kleiner werken, bijvoorbeeld met thumbnails, dan kun je je foto’s gerust verkleinen tot 50 KB of nog veel kleiner. Ik wens je veel succes toe!

Welk programma gebruik jij om je beelden te verkleinen?

Artikel geüpdatet op 23 augustus 2024.

Over Jochem

Ik ben Jochem Oomen, webdesigner en fotograaf. Het is mijn doel om duurzame ondernemers, organisaties en scholen te helpen aan meer klanten, deelnemers of leerlingen. Dat doe ik door middel van duurzaam webdesign en minimalistische fotografie. Lees hier meer over mij.

Vond je dit artikel interessant? Deel het via de knoppen op social media!

Op de hoogte blijven? Schrijf je in en ontvang telkens mijn nieuwste blogs in je mailbox!

Lees hier meer

Hoe kan ik mijn WordPress-website vertalen?

Woon je in een meertalige omgeving? Werk je in verschillende talen? Dan kan het een goed idee zijn om je WordPress-website te vertalen. Maar waarom zou je dat eigenlijk doen? En hoe kun je daaraan beginnen? En hoe groot is de ecologische voetafdruk van een vertaalde website? Je leest het in...

Op naar een duurzamer internet

Onlangs tekende ik als webdesigner het Sustainable Web Manifesto. Daarmee verklaarde ik mij in te zetten voor een duurzamer internet. Waarom is dat nodig? En hoe doe ik dat als webdesigner? Je leest het in dit artikel.Waarom is het internet niet duurzaam?“Als het internet een land was, dan...

Tweedehands of niet?

Steeds meer mensen kiezen voor tweedehands fotoapparatuur of laptop. Niet alleen vanwege het budget, maar ook vanwege het duurzaamheidsaspect. Maar is het nu verstandig om voor tweedehands materiaal te gaan? Dit artikel helpt je met het dilemma “tweedehands of niet”. Spoiler alert: het...

error: Content is protected !!

Pin It on Pinterest

Share This