Le but de l'animation javascript ci-dessous est de mettre en évidence le principe de la transformation en cosinus discrète (en anglais : Discrete Cosine Transform, abrégé en DCT), utilisée dans le codage JPEG des images.
Dans le codage JPEG, l'image est d'abord découpée en blocs de 8×8 pixels. (Un de ces blocs est représenté en haut à droite.) Ici l'image est en niveaux de gris : l'intensité de chaque pixel est donnée sous forme d'un nombre entier entre 0 (noir) et 255 (blanc).
À chacun des blocs de 8×8 pixels est ensuite appliquée la DCT. Grossièrement, cela consiste à remplacer la donnée des 64 niveaux de gris du bloc par 64 autres coefficients, correspondant chacun à l'une des 64 images de base représentées dans le grand carré à gauche. (Pour plus de détails, voir ci-dessous.) La reconstitution du bloc à décrire s'effectue en multipliant chaque image de base par le coefficient correspondant, et en additionnant les résultats. Cette reconstitution est représentée dans le carré en bas à droite.