Retargeted images redux: how it might actually be used on the web

Previously (http://lists.w3.org/Archives/Public/www-style/2008Mar/ 
0324.html) I discussed the subject of retargeted images as a CSS  
property, which could be a useful way of flexibly incorporating  
photographic or complex images into layouts where images can't always  
be constrained to a given size. Considering my poor timing to suggest  
this at the same time as David Hyatt posted his long list of very  
interesting feature proposals based on work with WebKit, it's not too  
surprising that my suggestion didn't really register on the radar.  
So, rather than let it just slide I thought I'd rephrase my  
suggestion, along with an example of how such a feature might be  
useful, and a possible syntax for usage (feel free to shoot me down  
on the latter; this is new territory for me).

To illustrate the possible usage benefits, consider this crude  
thumbnail representing a typical website layout: http:// 
www.kapowaz.net/images/retargeted-320.png. In this layout, a photo  
(!) frames the content at the top, below which is a navigation bar,  
and two columns of content; one a fluid-width text column, and  
another a fixed-width column with a logo and other related content.  
If the photo itself has a fixed width, this layout scheme is  
problematic; you can choose to either use a background-image,  
whereupon detail at either side must be sacrificed once the window is  
shrunk, or you must suffer horizontal scrollbars (or worse, if the  
window is made larger than the width of the image, unsightly blank  
space), or simply rescale the image down to a suitable size.

What image retargeting (or 'seam carving': http:// 
www.seamcarving.com/) does is remove or add parts of the image in  
locations of lower significance in order to allow the image to be  
retargeted to required dimensions. How this might work in the context  
of the above thumbnail is shown in http://www.kapowaz.net/images/ 
retargeted-250.png. Here, you may notice that the aspect ratio of  
individual elements of the image of significance — the mountain  
range, birds and sun in the sky — has been maintained, but the scene  
itself has been made to fit the available page width.

The way I envisage that such a technique could be implemented would  
require a new CSS attribute for image elements, for instance:

#heading img {
	retarget-direction: horizontal;
	retarget-max-width:1000px;
	retarget-min-width:400px;
}

The retargeting can be applied in both axes, so the value of retarget- 
direction could be horizontal, vertical or both. The attributes for  
maximum and minimum width would be used to prevent artefacts which  
tend to occur when an image is retargeted to extreme sizes (both  
small and large). An image element which is being retargeted would  
have a block display mode, and would automatically expand to the full  
width of its containing element.

Attempting to implement this as a patch for any of the open source  
browsers out there is really a task beyond me, but if anybody is  
interested at least one individual has already implemented the  
technique using the SDL library (http://kometbomb.net/2007/09/04/ 
image-retargeting/). I would imagine that a native implementation in  
one of the modern browsers would be able to perform such  
transformations vastly more quickly than the alternative (Flash, e.g.  
rsizr.com).

All comments and suggestions welcomed!

~B

Received on Thursday, 27 March 2008 22:33:02 UTC