Plaatjes

BMP, JPG, GIF, PNG. Voor- en nadelen, mogelijkheden

Wat wel of niet kan

Mogelijkheden binnen HTML:

afmeting veranderen
hoogte/breedte verhouding veranderen
kunstjes via <style>
monteren, via <table>, bijvoorbeeld tekst toevoegen
monteren, via <div>, meer mogelijkheden dan met <table>

Kantelen over een willekeurige hoek kan niet binnen HTML.
Animeren is een GIF/PNG kunstje dat wel via HTML weergegeven kan worden.

Of wil je ikonen maken?

Enkele coderingen voor plaatjes zijn

BMP: bitmap
JPG: (jpeg) joint photograpers expert group
GIF: graphic interchange format
PNG: portable network graphics

BMP werkt niet met alle browsers, soms werkt het maar gedeeltelijk. Omdat het niet gecomprimeerd is is het alleen geschikt voor heel kleine plaatjes.

JPEG's zijn heel goed voor foto's, minder voor lijntekeningen. (Zie bijvoorbeeld de bouwplaat.) Afhankelijk van het gekozen kwaliteitsverlies kunnen ze heel sterk gecomprimeerd zijn.

GIF's hebben behalve compressie twee extra's: transparantie en animatie. Met transparantie wordt bedoeld dat een bepaalde kleur van het plaatje niet meedoet, maar dat daar de achtergrond doorschijnt. Met animatie wordt bedoeld dat een GIF samengesteld kan worden uit een aantal andere die snel achterelkaar zichtbaar worden waardoor een filmisch effect ontstaat.

PNG, dat zou het moeten zijn, is nog niet overal geïmplementeerd maar doet het in IE, Opera en NS. Er schijnt iets te doen te zijn over het copyright van de GIF methode, zou een reden kunnen zijn om PNG te gebruiken. Ook transparante PNG's bestaan, moet ik nog proberen!

BMP voorbeeld

BMP blijkt een probleem te zijn. IE en Opera willen ze wel laten zien, Netscape niet. Een BMP als 'background' werkt lokaal wel bij IE, maar via het www niet. Waarom niet, is me nog niet duidelijk Het voorbeeld wat hier stond heb ik verwijderd, verderop staat een BMP die het misschien wel doet...

JPEG voorbeeld

Twee keer dezelfde ster die ik bij veel pagina's als achtergrond gebruikte. Let op het gebruik van <table> om alles zo op het scherm te krijgen als het er nu staat. In de code hieronder is de tekst vervangen door xxx.

<table><tr><td><img src="ster.jpg"
width="100" alt="sterretje"></td>
<td valign="top"><img src="ster.jpg" height="50"
alt="sterretje"></td>
<td valign="top">xxx</td></tr></table>

De tekst "sterretje" wordt zichtbaar als het plaatje niet beschikbaar is, of als het heel langzaam over een trage telefoonlijn moet komen.
Een plaatje heeft een eigen grootte, maak je het veel groter of met andere verhoudingen dan is het resultaat niet altijd wat je zou willen:

sterretje

GIF voorbeeld

Een GIF kan je net zo gebruiken als een JPG. Is het toevallig een transparante GIF en ook nog een animatie dan wordt het wat anders:

Steeds hetzelfde mannetje gebruiken is gunstig voor de laadtijd van de pagina en voor het Mb verbruik. Bij de rode en blauwe achtergrond valt op dat het transparent maken niet helemaal foutloos is gegaan.(gevolg van anti-alias) Dit mannetje bestaat uit maar vier gifjes, kijk maar niet al te goed naar z'n bewegingen.

"kruis.gif", die ken je al. Het is de achtergrond van dit blad. Een GIFje van 21x21, wordt automatisch tot het hele blad uitgebreid. Meer mogelijkheden: background

Transparante GIF's

klik hier voor de gif construction set, daarmee kan je GIF's zowel transparant maken als animeren. Het programma kost 20$, maar ik geloof dat je het ongelimiteerd (privé) kunt gebruiken. De GIF zelf (of de reeks van GIF's) moet je met een tekenprogramma maken. Ze weten daar ook iets van transparante PNG's. Met Irfanview kan je een GIF gratis transparant maken! Bekijk bijvoorbeeld Pyhagoras

Transparate GIF's bestaan dus, transparante applets niet. Gebruik je in een applet een transparante GIF dan zie je de achtergrond van de applet, niet die van de pagina. Bij de schakelaars werkt het wel, via een truc.

PNG voorbeeld

Het voorbeeld wat hier stond beviel me niet langer.

Landschap


HUISBOOM.BMP 46 K bytes	HUISBOOM.JPG 6940 bytes	HUISBOOM.GIF 877 bytes	HUISBOOM.PNG 669 bytes

Met Windows Paint maakte ik een landschap, hierboven met originele afmetingen getoond als BMP, JPG, GIF en PNG. Zie ook tabellen. Het plaatje is 143x106 pixels, dus 143x106x3=45474 bytes. Irfanview werd gebruikt om te comprimeren, steeds met de hoogst mogelijke kwaliteit. Het grijze achtergrondje is met <style> gemaakt.
low Vraag je om maximale JPG compressie dan krijg je een bestand van 716 bytes, maar dat ziet er uit als het plaatje rechts. Ook bij minimale compressie is de horizon al wazig. PNG is hier een duidelijke winnaar.(zie ook schaduw) (en wijs eens met je muis naar die PNG)
Geef je een width=50% zonder iets over de hoogte te zeggen dan wordt het plaatje met onaangetaste verhoudingen (boomkruin==cirkel) half-schermvullend getekend:

GIF

Het is dus niet nodig om hoogte EN breedte op te geven, tenzij je de verhoudingen wilt veranderen. (zie bijvoorbeeld de code van het werkende mannetje) Een reden om die hoogte wel op te geven is dat de pagina layout dan al bepaald kan worden voordat het plaatje helemaal geladen is. Je kunt dan een eventueel gescrollde tekst al lezen zonder dat die telkens wegspringt. Laden van een plaatje als dit duurt, met de telefoon, al gauw tien seconden.

PNG
Bij dit plaatje is height="200" opgegeven zonder iets over de breedte te zeggen.

Een rij huisjes en boompjes links? Klik hier

Huisje en boompje gespiegeld met grafisch programma, apart bestandje. Kan ook met flip filter!

Nu even een foto als JPG en JPG, GIF en PNG:


JPG compressie stap 15, 2615 bytes, niet prachtig maar bruikbaar	JPG, origineel van bouwplaat, 14K	GIF, 30K	PNG, 26K

Neem je het origineel om de PNG te maken dan is die 67K! Hier is de truc gebruikt om eerst de GIF te maken en die dan weer als uitgangspunt voor de PNG te nemen.

Conclusie: neem JPG voor foto's en PNG voor tekeningen.

plaatjes met tekst

Een plaatje met tekst combineren kan je doen door het plaatje als achtergrond voor een tabel te nemen. Maak de cel even breed en hoog als het plaatje of iets kleiner. Niet groter, dan gaat 'ie 'tegels' maken zoals bij de achtergrond van een pagina. Als data kan je een tekst nemen:

zomerhuis

of zelfs een 'marquee':

te koop: zomerhuisje, vaste prijs 2.250.000,-

of vier in een tabel: briefkaart, staand of briefkaart, liggend Sluit de vorige voordat je de volgende bekijkt!

Klik hier voor de code (de code voor de liggende briefkaart ontbreekt. Is wel te vinden: klik rechts op de briefkaart en kies 'bron weergeven' of iets dergelijks.
Eigenlijk kan je overlappende elementen handiger met <div> maken.

Deze komt, alweer, uit de NIWO nieuwsgroep. Ga met de MUIS over HUIS, en verbaas je over de mogelijkheden van Javascript.
En dan deze MUIS nog (zit niet in de codelisting!)
Kijk ook hier!

<script language="JavaScript" type="text/javascript"><!--

if (document.images) {
  img1a = new Image(); img1a.src = "http://home.hetnet.nl/~bbarf/huisboom.gif";
  img1b = new Image(); img1b.src = "46.gif";
}

function rolin(imgName) {
  if (document.images)
    document[imgName].src = eval(imgName + "b.src");
}

function roluit(imgName) {
  if (document.images)
    document[imgName].src = eval(imgName + "a.src");
}
//--></script>


<img src="http://home.hetnet.nl/~bbarf/huisboom.gif" width=250 height=200 name="img1" alt="http://home.hetnet.nl/~bbarf/huisje?" border="5">
<br><br>
Deze komt, alweer, uit de NIWO nieuwsgroep. Ga met de MUIS over
<a href="#"
  onmouseover="rolin('img1');"
  onmouseout="roluit('img1');">HUIS</a>,<br>
en verbaas je over de mogelijkheden van Javascript.