Een goed gebruik van afbeeldingen op je website is belangrijk. In “Goede foto’s zijn belangrijk; ze maken je website” vertel ik over het belang van plaatsen van goede foto’s. Maar als je dan de goede foto’s hebt gevonden, dan is het ook nog belangrijk hoe je ze op je website gebruikt. In deze post leg ik je wat meer uit over bestandsgroottes, resolutie en bestandstypes.

Gebruik van geschikte bestandsgroottes

De grootte van een afbeelding wordt aangegeven in pixels. Dit zijn eigenlijk blokjes waaruit een digitale foto is opgebouwd. Ieder blokje heeft één kleur. Een foto is dus bijvoorbeeld 1200×630 (1200 pixels breed en 630 pixels hoog).

Behalve het formaat, heb je ook nog een pixeldichtheid, ook wel bekend als resolutie. Deze geeft aan hoeveel pixels er op een bepaalde oppervlakte zitten. Daarbij geldt; hoe meer pixels, hoe scherper de foto. Er zijn hierin twee standaarden: 72 ppi (pixels per inch) voor het web en 300 dpi (dots per inch) voor drukwerk. 

Met de enorme vooruitgang in digitale fotografie, is de grootte van de afbeeldingen die digitale camera’s maken, enorm toegenomen. Dit is perfect voor het afdrukken van foto’s en drukwerk, maar voor het plaatsen van afbeeldingen op het web heb je helemaal niet zo’n grote foto’s nodig. Ook de stockfoto’s die je al dan niet gratis kunt downloaden op de verschillende websites, zijn behoorlijk groot. Hoe groter de foto, hoe “zwaarder” die is en des te langer het duurt voordat je webpagina’s goed geladen worden.

Al mijn websites bouw ik op met DIVI theme. Zij hebben een heel handig overzicht van de verschillende formaten die je het beste kunt gebruiken op je website, afhankelijk van de kolomgrootte waarin ze geplaatst worden:

Superhandig! je kunt eens kijken op de website van de maker van het thema dat je gebruikt. Misschien geven zij ook wel indicaties voor het gebruik van foto’s. Heb je ook het DIVI thema? Op deze pagina staat nog veel meer uitleg en voorbeelden.

Hoe maak je nu een foto kleiner?

Zelf gebruik ik Photoshop voor het verkleinen van afbeeldingen, dit is een professioneel fotobewerkingsprogramma. Het is niet goedkoop en als je geen professional bent in de creatieve business, zul je deze waarschijnlijk ook niet hebben. Ik heb een ander programma gevonden waarmee je online je foto’s op het gewenste formaat kunt maken:

fotoverkleinen.nl

Zo werkt het:

  • Sleep de afbeelding op het canvas
  • Kies voor verkleinen
  • Vul de breedte van de foto in (pixels)
  • Kies voor “Behoud originele verhouding”
  • Klik op “Toepassen”
  • Ga naar het kopje bestand > opslaan als JPG > kies de kwaliteit (ergens tussen de 60 en 100) Een richtlijn is om de afbeelding onder de 200 kb te houden.
  • Klik op “Bewaren”

Extra comprimeren van bestanden

Online kun je via TinyPNG je fotobestand nog verder comprimeren (lichter maken). Ook kun je op je WordPress website een plugin installeren: Smush Image Compression and Optimization. Deze voert nog een keer compressie uit op de bestanden die je upload, zo wordt er nog wat kb vanaf gehaald.

Bestandstypes afbeeldingen

Naast de bestandsgrootte is ook het bestandstype van een afbeelding belangrijk. Er zijn best wel wat verschillende en niet ieder bestandstype is geschikt voor het web. In “Welke bestandsformaten voor afbeeldingen zijn er, en hoe gebruik je ze op je website” kun je lezen over de verschillende bestandstypen en waar ze voor gebruikt worden.

Zo zie je maar, er komt nog best wel wat bij kijken, bij die afbeeldingen 🙂

Hulp nodig?

Loop je vast met het maken van je website? Of wil je graag advies over hoe je het het beste aan kunt pakken. Neem gerust contact op, zodat we kunnen kijken hoe ik je kan helpen.

Wil jij starten met je website?

Q webstudio richt zich op het maken van WordPress websites, opgebouwd en geoptimaliseerd met het DIVI thema. 

Neem vandaag nog contact op, dan ben je snel online!


Zullen we kennis maken?

Samenwerken met mij betekent dat je precies weet waar je aan toe bent. Geen technische hocus-pocus, maar begrijpelijke taal.Transparantie en persoonlijke aandacht staan bij mij hoog in het vaandel. 


Pin It on Pinterest

Share This