An example of bad image processing on the Web

We discuss the importance of processing, resizing and compressing an image before uploading it to a Web site.

This image, found on the WiFi Alliance Web site, provides an excellent example of what not to do:



As we see in the property sheet, the image is 980 by 664 pixels and the file size is 1.28 megabytes:



Resizing and compressing the image before putting it on the Web site would have reduced it to about 5 kilobytes -- 1/250th the size of the original -- with no noticeable loss of quality. (Quality is not even important in this case since the image is just a button linked to a video).

Furthermore, the image is resized to 177 by 99 pixels, which distorts it by changing its aspect ratio. (It appears that the image was also distorted when it was captured).

We can learn from our and other's mistakes -- can you find other poorly processed images on the Web?

Software refinement -- from research to products -- an image processing example

We have discussed the birth of image processing with Ivan Sutherland's Sketchpad program in the 1960s. As we see in this video, Sketchpad could draw, rotate, resize, copy and combine images.

Since Sutherland's research, there has been tremendous improvement in hardware technology and innumerable engineering refinements to image processing software.

Software refinements require research and the development of prototypes before they become product features. Consider, for example, the PatchMatch algorithm developed in collaboration between Princeton University and Adobe Systems. Here we see a paper describing the algorithm and some demonstration videos. The paper was presented and the videos shown at an academic engineering conference.

Successful research like the PatchMatch algorithm is subsequently incorporated into commercial products. Here you see a demonstration of tools that use PatchMatch for image retargeting, completion and reshuffling integrated into Adobe Photoshop. The tools are being demonstrated at a trade show, and it is probably safe to say they will be in the next version of Photoshop.

This is typical of engineering refinements to software. A prototype is developed in a research lab and it later becomes a product.

Researchers typically work on things that are too demanding for the technology of the day. Some of the Princeton videos are shown at 5 times actual speed because it takes time to compute the new images. By the time these features are released in Photoshop, hardware will have improved and they will execute rapidly.

Note that Sutherland's work was a pure university effort, but PatchMatch was a joint effort between a university and a company. Many significant advances have come from industrial research labs. Can you find some interesting prototypes and projects at Microsoft Research?

Computer science research leads to commercial products

Computer scientists at universities and the research labs of companies like Microsoft, Google or IBM work on new ways of doing things that may one day be used in commercial projects. In addition to theoretical studies, they often build hardware or software prototypes that test and demonstrate their ideas. (The slogan "demo or die" is common in such labs).

They also publish papers describing their work in technical journals and conference proceedings. One can get a glimpse of the future by reading those papers and attending conferences. For example, the 2008 conference of the Association for Computing Machinery Special Interest Group on Computer Graphics (SIGGRAPH for short) was just held in Los Angeles. Projects presented at SIGGRAPH foreshadow tomorrow's image and video editing programs. For a first look at features that might one day be in Photoshop or Windows Movie Maker, check these projects:

• Three-D photo viewer: combine many photos of the same object (like the statue of liberty or Notre Dame Cathedral) into a panoramic scene over which the user can pan and zoom.
• "Unwrap mosaics" for video editing: modify an object like a person's face in one still frame, and have the change propagated automatically throughout the video.
• Using photographs to enhance videos of a static scene: combine a video of a scene with a few still photographs to enhance the video by improving resolution, dynamic range, or touching up or removing objects.
• Face swapping: automatically replace faces in photographs.

You will find demonstration videos and technical papers at each of these sites.

The case of Pixar Animation illustrates the research-commerce relationship. In 1986 Pixar, then a brand new company, showed its first film, a short called Luxo Jr., at the SIGGRAPH conference. Watch Luxo Jr. and you will note things like the accuracy of moving light, shadows and reflections and the sinusoidal movement of the lamp cord when Luxo jumps. Achieving that sort of realism was state of the art research in 1986, therefore relevant for a scientific meeting. (The creation of a cute character was not science, but story telling art). The interplay between research and commerce continues -- Pixar employees presented a technical paper and a course at SIGGRAPH 2008.

Entrepreneurs and venture capitalists watch developments at research conferences like SIGGRAPH for ideas -- what are some other computer science conferences?

Network-based image editors

We do most of our image editing using stand alone applications like Photoshop, but there are also network-based image editors. TechCrunch surveyed several recently and FotoFlexer has come out subsequently.

What are the pros and cons of using a network-based image editor compared to a desktop program?

Quick eye candy for Web page images

swFIR is a simple tool that let's you transform images and render them in Flash. You can easily rotate an image, frame it, have it grow and shrink as the user resizes type, etc.

Picnik, an excellent Internet-based photo editor

We talk about the increasing viability of applications that are hosted on the Internet as connectivity spreads and improves. The Picnik photo editor provides a good example. Once loaded, it is a fast photo editor with a very simple user interface. It cannot do everything a high-end editor like Photoshop can do, but it can do most of what an amateur photographer wants. Your photos are online and sharable, and they can easily be imported from other online photo-sharing sites. The basic program is free, and there will be a subscription-based professional version.

What are some of the key features of Photoshop or your favorite desktop editing program that are missing from Picnik? Yahoo allows Picnik users to import photos from their online photo service Flickr. If you were a Yahoo executive, would you allow users to export their photos?