Tweet

Pocket

Azureの「拡張機能」がポータル画面から追加できるようになっていて、その中に「Azure Image Optimizer」というのを見つけたので試してみました。

手軽に「画像を軽量化（圧縮）」を実行できる「Azure Image Optimizer」

Webページ制作時に対応することの1つに「画像を軽量化（圧縮）」があります。
これはページの表示速度を上げるために「ページ内で使用する画像ファイルの容量を削減する」ための対応ですが、通常は書きだした画像に対して何かしらのツールやサービスを使うと思います。
今回試してみた「Azure Image Optimizer」は、一度設定すれば都度特別な操作をすることなく、画像をアップロードするだけで「画像の軽量化（圧縮）」が実行されるという、Web制作的にはとても便利だなと思える機能です。

Azure Image Optimizerの設定方法

[＋新規] ＞ [Web ＋ モバイル] ＞ [Web App]で新規Web Appを作成します。
今回の実装テスト用に、写真をメインで見せるレイアウトのWebページを用意してみました。（Zuvuya Image Optimize）
写真はフリー写真素材を提供されている「ぱくたそ」さんのものを使わせていただきました。

[ツール] ＞ [拡張機能]をクリック。

[追加] ＞ [1拡張機能の選択]をクリックし「Azure Image Optimizer」を選びます。
OKをクリックしたら設定は完了！

「Webジョブ」を確認すると、「Azure Image Optimizer」が追加されています。

実際に画像容量が削減されたか確認してみる

今回のデモで作成したサイトでは、大きめの写真で容量の重い画像を使用しています。（本来のWebサイトでこれはダメですよ！ｗ）

実行前と後で比較してみると、キチンと画像の容量が削減されています。

全体的にどれだけ削減されたか？の確認方法

Azure Image Optimizerを実行すると、「site/wwwroot/App_Data」内に「ImageCompressor.Job.exe.csv」というファイルが作成されますので、それを見てみます。

どれだけ削減されたか？がひと目でわかりますね。

新しく画像を追加してみると？

5枚ほど画像を追加でアップロードしてみます。（赤枠内）

画像をアップロードするだけで画像の容量削減が自動で実行されているのが確認できました。

最後に

今回の「Azure Image Optimizer」ですが、各種ツールよりは圧縮率が低いので、まずは「Webに最適な画像を作成する」ことは大前提でサポート的な要素で使うといいのかな？と思いました。
納品後にクライアント側で更新作業をする場合は画像の軽量化（圧縮）をやらないことが多いため、その対策として「Azure Image Optimizer」を設定しておくのがよいかもしれません。
ポータル画面から簡単に設定できるものなので、Web AppでWebサイトを制作する場合はぜひ試してみてください！