web-dev-qa-db-ja.com

jpg画像はアニメーションをサポートできますか？

jpeg画像

上記のjpg画像はどのようにアニメーション化されますか？私の知る限り、jpg形式はアニメーションをサポートしていません。

animationjpeg
28
Ashish

いいえ、JPEGファイル形式はアニメーションを本質的にサポートしていません。

リンクした画像は、実際にはjpgファイル拡張子が付けられたアニメーションGIFです。 （ブラウザは明らかにMIMEタイプも無視し、そのような場合にはファイルヘッダーバイトを調べます。）

40
Noldorin

画像をFirefoxで表示する場合は、画像を右クリックしてプロパティを選択できます。

Type: GIF image (animated, 54 frames)が表示されます

したがって、これは.jpgに名前が変更されたgif画像です。

14
aioobe

完全を期すために、 Motion-JPEG -ある種のjpgアニメーションがあることを指摘したいと思います。

MJPEGは通常Webカメラによって生成されます。JPEGファイルのストリームが次々に連結され、HTTPヘッダーで区切られることもあり、MIMEタイプがmultipart /のwebcam-webserversによって提供されます。 x-mixed-replace; boundary =、ここで、boundary =は区切り文字を定義します。

アニメーションJPEG関連プロジェクト github を検索すると、2つの結果が得られます。

  1. アニメーションGIFのサイズを気にする場合は、GIFを個別のJPGフレームに分割し、JavaScriptコードを使用してこれらのフレームをインプレースで交換するようにブラウザーに指示します。 例 の場合。 （ パウェル の答え）

  2. 次に、実際には Animated JPEG 標準が提案されています。これはMJPEGに由来し、各JPGフレームでフレームレートなどを宣言します。すぐにブラウザに到達する可能性は低いです。

そして最後に、画像ホスターが大きなアニメーションGIFをプレゼンテーション用のmp4バージョンのGIFに置き換え、さらにダウンロード/サポートされていないブラウザーに実際のGIFを提供するJavascriptを見てきました。

いいえ、JFIFを介したJPEG自体は、選択した回答で既に Noldorin と記載されているように、JPGファイル自体をアニメーション化する機能を提供していません。 ：肩をすくめる：

5
isync

これはGIF画像です...拡張子は手動で変更されています。ブラウザエンジンは、ファイルの拡張子に関係なく画像形式を判別するのに十分なほどスマートです。

4
m0s
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);
4
K0D3R

そのファイルをバイナリとして（テキストエディターで）開くと、最初の行にGIF89add˜|が含まれていることがわかります。これは、GIFの マジックナンバー です。

2
sapy

はい、単一のjpegを使用してアニメーションを作成できます。グーグル「jpeg css sprites」。もちろん、これはjpeg形式によるネイティブアニメーションサポートではありません。

1
Pawel

少しネクロポストですが、ピクセルモーションJPEGに関する情報を取得しようとしたときにこの質問が最初に表示されたので、ここにいくつかの追加情報があります。

Pixel2以降、Googleはモーションjpegを作成しました。これは通常のjpegで、最後にmp4ビデオがあります。詳細はこちら：

https://Android.jlelse.eu/working-with-motion-photos-da0aa49b50c

0
Felix