Web: Essentials

Appearance

HTML: afbeeldingen ​

In HTML kan je een afbeelding (image) plaatsen met de <img> tag. Dit is een enkelvoudige tag dus die wordt niet gesloten.

Het src attribuut ​

Met het src attribuut kan je een pad meegeven aan de <img> tag.

Voorbeeld:

html
<!--  Absoluut pad -->
<img src="https://www.example.com/photo.jpg" />

<!-- Relatief pad -->
<img src="photo.jpg" />

Het alt attribuut ​

Het alt attribuut beschrijft de alternatieve text van de afbeelding.

Dit wordt gebruikt bij

  • Screen readers
  • Als de afbeelding niet geladen kan worden
  • Als extra informatie voor zoekrobots
  • Als je extra context wil geven voor AI training data

Voorbeeld:

html
<img src="photo.jpg" alt="Een vrouw op een fiets" />

Bestandsformaten: pixels vs vectors ​

Vector-based ​

  • SVG: Aangewezen voor illustraties

Pixel-based ​

  • WEBP: Transparantie + geanimeerde foto's
  • JPEG: Ideaal voor grote foto's
  • PNG: hogere kwaliteit foto's of logo's + transparantie
  • GIF: Indien je geanimeerde foto's hebt

Bestandsgrootte ​

Let erop dat je de bestandsgrootte van je afbeeldingen zo klein mogelijk maakt. Een website moet alle afbeeldingen downloaden voordat hij dit kan tonen. Grote afbeeldingen zorgen dus voor trage websites.

Er bestaan tools die automatisch afbeeldingen kleiner maken in bestandsgrootte zonder dat je kwaliteit verliest. (= lossless compression):

Waar vind je gratis foto's? ​

Let erop dat veel foto's die je via Google vindt auteursrechten hebben. Deze mag je dus niet zomaar gebruiken in je projecten. Controleer altijd goed of je een afbeelding mag gebruiken in je project.

Gratis foto's vind je hier:

  • unsplash.com: prachtige foto's die meestal vrij te gebruiken zijn
  • pexels.com: prachtige foto's met genoeg whitespace binnen de foto om iets van tekst mee te gaan combineren van je project

Gratis vectors vind je hier:

  • iconfinder: veel icoontjes, filter instellen op gratis
  • FreeSVG: veel icoontjes, maar vaak funky/geen strakke icoontjes
  • Google Material design icons: veel strakke Iconen voor UI
  • FontAwesome: gelimiteerde aantal gratis iconen onder oudere versies
  • The Noun project: iconen kunnen pas gedownload worden na het aanmaken van een gratis account + iconen vallen onder de Creative Commons Attribution 3.0 license