Hoe zet je een foto op een website met html?

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) je pagina heeft geladen en het kost de mobiele gebruiker data. 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.

IMG
Met het IMG element kan je een foto op de website toevoegen. De onderstaande attributen behoren in dit element:

SRC
Met dit attribuut geef je aan welke afbeelding gebruikt gaat worden. Achter het SRC attribuut zet je een link neer die een verwijzing heeft naar het plaatje. Dit kan een link op het internet zijn, zoals http://www.website.nl/plaatjes/afbeelding.jpg. Maar ook een plaatje uit bijvoorbeeld een map hoger in je website, dan gebruik je het volgende: ./mapnaam/afbeelding.jpg.

ALT
Met het ALT attribuut kan je een omschrijving toevoegen aan de afbeelding.
Voorbeeld:
<IMG SRC="./images/natuurplaatje.jpg" ALT="Mooi strand">

BORDER
Met het BORDER attribuut kan je de dikte bepalen van de rand die om de afbeelding dan wordt weergeven. Standaard wordt er geen rand om de afbeelding heen gegeven. Behalve als je een hyperlink van de afbeelding maakt. Dan zet u de waarde van de rand op 0.
Voorbeeld:
<IMG SRC="./images/natuurplaatje.jpg" ALT="Mooi strand" BORDER="4">

WIDTH
Dit is geen verplicht attribuut. Met het WIDTH attribuut kan je de breedte van de afbeelding bepalen. Dit doe je in pixels. Let op de kwaliteit van de afbeelding kan hierdoor wel verminderen.
Voorbeeld:
<IMG SRC="./images/natuurplaatje.jpg" ALT="Mooi strand" WIDTH="100">

HEIGHT
Dit is geen verplicht attribuut. Met het HEIGHT attribuut kan je de hoogte van de afbeelding bepalen. Dit doe je in pixels. Let op de kwaliteit van de afbeelding kan hierdoor wel verminderen.
Voorbeeld:
<IMG SRC="./images/natuurplaatje.jpg" ALT="Mooi strand" HEIGHT="100">