How is this done on this site? (Adjusting Colors of Image in Real-Time)

http://ultimate-wallpaper.com/wallpaper/call-of-duty-map-p开发者_JAVA技巧ack-1ndvB3/

Below the image you can control hue, saturation and ligthness of the image. They use jQuery, and it seems like the images on this side are base64 encoded, is this neccesary for this?

In a word, it's HTML5.

HTML5 has <canvas> tag that brings Javascript full-control on the colors, vectors and pixels on the screens.

HSL (Hue, Saturation & Lightness) is newly supported format in the CSS3 specs. HSL is more human readable form. Just to cycle through the color-spectrum, we’d simply increment the “hue” from 360; the hue is mapped to the spectrum in cylindric fashion.

Lightness controls how how dark/light the color is; 0% indicates a black pixel, whereas 100% indicates a white pixel. Saturation controls how bright or vivid a color is; grey’s are created with a saturation of 0%, and vivid colors are created using a value of 100%.

Read a lot interesting things (especially docs) about the HTML5 and you will definitely love it.

They're using a canvas which is part of the new spec for HTML5. Go read up on it :)

They use a javascript library Pixastic.
And it provides various image rendering operations on HTML5 canvas.

And I don't think the image file must be base64 encoded,
for its document does not metion it.