Afbeeldingen op webpagina's

heel klein plaatje klein plaatje Minder klein plaatje iets groter plaatje

Hiernaast, zie je vier kleine afbeeldingen. In feite is het vier keer hetzelfde plaatje. ☞
Dit plaatje wordt door de browser vier keer op verschillende grootten weergegeven.

Gereserveerde ruimte van 103 bij 88 pixelsGereserveerde ruimte van 40 bij 33 pixelsGereserveerde ruimte van 20 bij 17 pixelsGereserveerde ruimte van 10 bij 9 pixels

Om dat te bereiken, zijn in de pagina vier uitsparingen gemaakt waar de afbeelding in "gepropt" wordt.☞
Het plaatje is eigenlijk te groot voor de ruimtes waar het in moet, vandaar ook de korrelige lijnen.

Sommige plaatjes zijn groter dan je denkt

Het plaatje zelf is namelijk 353 pixels breed.☟

Klein, breed plaatje Groot plaatje Klein, hoog plaatje

En 412 pixels hoog !☞

Het plaatje is 353 bij 412 pixels.

Ik heb overigens gelogen; vanwege de opmaak heb ook ik dit plaatje gepropt. Klik op het grote plaatje om te zien wat het ware formaat is.☞

Het in de pagina proppen heeft drie nadelen:
  1. De afbeelding wordt meestal lelijk.
  2. Een groter plaatje duurt langer om te downloaden.
  3. Het kost meer webruimte.
Voordeel:

Wanneer hetzelfde plaatje meerdere keren word gebruikt, kan het handig zijn om steeds hetzelfde plaatje te gebruiken.
Maar de afbeelding mag nooit groter worden dan het grootste formaat (afmeting: hoogte × breedte), waarin je het wilt tonen.

Wanneer je een plaatje meerdere keren gebruikt wordt het maar éen keer gedownload.

Dat geldt niet voor kopieën; dat zijn andere plaatjes, ook wanneer ze dezelfde naam hebben.

Op deze pagina heb ik slechts vier plaatjes gebruikt, te weten:
  1. 1 × drummer.gif
  2. 4 × non.png
  3. 7 × propplaatje.png
  4. 1 × i_viewlogo.png

Afbeeldingen bewerk je met een image-editor.

Het proppen van plaatjes in een HTML-pagina, gebeurt meestal, omdat mensen de denkfout maken dat je met een HTML-editor een plaatje kleiner kan maken. Het is simpel:

Irfanview is een gratis image-editor.
Irfanview logo

Een zeer goede editor is Irfanview. Het programma staat bekend als viewer (waarschijnlijk vanwege de naam). Maar vrijwel alle bewerkingen zijn mogelijk, behalve tekenen.

Na installatie:
  1. Open de afbeelding met Irfanview.
  2. Toets: CRTL + R.
  3. typ het formaat in.
  4. Toets: S.
  5. Geef het een nieuwe naam.
Bewerk altijd een kopie van het orgineel (het orgineel wil je behouden).

Andere onderwerpen:

  1. HTML voor Drummers
  2. FLASH voor Drummers
  3. Plaatjes voor Drummers
© 2006 Joost
×