「アニメ画像に変換する君」はAPNGだけでなく、WebPの出力にも対応しています。APNGやWebPはアニメーションGIF形式に比べて透過が美しいため、webページ内のデザインにレイヤーとして重ねることに適しています。

ただし、どちらの画像形式も全てのブラウザに対応していないため、ブラウザごとに適した画像ファイルを参照するよう指定しなければなりません。HTML5のpicture要素を使えば、ブラウザが自動的に適したファイルを読み込むため、幅広いブラウザでアニメーション画像の再生が可能となります。

help-browser

WebP画像の書き出し方

アプリケーションの左上の[用途]を「webページ用アニメーション」で選択します。すると[画質設定]タブ内に、「APNG」「WebP」「HTML」の複数の書き出しオプションが表示されます。

help-web

HTMLファイルはクロスブラウザ対応するためのコードが出力されます。次は出力したHTMLコードの一部ですが、Microsoft EdgeやInternet Explorer、Chrome、Safari、Firefox、Operaに対応したコードとなっています。

<!-- Chrome と Firefox と Safari で再生可能 (IE, Edge ではアニメは再生できません) -->    
<picture>
  <!-- Chrome 用 -->
  <source type="image/webp" srcset="index.webp" />
  <!-- Firefox, Safari 用 -->
  <img src="index.png" width="749" height="516" alt="" class="apng-image" />
</picture>

※Microsoft EdgeやInternet ExplorerはAPNGもWebPの両方の形式をサポートしていないため、ポリフィルとしてJavaScriptライブラリで再生可能にしています。

次のページではアプリケーションのライセンス情報や開発情報を紹介します。