Tips voor een goed gebruik van afbeeldingen op je website

Tips voor een goed gebruik van afbeeldingen op je website

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 🙂

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Verder lezen?

Rank Math: de beste en fijnste WordPress SEO plugin? (Review)

Een goede WordPress SEO plugin mag zeker niet ontbreken op je website. Jarenlang gebruikte ik de Yoast SEO plugin voor mijn eigen websites en die van mijn klanten. Nadat ik steeds meer goede reviews las over Rank Math, ben ik daar mee gaan testen. In dit artikel lees...

Wat zijn testimonials en waar plaats je ze op je website?

Als je goed bent in wat je doet, dan wil je dat uiteraard dat je potentiële klanten dat weten. Je kunt dat zelf kunnen vertellen aan ze, maar ja, hoe komt dat over? De bezoekers van je website lezen liever van anderen dat ze door jou goed geholpen zijn…

5 handige plugins om je Gutenberg block editor uit te breiden

Als je met de Gutenberg Block editor werkt, dan zul je hoogstwaarschijnlijk, net al ik (hoop ik), behoorlijk enthousiast zijn over wat je er allemaal mee kan. De editor blijft zich continue verbeteren en in iedere nieuwe WordPress update worden er weer toevoegingen en...

Rank Math en DIVI zijn nu eindelijk de perfecte match!

Het Divi thema met de Visual Builder is naar mijn mening het beste thema om je WordPress website mee te maken. Je kunt je webpagina's helemaal aan de voorkant bouwen en editen zodat je precies ziet wat je doet. Helaas was er nog geen goede oplossing om je SEO ook aan...

5 belangrijke plugins voor je WordPress website

Een belangrijke reden dat WordPress zo flexibel is, is de enorme keuze uit diverse plugins. Heel kort gezegd is een plugin een pakketje code dat je toe kunt voegen aan je WordPress installatie, zodat je extra functionaliteiten krijgt…

Wat is het verschil tussen een pagina en bericht in WordPress?

Regelmatig krijg ik de vraag wat nou het verschil tussen een pagina en een bericht is in WordPress. In eerste instantie zien ze er namelijk precies hetzelfde uit als je ze gaat maken. Of je nu op “nieuw bericht” of op “nieuwe pagina” klikt; je krijgt dezelfde WordPress editor te zien…

7 typen websites die niet garant staan voor succes

Er bestaan verschillende typen websites die weer onderverdeeld kunnen worden in succesvolle en niet succesvolle. Als je als ondernemer een website hebt, wil je natuurlijk ook dat die een succes wordt. Een website die bezoekers aantrekt…

Zo werk je aan een succesvolle website! 15+ acties waar je direct mee kan starten

Als je ondernemer bent wil je uiteraard een succesvolle website! Een website die veel bezoekers trekt en die van deze bezoekers vervolgens klanten of leads kan maken. Om dit voor elkaar te krijgen zul je regelmatig tijd moeten besteden aan het nóg beter maken van je...

Welke bestandsformaten voor afbeeldingen zijn er, en hoe gebruik je ze op je website?

Zie je ze weleens voorbij komen? JPG, PDF, PNG, GIF, EPS, AI, TIFF, PSD? Allemaal verschillende bestandsformaten voor afbeeldingen. Wat de verschillen zijn en hoe je ze gebruikt lees je hieronder. (Er zijn ook nog andere bestandstypen, maar dit zijn de meest...

Back-up en herstel (of verhuis) je website met All-in-one WP Migration

Je bent even wat veranderingen aan het doen op je website of aan het updaten en het gaat mis. Er ontstaat ergens een conflict en de voorkant van je website ziet er ineens uit of er een storm over heen geraasd is. Of je ziet allemaal gekke dingen die er eerst niet waren, en die er ook niet horen te zijn. Paniek!

7 Stappen Voor Een Goede Voorbereiding Van Je Website

Schrijf je in om waardevolle tips & inspiratie te ontvangen. Je krijgt van mij de 7 stappen voor een goede voorbereiding cadeau!

7 Stappen Voor Een Goede Voorbereiding Van Je Website