HTML- afbeeldingen
Afbeeldingen kunnen het ontwerp en het uiterlijk van een webpagina verbeteren.
Voorbeeld
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Voorbeeld
<img src="img_girl.jpg"
alt="Girl in a jacket">
Voorbeeld
<img src="img_chania.jpg"
alt="Flowers in Chania">
Syntaxis voor HTML-afbeeldingen
De HTML <img>-tag wordt gebruikt om een afbeelding in een webpagina in te sluiten.
Afbeeldingen worden technisch niet in een webpagina ingevoegd; afbeeldingen zijn gekoppeld aan webpagina's. De <img>tag creëert een bewaarruimte voor de afbeelding waarnaar wordt verwezen.
De <img>tag is leeg, bevat alleen attributen en heeft geen afsluitende tag.
De <img>tag heeft twee vereiste kenmerken:
- src - Specificeert het pad naar de afbeelding
- alt - Specificeert een alternatieve tekst voor de afbeelding
Syntaxis
<img src="url" alt="alternatetext">
Het src-kenmerk
Het vereiste srcattribuut specificeert het pad (URL) naar de afbeelding.
Opmerking: wanneer een webpagina wordt geladen, is het op dat moment de browser die de afbeelding van een webserver haalt en in de pagina invoegt. Zorg er daarom voor dat de afbeelding ook daadwerkelijk op dezelfde plek blijft ten opzichte van de webpagina, anders krijgen je bezoekers een gebroken link icoon. Het gebroken link-pictogram en de alttekst worden weergegeven als de browser de afbeelding niet kan vinden.
Voorbeeld
<img src="img_chania.jpg" alt="Flowers
in Chania">
Het alt-kenmerk
Het vereiste altattribuut biedt een alternatieve tekst voor een afbeelding, als de gebruiker deze om de een of andere reden niet kan zien (vanwege een trage verbinding, een fout in het src-attribuut of als de gebruiker een schermlezer gebruikt).
De waarde van het altattribuut moet de afbeelding beschrijven:
Voorbeeld
<img src="img_chania.jpg" alt="Flowers
in Chania">
Als een browser een afbeelding niet kan vinden, wordt de waarde van het alt
kenmerk weergegeven:
Voorbeeld
<img src="wrongname.gif" alt="Flowers
in Chania">
Tip: Een schermlezer is een softwareprogramma dat de HTML-code leest en de gebruiker in staat stelt om naar de inhoud te "luisteren". Schermlezers zijn handig voor mensen met een visuele handicap of leerstoornissen.
Afbeeldingsgrootte - Breedte en Hoogte
U kunt het styleattribuut gebruiken om de breedte en hoogte van een afbeelding op te geven.
Voorbeeld
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
U kunt ook de attributen widthen gebruiken:height
Voorbeeld
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
De widthen heightattributen definiëren altijd de breedte en hoogte van de afbeelding in pixels.
Let op: Geef altijd de breedte en hoogte van een afbeelding op. Als de breedte en hoogte niet zijn opgegeven, kan de webpagina flikkeren terwijl de afbeelding wordt geladen.
Breedte en hoogte, of stijl?
De attributen width, height, en stylezijn allemaal geldig in HTML.
We raden u echter aan het styleattribuut te gebruiken. Het voorkomt dat stylesheets de grootte van afbeeldingen wijzigen:
Voorbeeld
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Afbeeldingen in een andere map
Als je afbeeldingen in een submap staan, moet je de mapnaam in het srcattribuut opnemen:
Voorbeeld
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Afbeeldingen op een andere server/website
Sommige websites verwijzen naar een afbeelding op een andere server.
Om naar een afbeelding op een andere server te verwijzen, moet u een absolute (volledige) URL opgeven in het srcattribuut:
Voorbeeld
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Opmerkingen over externe afbeeldingen: Externe afbeeldingen kunnen auteursrechtelijk beschermd zijn. Als u geen toestemming krijgt om het te gebruiken, overtreedt u mogelijk de auteursrechtwetten. Bovendien kunt u externe afbeeldingen niet bedienen; het kan plotseling worden verwijderd of gewijzigd.
Geanimeerde afbeeldingen
HTML staat geanimeerde GIF's toe:
Voorbeeld
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Afbeelding als een link
Om een afbeelding als link te gebruiken, plaatst u de <img>tag in de <a>
tag:
Voorbeeld
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Afbeelding zwevend
Gebruik de CSS float-eigenschap om de afbeelding naar rechts of links van een tekst te laten zweven:
Voorbeeld
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
Tip: lees onze CSS Float-zelfstudie voor meer informatie over CSS Float .
Algemene afbeeldingsindelingen
Dit zijn de meest voorkomende afbeeldingsbestandstypen, die worden ondersteund in alle browsers (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Hoofdstuk samenvatting
- Gebruik het HTML
<img>-element om een afbeelding te definiëren - Gebruik het HTML
src-attribuut om de URL van de afbeelding te definiëren - Gebruik het HTML
alt-kenmerk om een alternatieve tekst voor een afbeelding te definiëren, als deze niet kan worden weergegeven - Gebruik de HTML
widthenheightattributen of de CSSwidthenheighteigenschappen om de grootte van de afbeelding te definiëren - Gebruik de CSS
float-eigenschap om de afbeelding naar links of naar rechts te laten zweven
Opmerking: het laden van grote afbeeldingen kost tijd en kan uw webpagina vertragen. Gebruik afbeeldingen zorgvuldig.
HTML-oefeningen
HTML-afbeeldingstags
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .