For faster navigation, this Iframe is preloading the Wikiwand page for Inline image.

Inline image

Uit Wikipedia, de vrije encyclopedie

"Larry" als inline image
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 afbeelding die in de HTML- of CSS-code zelf staat, en waarbij dus niet verwezen wordt naar een externe afbeelding.

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

Het werkt alleen bij erg kleine afbeeldingen, omdat de lengte van de tekst in een <img>-tag aan een maximum is gebonden.

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

Er zijn twee andere manieren bekend om de code voor afbeeldingen 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.

In CSS kan de base64-code opgenomen worden in de eigenschap background-image.

{{bottomLinkPreText}} {{bottomLinkText}}
Inline image
Listen to this article

This browser is not supported by Wikiwand :(
Wikiwand requires a browser with modern capabilities in order to provide you with the best reading experience.
Please download and use one of the following browsers:

This article was just edited, click to reload
This article has been deleted on Wikipedia (Why?)

Back to homepage

Please click Add in the dialog above
Please click Allow in the top-left corner,
then click Install Now in the dialog
Please click Open in the download dialog,
then click Install
Please click the "Downloads" icon in the Safari toolbar, open the first download in the list,
then click Install
{{::$root.activation.text}}

Install Wikiwand

Install on Chrome Install on Firefox
Don't forget to rate us

Tell your friends about Wikiwand!

Gmail Facebook Twitter Link

Enjoying Wikiwand?

Tell your friends and spread the love:
Share on Gmail Share on Facebook Share on Twitter Share on Buffer

Our magic isn't perfect

You can help our automatic cover photo selection by reporting an unsuitable photo.

This photo is visually disturbing This photo is not a good choice

Thank you for helping!


Your input will affect cover photo selection, along with input from other users.

X

Wikiwand 2.0 is here 🎉! We've made some exciting updates - No worries, you can always revert later on