GIF of JPEG?
GIF en JPG zijn twee compressiemethoden voor grafische afbeeldingen. Ze doen de compressie op een verschillende manier, en daardoor zijn ze voor verschillende soorten afbeeldingen geschikt.GIF
GIF compressie werkt goed als er veel pixels naast elkaar staan met dezelfde kleur. Bijvoorbeeld bij een tekening in weinig kleuren, of een computer-gegenereerd grafiekje. Het volgende plaatje is daar een goed voorbeeld van; een tamelijk groot plaatje (400x340 pixels) en toch maar 4K in bestandsgrootte:
JPEG
JPEG compressie werkt goed als er veel vloeiende overgangen in de kleuren zijn, zoals altijd gebeurt op foto's. Een goede JPEG versie van een foto kan 4x zo klein zijn als de GIF versie. Een ander nadeel van GIF in het geval van foto's is het feit dat GIF maar 256 kleuren aankan. JPEG heeft die beperking niet, dus op een goed beeldscherm zal een JPEG plaatje er veel mooier uitzien dan een GIF.Hier is een foto; links is een JPEG met een kwaliteits-setting van 60 (voor op een beeldscherm zeer acceptabel), en is maar 14K. Rechts is de GIF versie; even groot in pixels, maar het bestand is 53K, bijna vier keer zo groot!
Vermeld het formaat
Als Netscape weet hoe groot je plaatjes zijn, kan hij de tekst al neerzetten voor de plaatjes ingeladen zijn. Daarvoor zijn twee opties bij het <img> tag:
<img height=300 width=204 SRC="foto.jpg">
Als je dus de maten van de foto in het img-tag zet, kunnen Netscape-gebruikers (en nieuwere andere browsers trouwens ook) je pagina al zien voor de plaatjes geladen zijn. Dit is dus een ENORME versnelling, en het is dan
ook zeer aan te raden dat te doen.
Als Netscape namelijk een plaatje nog niet heeft ingeladen, en hij weet niet hoe groot dat plaatje wordt, laat hij de complete rest van de pagina nog niet zien. Je zit dan dus te wachten op dat ene plaatje, terwijl de rest al is ingeladen.
Een eenvoudige manier om achter het formaat van je plaatje te komen is om tijdens het maken van je pagina het plaatje even los in te laden (muis over plaatje houden, rechterknop indrukken, en kies `Open this image'.); het formaat komt dan in de titelbalk van Netscape.
Als je dat te vermoeiend vindt, kan je een Perl script gebruiken genaamd wwwimagesize.
Transparante/Interlacede GIF
Een interlacede GIF is een plaatje dat niet van boven naar beneden inlaadt, maar in horizontale 'strookjes'. Op die manier is er al eerder iets te herkennen van het plaatje wat komen gaat. Een transparante GIF is een plaatje waarvan een van de kleuren op `transparant' is gezet, zodat je de achtergrond blijft zien. Een voorbeeld van een interlacede gif is te zien op de `Mooie Plaatjes' afdeling van het Sterrenkundig Instituut.De vraag is dan `Hoe maak ik die?'. Software voor vrijwel alle platforms is te vinden op The Transparent/Interlaced Resources Page. Ik zelf gebruik Giftool en soms GifTrans (Unix).
Plaatsing van de plaatjes
Je kan een plaatje links of rechts plaatsen door align=left of align=right toe te voegen in het img-tag. De tekst gaat dan ook vanzelf `om het plaatje heen lopen'.Als je dat wilt stoppen moet je <br clear=all> invoegen. De volgende tekst komt dan op een nieuwe regel, onder het plaatje. (Gebruik clear=left of clear=right als je alleen het plaatje links of rechts wil overslaan.)
De alt-optie
Sommige mensen gebruiken tekst-browsers en zien geen plaatjes, of zitten op een zodanig trage verbinding dat de plaatjes te laat (of nooit) komen. Voor die gebruikers is het nuttig om zogenaamde alt-opties toe te voegen aan je <img>-tag, op deze manier:
<img src="logo.gif" width=100 height=30
alt="Welkom op de Persil-Homepage">
Op deze manier zien tekstuele mensen tenminste nog iets zinvols. Dit is zeker aan te raden als je ikoontjes gebruikt; op onze instituuts-pagina probeer ik consequent de `balletjes' te voorzien van een alt-tagje op deze manier:
<img align=bottom src="/icons/blueball.gif" alt=o>Op deze manier zien Lynx-gebruikers een keurig `o' teken, waar grafische mensen een blauw bolletje zien:
Lynx versie:
Grafische browsers:
Dit idee kan je nog een stap verder voeren als je transparante 1-pixel gifjes gebruik. Met een grafische browser zijn die onzichtbaar, met met een tekst-browser krijg je het alternatief. Dit geeft je de mogelijkheid om een tekst-alternatief te maken zonder dat die tekst zo hinderlijk in beeld staat!
Voorbeeld: Mijn Homepage. Voor een grafische browser ziet die er zo uit:
Dankzij het gebruik van alt-tags ziet de Lynx-versie er zo uit:
Voor iedere clickable map is dus een alt-tag op deze manier gemaakt:
<img height=167 width=250 src="jpg/ster.JPG"
ismap border=0 usemap="#ster"
alt="Clickable Map - Astronomy">
zodat er iets vriendelijkers staat dan [ISMAP], en onder aan de pagina is voor ieder item deze constructie gemaakt:
<a href="javaplein/"><img width=1 height=1
border=0 src="/icons/dot_clear.gif"
alt="Het Javaplein"></a>
De layout van deze `plaatjes' is gemaakt met een <pre>-omgeving, zodat de teksten netjes in twee kolommen komen. Dit werkt prima om een tekst-alternatief te bieden voor clickable maps, als je niet de layout van de pagina wil verzieken met allerlei teksten.
De linkjes op deze pagina:
