Natuurlijk wil je dat de pagina’s van je website lekker snel laden. En je wilt niet onnodig betalen voor extra dataverkeer en diskruimte bij je webhost. Daarom is het belangrijk om de plaatjes en foto’s zo klein mogelijk te maken.
Met klein bedoel ik niet de afmetingen, maar de bestandsgrootte. Dit is het aantal kilobytes (kB) van het bestand. Voordat je plaatjes uploadt moet je ze daarom eerst optimaliseren.
Optimaliseren
Optimaliseren is: een plaatje zo duidelijk en zo mooi mogelijk op je site tonen, maar tegelijkertijd het bestand zo klein mogelijk houden.
Veel mensen uploaden grote foto’s naar hun website. Als de foto niet mooi op de pagina past verkleinen ze die met HTML-eigenschappen zodat de foto kleiner wordt weergegeven dan hij in werkelijkheid is. Dit is zonde: het bestand is onnodig groot.
De juiste afmetingen
Verklein elk plaatje tot de werkelijke afmetingen waarin je het wilt tonen op je website. Als je een foto in 360×240 pixels wilt tonen, upload de foto dan ook in die afmeting. Verklein de foto met Photoshop of een ander fotobewerkingsprogramma tot het gewenste formaat. Bewaar hem onder een andere naam.
Geef alle bestanden die je aan je website toevoegt internet-namen. Dat wil zeggen: geen spaties, hoofdletters en leestekens.
Heb je geen fotobewerkingsprogramma, dan kun je op fotoverkleinen.nl online je foto verkleinen en bewaren.
Bestandstypen
Er zijn 3 bestandstypen voor het web: JPEG, GIF en PNG. Alle 3 comprimeren plaatjes tot kleine bestanden en maken de resolutie 72 dpi, de juiste resolutie voor het web.
-
JPG (JPEG)
Dit bestandstype kies je voor foto’s. JPEG kan plaatjes met veel verschillen in kleur, patroon en contrast flink comprimeren zonder zichtbare verlies van beeldkwaliteit. Het kan miljoenen verschillende kleuren per bestand opslaan en je kunt de mate van compressie instellen. Te veel compressie levert een blokkerig beeld op, je moet een beetje experimenteren met de instellingen. JPEG ondersteunt geen transparantie.
-
GIF
GIF comprimeert bestanden zonder kwaliteitsverlies. Dit bestandstype is geschikt voor plaatjes met weinig kleuren. Hoe meer grote vlakken van één kleur, hoe kleiner het bestand. Nadeel is dat er slechts 256 verschillende kleuren kunnen worden gebruikt. Bij GIF kun je een adaptief palet gebruiken. Je kiest de beste kleuren uit voor een plaatje (dat kunnen er bijvoorbeeld slechts 8 zijn) zodat dit zo klein mogelijk blijft, maar wel een goede kwaliteit behoudt. GIF is dus niet geschikt voor afbeeldingen met veel verschillende kleuren, zoals foto’s of illustraties met kleurverlopen. GIF ondersteunt transparantie, maar geen gedeeltelijke transparantie.
-
PNG
PNG comprimeert bestanden ook zonder kwaliteitsverlies. PNG biedt net als GIF de mogelijkheid tot transparantie, maar ondersteunt ook alpha-transparantie. Alpha-transparantie kan ook gedeeltelijk transparant zijn. Hiermee kun je mooie afbeeldingen maken die overlopen in de achtergrond. Een nadeel van PNG is dat Internet Explorer geen transparantie ondersteunt.
Welk bestandstype kies je?
Probeer altijd het bestandstype te kiezen dat voor een specifieke afbeelding het kleinste bestand oplevert met de beste de beeldkwaliteit.
Photoshop heeft een handige optie: Save for Web. Hiermee wordt overbodige informatie uit het bestand weggelaten en kun je zien welk bestandstype het kleinste bestand geeft: GIF, JPG of PNG. Let daarbij wel op de beperkingen die ieder type heeft.