Afbeelding op je site plaatsen? Eerst even bewerken!

Voor wie zin heeft om zich de fijnere kneepjes van het vak eigen te maken, gaan we hieronder dieper in op het optimaliseren van afbeeldingen voor je website. We sluiten af met de beloofde checklist en twee SEO tips.

Afbeeldingen plaatsen in Tijdvooreensite

Heb je nog weinig ervaring met het opbouwen van je website en het plaatsen van afbeeldingen? Dan kun je de ingebouwde mogelijkheden van ons CMS gebruiken. Zo weet je zeker dat jouw site snel blijft en dat plaatjes er netjes uitzien. Aan (blog)pagina’s kun je via het tabblad afbeeldingen een plaatje toevoegen dat achter de schermen automatisch op maat gesneden wordt. Je kunt ook een slide toevoegen. Een slide is een afbeelding over de gehele breedte aan de bovenkant van een pagina. Gebruik voor slides een liggende afbeelding. Wil je weten hoe je slides en afbeeldingen toevoegt? Lees dan de korte instructie in onze handleiding.

Via het CMS kun je op verschillende manieren afbeeldingen aan je website toevoegen. Je kunt afbeeldingen op een vaste positie invoegen, afbeeldingen in de tekst of widget invoegen, slides toevoegen en fotoalbums aanmaken. Hoe je een afbeelding plaatst lees je in de handleiding. Dít blog gaat over wat je moet doen vóór je de afbeelding plaatst.

Wil je ook een mooie website? Met alles erop en eraan voor een vaste prijs van €649,00? Kies voor het complete websitepakket van Tijdvooreensite. Benieuwd? Vraag een persoonlijke demoversie aan!

Gratis demo

Waarom afbeeldingen optimaliseren voor je website?

De laadtijd van je website is deels afhankelijk van de omvang van de afbeeldingen. Te zware afbeeldingen (denk aan 1mb of hoger) kunnen jouw website langzamer maken. Websurfers staan bekend als een ongeduldig volkje. Moeten zij meer dan vier seconden wachten voordat een pagina geladen is? Dan haken ze af en verlaten zij jouw website. Het gevolg voor jou: misgelopen engagement en conversies. Volgens een onderzoek (2018) van Google stijgt het percentage bezoekers dat de website direct verlaat met ruim 32% bij een laadtijd van 3 seconden.

Ook voor Google zelf kan de laadtijd van afbeeldingen en video’s een dealbreaker zijn. Per mei 2021 zijn de zogeheten Core Web Vitals toegevoegd aan het algoritme van Google om de ranking van pagina’s te bepalen. Deze Core Web Vitals bestaan allen uit snelheidsindicatoren. Het idee erachter is dat hoe sneller de onderdelen van een webpagina laden, hoe gebruiksvriendelijker de website is. En een gebruiksvriendelijke website hoort in de ogen van Google een hogere plek in de zoekresultaten te krijgen.

Tip: Met PageSpeed Insights maak je met één muisklik de core web vitals van een webpagina inzichtelijk. Zowel op mobiel als op desktop.

Door te kiezen voor de kleinst mogelijke afbeeldingen, kun jij zelf een steentje bijdragen aan een snelle website en daarmee ook aan de gebruiksvriendelijkheid ervan. Foto's aanpassen voor je website is dan ook zeker verstandig! Het is de kunst om een goede balans te vinden tussen kwaliteit en bestandsgrootte. Niemand wordt immers blij van een onscherpe foto waarbij je de pixels kunt tellen. Hoe geoptimaliseerd het plaatje ook is.

Kies het juiste bestandstype

De meest gebruikte bestandstypen voor afbeeldingen op het web zijn .jpg, .png en .gif. Iedere indeling heeft z’n eigen functie. Wil je foto´s op je website plaatsen, dan is het handig om te weten welk bestandstype jij moet kiezen. Over het algemeen leent het JPG formaat zich het beste voor ‘gewone’ afbeeldingen op websites. Voor logo’s en afbeeldingen met tekst heeft PNG de voorkeur. 

Tijdvooreensite heeft een overzicht gemaakt van de belangrijkste verschillen tussen de afbeeldingtypen zodat jij een weloverwogen keuze kunt maken tussen png, jpg en gif. Heeft de foto waarmee jij je website wilt verfraaien niet het juiste bestandstype? Geen nood, middels een online converter kun je in één muisklik een PNG- of TIFF-bestand omzetten naar JPG of juist andersom.

De afmetingen van je afbeelding aanpassen

Bedenk vooraf hoe groot je het plaatje in beeld wil hebben en bewerk het voordat je het upload. Wordt de afbeelding bijvoorbeeld getoond op een breedte van 800 pixels? Zorg dan dat je afbeelding niet kleiner, maar liever ook niet groter is. Een te kleine afbeelding geeft onscherp beeld. Een te grote afbeelding maakt je website traag en het risico bestaat dat hij vreemd wordt afgesneden. Foto's verkleinen voor website? Verderop in dit blog bespreken we de beste tools om de afmeting van je foto te wijzigen.

In het CMS van Tijdvooreensite heb je de mogelijkheid om voor pagina's, blogartikelen en sommige andere modules een afbeelding toe te voegen op een vaste positie. Deze afbeelding heeft een vaste grootte. Een afbeelding die je hier plaatst wordt automatisch bijgesneden. Het mooiste resultaat krijg je door elke afbeelding de goede afmetingen te geven vóór het plaatsen. Afbeelding kleiner dan 800 pixels raden we af. Voor slides die paginabreed worden getoond, kun je het beste een afbeelding kiezen die tenminste 1920 pixels breed is. 

Tip: Geen zin of tijd om zelf de fotograaf uit te hangen? Ontdek de 9 beste websites voor rechtenvrij stockbeeld. Zowel gratis als betaald.

De afmetingen van een afbeelding die je in de tekst plaatst kun je zelf bepalen. Wil je afbeeldingen in een rij of raster tonen? Zorg dan voor een rustig en georganiseerd beeld door ze precies even groot te maken.

De beste resolutie voor je afbeelding kiezen

Resolutie is het aantal pixels of punten van een beeldscherm of een afbeelding. Hoe hoger de resolutie, des te meer details het beeld bevat. Afbeeldingen met een hoge resolutie zijn dan ook haarscherp.

De dikke lading details zorgt er echter wel voor dat de bestandsgrootte van de foto omhoog schiet. Dat is niet erg als je een grote poster wil maken, maar voor je site is het onhandig. Zo’n zware afbeelding neemt veel ruimte in en maakt je site langzaam. Met de meeste fotobewerkers kun je een verkleinde versie van de afbeelding opslaan en het aantal pixels per inch of centimeter opgeven. De optimale resolutie voor het web is 72 pixels per inch (dpi).

Tools voor afbeeldingen optimaliseren

Afbeeldingen verkleinen of op maat snijden kan met ieder fotobewerkingsprogramma. Zowel online als met behulp van een software die je eerst op je computer moet downloaden.

Offline oplossingen

De meest bekende programma's zijn Paint (op elke windows pc standaard meegeleverd), Apple Foto's op een Apple computer en Photoshop, wereldwijd de meest gebruikte software voor professionals. Een handige shortcut binnen Photoshop voor het comprimeren van foto’s is de ‘opslaan-voor-het-web’ functie. Andere gebruiksvriendelijke én gratis softwareprogramma’s om foto’s mee te bewerken zijn irfanview en GIMP.

Afbeeldingen online bewerken

Ook online zijn een heleboel tools beschikbaar voor het comprimeren of bewerken van afbeeldingen. Eén van de meest populaire is TinyPNG; ideaal om de bestandsgrootte van PNG- en JPG-plaatjes te verlagen, zonder kwaliteitsverlies. Met Resize Me kun je eenvoudig afbeeldingen croppen, roteren, comprimeren of voorzien van filters en effecten.

 Staat de juiste optie er voor jou nog niet bij? De consumentenbond heeft een handige pagina voor je gemaakt met betrouwbare, goedkope en/of professionele oplossingen voor het bewerken van afbeeldingen.

De checklist

• Open de afbeelding in je favoriete fotobewerker;
• Pas de hoogte en de breedte aan naar het formaat dat je wilt laten zien;
• Kies een resolutie van 72 dpi (pixels per inch);
• Sla de afbeelding op als .jpg;
• Is het een logo met transparante achtergrond? Gebruik dan .png;
• Haal tot slot je afbeelding nog even door een online tool als https://tinyjpg.com.

Et voilà! Je kunt nu de foto's op je website plaatsen!

SEO voor afbeeldingen

Wil je echt álles uit je plaatje halen? Maak dan de zoekmachines blij met deze twee trucs:

• geef het bestand voor het uploaden een naam met de zoekterm er in;
• geef de afbeelding een alt-tag met het zoekwoord in een beschrijvende zin. 

Zo weet je zeker dat jouw zorgvuldig gekozen plaatje je website ook écht versterkt. Meer leren over afbeeldingen op je website? Lees de tips van Daan voor het kiezen van foto’s en de tips van Paul over goede SEO voor je website. 

Vallen afbeeldingen buiten beeld? Ga voor responsive webdesign!

Druk aan de weer geweest met foto’s bewerken voor je website, maar merk je dat deze niet mooi uitkomen op elk apparaat? Wellicht is je huidige website niet responsive. Responsive websites passen zich automatisch aan aan het scherm waarmee je de website bekijkt. Dit scherm kan van een desktop zijn, maar ook van een smartphone of tablet. Bij niet-responsive webdesign vallen afbeeldingen vaak buiten beeld en moet je onhandige fratsen uitvoeren om het plaatje óf de tekst goed te zien. 

Zeg ja tegen gebruiksvriendelijkheid en kies voor een responsive website. Tijdvooreensite heeft voor jou een kant-en-klaar websitepakket waarmee jouw responsive website binnen een week online staat. En nog lekker betaalbaar ook. Waar wacht je nog op?

Ik wil meer informatie! Doe mij maar een gratis demo