Afbeeldingen optimaliseren

Ten eerste moet je kijken naar wat voor soort afbeelding je afbeelding is. Er wordt onderscheid gemaakt tussen pixelafbeeldingen, die bestaan uit miljoenen pixels, en vectorafbeeldingen, die bestaan uit wiskundig nauwkeurig beschreven punten, lijnen en curven. Vectorafbeeldingen hebben vaak minder geheugen nodig dan pixelafbeeldingen, omdat alleen de parameters en niet elke kleurpixel moet worden opgeslagen. Afhankelijk van het soort presentatie is een ander formaat geschikt om de afbeeldingen optimaal weer te geven.

Je herkent het verschil tussen een pixelafbeelding en een vectorafbeelding als je de afbeelding aanzienlijk vergroot. Een vectorafbeelding heeft een scherpe rand bij de overgang tussen de gekleurde vlakken. In een pixelafbeelding is de rand vaag en worden er "stappen" gevormd.

Een uitleg van de zes belangrijkste bestandsformaten vind je in onze infographic. Je kunt deze informatie gebruiken om te beoordelen welk formaat geschikt is voor je beoogde gebruik en of een conversie zinvol is.

JPG (Joint Photographic Experts Group)

JPG is waarschijnlijk het meest gebruikte afbeeldingsformaat op het web en is ontwikkeld voor het opslaan van fotografische afbeeldingen. Het is geschikt voor afbeeldingen met fotorealistische motieven, veel details en veel kleuren als er een klein volume aan gegevens moet worden opgeslagen. JPG kan tot 16 miljoen kleuren weergeven. Bovendien is een hoge compressie mogelijk met een kleine hoeveelheid gegevens. Een groot voordeel van het formaat is dat JPG's compatibel zijn met alle browsers en tekst- en grafische programma's en ook correct worden weergegeven op alle computers, tablets en mobiele apparaten. Een nadeel is dat bij zwart-wit afbeeldingen de verlieslatende compressie snel zichtbaar wordt en dat elke verdere compressie de beeldkwaliteit verlaagt. Het optimaliseren van JPG afbeeldingen heeft daarom niet altijd zin.

PNG (Portable Network Graphics)

Het PNG formaat is nog niet zo wijdverspreid als JPG en is daarom een van de nieuwere afbeeldingsformaten. Dit formaat kan verschillende kleurdiepten opslaan en daardoor ook de bestandsgrootte bepalen - dit is ideaal voor het optimaliseren van afbeeldingen. Het kan worden opgeslagen als 24-bit (de standaard voor fotorealistische motieven) zodat het meer dan 16 miljoen kleuren kan weergeven. Het kan echter ook worden opgeslagen als 8-bits, zodat slechts maximaal 256 kleuren worden weergegeven en een kleinere opslagcapaciteit wordt gebruikt. Deze versie is daarom ideaal voor foto's en afbeeldingen met weinig details en kleuren. Een andere speciale eigenschap van PNG's is dat ze een breed transparantiebereik hebben. Dit betekent dat het kan worden opgeslagen van volledig ondoorzichtig tot volledig transparant. Een nadeel is dat de gegevensgrootte van PNG's groter is dan die van JPG-bestanden, omdat de compressie niet verliesgevend is.

GIF (Grafisch uitwisselingsformaat)

Het GIF-formaat kan maximaal 256 kleuren weergeven en is daarom niet geschikt voor fotorealistische motieven en gedetailleerde afbeeldingen. Met de GIF is het mogelijk om korte animaties af te spelen, waarbij meerdere afzonderlijke afbeeldingen na elkaar worden weergegeven. Als animatie is de GIF sinds enkele jaren sterk in opkomst in het gebruik op sociale media, maar op websites kom je het zelden tegen. Het wordt vaker gebruikt voor motieven met weinig kleuren, zoals logo's, pictogrammen of illustraties. Door de kleine opslaggrootte hoeven GIF-afbeeldingen zelden te worden geoptimaliseerd.

SVG (Schaalbare Vectorafbeelding)

Het SVG-formaat is een vectorformaat. Er is hier geen afbeeldingsformaat met pixeldimensies. Dit formaat heeft ook een voordeel: omdat het bestaat uit wiskundig beschreven punten, is het vectorformaat resolutieonafhankelijk en kan het dus naar wens worden geschaald. Het wordt daarom gebruikt voor motieven met eenvoudige, grafische inhoud, zoals vectorafbeeldingen, bijvoorbeeld logo's, pictogrammen, diagrammen of illustraties. Een nadeel van SVG's is dat de bestandsgrootte snel toeneemt als het weergegeven element uit een groot aantal kleine elementen bestaat.

WebP

Dit bestandsformaat is afkomstig van Google en wordt relatief weinig gebruikt. Het is een zusterproject van het WebM videoformaat. Een duidelijk voordeel is dat het tot 25% gecomprimeerd kan worden zonder verlies en dus bijdraagt aan snelle laadtijden. Het is geschikt voor ondoorzichtige en transparante afbeeldingen en belooft een kleinere bestandsgrootte vergeleken met de andere grafische formaten. Het is daarom zeer geschikt voor het weergeven van geoptimaliseerde afbeeldingen met een kleiner formaat. Aangezien Google zelf de uitgever is, kunnen mogelijke positieve effecten op de ranking in de zoekmachine niet worden uitgesloten. Een nadeel is dat het niet door alle browsers wordt ondersteund - dit moet je zeker controleren voordat je het gebruikt.

Zelfs als u bovenaan de ranglijst wilt staan, moet u niet vergeten dat uw site in de eerste plaats door mensen wordt bezocht en niet alleen door de crawler. Bij het optimaliseren van afbeeldingen moet u daarom ook denken aan het aantrekkelijke ontwerp. U kunt deze criteria gebruiken om bestaand beeldmateriaal te verbeteren:

De juiste uitlijning

Als je je afbeeldingen wilt optimaliseren, begint het allemaal met de juiste uitlijning. Zorg ervoor dat de horizon horizontaal is. Als deze scheef staat, zal dit de waarneming verstoren.

Verwijder overbodige randen

Concentreer je op de essentie door het beeldelement bij te snijden en al het overbodige weg te snijden. Zorg er wel voor dat de afmetingen van je bestand na het bijsnijden nog steeds groot genoeg zijn voor het beoogde gebruik.

Meer expressie door contrast

De meeste foto's hebben te weinig contrast en zijn daarom niet erg expressief. Bijna alle gratis en betaalde tools voor beeldbewerking hebben een automatische contrastfunctie waarmee je zonder veel voorkennis afbeeldingen kunt optimaliseren. Handmatige contrastcorrectie is met een beetje oefening ook een goede optie.

Fijnafstelling: afbeeldingen optimaliseren met diepte, belichting en hooglichten

Hier kun je gedetailleerder te werk gaan en afzonderlijke delen van de foto's optimaliseren en accentueren. De schuifregelaars voor diepte, belichting en hooglichten kunnen gedetailleerder worden aangepast dan de schuifregelaar voor contrast.

Wees voorzichtig met verzadiging

Wil je sterkere kleuren? Bij het optimaliseren van je afbeeldingen moet je voorzichtig zijn met de verzadiging. Anders zien de foto's er snel piepklein uit. In sommige bewerkingstools kun je selectieve kleurcorrectie gebruiken voor fijnafstelling.

Verscherper

Veel foto's missen de juiste scherpte, vooral op het scherm. Als er na het aanpassen van het contrast nog steeds niet genoeg contrast is, kun je ook de verscherper gebruiken om je foto's te optimaliseren.

Beeldmateriaal van hoge kwaliteit is de moeite waard voor elke website! Voor je eigen foto's raden we professionele foto's aan, gemaakt door een fotograaf. Er zijn echter ook zeer goede beeldbanken die een grote selectie afbeeldingen bieden. Welke dat zijn, hebben we voor je samengevat in ons artikel Beeldbanken voor bedrijven. Let echter wel op de gebruiksvoorwaarden van de beeldbanken; ze staan niet allemaal toe dat de afbeeldingen worden bewerkt met beeldbewerkingsprogramma's. Als je de afbeeldingen echter wilt optimaliseren, kun je ze bewerken met een fotobewerkingsprogramma. Als je echter de bestandsgrootte van de afbeeldingen wilt optimaliseren, is dit in de meeste gevallen geen probleem.