Last Updated on
A live demo is available here (Fireox 3.1/3.5 required : download it here).
Last year an incredible buzz around the new image resizing algorithm exposed by Shai Avidan and Ariel Shamir happened.
For those on vacation I suggest to give a look at this demo: http://www-scf.usc.edu/~boqinggo/ContentResize.htm.
As I saw it I started to think about implementations. There are already some here and there. Some are fairly fast, some are plugins, some are web based. None of them (from what I saw) are browser native.
Next gen browsers and HTML5
I started some work with Flash and ActionsScript 3 and then… several demos of the new HTML5 native features of next Firefox release (3.5 formerly 3.1) by Paul Rouget (video canvas special effects and video tag and subtitles) and some great articles by Vladimir Vukićević arose.
Below you can see three pictures :
First is the original, its size is 256px / 170px
Second is resized using Content Aware Image Resizing algorithm, its size is 206px / 170px
Third is resized with CSS, I put it here as a reference and its size is also 206px / 170px
Original picture without resize
Content Aware 50px Resized
50px resized – Content Aware Image Resizing algorithm
50px CSS resized
50px resized – CSS Resizing reference
Compare how the angles and the cosmonauts are reproduced on both resized images. Content Aware Image Resizing algorithm manage to get rid of parts of the image with less energy (short for : less important parts of the image) and leave intact the most important parts.
Next steps could be :
Add expansion capabilities
Add vertical reduction and expansion
Test some other edge detection filters
Add some features as image portion removing
Improve performances in order to make it real time on page resizing (is it useful ?)
Improve performances just for the beauty of art
Any comments are welcome !