Er zijn drie soorten afbeeldingen die in een webpagina bruikbaar zijn: jpeg, gif en png. Bij het kiezen van een goede formaat dient men een onderscheid te maken tussen foto's op het web en de afbeeldingen waar kleuren duidelijk gescheiden zijn.

5.1.1 GIF

Gif is de afkorting voor Graphics Interchange Format en is ontwikkeld sinds 1987. Gif-bestanden worden vrij veel gebruikt op het internet en wordt ook gebruikt om geanimeerde afbeeldingen mee te maken met vaak kleine cartoons. Het GIF-formaat ondersteunt transparante achtergrond, het aantal kleuren in een GIF-bestand is beperkt tot maximaal 256 (door het gebruik van 8 bits).

De transparantie kan ofwel op volledig transparantie van 100% of niet transparant en dus 0% gezet worden. Gelieve op te merken dat ook transparantie als kleur wordt geteld. We zullen het Gif-formaat meestal voor de volgende afbeeldingen gebruiken: kleine iconen, lijntekeningen, enkel kleur randen en simpele cartoons, ... Kortom: alle afbeeldingen die grote vlakken van éénzelfde kleur bevatten en niet meer dan 256 Kleuren nodig hebben.

Je vindt tal van kant-en-klare animaties op bv. gifanimaties.nl, bewegende-plaatjes.nl, ... Wees terughoudend met animaties op een webpagina, het komt snel amateuristisch over.

5.1.2 PNG

PNG is de afkorting van Portable Network Graphic. PNG bestaat sinds 1990 en is ontwikkeld als alternatief voor GIF en JPEG bestanden, hij biedt veel meer mogelijkheden. PNG ondersteunt 24-bits kleuren en biedt transparantie van 0% tot en met 100% aan. Hij ondersteunt een gedeeltelijke transparantie, dus 50% dekking is mogelijk.

PNG is het best geschikt voor plaatjes waarover geen kwaliteitsverlies mag zijn. Het ondersteunt ruim 16 miljoen kleuren en heeft 2 opslagmogelijkheden: 8 bit (= GIF, 256 kleuren en 1-bit transparantie) en 24 bit (JPEG, 16 miljoen kleuren aan, wel groter dan JPEG).

5.1.3 JPEG

De betekenis van de afkorting JPEG is Joint Photographic Experts Group en heeft de extensie jpg. Het is vooral geschikt voor foto's omdat ze een onbeperkt aantal kleuren kunnen bevatten. Wanneer je foto's neemt met een digitaal fototoestel zijn het altijd JPEG-bestanden.

Transparantie en animatie worden echter niet ondersteunt door JPEG. Moderne fotocamera's maken foto's meestal veel te groot voor gebruik op een website. Verklein je foto's voor het web , een compressie van 60% tot 75 % is optimaal voor het web.

5.1.4 SVG

De SVG (= Scalable Vector Graphics) extensie is een tweedimensionale vector grafisch formaat bestand. Het is een standaard formaat om vector graphics op het web weer te geven en beschrijft de beelden met behulp van een XML-gebaseerde tekstformaat. De SVG-indeling is een open standaard ontwikkeld onder de W3C met Adobe. SVG-beelden kunnen worden gemaakt en geëxporteerd vanuit Adobe programma's. Je kan ook een online converter gebruiken bijvoorbeeld http://image.online-convert.com/convert-to-svg.

5.1.5 Compressie

Wat afbeeldingen van de bestandtypen gif, jpeg en png zo geschikt maakt voor webpagina's is de compressie die ermee mogelijk is. De afbeeldingen op uw webpagina's moet je klein houden (= aantal bytes). Afbeeldingen groter dan een 50 kilobytes zijn slechts zelden nodig.

Het optimaliseren van de afbeeldingen op uw website is een 'must' als u uw bezoekers van een snelle website wilt voorzien. Hoe lager de bestandsgroottes van deze afbeeldingen zijn, hoe sneller de website zal laden.

Bij gif-afbeeldingen vindt compressie automatisch plaats, de bestandsomvang kan sterk verkleind worden door het aantal kleuren te beperken. Veel tekeningen gebruiken geen 256 kleuren, maar slechts 8 of 16 bijvoorbeeld.

Bij jpeg- en png-afbeeldingen kan de compressiefactor bij het opslaan worden gekozen. Het is verbazingwekkend hoe goed veel afbeeldingen er nog uitzien nadat hun omvang tot een tiende van het oorspronkelijke aantal bytes is teruggebracht. In Photoshop of Gimp (gratis alternative) kunt u de optie 'Save for web and devices' kiezen.

Extra opties bij het opslaan:

  1. Progressive jpg's Als een groot JPG bestand wordt ingeladen, zal deze stukje voor stukje geladen worden, waardoor de inhoud van de website onder het bestand steeds een stukje verder geduwd zal worden. Als je bewaard als jpg en de optie progressive aanvinkt zie je bij start een redelijke versie van het bestand, zodat de bezoeker al een beeld krijgt van wat er op de afbeelding staat, zonder dat het gehele bestand al volledig geladen is.

    Dit bestandsformaat is ideaal voor grote afbeeldingen die via een langzame internetverbinding bekeken worden. Het bestand wordt wel sneller geladen, maar de bestandsgrootte wordt het wel hoger, het maakt meerdere lage resolutie versies van het bestand.
  2. Interlaced PNG's Interlaced PNG's  zijn vergelijkbaar met progressive JPG's. Ze worden sneller getoond, maar verhogen de bestandsgrootte. Niet iedereen heeft Photoshop zomaar tot haar beschikking. Gelukkig zijn er genoeg online websites te vinden waarmee je simpel en snel je foto's kunt comprimeren waardoor je zonder kwaliteitsverlies toch een minder groot bestand overhoudt. Je kan uw afbeeldingen eventueel nog verder comprimeren mbv http://www.jpegmini.com/main/shrink_photo of https://tinypng.com . Om afbeeldingen uit te snijden, te veranderen van formaat en speciale effecten is deze site goed http://www.picresize.com.
2. Hieronder een top 10 van websites waar je gratis foto's kunt vinden in hoge kwaliteit: • https://pixabay.com • http://www.designerspics.com • http://www.imcreator.com/free • https://www.splitshire.com • http://stokpic.com • http://gratisography.com • http://picography.co • http://magdeleine.co • http://photopin.com • http://jaymantri.com

De afkorting van de tag img staat voor image, het is een element zonder inhoud en zonder eindtag De afkorting van de tag img staat voor image, het is een element zonder inhoud en zonder eindtag.

Het belangrijkste attribuut is natuurlijk de src=' ' (source = bron) waarin u het adres plaatst. Je kan bijvoorbeeld een volledige absolute url van het internet gebruiken.

We hebben de afbeelding in de breedte schalen met het attribuut width=' '. Plaatst u in de code alleen de breedte of alleen de hoogte (height), dan wordt de afbeelding netjes geschaald en blijven deze mooi in verhouding. Zonder width=' ' is het de oorspronkelijke grootte.

Het attribuut alt=' ' bewijst zijn nut als de afbeelding niet op de juiste plek staat, als het laden van de website langzaam gaat, verschijnt er in de plaats van de afbeelding een alternatieve tekst.

Voorleesprogramma's, voor blinden en slechtzienden, lezen de alt-tekst voor wanneer ze een img-element tegenkomen. Wat is de ideale alt-tekst? Hou de functie in gedachte en niet de beschrijving ervan. Bijvoorbeeld van een logo dat de websurfer naar de homepage van de website brengt, kan beter 'naar de homepage' noemen als alt-tekst dan 'logo'.

Het attribuut title=' ' zorgt voor een titel wanneer u de muis boven een afbeelding houdt. Het attribuut geeft aanvullende informatie bij een element. Browsers geven de titel weer als tooltip.

5.2.1 Mappenstructuur

Het relatieve pad geeft de weg naar de afbeelding aan vanaf het HTML-document. Als de afbeelding 'zon' bijvoorbeeld twee mappen diep zit dan schrijven we:

Als de afbeelding 'zon' bijvoorbeeld één map terug zit en de HTML-pagina in een submap zit dan schrijven we:

Gebruik geen spaties in de namen van de mappen. Dit kan voor problemen zorgen wanneer de webite op internet gepubliceerd wordt. een spatie in de url wordt als %20 weergegeven. Dan krijg je bijvoorbeeld http://www.pti-ninove.be/eigen%20naam.html en dit oogt onprofessioneel.

Gebruik de daadwerkelijke grootte die je nodig hebt! Als u een afbeelding heeft op uw website die 200x200 pixels ruimte inneemt op uw website, maar u gebruikt een afbeelding van 400x400 pixels die u in uw HTML verkleint naar 200x200 pixels, dan gebruikt u onnodige extra ruimte (en laadtijd) om de afbeelding te tonen.

5.2.2 Inline-element

De html-specificaties maken onderscheid tussen block-elementen en inline-elementen. Een block-element vormt een rechthoek op het scherm. Voorbeelden daarvan zijn de elementen p en h1 tot en met h6. Zij krijgen een volledige rij of breedte beschikbaar.

Inline-elementen kunnen niet op zichzelf staan, maar zijn altijd onderdeel van een omvattend block-element. Voorbeelden zijn li, em, strong. Ook het img-element is een inline-element.

Als je tekst onder een afbeelding plaats moet de afbeelding in een aparte p element staan anders komt de tekst naast de afbeelding te staan. Of je kan een <br /> plaatsen tussen afbeelding en tekst.

Foute code:

Juiste code:

Zoek een jpeg-afbeelding voor je gerecht (zie recept vorig hoofdstuk). Ik heb een foto gevonden bij pixabay. Sla deze lokaal op in een nieuwe map 'afbeeldingen' binnen de hoofdmap 'websiteRecept', de bestandsnaam wordt 'origineelFotorecept.jpg'.

Bewerk de foto zodat er een jpeg-afbeelding ontstaat van 480 bij 360 pixels. Probeer of het lukt om een acceptabele foto te krijgen met een bestandsgrootte van maximaal 40 kilobyte. Sla het eindresultaat op in dezelfde map maar als 'FotoreceptKlein.jpg'.

Zoek nu een png-afbeelding om aan het begin van de elementen van een opsomming te plaatsen. De afmeting mag maximaal 24 pixels zijn. Ik maak gebruik van de website wwww.flaticon.com, selecteer de gewenste extensie en het formaat 24 pixels en kies een gewenste kleur.

Open je vorige oefening het bestand 'oefLijsten.html' en voeg de jpeg-afbeelding toe onder de h1-tag Roerei. Voeg het attribuut alt='foto roerei' en het attribuut title='lekker ontbijt' toe:

Zoek bij de opsomming van ingrediënten een png-afbeelding telkens achter het element li. Geef het attribuut alt='icoon ... eigen beschrijving' mee.

In HTML5 is er voor de image tag 2 nieuwe elementen bijgekomen, het is vooral interessant als je een foto met een bijschrift wilt voorzien. Alles moet staan in de groep <figure> en het bijschrift extra in <figcaption>. In de standaard opmaak van het element figure wordt de hele groep naar rechts ingesprongen. De volledige code ziet er nu zo uit:

Sla de oefening op als 'oefAfbeeldingen.html'. De map afbeeldingen bevat volgende elementen:

  • Originele foto recept + 3 verschillende compressies;
  • verschillende iconen.png volgens de opsomming van ingrediënten.

Samenvatting afbeeldingen:

  • De meest gebruikte vormen van afbeeldingen op het web zijn png, jpg en svg.
  • Een verwijziging naar een afbeelding gebeurt in html met het element img .
  • Verplichte attributen bij het element img zijn src (voor de naam en plaats van de afbeelding) en alt (tekst die de afbeelding vervangt).
  • In het src-attribuut geven we de plaats van de afbeelding aan in de vorm van een relatief pad of als een absoluut pad.
  • Een veelgebruikt attribuut is de width (breedte) van de afbeelding.
  • Een afbeelding is een inline-element.