Inline images
Inline images are Base64 Encoded Images that appear in HTML as a text. So that no sepearte HTTp request is needed to get the image file. However, it works in IE 6 and 7, there is no use, as it utilizes the same no of requests as the requests made with images.
Some urls for Base64 Encoding-
- http://www.motobit.com/util/base64-decoder-encoder.asp
- http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/
Sample HTML
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”><HTML>
<HEAD> <TITLE> New Document </TITLE> <link rel=”stylesheet” href=”InlineStyle.css” /> </HEAD> <BODY> <div id=”ContentHeader”> <h2>Table </h2> </div> </BODY> </HTML>
|
CSS File
| /*–_ANY_STRING_WILL_DO_AS_A_SEPARATORContent-Location:tiltImage
Content-Transfer-Encoding:base64 R0lGODlhBQAQANUAAFKCy1OJy1OLzGyN0mOW0MnX72e91FJ+ymW80myO0vL0+12U0H6b2HaV1VqkzmKy0WGX0WKx0VOHy1SPzFaHzGGaz8vY72Wy1F6vz1+Uz/P2+2Sy0liczlOGy1ymzlWCy16c0FmUzV2dz2Ko01aNzFF5ylJ9ylSRzFOMzFKAy////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAFABAAAAZDQAuhkiksRpcRBLQxbECiByIiCnkwnhCJ4+CQVGBw6UP5lEwdVMeUQp1QqfY77oanBCdByhSYBA4NABIAAxoMCQMKQQA7 */ #ContentHeader {min-height: 18px;_height: 18px;margin-bottom: 5px;} #ContentHeader h2 {float: left;background: url(“data:image/gif;base64,R0lGODlhBQAQANUAAFKCy1OJy1OLzGyN0mOW0MnX72e91FJ+ymW80myO0vL0+12U0H6b2HaV1VqkzmKy0WGX0WKx0VOHy1SPzFaHzGGaz8vY72Wy1F6vz1+Uz/P2+2Sy0liczlOGy1ymzlWCy16c0FmUzV2dz2Ko01aNzFF5ylJ9ylSRzFOMzFKAy////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAFABAAAAZDQAuhkiksRpcRBLQxbECiByIiCnkwnhCJ4+CQVGBw6UP5lEwdVMeUQp1QqfY77oanBCdByhSYBA4NABIAAxoMCQMKQQA7″) no-repeat left top; margin: 0;padding-left: 12px;color: #555;font-size: 16px; *background: url(mhtml:http://localhost:8081/CPCex/InlineStyle.css!tiltImage) no-repeat left top; /* IE < 8 */ } The colored lines are needed for Inline images to work in IE 6 & 7. For an Image to appear in IE 6& 7, it makes a HTTP Request http://localhost:8081/CPCex/InlineStyle.css!tiltImage. So, the no of HTTP requests remains same in both cases using image file or using Base64 Encoded Image in case of IE 6 & 7. In other browsers like FireFox, Google Chrome, Safari, IE 8.. Base64 Encoded Image works fine. So it gives frutiful results while applying these Inline Images concept.
|
Filed under: Web Performance Tagged: | Base64, CSS, Encoded Image, Image Encoding, Images, Inline Images, Web Performance
