Redefining The IMG Tag
Michael Arrington
137 comments »
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://paularmstrongdesigns.co.....wesomebox/
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.tekno-world.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://augustinefou.blogspot.c.....trees.html
versions which DO use javascript also available here…
http://flickrcash.com/lightbox_install/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.britepic.com/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.techcrunch.com/2007.....eo-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.com/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
Media as first class citizens:
Yahoo recently hosted an event titled “Browser Wars Episode II: Attack of the DOMs”. You can see the opening statements from the participants here: http://yuiblog.com/blog/2007/03/05/browserwars/
The format was a Q&A session between the major browser vendors, and a host of webdevs and designers. The event was moderated by Douglas Crockford (bound to be entertaining, right?).
One of the speakers was Hakon Wium Lie, Opera’s CTO. In his opening statement he spoke to the fact that the Browsers treat images as first class citizens, and we should start thinking about doing the same for video.
Why use a plugin to display images when they’re already first class citizens?
“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.”
Just to reply to that message- AdBrite isn’t contextual and they never claimed to be. Are you sure you are talking about the right network? How can you have fradulent clicks on a site specific ad buy? Even if you bought a CPC network ad, how would you be able to know when and where your ad will appear in an auction based marketplace??
They have had excellent controls to prevent click fraud in my experience. Anyways, i’m curious to see how myspace reacts to this.
Where’s the ‘above picture’ - don’t see anything in FF 1.5…
Is something wrong with their site, i can’t even see this in action? Perhaps they took everything down because of the flickr violation? And could someone explain what exactly is in flickr’s tos that makes what they’re doing wrong? I recall quite clearly flickr providing static html to paste onto my pages that do NOT link back to flickr, but mabye things have changed (or i am wrong).
I like the idea, though not a big fan of flash.
What would the RSS Feed contain?
Anyway here’s something similar I created
to power the tag with Image annotations.
http://notes.2view.org/home
O there it is… must’ve been a hiccup, excuse me.
Flickr says:
“To link to this photo on other websites you can either:
1. Copy and paste this HTML into your webpage:
2. Grab the photo’s URL:
Remember! Flickr Terms of Service specify that if you post a Flickr photo on an external website, the photo must link back to its photo page. (So, use Option 1.)”
future
Looks very neat to me. I like it!
Fixing italics
test
fix didn’t work. Comment #6 has a trailing >i /< that made everything after it italics.
wow, my brain isn’t working today
comment #13 has a trailing <i /> that made everything after it italics.
Looks like a great idea, but I doubt the web will really adopt it. What I mean is: the cutting-edge techies might use it, but I question whether the use of Flash for showing images will infiltrate many web sites outside of the “techie crowd”. (sorry for the long sentence).
I guess I fall into the web standards police category.
People complain all the time about javascript widgets slowing down page loads of their sites (probably the number 1 reason why MyBlogLog is removed). This is the same thing.
If you use the non-javascript version you’re getting an embedded flash player instead of an image.
Also note: anyone who is using the popular ad-blocker Firefox extension will have these javascript/flash generated images blocked.
All this for watermarks / ads in images? Are we trying to return to the animated banners of yesteryear?
This isn’t cutting edge at all, except for the ease of use for the casual person. Flash-based ads are as old as Flash. This is just an easy service for building flash-based ads.
re: Pud.
Come on.. I know its your company, but seriously how many people are going to want to put an ad on their dog or 5 year old niece?
Lets call it for what it is… another flash based widget.
Great idea ;
- but then again; breaking your page for the users that have java turned off - probably about 10% …
- will keep it from being implemented on any sites that are major.
Nice. Regarding the noscript-tag, they should just add it totheir HTML generator as well.
It’s crap.
Implementation is dire, as per above. From what I can see, zooming involves downloading a bigger-than-necessary img to my computer on the off-chance I choose to use the zoom feature. Watermarking offers false sense of security, as the original img is left untouched.
BTW @John: surely Mike only needs to add the link around his example Flickr
Nicolas - any clue how to get that working in WordPress??
To much click fraud with adbrite. Way too much. I’ll stick with the regular img tag.
techcrunch is the best q.a. helper site ever.
regarding not working with javascript - good call. we’re adding the <noscript> tags to the html generator, so britepic will work for non-javascript people.
regarding “who would want to advertise on pictures?” - advertisers want to advertise anywhere they can reach their target audience, i.e., you. the same was said about tv, radio, web sites… more specifically, we could link 10,000 pictures of ipods to bestbuy.com, as an example. or link pictures of football to beer sites. or a picture of a dog on techcrunch to web geeks
hmmm, is there a commment limit? My last comment appears to have been truncated.
Good idea, horrible execution.
The smart way to do it would have been to do the image processing server side. Then you could use a normal image tag and it would work with all browsers, even if they had JavaScript turned off and no Flash player.
e.g. <img src=”http://www.adbrite.com/mogrify?http://www.mysite.com/myimage.jpeg&watermark=SAMPLE&ad=Drink%20Coke”> or similar.
Their server would process the image and cache the processed version.
Is there a way to subscribe to TechCrunch with Atom rather than the old RSS format? Then we wouldn’t have to deal with problems caused by angle brackets in titles, for example…
I see a cartel forming here. how does it happen that on all the posts there come a set of users, who start criticizing on any small thing available. where are the days..when we people used to get excited about every post at TechCrunch.
“we could link 10,000 pictures of ipods to bestbuy.com, as an example”
Pud, fine. You made your point. But its still a WIDGET, it is in no way “redefining” the img tag as in unless Dreamweaver or whatever standard tools out there start adopting this “format”… its a widget… like Slide, RockYou and all those other startups.
Not saying its not worth anything, it could be worth zillions like all those widget startups.
I was publisher of AdBrite, and this bastards of AdBrite misteriously lost one of my payment check for $2,000+ in the snail mail, when I write to the support requesting a reissue they say: “The check has been cashed and we cannot be held responsible for the postal service” so I don’t receive the money from the ads that I sell on my websites, I am not the only publisher saying this more publishers expose this kind of fraud in webmaster forums. Be careful with this fraudulent company.
This is one of those things where you instantly say WOW… really a nice idea. and quiet innovative as well. But this isnt redifining img tag in any way. Yeah its a cool use of images in widgets.
all this whining about having javascript turned off, reminds of the day people worried that users will turn off cookies, the simple fact is that the web experience these days is pretty much crippled when javascript and cookies are turned off, so my opinion is to just bag those users
also, to all the folks whining about the flickr TOS…
I can’t see how this is any worse than the current practice today of posting an image hosted from flickr in your blog (with the tag) and then having google ads on your blog.
sorry, wordpress swallowed by attempt to display the <img> tag, trying with lt and gt
Why is this flash-based? I’m sure this could be implemented with JS with a little of moo.
Is there no concern that another website can use your ID to post a watermark of your logo in a photo to make it appear legit and from your website? Perhaps they should use the referring domain as the identifier so that the publisher can own the permissions for such use?
regarding the use of a flickr image - we normally use png files on TC for screenshots. britepic only works with jpg files for now. So I used a picture I had on flickr. I should have just uploaded the damn thing to my own server rather than listen to flickr employees and everyone else complain about this. Or use my photobucket account.
BTW, just noticed a some new Amazon widgets on typepad gallery, this time by Amazon itself! And it seems they have also done some innovation with html tags
http://typepadwidgets.amazon.c.....ker-Widget
They have chosen the A tag! Cool stuff, but looks like its available only for typepad users like me
“”regarding the use of a flickr image - we normally use png files on TC for screenshots. britepic only works with jpg files for now. So I used a picture I had on flickr. I should have just uploaded the damn thing to my own server rather than listen to flickr employees and everyone else complain about this. Or use my photobucket account.”"
Lmao photobucket for the win!
Sounds to be a good idea..!! but potentially not much use…
“I should have just uploaded the damn thing to my own server rather than listen to flickr employees and everyone else complain about this. Or use my photobucket account.”
Good point, Mike.
@matt
Yeah, I thought about that one was well. Technically much nicer for the end user, but then they would have to pay image hosting costs. With their javascript/flash implementation I’m pretty sure it’s using the original image host to grab the image (hence the TOS violation whinging)
I was having a conversation yesterday about how we are “outsourcing” all of the utilities on our webpage. RSS to feedburner, MyBlogLog for users, Analytics to Google, etc. Finally, someone figured it out with images.
Pud said “some people are protective of old school html and aren’t fans of ajax/flash/javascript”
You can do both you know. Progressive enhancement - its pretty basic stuff.
Look at http://www.swfir.com - technically doing what you’re doing there (replacing an IMG with an embeded SWF), but far far more elegantly.
Unfortunately I see no use whatsoever for this product. Why? Simple. If this server is down, your images are down. Everyone. Now you might ask me about the same issue with say Flickr. In this case with AdBrite, they are a middleman - so you have 2 potential issues. If you use this code, you are putting your faith in their service.
In addition, all you are doing is slowing your page load.
In addition to the addition, I have tried to give AdBrite every benefit of the doubt on their ad side. Each time I am disappointed and refused to run them on CN. I find their interface very difficult to use. So why trust them for this?
So I show an advert - what do I make off that and what does AdBrite make? Clearly they are in this for that revenue.
I am guessing (I hope I am wrong) we will see these ads on TC now? That’s really what they are. Ads with images.
good demo video
I really must stop reading this blog,since it continues to annoy me on a regular basis.This is a bad idea,another example of Arrington hyping some bullshit he has a stake in.Blow Me.I’ve had enough.
You must have gotten a special demo version, because it looks like AdBrite hasn’t released the service to the general public yet: http://www.adbritewiki.com/ind.....=Main_Page
Sad…I was looking forward to trying it.
—
Amy L. Webb
webbmedia, LLC
(blog) http://www.mydigimedia.com
(company) http://www.webbmediagroup.com
(sked) http://www.mydigimedia.com/map.html
All those people here whining about problems with the tag in the title of their feed readers seem to have feed readers with a cross site vulnerability or at least a bug.
this post is boring
C’mon.
It’s been pointed out that this isn’t redefining jack shit, much