注意:2015 年 11 月をもって Edge Animate の活発な開発は終了しました。詳しくは、こちらを参照してください。

概要

一般にさまざまなグラフィック形式が使用されているので、Edge Animatie で使用するために画像を書き出す形式を決定するときに迷うことがあります。Edge Animate は PNG, GIF, JPG および SVG 画像をサポートしています。このガイドでは、さまざまが画像形式と、それらをいつ使用するかについて説明します。

さまざまな形式の例

JPEG

JPEG (または JPG) 画像は、一般的に圧縮が PNG の場合よりもよいので、ファイルサイズが小さくなります。透明性 (例えば背景画像) を必要としない場合は JPEG を使用することをお勧めします。JPEG を使用した場合、90% くらいの場合でファイルサイズが小さくなるので、コンポジションの読み込み時間が短くなります。ほとんどのデザインツールでは JPEG を書き出すときに画質が選択できるので、画像サイズと画質間の最適なバランスを得たいときに便利です。画質を下げるとファイルサイズが小さくなり、上げるとファイルサイズが大きくなります。JPEG ファイルはラスタライズされるので、拡大したときにピクセラレーション (ぎざぎざ) が目立ちます。

PNG

PNG ファイルは、透明性を持つ画像を使用する必要のあるときに理想的です。PNG もアルファ透明度をサポートしているので、半透明なカラーを持つグラフィックを作成するために理想的です。PNG ファイルはラスタライズされるので、拡大したときにピクセラレーション (ぎざぎざ) が目立ちます。

PNG には 3 種類の主な形式があります。
(アニメーション PNG もあり、すばらしい GIF の競争相手なのですが、対応しているブラウザーが多くはありません。)

PNG-8

Photoshop または Illustrator から書き出した PNG-8 はアルファ透明度をサポートしていないので、各ピクセルは透明または不透明のいずれかなので、曲線または対角線のエッジがぎざぎざになります (上記のグラフィックを参照)。ただしグラフィックが直線を含んでおり透明が必要な場合 (例えば透明の背景上の青色の四角形などの場合)、PNG-8 は最適なファイルサイズになるのでこれを使用することをお勧めします。

PNG-24

PNG-24 はアルファ透明度をサポートしています。すなわち、半透明の細かいグラデーションを持つことができます。これは Edge Animate に対する最も人気のある形式です。その理由は、透明 PNG を使用することで、透明をサポートした鮮明なグラフィックが生成でき、複数のエレメントをレイヤー化できます。

PNG-32

PNG-32 は PNG-24 と似ていますが、8 ビットの透明度を持つ点が異なります。

SVG

SVG は書き出しに際してベクトル コンテンツを保持するので、ブラウザーでピクセラレーションなしに拡大できます。現時点で Edge Animate は SVG ファイルを単一レイヤーのアートワークとして処理するので、コンテンツが Edge Animate に取り込まれると、それ以上編集を実行することはできなくなります (ただし、グラフィック処理プログラムを使ってグラフィックを更新し再保存することは常に可能です)。SVG はファイルサイズが大きいので、グラフィックを拡大表示する必要のあるときのみ使用してください。さまざまなブラウザーでのサポートにまだ問題があるので、当面は、ウェブでは PNG を使用する方が安全です。

Illustrator を使って SVG を書き出すときには、表示されているものが必ずしも含まれないということに留意してください。AI は非表示のファイルやレイヤーを書き出すので、ファイルサイズが非常に大きくなる場合があります。SVG ファイルのサイズはアートボードのサイズともなるので、保存する前にアートボードをトリミングしてグラフィックが適当な大きさになるようにしてください。

SVG にはいくつかの形式があり、それぞれ制限が異なります。SVG 1.1 は W3C が推奨している形式です。

GIF

GIF ファイルは、グラフィック内にアニメーションを含める必要があるときに便利です (例えばプリローダ)。GIF は透明もサポートしていますが、PNG-8 と同じ制限があります。PNG は GIF よりも高画質、高圧縮率なので、グラフィック内にアニメーションを含ませる必要があるときにのみ GIF を使用することをお勧めします。

画像寸法

どの形式を使用する場合でも、Web の性質上、特定の状況でグラフィックを処理するときにいくつかの問題が発生します。

iOS 用のグラフィック

現時点では、iOS 上の画像は 1024 x 1024 ピクセルを超えると、歪曲と縮小が発生します。iOS で使用するときにこの寸法を超える画像が必要な場合は、その画像を 2 つ以上に分割し、Edge Animate でシンボルまたはグループを使用してそれらを組み合わせてください。

画像アニメーションの既知の問題

この記事を書いている時点で、特定のスタイルのアニメーションに関して、ブラウザーの制限に起因する問題がいくつかあることが判明しています。

  • 非常に短い時間間隔で長い時間に渡ってエレメントをアニメーションすると、アニメーションが長くなる場合があります。例えば、2 秒間に渡り 100% から 103% に画像をアニメーションする場合です。この問題を回避するには、トランジションの時間を長くするか、トランジション値を増加します。
  • 非常の大きな画像をアニメーション化する、または画像を大きく拡大するトランジションを作成すると、一部のブラウザーで問題が発生する場合があります。

さらに詳しく

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー