Inline image: verschil tussen versies

Interactief door geschiedenis bladeren

← Oudere bewerking Nieuwere bewerking →

Verwijderde inhoud Toegevoegde inhoud

VisueelWikitekst

In de regel

Versie van 4 dec 2005 18:22

"Larry" als inline image

Larry

Op internet wordt meestal het plaatje "Larry" als voorbeeld gebruikt van een inline image. Normaal is de code voor een dergelijk plaatje:

<img src="Larry.gif" alt="Larry">
Als de browser dit leest, dan haalt de browser dit plaatje apart op van de webserver. Een inline image heeft de volgende code:
<IMG
SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP
///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQ
u5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRN
zOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7J
pJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZe
YGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk
0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uN
na3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7"
ALT="Larry">

Een inline image is een plaatje dat in de HTML code zelf staat, en waarbij dus niet verwezen wordt naar een extern plaatje.

Voor een inline image moet de binaire code van het plaatje worden omgezet naar platte tekst door het met base64 te coderen. Het resultaat wordt daarna als data uri in de tag voor het plaatje gezet (zie kader). Deze manier van een plaatje in HTML zetten is volgens Request For Comments nummer 2397.

Het werkt alleen bij erg kleine plaatjes, omdat de lengte van de tekst in een <img> tag aan een maximum is gebonden. Bovendien ondersteunen niet alle browsers het principe, bijvoorbeeld Internet Explorer biedt hier geen ondersteuning voor.

Het voordeel van een inline image is dat er geen apart HTTP request hoeft te worden gedaan om het plaatje op te halen. Bij client-side XML/XSL transformatie is dat voordeel nog groter omdat het gecodeerde plaatje slechts eenmaal in de XML of XSL hoeft te worden opgenomen om het plaatje meerdere malen in de webpagina te kunnen tonen, de browser hoeft niet in de cache te controleren of het betreffende plaatje al is opgehaald.

Er zijn twee andere manieren bekend om de code voor plaatjes in de HTML zelf op te nemen. Beide maken gebruik van javascript en beide werken slechts in enkele browsers. Deze methoden zijn ook geen standaard, zoals de RFC2397 dat wel is.

Externe links

RFC2397
Inline Images on Web Pages, webpagina waar ook andere mechanismen voor inline images worden besproken (Engels)

Sjabloon:Webdesign

@@ Regel 21: / Regel 21: @@
 Een '''inline image''' is een plaatje dat in de [[HyperText Markup Language|HTML]] code zelf staat, en waarbij dus niet verwezen wordt naar een extern plaatje.
-Voor een ''inline image'' moet de binaire code van het plaatje worden omgezet naar [[platte tekst]] door het met [[base64]] te coderen. Het resultaat wordt daarna als [[data url]] in de ''tag'' voor het plaatje gezet (zie kader). Deze manier van een plaatje in HTML zetten is volgens [[Request For Comments]] nummer 2397.
+Voor een ''inline image'' moet de binaire code van het plaatje worden omgezet naar [[platte tekst]] door het met [[base64]] te coderen. Het resultaat wordt daarna als [[data uri]] in de ''tag'' voor het plaatje gezet (zie kader). Deze manier van een plaatje in HTML zetten is volgens [[Request For Comments]] nummer 2397.
 Het werkt alleen bij erg kleine plaatjes, omdat de lengte van de tekst in een <nowiki><img></nowiki> tag aan een maximum is gebonden. Bovendien ondersteunen niet alle browsers het principe, bijvoorbeeld [[Internet Explorer]] biedt hier geen ondersteuning voor.