The basic format for embedding images into a web page using the <img> tag has been around almost as long at HTML itself, since the first graphical web browser. It works, and it is used constantly. But can it be better?
Advertising network AdBrite, which is always looking for new ways to think about things, says it can. This morning, AdBrite launches BritePic to help people add a lot of new functionality around embedded images. Just by changing the embed code, web publishers can add a caption, watermark, zoom, share, resize and other features. And an advertisement, if they choose to.
The end product is shown above. Instead of embedding an image using a standard tag like:
<img src=”http://farm1.static.flickr.com/53/144942552_81a96c87cb_o.jpg/”>
BritePic simply uses a javascript code (non-javascript version is also available for myspace, blogger, etc.) and a very lightweight Flash 7 player to show the image with lots of additional features. BritePic has a code generator tool (see image at bottom of post), although all of the parameters are in the code itself, so power users can just quickly write it out. Here’s the code for the above image:
<script>
britepic_id = “297898″
britepic_src=”http://farm1.static.flickr.com/53/144942552_81a96c87cb_o.jpg”;
britepic_keywords=”Laguna, dog, pets, cute, perfect”;
britepic_show_ads=”1″;
britepic_caption=”Laguna: Attack Dog”;
britepic_width=”560″;
</script>
Any of the parameters can be changed above. When you register with BritePic you add a watermark and payment information if you choose to include advertisements in pictures. The id in the code above tells it what watermark to add. BritePic doesn’t host image files, so the src field tells it where to pull the image from. Keywords can be added (future functionality will show related pictures), adds shown or not, a caption added, and the width reset.
There are also a number of features in the pull up menu at the bottom left of the image above. Zoom is my favorite. Zoom in on a picture and see a larger version of that area. If you are using a large image and resizing, there will be less pixelation. But even for non-resized images the zoom feature could come in handy. On this blog, where we are limited in the horizontal space allowed for images, it will allow us to upload larger images and allow people to zoom in, or simply click to see the larger image on a new page.
The company has created a demo video, which we’ve embedded below.
AdBrite was founded by Philip Kaplan and Gidon Wise. Background information on the company is here.
Clever
Interesting, but the problem with including metadata in Javascript is its not web-crawler (Google, Yahoo, etc…) friendly. Web-crawlers ignore Javascript and rely on html/xml metadata to index images.
Well..after a long long time… something really innovative.
What next….how about the other tags…
cool post.
we have also been looking at awesomebox.
http://paularms...cts/awesomebox/
There we go! Very smart work.
Interesting and cool. One problem is that javascript is not always enabled and in that case images don’t render.
Mike, you should take out the in the blog title. When looking at this title in an RSS feed, it just says “Redefining The Tag”
Surprisingly poorly accessible code there. They should change it so it can work on existing <img> tags that have certain attributes/CSS class.. which means it won’t break for people with JavaScript turned off, but people with it on will get the cool new version. Adding attributes can introduce validation problems in certain situations, but that’s always preferable to using JavaScript as a crutch.
Mike, you should take out the less than and greater than symbol in the blog title. When looking at this title in an RSS feed, it just says “Redefining The Tag”
It’s a clever ideal although I am not sure if the implementation part is that good.
web standards police.
peter cooper- just add a <noscript> tag with the IMG SRC. then non-javascript people could see the images too.
try that again
image tag needs to be closed
This is a very clever idea. I thought it would be done with video first, but I guess images apply just as well. However, I’ve had bad experiences with AdBrite’s regular contextual advertising network in the past, so I doubt from that standpoint this will be a better experience from the advertiser’s point of view. Fraudulent clicks galore.
@Amit, Mess up my feedreader too
Not good idea to use adbrite. To many linux hackers and users… Who uses adbrite?
They saw stolen ss# accounts
I second Andrew. Had a horrible experience with them as an advertiser – tons of clickfraud in their system. Kinda makes it hard to get excited about anything they put out.
Better use front WYSWYG editor for all these functionalities.
http://www.tekn...ld.blogspot.com
I was looking at the image, and it is served by Flickr, and you could be violating their terms of service. It’s like that for all the major image services, so you’d have to serve the images off your own hosting, or you’d be breaking the contractual agreement you have with them.
I don’t see this working out well at all.
fixing italic comments
yes, but … most blogs don’t allow javascript (blogger, myspace, etc.)
so the above won’t work … here is how flickrcash.com solved it …
to install a lightbox grid, we are generating a jpeg on the fly and you can embed it with a simple tag which works on blogger, etc.
in action
http://blog.myspace.com/acfou
http://augustin...iced-trees.html
versions which DO use javascript also available here…
http://flickrca...nstall/rnx2nu1v
SWIFR is a nice alternative to the img tag, and lets you round corners and such.
http://www.swfir.com/
To the haters.. maybe it’s your site/ads that suck. I use AdBrite as an advertiser and a publisher, and it’s worked very well so far.
And this image thing is a neat idea.
britepic_id = “297898″
britepic_src=”http://farm1.static.flickr.com/53/144942552_81a96c87cb_o.jpg”;
britepic_keywords=”Laguna, dog, pets, cute, perfect”;
britepic_show_ads=”1″;
britepic_caption=”Laguna: Attack Dog”;
britepic_width=”560″;
Wow, that is much better than:
Ads in images..I can see this becoming very popular. Kudos BritePic!
Images can easily have this information embedded directly in them, and JS used to serve this up as semantic markup that pops up when one keys into or mouses over the image (showing in screenreaders as following the image).
This is really not a clever implementation, leaving aside that it doesn’t degrade gracefully and isn’t accessible (as well as having performance issues). Talk about a case of overengineering and useless waste of Flash.
Sounds like you’ve got it solved there Shelley, looking forward to the example.
I like the idea, nobody has to use it, and I like AdBrite the company. They seem to make quite a few things that work well for situations left unaddressed by bigger advertisers.
The nice thing is, whatever folks say, is that it works for most people and it’s easy. The 95% that can see it don’t care that much about the web-standards-panties-in-a-bunch crew.
i guess i’m the only one that notices there’s a puppy in a pot on a stove? this has animal cruelty written all over it.
so now we’ve got…the adsense ads on the side, ads embedded in the text of the page, banner ads at the top, a couple flash ads at the side, and that image that you thought was actually a picture of something relevant – now that’s got an ad in it too!
world wide waste, indeed.
thank god for adblock plus
i’ve no script installed and i can’t see the embedded adbrite image while i can see all the other images that are tagged “traditionally”
I agree with Shelley. It’s not a bad idea, but poorly implemented so far. It would be quite easy to use an [img /] tag with the alt and other attributes, and have a single javascript include that performed the “magic bits” for any images, without any compromise to usability/accessability/crawlers/etc.
To be sure:
This *is* a violation of Flickr’s TOS. (to not link back to the photo page on Flickr) I assume someone is paying attention to that, yes ?
Implementation is dreadful. Best to leave the img tag in place, then use the javascript to rewrite it to add the functionality. Suggest they go and Google “Unobtrusive Javascript”.
Why are comments in italics??!? It’s making my head slant :/…
Don’t know about Flickr’s TOS, but looks like you can assign a link to the image to go wherever you want. It says “Link the image to another URL”, among other things, on their Learn More page: http://www.brit...m/learnmore.php
love that AdBlock automatically includes *.adbrite.com in its filter list, so BritePic pics — served for some reason from that same domain instead of britepic.com — are automatically blocked for anyone with AdBlock installed.
I wouldn’t want adbrite putting ads in my images.
what is the point of having an rss feed for an image? it’s not like it’s going to change!
what is up with the puppy in a pot? and why is half the video a lead in? annoying!
Shelly is spot on. Even if they want to replace img’s with a hyperactive flash thing, they coudl do tht by having a javascript decorator script that uses the correct semantic markup on the img, and represents it as a flash embed fro browsers that support that.
Michael must like the AdBrite folks to make such a big statement as “redefining the img tag”.
Come on. This is nothing but ANOTHER widget. RockYou and Slide also have “slideshows” that if you want to define it this way also redefines the img tag.
Blah.
I’m with Peter Cooper, this has poor practice written all over it. Surely this is not something we should be encouraging.
jd,
Believe it or not, “anyone with AdBlock installed” is not really Adbrite’s target audience.
I guess the reason they are using Flash is to protect their implementation details a little bit–if they did a pure HTML+CSS+JS implementation (which I agree seems possible to do), then all the functionality would be copied in two hours. By doing it this way, it will probably take two days instead.
very cool
Smells a lot like the video indirection AdBrite built a while back. http://www.tech...t-video-product
The key feature seems to be that you’re not _required_ to use someone else’s bandwidth, but they sure make it easy.
Stupidest idea ever. It’s a misuse of Flash and an insult to web standards.
Michael – Please put the link back in your example to the Flickr photo page. The way you have it shown up there, it’s a violation of Flickr’s Terms of Service.
(I work at Flickr)
I also suspect that wrapping advertising around any photo (at least on Flickr) with or without considerations for said photo’s licensing, is also really really bad.
We also have concerns about the obviously commercial use of Flickr photos. There’s some stuff about that in Flickr’s TOS as well:
From the Community Guidelines (http://flickr.c.../guidelines.gne)
“Don’t use Flickr for commercial purposes.
Flickr is for personal use only. If we find you selling products, services, or yourself through your photostream, we will terminate your account.”
Did someone forget to close an italics tag?
I have to agree with what others have said. It’s an interesting idea, but I’m not sure I would be compelled to use it (especially with the ads), and the licensing model has a lot of intricacies that they’ll need to deal with.
hey. philip from adbrite/britepic here.
regarding accessibility for browsers without javascript – just add a <noscript> tag after the britepic javascript, and put your regular img tag in there. then non-javascript people can see the pics. we should probably add that to the demo code..
regarding slideshow widget companies – they don’t do ads, and we don’t do slideshows. and britepic won’t make your myspace pages look shiny and awesome.
britepic is more for people who want to add sharing to, and make money with, the pics they would ordinarily embed with the img tag.
regarding TC embedding a pic from flickr – we don’t encourage it, but just like the img tag, you can host pics anywhere.
to the web standards police – sorry! but it’s not all bad.. we still like the img tag for some stuff, like embedding logos and navigation elements etc. i realize some people are protective of old school html and aren’t fans of ajax/flash/javascript/etc..but i think that stuff is kind of cool sometimes…and we built this with Flash 7 which is supported by like 97% of browsers or something like that.
regarding all these comments in italics for some reason – (speaking of web standards and html weirdness…)
– pk