Innovation in Image Display

posted in: Occasional Links | 0

We’ve come a long way from most websites using the height=”” and width=”” parameters of an <img> tag to load huge images, then squeeze them into a 200×100 box, leaving them looking more pixelated than a Pacman family portrait. High-speed internet enables higher-resolution images, people understand how to correctly resize an image now (or have help from photo sharing sites that do), and CSS gives designers more control than ever over placement of images.

But lately I’ve seen some really interesting examples of continued innovation in something as simple (and thus, ubiquitous) as how an image is displayed.

Content Aware Image Resizing is an amazing technique used to dynamically resize an image as the display area’s size changes. In short, you can move the edge of your browser around all you like, and an image on the page would adjust as you did so. Not only is the text flowing around the image, as has been made easily possible with CSS, but the image is changing size to still give the text the same percentage of space as well. This seems particularly important as the debate over page design for mobile devices grows more heated.

The image isn’t being cropped, or scaled to a smaller size, but using algorithms to determine the least important parts of an image (with humans able to specify particularly (un)important areas as well), and removing them, preserving the images’ overall look. It can even accommodate enlarging images, using some incredible automation that would make many Photoshop clone-tool users envious.

If you have four minutes of time, I highly recommend watching the linked movie all the way through. It contains fascinating examples of the possibility. The video was shown at Siggraph 2007 as an example of the techniques discussed in a paper by Dr. Ariel Shamir (server under heavy load as the original source of the movie) and Dr. Shai Avidan.

Update 08/29/07: Dr. Shai Avidan has now been hired by Adobe to work in their office in Newton, MA. That’s not too far away from me, I might see if he’d be willing to do an interview.

Image overlays for better captions, branding, and social features – AdBrite, a web advertising company, has developed a tool that takes an image and uses Javascipt to give many useful tools to a content creator like myself. I can easily add my logo to an image, make a caption appear when your mouse hovers over it, create an RSS feed for an area on my page where photos appear, let you zoom in/out of the image, and even let you embed it on your own page without having to save it and upload it to your own server. I would love to use these tools for every image I post.

Of course, being an ad company, AdBrite also lets you (completely optionally) add ads to the images, and therein lies a major problem for someone in my position. Around 70% of visitors to Social Strategist are net-saavy Firefox users, and many no-doubt have the AdBlock extension installed. It’s a wonderful tool that I use myself, but it unfortunately doesn’t distinguish between a picture using BritePic that does have an ad and one that doesn’t, and as a result many of my visitors wouldn’t see that I have an image on the page at all.

For those with a different audience, BritePic is a wonderful tool I’d encourage you to use. I hope the creators of the AdBlock extension will continue to evolve their tool to better distinguish between ad overlays and the actual content, especially as more content is making use of overlays (YouTube is the latest to make a big news splash over it). Ideally, I’d love to see a non-ad service offer these features to their users. If you know someone at Zooomr, Flickr, or Photobucket, put in a word for me, would you?