Inline Images
It's possible to include images in your web page without any
additional HTTP requests by using the data: URL scheme. Although this approach is
not currently supported in Internet Explorer, the savings it can bring
to other browsers makes it worth mentioning.
We're all familiar with URLs that include the http: scheme. Other schemes include the
familiar ftp:, file:, and mailto: schemes. But there are many more
schemes, such as smtp:, pop:, dns:,
whois:, finger:, daytime:, news:, and urn:. Some of these are officially registered;
others are accepted because of their common usage.
The data: URL scheme was first
proposed in 1995. The specification (http://tools.ietf.org/html/rfc2397) says it "allows
inclusion of small data items as 'immediate' data." The data is in the
URL itself following this format:
data:[<mediatype>][;base64],<data>
An inline image of a red star is specified as:
<IMG ALT="Red Star" SRC="data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWW lvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEA AAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBia tt2H1KBLQRFIJAIKywRgmhwAIlEEADs=">
I've seen data: used only for
inline images, but it can be used anywhere a URL is specified, including
SCRIPT and A tags.
The main drawback of the data: URL scheme is that it's not supported in Internet Explorer (up to and including version 7). Another drawback is its possible size limitations, but Firefox 1.5 accepts inline images up to 100K. The base64 encoding increases ...
Get High Performance Web Sites now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
