webflowの内臓ツールでWebPに変換する方法
WebP（ウェッピー）は、Googleが開発した次世代の画像フォーマットです。JPEGやPNGと比較して、同等の画質を保ちながらファイルサイズを大幅に削減でき、Webサイトの表示速度向上に効果的なフォーマットであるといえます。Webサイトの表示速度はユーザーエクスペリエンスを左右する重要な要素であり、その表示速度を改善する上で、画像の軽量化は欠かせません。本記事では、Webflowの内臓ツールで画像をWebP形式に変換し、効率的に圧縮する方法を解説します。
WebPのメリット
WebPは、従来のJPEGやPNGの拡張子と比較して、以下のメリットがあります。
高画質を維持したままファイルサイズを軽量化
WebPは、画像のファイルサイズを最大34%削減できるため、Webページの読み込み速度が向上します。
また、WebPは圧縮率が高いにも関わらず、画質をほとんど劣化させないという特性があります。そのため、美しいビジュアルを保ちながら、データの使用量を削減することが可能です。
参照元：https://developers.google.com/speed/webp/gallery1
表現できる色数がJPEGと同等
WebPとJPEGは、どちらも24ビットカラーをサポートしており、約1670万色を表現できます。JPEGは主に写真で使用され、カラーデータを保持しつつ高圧縮を実現します。一方、WebPは、JPEGと同等のカラーデータを保ちながらファイルサイズを削減できるため、インターネット上に適したフォーマットと言えます。
ユーザーエクスペリエンスが改善される
ファイルサイズの軽量化と圧縮率の高さによりウェブサイト表示速度が向上すると、SEOにも好影響を与えられます。ウェブサイトの読み込みが速くなると、直帰率や離脱率の低下が期待でき、購入率や契約数などの増加にも繋がります。
Webflowで画像をWebPに変換する方法
Webflowでは、拡張子の変換が内蔵ツールにより自動的に整理されるため、入れ替え作業の手間が省けてとても便利です。ここでは、Webflowで画像をWebPに変換する方法について詳しく説明します。
1. “Asset” の選択
Webflowのデザイナー画面左側に表示されている “Assets” パネルをクリックします。
2. 変換したい画像を選択する
Assetsに表示されている画像の中から、WebPに変換したい画像を選択します（複数選択も可能）。JPEGやPNGなど特定の拡張子を検索して “Select All” をクリックすると、一度でWebP形式に変換できるのでおすすめです。
3. “Compress” をクリック
画像の選択が完了したら、 “Compress” をクリックします。
4. WebPへの変換完了
“Compress” をクリック後、しばらくすると自動的にWebPへの変換が完了します。変換できない画像はそのまま残るので注意が必要です。
CMSでアップロードした画像をWebPに変換する方法
ブログ記事などに使用しているCMSでアップロードした画像も、WebPに変換することができます。
ここでは、CMSでアップロードした画像をWebPに変換する方法について詳しく解説します。
1. “Compressor Assets” を選択
CMS Collectionを開き、 “Compressor Assets” を選択します。選択後に “Your assets are all ready” と表示されれば、WebPに変換完了です。
3. パブリッシュする
webPへの変換を反映させるため、Webflowのデザイナーまたはサイト設定にアクセスし、 “Publish to selected domains” をクリックしましょう。
4. WebPへの変換確認
パブリッシュが完了したら、CMSにアップロードしている画像を開いて確認しましょう。
画像を開いて、URLの拡張子が.webpになっていれば変換完了となります。
まとめ
Webflowでは、内蔵ツールを利用して簡単に画像をWebP形式に変換することができます。JPEGやPNGと比べて、ファイルサイズを大幅に削減しつつ高画質を維持することができます。これにより、Webサイトの読み込み速度が向上し、ユーザーエクスペリエンスの改善が見込まれます。WebPへの変換機能を活用し、より快適なWebサイトを構築しましょう。画像の圧縮に関してご不明な点があれば、お気軽にご相談ください。
