Issue link: https://read.uberflip.com/i/1146286
14
|
Chapter 1: Rule 1: Make Fewer HTTP Requests
An inline image of a red star is specified as:
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 limi-
tations, but Firefox 1.5 accepts inline images up to 100K. The base64 encoding
increases the size of images, so the total size downloaded is increased.
The navbar from previous sections is implemented using inline images in the follow-
ing example.
Inline Images
http://stevesouders.com/hpws/inline-images.php
Because
data: URLs are embedded in the page, they won't be cached across differ-
ent pages. You might not want to inline your company logo, because it would make
every page grow by the encoded size of the logo. A clever way around this is to use
CSS and inline the image as a background. Placing this CSS rule in an external
stylesheet means that the data is cached inside the stylesheet. In the following exam-
ple, the background images used for each link in the navbar are implemented using
inline images in an external stylesheet.
Inline CSS Images
http://stevesouders.com/hpws/inline-css-images.php
The external stylesheet contains a rule for each
SPAN that includes an inlined back-
ground image:
.home { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKA...);}
.gift { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAABCp...);}
.cart { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAADlCr...);}
.settings { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAA...);}
.help { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAALW1t...);}
The file_get_contents PHP function makes it easy to create inline images by read-
ing the image from disk and inserting the contents into the page. In my example, the
URL of the external stylesheet points to a PHP template: http://stevesouders.com/
hpws/inline-css-images-css.php. The use of
file_get_contents is illustrated in the PHP
template that generated the stylesheet shown above:
.home { background-image: url(data:image/gif;base64,
);}
.gift { background-image: url(data:image/gif;base64,
);}