便利なツールが登場! 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images
Post on:2022年5月16日
次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。
IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。

Optimize Imagesは、画像(SVG, PNG, JPG, GIF)の最適化と圧縮、画像の新しいフォーマット(WebPやAVIF)への変換と最適化が簡単にできるオンラインツールです。
WebPとAVIFは高い圧縮率を備えたフォーマットです。
WebPは簡単に言うとPNG, JPG, GIFの良いとこ取りのフォーマットで、24ビットのフルカラーをサポートしています。高画質の透過PNGのサイズが大きくなってしまうことやGIFアニメーションで色数が少ない悩みも解決します。IE以外のブラウザすべてでサポートされており、これからは主流になるでしょう。
AVIFはWebPよりも高い圧縮率を備えており、JPG画像と比較すると最大95%以上の圧縮率を誇ります。高画質の画像を超軽量サイズで作成できます。また、HDRもサポートしており、より高画質で明度の高いイメージにも対応できます。現在、サポートされているのはChromeとFirefoxだけとなっています。

Optimize Imagesでは1つのツールで、9つの画像最適化ができます。
- SVG画像の軽量化・最適化
- PNG画像の軽量化・最適化
- JPG画像の軽量化・最適化
- GIF画像の軽量化・最適化
- PNGやJPG画像をWebP画像に変換・最適化
- PNGやJPG画像をAVIF画像に変換・最適化
- HTMLタグとSEOによる画像の最適化。
- Webページをスキャンして、画像を自動的に処理。
- 画像に透かしを作成。

Optimize Imagesの特徴
Optimize Imagesをさっそく使用してみました。
まずは、WebPおよびAVIFに変換・最適化したい画像を用意します。使用できるフォーマットはJPG、PNG、SVG、GIFです。
画像のアップロード方法は、2種類用意されています。
- 左パネル: WebサイトまたはURLのリストから
- 右パネル: 画像を直接アップロード
今回は右パネルに、PNG画像をアップロードしてみました。

画像をアップロードしたら、変換するフォーマット・圧縮方法などを選択します。完了したら、下部の「Optimize」をクリックします。

変換するフォーマット・圧縮方法などを選択
完了すると、どのように最適化されたのかをレポートで確認できます。
1列目は、WebPとAVIFのファイルサイズ。
2列目は、ファイルサイズの削減率。
3列目は、平均ページ読み込み速度。
4列目は、平均帯域幅節約。
5列目は、Webバイタル値。

最適化レポートパネル
変換・最適化した画像ファイルは、ページの下部からダウンロードできます。

変換・最適化した画像のダウンロード
利用にあたっては、3つのプランが用意されています。
機能的には3プランとも同じ、最大アップロードファイルサイズ・帯域幅転送が異なるだけです。

sponsors