Hoe zet ik mijn afbeelding online?
Hier vind je alle informatie!

Iedereen die begint websites te bouwen, loopt vroeg of laat tegen de vraag aan: Hoe zet ik eigenlijk een afbeelding op mijn pagina? Hieronder vind je alles wat je moet weten.

Welk formaat moet mijn afbeelding hebben?

Waar je in ieder geval voor moet zorgen, is dat je afbeelding niet te groot is. En met de grootte bedoel ik dan in de eerste plaats de bestandsgrootte. Als je afbeelding een heel groot bestand is, duurt het namelijk veel te lang voordat een browser (Internet Explorer of Mozilla bijvoorbeeld) je pagina heeft geladen. Je loopt dan het risico dat de bezoeker van je website ongeduldig doorklikt naar een andere site. Ik raad je daarom aan geen afbeeldingen groter dan 80-100kB op je webpagina te zetten.

Verder moeten de afmetingen (de lengte en breedte) van je afbeelding natuurlijk ook niet te groot zijn. De afmeting van een afbeelding wordt uitgedrukt in pixels. Om je een indruk te geven: de afbeelding hiernaast is 189 breed en 140 pixels hoog. (De afbeelding is het logo van het programma IrfanView, dat in de volgende alinea ter sprake komt.)

Hoe kan ik mijn afbeelding verkleinen?

Dat kan op twee manieren: door de resolutie te verkleinen en door de afmetingen te verkleinen. Beide manieren zorgen ervoor dat de bestandgrootte van je afbeelding vermindert. Een handig programmaatje (gratis) dat ik daar altijd voor gebruik is IrfanView. Ik laat hier zien hoe je het kunt gebruiken om je afbeeldingen kleiner te maken:

Open IrfanView en roep de afbeelding op die je op je website wilt zetten (File – Open).
Controleer eerst het aantal dpi van je afbeelding ('dpi' staat voor: dots per inch – oftewel het aantal stipjes per inch). Deze waarde geeft de resolutie van je afbeelding aan: hoe hoger de waarde (dus hoe meer stipjes per inch), hoe scherper je afbeelding. Voor een afbeelding die op een webpagina wordt gezet is een resolutie van 72 dpi voldoende. Om te kijken welke resolutie jouw afbeelding heeft, klik je in IrfanView op Image – Resize/Resample. Stel de dpi-waarde in op 72 (units= pixels).
Pas daarna de grootte van de afbeelding aan (met behulp van de waarden Width of Height. Zorg er daarbij wel voor dat de lengte-breedteverhouding van je afbeelding intact blijft (kruis daarvoor de optie Preserve aspect ratio aan). Als je klaar bent, klik je op 'OK'.
Sla ten slotte je afbeelding op als jpg-, png- of gif-bestand (File – Save as). Met behulp van een schuifbalk kun je hier een comprimeerpercentage instellen. Hoe lager je het percentage instelt, hoe kleiner je bestand zal worden. Experimenteer hier een beetje mee, en zorg er zo voor dat het uiteindelijke bestand niet groter wordt dan 80-100 kB. (Hoe groot je afbeeldingsbestanden zijn, kun je snel zien door te klikken op File – Thumbnails. Dubbelklik op je afbeeldingenmap in de linkerkolom en beweeg met je muis over de afbeelding(en) in de rechterkolom. Er verschijnt dan een klein informatiekadertje waarin ook de afbeeldingsgrootte staat vermeld.

Hoe zet ik mijn afbeelding in een webpagina?

Kopieer daarvoor de volgende tekst en plak die in je html-pagina:

Pas vervolgens deze code aan je eigen situatie en wensen aan:

src="http://www.mijn-eigen-website.nl/afbeeldingen/afbeelding1.jpg": dit wil zeggen dat je afbeelding te vinden is op de website www.mijn-eigen-website.nl, in de map 'afbeeldingen', en dat de betreffende afbeelding 'afbeelding1' heet.
alt="mijn afbeelding": wat hier tussen dubbele aanhalingstekens staat, is de naam die je aan je afbeelding hebt gegeven. Als om de een of andere reden je afbeelding niet vertoond kan worden, dan krijgt de surfer deze tekst te zien.
title="uitleg over deze afbeelding": de tekst die hier tussen de dubbele aanhalingstekens staat, komt te voorschijn als je met je muis over de afbeelding heen beweegt.
align="right": dit betekent dat je je afbeelding aan de rechterkant wilt plaatsen; je kunt hier natuurlijk ook "left" neerzetten.
width="125" en height="125": hiermee geef je aan welke afmetingen (in pixels uitgedrukt) je afbeelding heeft; je ziet deze waarden in IrfanView weer onder Image – Resize/Resample; daar kun je ze ook aanpassen.
border="2": dit wil zeggen dat je een lijntje om je afbeelding heen wilt hebben; je kunt hier ook 0, 1 of een nog hoger getal neerzetten; '0' betekent geen lijn en '1' betekent een iets dikker lijn. Hoe hoger het getal, hoe dikker de lijn.
style= "border-color: red; margin: 4px;": hier geef je mee aan welke kleur de lijn om je afbeelding moet hebben en hoeveel afstand (margin) er moet zijn tot de omgeving. Wil je geen lijn (heb je bij border '0' ingevoerd), dan kun je het eerste stuk code (border-color: red;) weghalen. En wil je dat je afbeelding helemaal vrij komt te staan (dus zonder tekst ernaast), zet dan ná de <img>-code de volgende code neer: <br clear="all">.

Wil je dat je afbeelding linkt naar een website, zet dan de hele <img>-code tussen link-codes. Dus ervóór zet je de code <a href="http://www.andere-website.nl"> en daarná de sluitcode </a>. Het stuk 'www.andere-website.nl' vervang je natuurlijk door het adres van de website waarnaar je afbeelding moet linken.

Lukt het niet, en blijf je steeds een rood kruisje zien in plaats van de afbeelding, kijk dan nog even naar deze lijst met veelgemaakte fouten of probeer of je het voor elkaar krijgt met behulp van deze videotutorial Afbeelding invoegen.

Hoe maak ik een webpagina met een achtergrondafbeelding?

Je kunt natuurlijk ook een afbeelding als achtergrond gebruiken voor een webpagina. Er zijn twee manieren waarop je dat kunt doen, afhankelijk van de soort afbeelding die je wilt gebruiken.

Is je afbeelding een 'repeterende' afbeelding, een soort van behang als het ware, met een repeterend patroon, dan maak je daarvan een achtergrond door in de body-code van je html-pagina de aanduiding <background> toe te voegen (zie de voorbeeldcode hierna). Zorg ervoor dat de afbeelding die je wilt gebruiken is opgeslagen als .gif- of .jpg-bestand. Deze formaten worden door alle browsers ondersteund.

Voorbeeldcode: <body background="afbeelding.gif">

Is de afbeelding die je als achtergrond wilt gebruiken een foto, dan moet je op een andere manier te werk gaan. Klik op de link om te lezen hoe je een foto als achtergrond instellen kunt.

Ik wil thumbnails van mijn foto's maken. Hoe doe ik dat?

Thumbnails zijn niets anders dan klein-formaat versies van je foto's. Meestal zijn ze niet groter dan 100px à 150px breed of hoog. Iets eerder op deze pagina heb ik beschreven hoe je een bestaande afbeelding verkleinen kunt tot dit formaat.

Thumbnails worden vaak gebruikt in een galerij. Als je dan op een van de kleine foto's klikt, wordt er een groter formaat van dezelfde foto getoond. Hoe je een galerij met thumbnails maken kunt, leg ik op een andere pagina van deze website uit.

Ten slotte: hoe kom ik aan mijn afbeeldingen?

Je kunt natuurlijk heel goed afbeeldingen op je site zetten die je zelf hebt gemaakt. Foto's die je met je eigen digitale camera hebt gemaakt bijvoorbeeld. Zijn die niet zo geschikt, kijk dan eens op dit overzicht van foto-sites, waar je gratis leuke afbeeldingen of clipart kunt downloaden.

Van 'mijn afbeelding' terug naar 'zelf een webpagina maken'