Handboek HTML5 & CSS3: bitmaps en vectorafbeeldingen

Hansboek HTML5 & CSS3

Handboek HTML5 en CSS3Het boek van de maand september is het Handboek HTML5 & CSS3, waarvan net de 4e bijgewerkte editie is verschenen. Deze maand publiceren we op dit blog een aantal voorproefjes uit deze 4e editie van dit Handboek HTML5 en CSS3. Dit voorproefje behandelt de soorten afbeeldingen die je in webpagina’s kunt gebruiken: bitmaps en vectorafbeeldingen. Een interview met Peter Doolaard vind je HIER. De twee andere voorproefjes uit het boek HIER en HIER.(H.F.)

Soorten afbeeldingen

Met behulp van CSS kan tekst fraai worden opgemaakt, maar desondanks is een webpagina zonder afbeeldingen bijna ondenkbaar. Al is het maar een logo. Op een webpagina kunt u diverse, maar niet alle typen afbeeldingen gebruiken. Globaal zijn er twee mogelijkheden: bitmaps en vectorafbeeldingen.

Bitmaps

Een bitmap of rasterafbeelding is opgebouwd uit pixels, beeldpunten. Het aantal pixels bepaalt hoe groot een afbeelding kan worden getoond, of beter: tot welke grootte de afbeelding er nog mooi uitziet. Een kleine bitmap die u groot laat weergeven krijgt kartelranden en ziet er niet uit. Dat komt doordat de pixels moeten worden vergroot om de gewenste ruimte op te vullen. Het is daarom belangrijk dat een foto voldoende pixels heeft voor de gewenste weergave. Op een beeldscherm is dat in het algemeen eenvoudig te bepalen. In de eigenschappen van de afbeelding ziet u hoeveel pixels er in de hoogte en breedte beschikbaar zijn en met die afmetingen kan de foto zonder problemen worden getoond. Het wordt een ander verhaal als u de gebruiker de mogelijkheid wilt bieden om het beeld in hoge kwaliteit af te drukken, want dan moet u ook rekening houden met de afdrukresolutie.

Bij foto’s uit een digitale camera speelt overigens meestal het omgekeerde probleem: er zijn te veel pixels. Op zichzelf is dat niet erg, maar al die beeldinformatie moet ook over de dataverbinding worden getransporteerd en dat kan ervoor zorgen dat het lang duurt voordat de foto is geladen. In die situatie zult u daarom het beeld vooraf verkleinen. Een beproefd concept is een galerij van miniaturen die linken naar de afbeeldingen op groot formaat. De grote afbeelding wordt pas geladen als de gebruiker hem ook daadwerkelijk wil bekijken en op de link klikt.

Met de komst van hogeresolutieschermen op mobiele apparaten is het verhaal nog wel iets lastiger geworden, omdat dergelijke schermen in staat zijn haarscherpe foto’s weer te geven. Dan moet zo’n foto ook wel in hoge resolutie beschikbaar zijn. Voor een bezoeker met een ‘normaal’ scherm zijn al die pixels echter alleen maar ballast. HTML biedt met het element in combinatie met media queries mogelijkheden om dit probleem (deels) te ondervangen; die komen verderop aan de orde.

De kleuren van een bitmap zijn opgeslagen in de pixels. Een beeldscherm geeft kleur weer volgens het RGB-model. RGB staat voor de kleuren rood, groen en blauw. Elke pixel kan voor elke kleur een waarde hebben van 0 tot 255. Een rode pixel heeft de waarden 255, 0, 0, een groene pixel 0, 255, 0 en een blauwe pixel 0, 0, 255. Hoe hoger de waarde, hoe groter de helderheid van de kleur. Zwart is 0, 0, 0 en wit is 255, 255, 255. Grijstinten ontstaan als de RGB-waarden gelijk zijn. Een middengrijze kleur is in RGB 128, 128, 128.

Niet elke type bitmapbestand is geschikt voor het web. Niet geschikt zijn bijvoorbeeld BMP, TIF, CDR enzovoort. Deze worden verder ook niet genoemd. De volgende typen zijn geschikt en worden hierna besproken:

  • GIF
  • JPG
  • PNG

Kleur in CSS • Op zichzelf hebben kleur en kleurmodellen niets met HTML te maken, maar des te meer met CSS. Beschouw deze uitleg als een beknopte inleiding. In de hoofdstukken over CSS wordt meer verteld over kleur.

Vectorafbeeldingen: SVG

Een vectorafbeelding is niet opgebouwd uit pixels. Het beeld wordt door wiskundige berekeningen samengesteld uit punten, lijnen, krommen en dergelijke. Een vectorafbeelding is een wiskundige beschrijving van de vormen en kleuren.

Het grote voordeel van vectorafbeeldingen boven bitmaps is dat ze niet lelijk worden als ze worden geschaald. Ze kunnen op elke grootte worden weergegeven. Dat is een reden om bijvoorbeeld logo’s of pictogrammen als vectorafbeelding te maken.

Voor het tekenen van vectorafbeeldingen is speciale software nodig, bijvoorbeeld Adobe Illustrator of CorelDRAW. Een foto kunt u niet ‘opslaan als’ vectorafbeelding en gebruiken als schaalbaar beeld in een webpagina. Vectorafbeeldingen hebben een eigen webstandaard: SVG. Dit staat voor scalable vector graphics. SVG is een markeertaal zoals HTML, maar dan een XML-dialect voor het beschrijven van afbeeldingen. Uitleg van deze taal voert te ver voor dit boek, maar bijvoorbeeld de beschrijving van een rechthoek zou er zo uit kunnen zien:

Deze rechthoek (rectangle) heeft een breedte van 200 pixels, een hoogte van 100 pixels en een olijfkleurige vulling.

Het aardige is dat u ook zonder kennis van de taal aan de slag kunt. Bijvoorbeeld Adobe Illustrator biedt de mogelijkheid om vectorafbeeldingen op te slaan als svg-bestand. Om u een idee te geven, de volgende code is het resultaat van het opslaan als SVG-bestand van een rode cirkel gemaakt in Illustrator:

bitmap en vectorfbeeldingen

Tussen alle elementen en attributen herkent u het element met attributen voor vulkleur, randkleur en straal. Naar deze afbeelding (de naam is cirkel.svg) kunt u in het HTML-document net zo verwijzen als naar een bitmap:

svg bitmaps en vectorafbeeldingen

Deze afbeelding ziet er op elke grootte scherp uit, probeer
het zelf: upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg.

Het werken met SVG vergt extra studie, maar het is zeker de moeite waard als u het belangrijk vindt om schaalbare afbeeldingen te gaan gebruiken. Denk daarbij ook aan het groeiende aandeel van mobiele browser en verschillende beeldschermresoluties. SVG is bijvoorbeeld zeer geschikt voor interface-elementen en achtergronden. De browserondersteuning is lang niet geweldig geweest, maar sinds de komst van HTML5 is die sterk verbeterd. U vindt de specificatie SVG op www.w3.org/TR/SVG/. Een interessante bron is ook css-tricks.com/using-svg/.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.