Typically an image is a composed of a grid of pixels. Each pixel has red, green and blue components. Together these pixels form an image. It's these images that form the basis of all the graphics you see on the web today.
Now imagine a PNG image this is the most basic idea of a functional image. A PNG image has the same red green and blue components but it also has fourth functional component an alpha channel that interacts with the background. It's this functional component that allows PNG's to be semi-transparent.
Now image an even more interesting pixel. Imagine a pixel where the functional component can do much more then simple alpha. The four components would be: Red, Green, Blue and a Function. The functional component of the pixel applies a functional transform on the color with respect to other colors either behind the current pixel or adjacent to the current pixel. An example pixel that would show part of the red channel of an image underneath could be something like:
Red: 0 Blue: 50 Green: 256
Function:{ red=pixel.background(x,y).red/2; }
Another pixel function could shift the image underneath by a couple of pixels:
Red: 0 Blue: 0 Green: 0
Function:{ pixel=pixel.background(pixel.x-5,pixel.y-5); }
Yet another pixel could apply a blur on the x axis of adjacent pixels:
Red: 0 Blue: 0 Green: 0
Function:{ pixel=(pixel.background(x-1,y)+pixel.background(x,y) + pixel.background(x+1,y))/3 ; }
Of course these functions could go a lot further to enable things like shadows, mirrors, embossing, fish eye, lens, gradients and more:
A functional image could be applied as a background to text or as a component of a larger design. This would allow for much more dynamic web graphics. It could also allow designer to easily create graphics that have been elusively difficult to create: Rounded corners, Shadows, Lighting effects as well as image manipulations like multiply, lighten, darken etc would all be possible.
Ok... Now it starts to get interesting. Because the image is interpreted the content of the image can change. Some possible ideas:
- An image of a beach where the sun can change position based on the time of day.
- An image that expires on a certain day or time.
- An image that alters the background to appear like frosted glass or a stained glass window
- An image that changes orientation based on it's location on the screen
- An image that gets tinted based on the background color
- An image of a circle that stretches correctly and doesn't look pixelated
This is just a sample of what could be done. Over the years HTML has made a lot of progress it's time for image technology to catch up.