今回はWebflowで組み込みの WebP 変換ツールを使用して、既存の画像アセットを圧縮する方法をご紹介します。

WebP画像ファイル形式とは、画像の高品質の大部分を保持しながら、より小さいファイルサイズに圧縮された形式です。

WebPを使用することにより、Web ページの読み込みが速くなりWeb サイトのストレージ容量が節約されます。

ただし、WebP ファイル形式はまだすべてのブラウザでサポートされているわけではありません。(どのブラウザが WebP をサポートしているか確認)

‍

組み込みの Webflow変換ツールを使用すると、既存の画像アセット (JPEG、JPG、PNG、WebP アセット) を WebPファイルに変換して圧縮できます。

これにより、アセットパネルとキャンバス上のアセットのインスタンスの両方が変換されます。

注記

必要な数のアセットを WebP ファイルに変換できます。

ただし、リクエストあたり 100 アセット、1 分あたり 10 リクエストというリクエスト制限があります。

WebP イメージはOpenGraphはサポートされていません。 OpenGraph イメージを WebP 形式に圧縮しないことを強くお勧めします。

‍

アセットパネルの既存のアセットをWebPファイルに変換する方法

1. アセットパネルを開く
2. Expand Assets panelのアイコンをクリックします
3. アセットの上にマウスを置くと表示される「check」アイコンをクリックするか、「Select all」をクリックして、変換するアセットを選択します。
4. 「Compress」をクリックします

アセットが変換されるまでの間、デザイナーでの作業を続けたり、作業を終了することも可能です 。

アセットを変換した後は、必ずサイトをrepublishしてください。

‍

注記

既存のアセットを WebPに変換すると、元のアセットファイルがWebPアセットに置き換えられます。

元の画像ファイル (PNG、JPEG など) を保持したい場合は、まずバックアップを作成するか、変換する前にアセットパネルからファイルをダウンロードしてください。

‍Webflowでは、WebP 画像を元のファイル拡張子に変換して戻すことはできません。

ただし、元のファイルを保存せずに誤って既存のアセットをWebPに変換した場合は、元のアセットが含まれるサイトのバックアップを復元することで、元のアセットに戻せます。

‍

CMSアセットのWebP変換ツール

また、既存の画像だけでなく最新のアップデートで、Webflow サイトのすべてのコレクションにわたってCMS イメージをWebPファイルに変換してパフォーマンスを向上できるようになりました。

1. 「Collections」パネルに移動します
2. 「・・・」アイコンをクリックします
3. 「Compress assets」をクリックします
4. 「Continue」をクリックします

‍

アセットが変換されるまでの間、デザイナーでの作業を続けたり、作業を終了することも可能です 。

アセットを変換した後は、必ずサイトをrepublishしてください。

‍

いかがでしたでしょうか。

是非、WebP変換ツールを活用してWebflowでの制作パフォーマンスを向上していきましょう。

‍