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

Alles wat je moet weten over afbeeldingen

Hoe groot mogen afbeeldingen op je website zijn?

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, in pixels. Op beeldschermen worden hoogte en breedte aangegeven in pixels.

De resolutie geeft je het aantal gebruikte pixels (in het engels dot) 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 minimaal 300 dpi. Voor beeldschermen is 72 dpi voldoende. Een hogere resolutie maakt je afbeelding zwaarder. Wanneer een ontwerpprogramma de optie 'Opslaan voor web’ heeft, betekent dit dat de afbeelding wordt opgeslagen met 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 in op een desktop en de mobiele weergave. Dit kan je ook doen door je venster even smal te maken. Dan laat je website laat de mobiele weergave zien. Je maakt 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 in de desktop weergave.

Hoe vind je de bestandsgrootte, afbeeldingsgrootte en resolutie van je afbeelding?

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 per se Photoshop nodig. Online kun je bijvoorbeeld Pixlr of Canva gebruiken.

Wil je zien hoe je in Blockwise ziet hoe groot je bestand is? Bekijk dan deze video.

Hoeveel pixels of kB mag mijn afbeelding zijn?

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 2.000 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 niet een kleine afbeelding, 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 een weet wat te groot of te zwaar is. Je website is pas echt traag als je afbeeldingen steeds boven de 1 mB zijn.

Is een jpg beter dan een png?

Is een jpg beter dan een png?

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 dat wel. Maar het jpg bestand is lichter dan het png bestand. 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. 

Hoe verklein je afbeeldingen voor je website?

Met de meeste digitale camera zijn je foto’s veel groter dan je voor je website nodig hebt. 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 2.000 pixels, kun je hem makkelijk verkleinen tot 2000 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.
  • Verklein je fotobestand met TinyPNG of TinyJPG. Beiden comprimeren de afbeelding zonder kwaliteitsverlies.

Zijn de afbeeldingen op je website onnodig groot?

Je hebt een website en je wil weten of het nog sneller kan? 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.

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 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.

Meer over afbeeldingen op je website weten?

Ondertseun je tekst met relevante afbeeldingen

Ondersteun je tekst met relevante afbeeldingen

Optimaliseer de afbeeldingen die je op je website zet

Alles wat je moet weten als afbeeldingen op je website zet

Vormgever Monique aan de telefoon

Vind jij dit artikel interressant?

Zijn er onderwerpen waar je meer van wil weten? Of kan ik je ergens mee helpen? 

Vormenbrouwer (Monique) is grafisch vormgever én multimedia vormgever die met oog voor detail,  op een vaak verrassende manier, ontwerpen weer simpel maakt. Kortom, ik kom tot de essentie.

Heb je een logo, huisstijl, nieuwe website of infographic nodig? Ik brainstorm samen met jou en geef een passend advies.

Vormenbrouwer

Villapark 27, 7631 BG Ootmarsum
06 - 42 49 14 49 
monique@vormenbrouwer.nl

KvK nr: 73604569
BTW nr: NL001630905B65
Privacyverklaring

Deze website maakt gebruik van functionele en analytische cookies. Bekijk de privacyverklaring.

Sluiten