Wat is de html-code voor een foto of andere afbeelding?

Alles wat je moet weten om afbeeldingen in je webpagina’s op te nemen, inclusief voorbeeld html-code.

Iedereen die zelf een website bouwt, loopt vroeg of laat tegen de vraag aan: Hoe zet ik eigenlijk een foto of andere afbeelding op mijn website? Hieronder vind je alles wat je daarover moet weten.

Bestandsgrootte, afmetingen en resolutie

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 (Chrome, Mozilla of Internet Explorer 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 vaak uitgedrukt in pixels. Om je een indruk te geven: de afbeelding hiernaast is 189 breed en 140 pixels hoog.

Je foto of afbeelding verkleinen kan op twee manieren: door de resolutie te verlagen en door de afmetingen te verkleinen. Beide manieren zorgen ervoor dat de bestandgrootte van je afbeelding vermindert. Om een afbeelding te kunnen verkleinen heb je een fotobewerkingsprogramma nodig.

Zonder ingewikkelde html-codes

Vind je het nogal een gedoe om steeds met html-codes te werken en de resolutie van afbeeldingen te optimaliseren? Dan raad ik aan om gebruik te maken van een online webbuilder. Hiermee upload je simpelweg je afbeeldingen naar je website en het beheer van je website is een fluitje van een cent.

De html-code voor een afbeelding

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

<img src="https://de-help-desk.nl/images/faq/webdesign/molen.jpg" alt="hollandse molen" style="width: 175px; height: auto; max-width: 25%; float: right; padding: 4px; border: 1px solid grey; margin: 4px 0 4px 4px;">

Je krijgt dan de afbeelding van hiernaast te zien op je webpagina. Pas vervolgens deze code aan je eigen situatie en wensen aan:

• src="https://de-help-desk.nl/images/faq/webdesign/molen.jpg"
  dit wil zeggen dat je afbeelding te vinden is op de website https://de-help-desk.nl/, in de map images > faq > webdeign, en dat de betreffende afbeelding molen.jpg heet.

• alt="mijn afbeelding"
  wat hier tussen dubbele aanhalingstekens staat, is de beschrijving die je aan je afbeelding hebt meegegeven. Als om de een of andere reden je afbeelding niet vertoond kan worden, dan krijgt je bezoeker deze tekst te zien. Elke afbeelding die je op je website zet, moet zo’n alt-tekst krijgen.

• style="..."
  tussen de dubbele aanhalingstekens achter style staan verschillende eigenschappen van je afbeelding, zoals:

  • width: 175px; height: auto; max-width: 25%;
    hiermee geef je aan welke afmetingen (in pixels) je afbeelding heeft; je kunt deze waarden aanpassen met behulp van een fotobewerkingsprogramma.

    De reden dat je hier alleen een maat voor de breedte neerzet, heeft te maken met de max-width-eigenschap, die er vlak achter staat. Daarmee geef je aan dat deze afbeelding nooit breder mag worden dan 25% van de breedte van het onderdeel waarin hij is opgenomen. Staat je afbeelding binnen een vak dat 400 pixels breed is, dan zal hij hierdoor nooit breder worden dan 100 pixels, ook al staat de breedte ingesteld op 175 pixels. Dat is handig als je website bekeken wordt op een smal scherm, zoals dat van een smartphone. Als je de height de waarde auto geeft, zal een browser automatisch de juiste hoogte berekenen. Zie ook het artikel Maak ook de foto’s op je website responsive!.

  • float: right;
    hiermee geef je aan dat je afbeelding naar rechts moet verspringen (vervang right door left om je afbeelding naar links te laten verspringen. (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">.)

  • padding: 4px;
    met deze waarden geef je aan hoeveel ruimte er moet komen tussen de afbeelding zelf en een eventuele rand (border) eromheen.

  • border: 1px solid grey;
    dit wil zeggen dat je een grijze (grey), doorgetrokken (solid) lijn om je afbeelding heen wilt hebben van 1 pixel breed. In plaats van een doorgetrokken lijn zijn er ook andere stijlen mogelijk, zoals een gestippelde (dotted), gestreepte (dashed), of dubbele (double) lijn.

  • margin: 4px 0 4px 4px;
    met deze waarden geef je aan hoeveel ruimte er moet komen aan de buitenkant van je afbeelding, dus buiten de rand. De eerste waarde heeft betrekking op de bovenkant, de tweede op de rechter zijkant, de derde op de onderkant en de vierde op de linker zijkant.

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.

Een afbeelding als achtergrond

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 ‘tegeltjes’-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. 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 niet repeterend, dan moet je op een andere manier te werk gaan. Zie daarvoor het artikel Hoe krijg je een foto als achtergrond op je website?