Can jpg images support animation?

问题:

jpeg image

How is the above jpg image animated? As far as I know jpg format does not support animation.

回答1:

No, the JPEG file format has no inherent support for animation.

The image you linked is actually an animated GIF disguised with a jpg file extension. (The browser apparently ignores even the MIME type and looks at the file header bytes in such cases.)

回答2:

If you view the image in firefox, you can right-click on it and select properties:

You'll see Type: GIF image (animated, 54 frames)

Thus, it is a gif-image that has been renamed to .jpg.

回答3:

For completeness, I'd like to point our that there's Motion-JPEG - sort of a jpg animation.

MJPEGs, usually produced by webcams, are a stream of JPEG files concatenated together, one after another, sometimes delimited by a HTTP header, and served by webcam-webservers with a MIME-Type of multipart/x-mixed-replace;boundary=, where boundary= defines the delimiter.

A search for animated JPEG related projects on github results in two findings:

1. In case people care about the size of an animated GIF, they strip it into separate JPG frames and tell the browser to exchange these frames in-place via some JavaScript code. For example. (Pawel's answer)

2. Then there's actually a proposed Animated JPEG standard, which stems from MJPEG and declares framerate and so forth in each JPG frame. Not probable to arrive in browsers anytime soon.

And lastly, I've seen image-hosters to replace large animated GIFs with a mp4 version of the GIF for presentation, plus some Javascript to serve the actual GIF for downloads/non-supported browsers.

And no, JPEG itself, via JFIF, does not offer a facility to animate a JPG file in itself, just as Noldorin already noted in the chosen answer. :shrug:

回答4:

It is a GIF image... the extension has been changed by hand. Browser engine is smart enough to determine image format regardless of file extension.

回答5:

var c = 1;

/* Preloading images */
var image1 = new Image();
image1.src = "a1.jpg";
var image2 = new Image();
image2.src = "a2.jpg";
var image3 = new Image();
image3.src = "a3.jpg";
var image4 = new Image();
image4.src = "a4.jpg";
var image5 = new Image();
image5.src = "a5.jpg";

function disp_img(w)
   {
   if (c == 6)
      {
      c = 1;
      }
   var img_src = "a" + c + ".jpg";
   document.ani.src = img_src;
   c++;
   }
t = setInterval("disp_img(c)", 1000);

回答6:

If you open that file as binary (in text editor) you will see first line contains GIF89add˜| Which is the magic number for GIF.

回答7:

Yes, you can make animation using single jpeg. Google "jpeg css sprites". Of course this will not be native animation support by jpeg format.