Websites met stijl

Naslag: elementen voor afbeeldingen

Het element img

• Vorm:
  <img src="url" alt="alternatieve tekst" width="pixels" height="pixels">
  Opmerking: img is een leeg element, het heeft geen eind-tag.
• Functie:
  Het element toont de afbeelding waarnaar verwezen wordt door het attribuut src.
  
• De attributen src en alt zijn verplicht:
  • src - Vorm: src="url"
    Url: de plaats (het webadres) van de afbeelding die getoond moet worden.

    De afbeelding wordt niet ingesloten in de webpagina maar wordt bij het laden van de webpagina opgehaald op de gespecificeerde locatie en dan getoond.

    Voorbeelden: pad naar de afbeelding - als de afbeelding op dezelfde website staat als het html-document <img src="img/kasteel.jpg" alt="een kasteel">

    De afbeelding kasteel.jpg in de map img wordt getoond.

    
    volledige url - als de afbeelding ergens anders staat <img src="http://wwww.eenwebsite.nl/img/kasteel.jpg" alt="een kasteel">

    De afbeelding kasteel.jpg in de map img van de website 'www.eenwebsite.nl' wordt getoond.

  • alt - Vorm: alt="alternatieve tekst"
    Specificeert een alternatieve tekst, die wordt afgebeeld als de afbeelding zelf niet kan worden getoond, bv vanwege een fout in het webadres, een weggevallen internetverbinding, of bij een browser voor slechtzienden (in zulke browser wordt de tekst voorgelezen).
    Opmerking: In de meeste browsers wordt de afbeelding ook getoond als het vereiste alt-attribuut ontbreekt.
• De attributen width en height (niet verplicht)
  
  • Als width en height beiden worden opgegeven wordt de afbeelding getoond met de gespecificeerde breedte en hoogte
    

    Als de gespecificeerde verhouding van width en height niet gelijk is aan de echte breedte-hoogte verhouding van de afbeelding wordt de afbeelding in de breedte of in de hoogte uitgerekt.

  • Als alleen de width wordt opgegeven, berekent de browser de height.
  • Als alleen de height wordt opgegeven, berekent de browser de width
  • Als geen van beiden worden opgegeven, wordt de afbeedling getoond in de originele grootte.
  • Vorm van width: width="50" betekent: width 50px. (Height wordt evenzo aangegeven)

Voorbeelden

Uitgegaan wordt van de afbeelding auto.jpg van 600px x 400px

Voorbeeld 1:

Afgebeeld als 600px x 400px (ware grootte)

Hetzelfde resultaat wordt bereikt met:

1. <img src="img/auto.jpg" alt="auto" width="600">
2. <img src="img/auto.jpg" alt="auto" height="400">
3. <img src="img/auto.jpg" alt="auto" width="600" height="400">

Voorbeeld 2:

Afgebeeld als 300px x 200px

Hetzelfde resultaat wordt bereikt met:

1. <img src="img/auto.jpg" alt="auto" height="200">
2. <img src="img/auto.jpg" alt="auto" width="300" height="200">

Voorbeeld 3:

Afgebeeld als 300px x 300px (vervormd)

Opmerkingen

• Sla een afbeelding bij een website niet groter op dan de (maximale) afmetingen waarin die getoond wordt.
  De afbeelding van de auto had oorspronkelijk de afmetingen 4896 x 3264 px, door deze te verkleinen naar 600 x 400 px is het aantal beeldpunten, dus ook de bestandgrootte zo'n 60x zo klein geworden. Dat betekent 60x zo weinig geheugenruimte, en 60x zo snel laden.
• Een afbeeldig wordt het snelst geladen als zowel hoogte als breedte worden opgegeven (alternatief c bij voorbeeld 1). De browser weet dan al meteen hoeveel ruimte de afbeelding inneemt.
• De afmetingen van een afbeelding kunnen niet alleen worden opgegeven met de attributen width en height, maar ook met stijlregels. Zie de naslag bij width en height.
  
• Als je wilt dat een afbeelding meegroeit en krimpt met de grootte van het venster kan je het beste een stijlregel opnemen met een width in procenten en geen height.

Het element figcaption

Het element figcapture bevat een bijschrift bij een foto. Het element moet geplaatst worden in het element figure.

Het element figure

Het element figure is bedoeld om een afbeelding te bevatten (element img) en eventueel een bijschrift (figcaption). Op deze manier kunnen afbeelding en bijschrift bij elkaar gehouden worden.

html

<figure> <img src="img/auto.jpg">
<figcaption style="width: 600px;">Duessember SJ 1935</figcaption> </figure>

Resultaat:

Bestandstypen

Afbeeldingen kennen een groot aantal verschillende bestandstypen. De meest gebruikte typen op websites zijn jpg, png, gif.

JPG (JPEG)

• Aantal kleuren: 16 miljoen
• Compressie: groot, instelbaar
• Transparantie: nee
• Animatie: nee
• Lagen: nee
• Geschikt voor: foto's en afbeeldingen met verlopende kleuren.
• Nadeel: de compressie is niet verliesvrij.

Opmerkingen:
Bij jpg afbeeldingen kan de compressie worden ingesteld van 100 (beste beeldkwaliteit, minimale compressie) tot 10 (minimale bestandsgrootte, slechte beeldkwaliteit). Meestal levert een compressie van 70 - 50 een acceptabele beeldkwaliteit op, waarbij de bestandsgrootte 3 tot 8 x zo klein is als bij minimale compressie (100).
Bewaar altijd de originele foto, want het kwaliteitsverlies van een (te sterk gecomprimeerde) foto kan niet meer ongedaan wrden gemaakt.

PNG

• Aantal kleuren: 16 miljoen
• Compressie: matig (bij weinig kleuren: groot), verliesvrij
• Transparantie: alphatransparantie (ook gedeeltelijke transparantie mogelijk)
• Animatie: nee
• Lagen: nee
• Geschikt voor:
  • foto's en afbeeldingen met verlopende kleuren.
  • afbeeldingen met transparantie

Opmerkingen:
Levert grotere bestanden dan jpeg, behalve voor afbeelingen met weinig kleuren, zoals affiches.
Kies PNG voor afbeeldingen met transparantie; voor gevallen waarbij de bestandgrootte er niet zo toe doet; en voor gevallen waarbij het PNG bestand niet veel groter is dan het jpeg bestand van dezelfde afbeelding.

GIF

• Aantal kleuren: 256
• Compressie: hoog, verliesvrij voor afbeeldingen met maximaal 256 kleuren
• Transparantie: één transparante kleur mogelijk
• Animatie: ja
• Lagen: nee
• Geschikt voor:
  • logo's, grafische afbeeldingen (striptekeningen) met weinig kleuren
  • Logo's en striptekeningen e.d. met een transparante kleur
  • Striptekeningen of logo's met animatie

Algemene opmerking

Gebruik je een fotobewerkingsprogramma dan is het verstandig om de originele afbeelding te bewaren in het bestandsformaat van dat fotoprogramma. Een (verkleinde) kopie in een geschikt formaat (jpg, png, gif - afhankelijk van de toepassing) zet je op de website.

Achtergrond afbeeldingen

Voor achtergrondafbeeldingen zie naslagblad achtergrond - background-image.