Veel mensen plaatsen onbekommerd grote plaatjes en foto’s op hun website. Om echter niet de limieten van het dataverbruik en de diskruimte bij je webhost te overschrijden, kan het nodig zijn om deze afbeeldingen eerst te optimaliseren voordat je ze uploadt. Bovendien kun je daardoor de laadtijd van je website verkleinen.

Optimaliseren slaat op de bestandsgrootte: je wilt de afbeelding zo duidelijk mogelijk op je site tonen, maar tegelijkertijd het bestand zo klein mogelijk houden. Op deze manier kost het weinig diskruimte en levert het zo weinig mogelijk dataverkeer op.

Afmetingen aanpassen

Een afbeelding kan met HTML-eigenschappen kleiner worden weergegeven op de pagina, dan hij in werkelijkheid is. Dit wordt vaak als oplossing gekozen om een afbeelding die niet mooi op de pagina past te verkleinen. Dat is echter pure verspilling: het bronbestand is dan onnodig groot.

Verklein het plaatje tot de werkelijke afmetingen waarin je het wilt tonen: als je een foto op 400×300 pixels toont, upload de foto dan ook in die afmeting. Verklein met Photoshop of een eenvoudig fotobewerkingsprogramma als Paint Shop Pro of Irfanview de foto tot het gewenste formaat en sla hem opnieuw op.

Het kleinste bestandstype

Een afbeelding van een bepaalde afmeting kan verschillende bestandsgroottes hebben, afhankelijk van het bestandstype waarin je de afbeelding opslaat en de instellingen die daarbij behoren. Het is van belang dat je het bestandstype kiest dat voor die specifieke afbeelding het kleinste bestand oplevert zonder de beeldkwaliteit te verminderen.

Photoshop heeft een handige Save for Web-optie: daarmee wordt overbodige informatie uit het bestand weggelaten en kun je eenvoudig bekijken welk bestandstype het kleinste bestand oplevert: GIF, JPG of PNG. Daarbij moet je natuurlijk wel letten op de beperkingen die ieder type heeft.

GIF-formaat

Dit bestandstype is zeer geschikt voor abeeldingen met weinig kleurverschil: hoe meer grote vlakken van één kleur, hoe makkelijker het bestand klein gehouden kan worden. Dit bestand heeft als nadelen dat er per bestand slechts 256 verschillende kleuren kunnen worden gebruikt en dat het geen gedeeltelijke transparantie ondersteunt.

JPG-formaat

Dit formaat wordt veelal gebruikt voor foto’s. JPG is in staat om afbeeldingen met veel verschillen in kleur, patroon en contrast flink te comprimeren zonder zichtbare achteruitgang in beeldkwaliteit. Het kan miljoenen verschillende kleuren per bestand opslaan en je kunt de mate van compressie instellen. Let op: teveel compressie levert wél zichtbare verstoringen in het beeld op, je zult dus een beetje moeten spelen met deze instelling. De foto die je eerder in dit artikel zag, is met JPG slechts 23 KB groot, terwijl GIF en PNG respectievelijk 46 en 43 KB zouden opleveren.

PNG-formaat

PNG is in feite de opvolger van het GIF-formaat. Ook hier worden bestanden flink gecomprimeerd zonder kwaliteitsverlies. Bij foto’s kan JPG vaak een kleiner bestand opleveren, bij andere afbeeldingen is PNG een goede keuze. PNG biedt net als GIF de mogelijkheid tot transparantie, maar ondersteunt ook nog eens gedeeltelijke transparantie. Hiermee kun je mooie afbeeldingen creëren die overlopen op de achtergrond. Het nadeel van PNG is dat de transparantie niet ondersteund wordt door Internet Explorer 6.