HTML <afbeelding> -element
Met het HTML <picture>-element kunt u verschillende afbeeldingen weergeven voor verschillende apparaten of schermformaten.
Het HTML <plaatje>-element
Het HTML <picture>-element geeft webontwikkelaars meer flexibiliteit bij het specificeren van afbeeldingsbronnen.
Het <picture>element bevat een of meer elementen, die elk via het
attribuut <source>naar verschillende afbeeldingen verwijzen . srcsetOp deze manier kan de browser de afbeelding kiezen die het beste past bij de huidige weergave en/of het apparaat.
Elk <source>element heeft een
mediaattribuut dat bepaalt wanneer de afbeelding het meest geschikt is.
Voorbeeld
Toon verschillende afbeeldingen voor verschillende schermformaten:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Opmerking: Geef altijd een <img>element op als het laatste onderliggende element van het <picture>element. Het <img>element wordt gebruikt door browsers die het element niet ondersteunen <picture>, of als geen van de <source>tags overeenkomt.
Wanneer het beeldelement gebruiken?
Er zijn twee hoofddoelen voor het <picture>element:
1. Bandbreedte
Als je een klein scherm of apparaat hebt, is het niet nodig om een groot afbeeldingsbestand te laden. De browser gebruikt het eerste <source>
element met overeenkomende attribuutwaarden en negeert elk van de volgende elementen.
2. Ondersteuning voor formatteren
Sommige browsers of apparaten ondersteunen mogelijk niet alle afbeeldingsindelingen. Door het
<picture>element te gebruiken, kunt u afbeeldingen van alle formaten toevoegen, en de browser zal het eerste formaat gebruiken dat het herkent en elk van de volgende elementen negeren.
Voorbeeld
De browser gebruikt het eerste beeldformaat dat het herkent:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Opmerking: de browser gebruikt het eerste <source>element met overeenkomende attribuutwaarden en negeert alle volgende <source>elementen.
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 .