weballey logo
 
left Web design - minimaliseren backnext right
homesearchsite mape-mail
ALGEMEEN

WERKWIJZE

BANDBREEDTE

LAYOUT

GRAPHICS

paletten
voorbeelden
webpalet
anti-aliasing
dithering
< minimaliseren >
achtergronden

      Afbeeldingen verbruiken nogal wat bandbreedte. Het kan de moeite waard zijn ze te minimaliseren. Je pagina's zullen sneller laden, je site wordt ook in zijn geheel sneller. De huidige congestie van het internet kan ervoor zorgen, dat je bezoekers hun heil elders zoeken, als je het niet doet. Er zijn diverse methoden om je grafische bestanden kleiner te maken.

Geen afbeeldingen
    Vraag je altijd af of je een bepaalde afbeelding wel nodig hebt. Titels met een slagschaduw zijn leuk, maar nemen al gauw 20 kB in beslag. Als het gewoon in HTML kost het hoogstens een paar bytes. Een tabel met een gekleurde achtergrond kun je gebruiken als kleurvlak achter de titel. Hetzelfde geldt voor achtergronden. Heb je echt grafische links nodig, of kun je ook met een tekst link volstaan. Heb je Javascript rollovers nodig, of is een enkele afbeelding ook wel genoeg.

Minder afbeeldingen
    Een goed gekozen afbeelding kan je pagina echt tot leven laten komen. Hoe meer je er gebruikt, hoe minder het effect van het laatst toegevoegde beeld zal zijn. Mogelijk heb je slechts een handvol plaatjes nodig om een goede pagina te maken. Zoek naar een balans tussen een aantrekkelijke layout en de hoeveelheid afbeeldingen.

Kleinere afbeeldingen
    Maak je afbeeldingen niet groter dan nodig. Je bezoekers zitten op minder dan een meter van hun scherm. Je afbeeldingen hoeven het beeld echt niet te vullen. Maak een afbeelding 30% kleiner, en het bestand wordt meer dan de helft kleiner. Je kunt ook een kleinere uitsnede kiezen als de achtergrond er niet zo toe doet. Je kunt ook het onderwerp uitsnijden and de achtergrond helemaal weglaten.

Geen animaties
    Animaties kunnen een heel aardig effect hebben op een webpagina. Maar denk erom dat elk beeldje in zo'n animatie een afbeelding is. Een animated GIF van twintig beeldjes is dus ruwweg twintig keer zo groot als een stilstaand beeld. Een postzegeltje groeit makkelijk uit tot 100 kB of meer. Vraag je dus altijd af of je dat wel werkelijk nodig hebt.

Kies het juiste bestandsformaat.
    In het algemeen kun je het beste JPEG gebruiken voor foto's en afbeeldingen met veel verlopende kleurvlakken. Eenvoudige 'grafische' afbeeldingen doen het beter in GIF. Die kunnen er zelfs heel beroerd uitzien in JPEG. Er zijn andere formaten zoals PNG, maar die worden (nog) niet door alle browsers ondersteund, dus wacht daar nog maar even mee. BMP's werken alleen maar in Internet Explorer, en zijn sowieso veel groter dan GIFs.

Verminder het aantal kleuren
    Een afbeelding kan aanzienlijk krimpen door het aantal kleuren te verminderen. Een GIF heeft standaard 256 kleuren, maar je kunt elk getal tussen 2 en 256 gebruiken. De grooste reducties krijg je door het webhalen van een 'bit'. 256 is 8, 128 is 7 bits, etc. Een bit weghalen halveert het palet in een GIF, waardoor je kleinere getallen nodig hebt om de kleuren aan te duiden. Simpele afbeeldingen doen het vaak al heel goed in 16 kleuren. Kleine afbeeldingen hebben vaak minder kleuren nodig dan grote.
    JPEGs zitten wat anders in elkaar, je stelt daar de mate van compressie in. Een grotere compressie maakt de afbeelding kleiner, maar geeft ook kwaliteitsverlies. Het aantal kleuren is altijd gelijk (24 bit, of 16,7 miljoen), of het moet een 'grayscale' zijn, die heeft er 256. Probeer eens wat verschillende instellingen uit in je editor, en zoek een balans tussen kwaliteit en kwantiteit. Een aardige truc is de afbeelding als GIF op te slaan, vervolgens weer te openen en als JPEG op te slaan. Het effect ervan kan enorm zijn, als er veel kleuren in de afbeelding voorkomen.
    Een heel aardig programma om met dit soort dingen te experimenteren is DeBabelizer.

Verwijder ballast
    Afbeeldingen kunnen veel overbodige informatie bevatten. GIFs bevatten vaak tekstblokken, die geen enkele invloed hebben op de kwaliteit van de afbeelding. JPEGs bevatten vaak 'thumbnails' van rond de 5 kB. Dat maakt natuurlijk niet zoveel uit op een foto van 200 kB, maar wel alshet plaatje zelf twee of drie kB groot is. Het bestand wordt dan meer dan twee keer zo groot. Het gebruik van thumbnails is overigens standaard in Photoshop. Er zijn twee aardige utilities, die ik wil noemen. Op een beetje site kunnen je ze al gauw 100 kB besparing opleveren.

bottom  
left Copyright © Gerben Hoekstra - Alle rechten voorbehouden backnext right