Did you know that Firefox, Safari, Konqueror and Opera all let you embed an image in an <img> element? Maybe, if you saw it on Andy’s linkblog. OK, so that’s cool, but it doesn’t explain why you would want to.
Well there’s a Greasemonkey script (Greasemonkey is tanfastic and you should install it now if you haven’t) that will display people’s FOAF profiles on web sites. I added a bit that would link to the FoaF Explorer, but I wanted to use this image. If I included it as a regular image, it could mean a lot of hits to the server, which would be kind of rude. Instead, I added this:
You can view source or click on the image and look at your address bar to see it in action. It makes the script bigger, but now it doesn’t rely on an external image. I think Greasemonkey scripts are the perfect use for embedded images. You know the user is going to be on Firefox and you won’t have to worry about the image server responding.
3 responses to “A practical use for HTML-embedded images”
This took me about 5 minutes to grok … had to remind myself how GreaseMonkey works and then think for a minute about why this matters…
For others, Greasemonkey is a general-purpose Firefox plugin that allows the installation of scripts that can directly modify specific web pages. For example, if a FOAF profile is available on a web page, the script George refers to will display that profile. Other examples include a script that will change all amazon.com links to include your Amazon referrer ID (so you get the commission when you buy stuff online) and a plugin that overlays Chicago Transit Authority maps on to Google maps. Follow the Greasemonkey link above and see what kind of scripts are available!
The problem George is referring to is, if you want to include images in your Greasemonkey script, you’d normally have to link to an image out there on the web because you can’t package up image files with it. But if that image is unavailable (or if the server it’s on is bogged down), it won’t show up or slow down the script. Embedding the image directly into the HTML (which is the main point of this post) allows you to include images directly in your script, solving that problem. Of course, if you didn’t get this on your own, it’s probably too technical for you to care … but anyway..
FYI, this works in Apple’s Safari too (embedded images). At least in 1.3.
Thanks for linking my GreaseMonkey script… A couple of days ago I was here reading your blog about embedding images into greasemonkey 😉
So Thanks!