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?

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

WordPress geïnstalleerd? Dit kun je het beste als eerste doen

Het is je gelukt om WordPress te installeren en je staat te popelen om meteen aan de gang te gaan. Even wachten nog... Het is goed om even een paar dingen te doen voordat je verder gaat, je hoeft hier dan niet meer naar om te kijken. YouTube Ben jij meer een kijker...

Een favicon maken & toevoegen aan je WordPress website

Had je er al weleens van gehoord? Van een favicon? Gekke naam eigenlijk hè? Het is een samentreksel van de woorden 'favorite' en 'icon'. Favicon dus... Je hebt hem al wel vaak gezien. Het is namelijk dat kleine icoontje dat je links in een browser tabblad ziet staan...

Divi Review (2021): het beste thema voor je WordPress website?

Met een keuze uit duizenden WordPress thema's, kan de zoektocht naar het geschikte thema voor jouw website een behoorlijke uitdaging zijn. Je kunt kiezen uit de gratis en freemium thema's die via WordPress zelf te downloaden zijn of een betaald thema zoeken bij een...

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…

Verbeter de snelheid van je website door het opschonen van je database

Snelheid is hartstikke belangrijk voor je website, als de bezoekers te lang moet wachten dan haken ze af. Zo simpel is het... Een belangrijke (zo niet de belangrijkste) factor in de snelheid van je website is natuurlijk het optimaliseren van je afbeeldingen. Hier heb...

Bepaal het doel van je website met deze 5 voorbeelden

Veel ondernemers zien hun website als een doel op zich en hebben niet in de gaten dat een website juist een middel is om andere doelen te behalen. Als je exact weet wat het doel van je website moet zijn, kun je veel beter bepalen wat er op je website aanwezig moet zijn om je doelen te behalen.

Wat is WordPress en wat zijn de voordelen?

Heel kort gezegd; WordPress is een Content Management Systeem (CMS). Dat wil zeggen, een systeem om de content van je website te managen. Uhh.. en nu in Nederlands graag! WordPress is een pakket software, een programma, waarmee je de inhoud van je website…

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

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

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