Wat is het ideale formaat voor foto’s
op je website?

Monique van der Vorm

Laatste update 20 mei 2021, 8 minuten leestijd

• Hoe groot mogen afbeeldingen op je website zijn?
• Hoe vind je de bestandsgrootte, afbeeldingsgrootte en resolutie van je afbeelding?
• Hoeveel pixels of kB je afbeelding mag zijn?
• Is een jpg beter dan een png?
• Hoe  verklein je afbeeldingen voor je website?
• Optimaliseer je afbeeldingen voor Google
  • Zoekmachine optimalisatie begint bij de bestandsnaam
  • Geef afbeeldingen een alt tekst
  • Maak afbeeldingen niet groter dan nodig
  • Kan je website nog sneller?
• Hoe upload en optimaliseer je een afbeelding in Mach3Blocks?
• Conclusie: waar moet je op letten als je een afbeelding op je website zet?

De bestandsgrootte is het aantal bytes die het bestand op je computer in beslag neemt. Hoe groter een afbeelding hoe langer je website laad. Een foto van 5 mB (megabyte) is groot. Een foto van 100 kB (kilobyte) is minder groot. Als je bestand zwaar is, dan is of de afbeelding te groot of de resolutie te hoog.

De afbeeldingsgrootte is de afmetingen van je afbeelding. Op beeldschermen worden hoogte en breedte van afbeeldingen aangegeven in pixels.

De resolutie geeft je het aantal gebruikte pixels op bijvoorbeeld een beeldscherm aan. Het is de kwaliteit of dichtheid van een afbeelding, gemeten in ‘dots per inch’ (dpi). Voor mooi drukwerk is een resolutie nodig van minimaal 300 dpi. Voor beeldschermen is 72 dpi voldoende. Een hogere resolutie maakt je afbeelding zwaarder. Wanneer een fotoprogramma de optie 'Opslaan voor web’ heeft, betekent dit dat de afbeelding wordt opgeslagen in een lagere, webvriendelijke resolutie.

Wat te groot is voor een afbeelding hangt af van de plaats waar je je afbeelding gebruikt. Gebruik je je foto voor over de breedte van je hele pagina (een banner of hero). Dan moet de foto groter zijn dan wanneer het een kleiner plaatje in de tekst is. Gebruik je in de hero een afbeelding van slechte kwaliteit dan ziet de afbeelding er onscherp uit.

Een foto niet groter dan nodig maken houdt in dat je hem, wanneer mogelijk, op ware grote gebruikt, 100%. Bekijk je website op een desktop en mobiele weergave. Dit kan je ook doen door je venster even smal te maken. Dan laat je website de mobiele weergave zien. Maak je afbeelding geschikt voor de variant waar de afbeelding het grootst te zien is. De ene keer zal dit in de mobiele weergave zijn en de andere keer de desktop weergave.

De grootte van het bestand en van je afbeelding vind je door met je rechtermuisknop op de afbeelding te klikken. Op een PC klik je op ‘Eigenschappen’ en vervolgens op het tabblad ‘Details'. Op een Mac klik je ‘Toon info’.

Hoeveel dpi een afbeelding is kun je niet in alle bewerkingsprogramma’s zien. De meeste eenvoudige bewerkingsprogramma’s slaan bestanden automatisch op als 72 dpi. Je hebt dus niet persé Photoshop nodig. Online kun je bijvoorbeeld Pixlr of Canva gebruiken.

Een paar handige tips om je afbeeldingen niet onnodig groot te maken:

• Grote afbeeldingen of achtergrondafbeeldingen over het volledige scherm zijn niet meer dan 500 kB.
• Voor een afbeelding over het volledige scherm kun je 1.700 pixels breed aanhouden.
• De meeste afbeeldingen voor je website zijn 300 kB of minder.
• Als je de mogelijkheid hebt, gebruik dan altijd de optie ‘Opslaan voor web’
• Je kunt een grote afbeelding altijd verkleinen, maar vergoot een kleine afbeelding niet, dan wordt het onscherp…

Controleer of je beelden goed geoptimaliseerd zijn. Je kunt afbeeldingen heel vaak verkleinen zonder dat je het echt ziet. Open het origineel en het geoptimaliseerde beeld en bekijk ze naast elkaar. Als je de afbeelding op 100% bekijkt en je ziet geen groot verschil en de afbeelding is scherp, dan is het goed.

Maak je geen zorgen als je afbeelding iets boven de aangegeven aantal kB’s uitkomt. Dit is slecht een indicatie zodat je weet wat te groot of te zwaar is. Je website is pas echt traag als je afbeeldingen steeds boven de 1 mB zijn.

Het grootste verschil tussen jpg en png is dat een png-bestand een transparante achtergrond kan hebben. Als je bijvoorbeeld je logo op een gekleurde achtergrond wil zetten, dan sla je je logo als .png op. Dan heb je geen witte achtergrond. Als je van hetzelfde bestand een jpg maakt dan krijg je wel een witte achtergrond. Een jpg-bestand is lichter dan het png-bestand (vaak 2 keer zo groot). Ga je voor snelheid kies dan voor jpg.

Png is vooral geschikt voor logo’s, iconen, afbeeldingen met tekst en tekeningen. Je gebruikt .png als je een transparante achtergrond nodig hebt of als je niet wilt inleveren op details in een afbeelding. 

Met de meeste digitale camera zijn je foto’s veel groter dan je voor je website nodig is. Dit geldt ook voor stockfoto’s. Als je afbeelding te groot is dan kun je een aantal dingen doen:

• Pas het formaat van je afbeelding aan. Als je foto breder is dan 1.700 pixels, kun je hem makkelijk verkleinen tot 1.700 pixels, 1200 pixels of nog kleiner. Dit is afhankelijk van waar je de afbeelding wil gebruiken op je website. Zorg dat je de verhouding niet wijzigt als je de afbeelding verkleint.
• Verlaag de resolutie. In Photoshop kun je dit doen door te kiezen voor de optie ‘Opslaan voor web’. In veel fotoprogramma’s kun je ook via ‘Opslaan als’ of ‘Exporteren’ de resolutie aanpassen. Onlinetools zoals Pixlr en Canva maken de resolutie van je afbeelding automatisch lager.
• Is je afbeelding nog steeds aan de grote kant? Verklein je fotobestand met TinyPNG of TinyJPG. Beiden comprimeren de afbeelding zonder kwaliteitsverlies.

Gevonden worden in Google gaat niet alleen over tekst. Hoe vaak zoek jij niet op afbeeldingen? Ik gebruik het in ieder geval regelmatig. Door het geven van een duidelijke bestandsnaam en omschrijving (alt tekst) kun je veel winst behalen in Google. Wat kun je doen naast afbeeldingen gebruiken die je tekst ondersteunen?

Noem jij je foto ‘Foto1.jpg’ of ‘Schermafbeelding 2019-07-10 om 20.20.08’? Pas dan de bestandsnaam aan voordat je ze upload naar je website. Dit helpt voor de vindbaarheid van je website. Maak deze zo beschrijvend mogelijk. Dus bijvoorbeeld niet lunchroom.jpg maar lunchroom-in-Ootmarsum.jpg. 

De bestandsnaam is onderdeel van de URL van de afbeelding, dus als je je afbeeldingen een duidelijke naam geeft, zijn de url’s makkelijker te volgen. www.jouwwebsite.nl/images/foto1.jpg

Zodra je een afbeelding naar je website upload is de bestandsnaam zichtbaar. Vermijd spaties en geef je bestanden geen cryptische namen. In Mach3Blocks kun je je bestandsnaam ook nog na het uploaden makkelijk aanpassen.

Zorg ervoor dat afbeeldingen voorzien zijn van een korte maar beschrijvende alt-tekst. Deze teksten vertellen de zoekmachine waar de afbeelding over gaat, verwerk hier als het relevant is op een natuurlijke manier een zoekwoord in. Dus als je een afbeelding upload op je website, vul dan gelijk de alt-tekst (omschrijving) in. Geef in een goedlopende zin aan wat de foto laat zien.

Om de laadsnelheid van je website zo snel te houden, maak je je afbeeldingen zo licht mogelijk. Hoe meer kB je afbeelding is hoe langer de laadtijd hiervoor, hoe langzamer je website wordt. Voor één afbeelding valt dat misschien wel mee. Maar heb je heel veel afbeeldingen gebruikt. Dan maakt dit zeker verschil. Helemaal als je afbeeldingen groter dan 1.000 kB (1 mB) gebruikt.

Het optimaliseren van je foto’s is een afweging tussen gewicht en kwaliteit. Kijk goed of de besparing haalbaar is. Het moet niet ten koste van de kwaliteit gaan. Je wil dat je afbeeldingen op elke schermgrootte scherp zijn. Op telefoons, tablets, laptops en desktops.

Een leuke tool om daar achter te komen is PageSpeed Insight. Wanneer je je URL invult en op analyseren klikt, dan komt daar een score uit. Er is een score voor de mobiele versie van je website en een score voor de desktop.

Naast die score geeft Google ook aan waar je je website nog kunt optimaliseren. De zogenaamde aanbevelingen. Eén daarvan is ‘Geef afbeeldingen het juiste formaat’. Als je daar op klikt dan kun je precies zien hoe groot de afbeeldingen op de pagina zijn die je hebt opgegeven en welke winst er nog te behalen is. Google gaat natuurlijk altijd voor de snelste optie, maar hou de kwaliteit dus in de gaten.

1. Ga naar de pagina waar je een afbeelding wil plaatsen.
2. Klik op de Afbeelding.
3. Klik rechts bij Afbeelding op het ‘mapje’ (Bladeren).
4. Klik op de blauwe knop Bestanden uploaden, als je die niet ziet klik je eerst links op Start.
5. Klik op de blauwe knop Bladeren
6. Je kunt meerdere afbeeldingen selecteren en klik op Open
7. Klik vervolgens op de groene knop Uploaden.
8. Klik nu de juiste afbeeldingen aan. Pas eventueel de naam van de afbeelding aan en vul de omschrijving (alt tekst) in.
9. Klik op Opslaan om de wijzigingen op te slaan.
10. Klik vervolgens op Invoegen op de afbeelding op je pagina te plaatsen.

Naast je afbeeldingen voorzien van een goed bestandsnaam en een alt tekst kun je ook binnen het systeem wat je gebruikt vaak je afbeeldingen verder optimaliseren. In Mach3Blocks kun je je afbeelding op meerdere manieren optimaliseren:

• De bestandsnaam aanpassen
• De alt-tekst invullen
• Kwaliteit van de afbeelding aangeven
• Op basis van schermgrootte aparte afbeeldingen uploaden

De bestandsnaam en de alt-tekst zijn van belang voor de vindbaarheid van je website. Dat heb je hierboven al gelezen. De snelheid van je website is ook een factor in dit verhaal. De kwaliteit van je afbeelding en de schermgrootte is van invloed op de snelheid van je website.

Wat kun je hier dan mee? Als je zelf al zorgt dat je je afbeelding zo klein mogelijk maakt, kun je bij kwaliteit nog kijken hoe ver je kunt gaan zonder dat je het ziet. Standaard staat deze waarde op Hoog. Maar je kunt hier kiezen voor Origineel, Zeer hoog, Hoog, Gemiddeld, Laag en Zeer laag. Mijn afbeeldingen staan vaak op Zeer laag. Als ik zie dat de kwaliteit niet goed is, kies ik voor Laag.

Voor de echte snelheidsduivels onder ons kun je bij schermgrootte kiezen om in sommige weergave plaatjes te verbergen maar je kunt er ook voor kiezen om voor elke weergave een plaatje van het werkelijke formaat te gebruiken.

• Gebruik afbeeldingen die je tekst ondersteunen en relevant zijn. Gebruik niet zo maar een afbeelding van anderen zonder toestemming. 
• Geef je afbeelding een duidelijke naam, die vertelt wat er op de foto te zien is, zodat Google makkelijk kan indexeren.
• Verklein de afbeelding met een fotobewerkingsprogramma of online tool tot het formaat wat je nodig hebt. Check de bestandsgroote (meestal kleiner dan 300 kB, schermbrede afbeeldingen 500 kB) en de kwaliteit (is de foto nog scherp).
• Upload de afbeelding naar je website en vul de alt-tekst (omschrijving) in. 

Maak hier een gewoonte van dit zorgt ervoor dat je website sneller laad. Zo ben je bewust bezig met het optimaliseren van je afbeeldingen voor Google (SEO).