Your equipment DOES NOT affect the quality of your image. The less time and effort you spend worrying about your equipment the more time and effort you can spend creating great images. The right equipment just makes it easier, faster or more convenient for you to get the results you need.
—Ken Rockwel, Your Camera Does Not Matter, 2005

Afbeeldingen

Afbeeldingsformaten

Er zijn twee soorten afbeeldingen: bitmaps en vectorafbeeldingen. Een bitmap (of rasterafbeelding) is een verzameling puntjes van verschillende kleur. Een foto is altijd een bitmap. Als je voldoende inzoomt, krijg je de individuele pixels te zien.

Een vectorafbeelding is een afbeelding die bestaat uit wiskundige krommen. Je kan er blijven op inzoomen. De afbeelding blijft haar kwaliteit behouden.

Hieronder vind je twee keer dezelfde afbeelding (bron: https://www.svgcrown.com/download.php?category=home&id=43). Zoom zelf in je browser om te bepalen welke van beide de bitmap en welke de vectorafbeelding is.

De bovenste afbeelding is een PNG en dus een bitmap. Ze is 114 KB groot. De onderste is een SVG en dus een vector. Aangezien een vectorafbeelding eigenlijk helemaal beschreven is in tekstvorm is ze veel kleiner: slechts 31 KB.

Bitmapafbeelding

Als een vectorafbeelding zoveel kleiner is als een bitmap en bovendien oneindig scherp blijft bij inzoomen, waarom gebruiken we dan niet altijd vectorafbeeldingen? De reden is simpel: foto's zijn eigenlijk per definitie altijd bitmaps.

De meest geschikte bitmapformaten voor het web zijn:

PNG: geschikt voor kleinere afbeeldingen, logo's, tekeningen, kan ook transparantie in een afbeelding aan.
JPG (JPEG): het basisformaat voor foto's.
WebP: formaat dat alle vorige zou kunnen vervangen, ondersteuning in Safari nog niet universeel.
GIF: grotendeels verouderd en vervangen door PNG, behalve voor kleine animaties.

Vectorafbeelding

Voor vectorafbeeldingen is het standaarformaat op het web SVG. Een SVG is een wiskundige tekstbeschrijving van een figuur, opgebouwd uit punten, lijnstukken, cirkels, enz. Als voorbeeld: een opgevulde rechthoek met afgeronde hoeken. Onder de figuur vind je de SVG-code van deze figuur (bron: W3schools.com). Die code is hier trouwens in de HTML-pagina zelf gezet (doe eens een ‘toon paginabron’ in je browser of inspecteer de HTML-code van deze pagina).

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" 
      style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Aangezien SVG-afbeeldingen inline in HTML-code kunnen verwerkt worden, kan je ze manipuleren met JavaScript, bvb. om animaties te maken.

Het img element

Het img element is een leeg element. Je schrijft dus niet <img>…</img>. Alle informatie staat in de attributen: <img src="" alt="">

Locatie: src attribuut

Het attribuut src bevat de locatie van het afbeeldingsbestand. Dat kan een relatief adres zijn zoals <img src="../img/foto.jpg" alt="">. De twee puntjes betekenen ‘spring uit de map waar het huidig HTML-bestand in zit’. Op dit niveau (eentje hoger dus dan het niveau van het HTML-bestand) zou er een mapje ‘img’ moeten zijn. Deze map bevat dan het gevraagde bestand ‘foto.jpg’.

De src kan ook een absoluut adres bevatten, zoals src="https://eenbedrijf.be/afb/foto1.jpg". Opgepast: dit heet ‘hot linking’ en wordt gelijkgesteld met kopiëren wat betreft het auteursrecht.

Voor dit OPO maak je een statische website. We verwachten dat je het auteursrecht respecteert. Dat komt neer op ofwel je eigen foto gebruiken, ofwel toestemming vragen aan de auteur, ofwel gebruik maken van foto's met een licentie die toelaat om ze te gebruiken (zie ook een eerder topic ‘basisdocument’).

Alternatieve tekst: alt attribuut

Het tweede verplichte attribuut is alt. Je geeft hier alternatieve tekst op die kan voorgelezen worden door een screenreader van een slechtziende bezoeker. Probeer jezelf voor te stellen wat het betekent om enkel naar sites te kunnen luisteren en doe dan je best om een zo zinvol mogelijke alternatieve tekst te bedenken. Op de pagina van Anysurfer vind je een goed overzicht van hoe je goede alt-tekst kan schrijven.

Een afbeelding die puur versiering is en geen enkele inhoud toevoegt moet nog steeds een alt="" krijgen, maar je laat de inhoud van het attribuut leeg.

Afmetingen: width en height.

Vroeger was het simpel: elke img heeft ook een width en height attribuut. De waarde van die twee attributen wordt altijd in pixels genoteerd (maar je schrijft niet ‘px’ zoals dat wel moet in CSS). Dus iets in de stijl van <img src="img/vulkaan.jpg" width="800" heigth="500" alt="vulkaan Eyjafjallajökull">. Die twee afmetingen zijn nuttig, want zo weet de browser al – nog voor de afbeelding zelf door de server aangeleverd is – hoeveel plaats hij moet voorzien bij het berekenen wat waar op het scherm moet komen.

Toen kwam RWD (zie later bij CSS) en wilden we afbeeldingen die zich konden aanpassen qua grootte aan de beschikbare ruimte in hun container.

Er zijn veel meningen over al dan niet width en height voorzien. Ik zou vereenvoudigend het volgende stellen: als je afbeelding met zekerheid altijd een vaste grootte heeft, gebruik dan beide attributen in HTML. Als dat niet zo is, dan beschrijven we de breedte (en evt. de hoogte, maar meestal volstaat de breedte) liever in CSS.

SVG afbeeldingen

Een SVG kan zowel een extern bestand zijn, als in de HTML-code zelf (‘inline’ noemt men dat dan) gezet worden. Hierboven gaven we al een voorbeeld van beide manieren.

Embedded met het img element

Het img element kan niet alleen naar .png en .jpg (e.a.) verwijzen, maar ook naar een SVG-bestand. Dit is bvb. het icoontje dat ik gebruik om aan te geven dat je een opdracht moet doen: doe deze opdracht . De code die hiervoor gebruik is:

<img src="/assets/person-svgrepo-com.svg" alt="doe deze opdracht">

Het grote voordeel van een extern bestand is dat dit na de eerste keer laden op de computer van de gebruiker (in de browser cache) staat. Alle volgende plaatsen waar deze afbeelding nodig is, hoeft er geen request meer naar de server gestuurd te worden.

Inline in de HTML-code

Voor niet al te grote afbeeldingen kan je ook de code van de SVG zelf in de HTML zetten m.b.v. het element svg. Ik kan hetzelfde figuurtje ook tonen via dit element: . Ziet er hetzelfde uit, niet? De HTML-code maakt dit keer geen gebruik van img, maar van svg.

<svg width="30" height="30" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(0.0976562,0,0,0.0976562,0,2)">
        <path d="M332.64,64.58C313.18,43.57 286,32 256,32C225.84,32 198.57,43.5 179.2,64.38C159.62,85.49 150.08,114.18 152.32,145.16C156.76,206.28 203.27,256 256,256C308.73,256 355.16,206.29 359.67,145.18C361.94,114.48 352.34,85.85 332.64,64.58Z" style="fill:rgb(0,0,170);fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.0976562,0,0,0.0976562,0,2)">
        <path d="M432,480L80,480C70.675,480.121 61.777,476.029 55.8,468.87C49.3,461.1 46.68,450.49 48.62,439.76C57.06,392.94 83.4,353.61 124.8,326C161.58,301.49 208.17,288 256,288C303.83,288 350.42,301.5 387.2,326C428.6,353.6 454.94,392.93 463.38,439.75C465.32,450.48 462.7,461.09 456.2,468.86C450.225,476.022 441.326,480.119 432,480Z" style="fill:rgb(0,0,170);fill-rule:nonzero;"/>
    </g>
</svg>

Het nadeel van deze manier van werken is dat deze afbeelding niet in de cache kan opgenomen worden. Als je deze afbeelding twintig keer nodig hebt in één site, moet deze code effectief 20 keer geladen worden.

Maar dat is meteen ook het grote voordeel: er hoeft voor zo'n inline svg geen request gestuurd te worden naar de server. Zo'n request zorgt voor vertraging, zeker op mobiel. Daarom probeert men voor een snelle site het aantal requests te beperken.

Nog een voordeel van inline SVG is dat je deze code kan manipuleren met JS.

Embedded met het object element

Er is nog een derde mogelijkheid om SVG te gebruiken, nl het object element. We gaan hier echter niet op in.