Welcome to WebmasterWorld Guest from 54.234.244.30

Forum Moderators: not2easy

Message Too Old, No Replies

inline image with base64 & css

     
5:53 pm on Sep 12, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2004
posts:112
votes: 0


i know that one can inline base64 encoded images in html the following way:

<img src="data:image/png;base64,<BASE64 STRING>" />

as i want to keep the .html filesize as small as possible, i want to inline an image in css, so that i just have to write


<img class="someimage" />

and see a picture...
i've experimented with something like

<style type="text/css">
.someimage
{
background-image:url(data:image/png;base64,<BASE64 STRING>");
}

</style>

but, as i am not an expert in css, my experiment failed.
anyone who could help me out on this one?
thanks in advance

6:37 am on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


Well, aside from the fact that there's an extraneous " in your code, which browsers are you testing this in? IE doesn't support data URLs.
2:44 pm on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 30, 2004
posts:712
votes: 0


Here's a test image: [perlmonks.org ]
3:25 pm on Sept 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2004
posts:112
votes: 0


i'm using firefox, and base64 encoded images work fine, but not with css... any other suggestions?
3:40 pm on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 30, 2004
posts:712
votes: 0


Using the Perlmonks base64 code, does this work for you? I'm seeing the image in my FF on Mac.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
div {
width:100px;
height:100px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAABlBMVEX/AAAAAP9sof2OAAAAIUlEQVR4nGNgGAWjgFTw//8HJF4Dg8CI5aGGxCgYBcQBAMULD/2Zt2wmAAAAAElFTkSuQmCC);
}
</style>
</head>
<body>
<div>Hello world</div>
</body>
</html>
3:57 pm on Sept 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2004
posts:112
votes: 0


this works for me too... just one more question... where do i have to put the "alt" text for the IE users?
4:45 pm on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 30, 2004
posts:712
votes: 0


alt text.. hmm.. that's impossible with background images. Maybe conditional comments?

<!--[if gte IE 5]>
<p>Sorry, your browser doesn't support base64 encoded images.</p>
<![endif]-->

The code or text between the comments is only visible for Win/IE users with IE5 or up.
5:53 pm on Sept 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2004
posts:112
votes: 0


okay, that should do the trick!

thanks for your help, everybody!

8:16 pm on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 30, 2004
posts:712
votes: 0


I think this is really interesting. Putting images on a page without an actual image.
But, I encoded an 2.371K jpg into a base64 string and that string appeared to be 3.192 K. And that was only an 80x80 thumbnail. So in the end, apart from the fact that there's no support in IE, I don't think this will be any faster or use less bandwidth. Less hits and no hotlinking worries..
11:12 pm on Sept 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2004
posts:112
votes: 0


i didn't expect the size to become smaller...
i only "need" it to have an html page people can copy anywhere without having to worry about missing images, etc.

nevertheless, thanks for your help!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members