Klikbare Afbeeldingen

Klikbare afbeeldingen zijn afbeeldingen op een webpagina waarop kan worden geklikt, meestal om naar een andere webpagina te navigeren of andere acties uit te voeren. Over het algemeen heb je deze aanpak nodig bij het omgaan met online winkels. Gebruikers zijn gewend om op een afbeelding te klikken en een kaart te krijgen met een volledige productbeschrijving en prijs.

Om een afbeelding klikbaar te maken, kun je de <img>-tag binnen een <a>-tag plaatsen. Bijvoorbeeld:

In dit voorbeeld specificeert de <a>-tag de URL om naar te linken in het href-attribuut, en de <img/>-tag specificeert de afbeelding die moet worden weergegeven. Wanneer de gebruiker op de afbeelding klikt, navigeert de browser naar de URL die is opgegeven in het href-attribuut.

Bijschrift Afbeelding

Je kunt de HTML-elementen figure en figcaption gebruiken om een bijschrift aan een afbeelding op een webpagina toe te voegen. Hier is een voorbeeld:

• figure: element bevat zowel de figcaption als img elementen;

• figcaption: specificeert de bijschrifttekst, zichtbaar voor gebruikers;

• img: specificeert de afbeelding die moet worden weergegeven.

Afbeeldingsoptimalisatie

Dit is belangrijk voor webpagina's, waar grote afbeeldingsbestanden de laadtijden van pagina's kunnen vertragen en de website traag kunnen laten aanvoelen. Door de volgende tips te volgen, kunt u de algehele prestaties en toegankelijkheid van de website verbeteren.

• Formaat afbeeldingen naar de juiste grootte. Formaat afbeeldingen naar de grootte waarin ze op de webpagina worden weergegeven in plaats van grote afbeeldingen te uploaden en ze te verkleinen met HTML of CSS;

• Gebruik geschikte bestandsformaten. Over het algemeen worden JPEG's gebruikt voor foto's, PNG's voor grafieken en afbeeldingen met transparantie. Vermijd grotere BMP- of TIFF-bestanden;

• Comprimeer afbeeldingen. Er zijn veel online tools die afbeeldingen kunnen comprimeren zonder kwaliteitsverlies. Doe dit voordat u afbeeldingen naar de website uploadt.

Opmerking

U kunt de volgende bronnen gebruiken om afbeeldingen te comprimeren: Raster grafische optimalisatie, Vector grafische optimalisatie. Wat is het verschil tussen hen? - Overweeg dit in het volgende hoofdstuk.