Inline Images

Inline Images

Inline Images

  • Use the data: URI scheme to embed image data in the actual page
  • Useful for small decorative images
  • Saves HTTP requests compared with externally referenced images
  • Can increase the size of HTML documents
  • Are not supported across all major browsers (i.e. IE5, IE6, and IE7)

data: URIs

  • Designed to embed small data items as "immediate" data as if they were referenced externally
  • Similar to other URI schemes, such as http:, ftp:, and mailto:
  • Are not cached for repeated use when embedded in XHTML files
  • Consider embedding images in external CSS files to reduce HTTP requests and minimize the size of pages because CSS is cached by browsers

data: URI Syntax

  • Use the syntax: data:[<mediatype>][;base64],<data>
  • Use a mime type for <mediatype>, such as image/gif, followed by ";base64", and a base64 representation of the binary image

Sources