HTML 5

Afbeeldingen aanpassen

Om afbeeldingen aan te kunnen passen heb je een photo-editor nodig. In deze cursus gebruiken we op windows het programma paint.net op de mac is dat voorvertoning. Er zijn gratis editors die veel meer opties hebben, maar meer is niet altijd beter. Gimp is bijvoorbeeld een open source kloon van Photoshop. Adobe Photoshop is de standaard als het gaat om beeldbewerking, maar daar hangt dan ook een prijskaartje aan.

Als software developer hoef je niet een geweldenaar te zijn op het gebied van beeldbewerking, maar je moet wel met een technisch oog kunnen kijken naar afbeeldingen en je moet afbeeldingen kunnen optimaliseren voor het gebruik op internet.

De volgende handelingen zijn van belang:

Als webontwikkelaar wil je graag afbeeldingen met een zo hoog mogelijke kwaliteit, maar met een zo klein mogelijke bestandsgrootte. Alle afbeeldingen moeten over het (internet)netwerk naar je computer worden gestuurd en dat kost tijd. Voor iedere website geldt: 'All you need is speed!'

Bestandsformaat kiezen

Je kunt afbeeldingen grofweg in 3 categorieën indelen.

Lijntekeningen

Logo's, symbolen, letters en beeldmerken bestaan meestal uit een paar kleuren en vormen. Deze vormen kun je maken met programma's die vectortekeningen ondersteunen. Denk hierbij aan Adobe Illustrator of Inkscape (free). De afbeeldingen worden gemaakt door punten te zetten en deze met lijnen te verbinden. Het voordeel van vectortekeningen is dat ze output-onafhankelijk zijn. Je kunt vectortekeningen schalen zonder dat er kwaliteitsverlies optreedt en vectorbestanden zijn klein! Je bewaart vectorbestanden voor internettoepassingen in .svg formaat.

(filmpje over illustrator)

Clipart

Clipart zit een beetje tussen vector en foto in. Denk hierbij aan illustraties waar niet alleen vaste lijnen en vormen zijn gebruikt, maar ook verlooptinten en schaduwen. Deze illustraties kun je niet met vectoren maken. Clipart afbeeldingen bestaan uit pixels. Het aantal pixels en het aantal kleuren bepaald uiteindelijk de bestandsgrootte. Clipart afbeeldingen kun je meestal kleiner maken door het aantal kleuren te verminderen. Het bestandsformaat waar je dit mee kan doen is .png.

Foto's

Foto's bestaan uit pixels en miljoenen kleuren. Dit levert in 'raw'-formaat grote bestanden op. Je kunt foto's comprimeren (= kleiner maken) door overbodige kleuren weg te laten. Een foto van een blauwe lucht bestaat uit heel veel pixels met (bijna) dezelfde kleur. Door deze informatie slim op te slaan, kun je kleinere bestanden maken. Door de kleurverschillen tussen de blauwe pixels te verminderen doe je wel concessies aan de kwaliteit. Het bestandsformaat waar je foto's in bewaard is .jpg

Foto's bijsnijden

Om foto's passend te maken voor gebruik op internet moet je het volgende doen: