適応性のあるビジュアル

ビジュアルを Web サイトにアップロードすると、Webflow はアップロードしたビジュアルのバリエーションを生成し、あらゆるデバイスにシームレスに適応し、すばやく読み込まれるようにします。これにより、モバイル ページの読み込み速度が最大 10 倍向上します。

ビジュアルを適応可能にするために、ブラウザはページ上のサイズと画面解像度に応じて、そのビジュアルの異なるサイズのバージョンを提供します（ ソースセット そして サイズ あなたの属性 <img> 要素)。ブラウザがさまざまなサイズのビジュアル バージョンにアクセスできるようにするために、Webflow はアップロード後に各ビジュアルのバリエーションのセットを作成し、その後ブラウザが各バリエーションをいつ配信するかを決定するためのエンコード指示を実行します。

重要な： 元のビジュアルが適切に圧縮されている場合、Webflow は元のビジュアルを使用します。

サイト全体で適応可能なビジュアルを手動で作成するためのガイダンス

Webflowは、サイトページを操作する際にビジュアルを評価し、適応性のあるバリエーションを作成します。ただし、他のページのビジュアルに影響を与える変更を加える可能性があります（コンポーネントまたはcategoryの編集など）。すべてのビジュアルが適応性を保つようにするには、影響を受けるページに移動するか、キーボードショートカットを使用します。 指示 + シフト + 私 (Macの場合) または コントロール + シフト + 私 (Windows の場合)、デザイナーがすべてのページを分析して再調整します。

2016 年 9 月以前に開設されたサイト向けの適応型ビジュアルを生成するための手順

サイトが 2016 年 9 月 14 日より前に作成された場合、サイトに適応性のあるビジュアルを作成するには簡単な手順を実行する必要があります。次回デザイナーにアクセスすると、移行プロセスを開始するように求めるダイアログが表示されます。 

このプロセスは、サイトのサイズに応じて数分かかる場合があります。後で実行したい場合は、いつでもプロセスを開始できます。 アセットパネル またはキーボードショートカットを使用する 指示 + シフト + 私 (Macの場合) または コントロール + シフト + 私 (Windows の場合)。

適応性のあるビジュアルを選ばない

特定のビジュアルに対してこの機能を無効にするには（たとえば、ブラウザに元のビジュアル サイズを使用するように強制する場合など）：

1. キャンバス上のビジュアルを選択する
2. アクセス 設定パネル > 画像設定
3. 選択を解除 画像は適応可能 チェックkbox

インタラクションによる適応型ビジュアルの制御

Webflow は、ビジュアルのサイズを調整する可能性のあるホバー状態やインタラクションではなく、通常の状態から適応型ビジュアルを派生します。ホバー状態のスタイルやインタラクションを埋め込んだら、公開する前にサイトを徹底的に精査することをお勧めします。

特定のシナリオでは、ビジュアル要素の寸法に対するサイズ属性の影響を無効にするために、補足的なデザインを組み込む必要がある場合があります。たとえば、ビジュアルがコンテナーを占有するには、ビジュアルの幅を 100% に指定する必要がある場合があります。 

よくある質問

どのような種類のビジュアルがサポートされていますか?

この機能は、リッチ テキスト要素を介して統合されたものを除く、すべてのインライン JPG、PNG、および WebP 画像に対して柔軟なバリエーションを作成します。また、背景画像には適用されません。複雑な画像やベクターベースの画像には、ロスレス圧縮が可能な SVG と PNG を使用することをお勧めします。

ビジュアルごとにいくつのバリエーションが作成されますか?

Webflow によって生成されるバリエーションの数は、元のビジュアルのサイズによって異なります。幅が 3200 ピクセルを超える場合、Webflow は 3200 ピクセル、2600 ピクセル、2000 ピクセル、1600 ピクセル、1080 ピクセル、800 ピクセル、500 ピクセルの 7 つのバリエーションを生成します。

ビジュアルはどのようなサイズでアップロードすればよいですか?

4MB の制限内であれば、任意のサイズのビジュアルをアップロードできます。デバイスのサイズと解像度に応じて、ブラウザは最適なバリアントを表示します。たとえば、幅 4000 ピクセルのオリジナル ビジュアルをアップロードしたが、モバイルでは幅 300 ピクセルでしか表示されない場合、ブラウザは Webflow で作成された 500 ピクセルのバリアントを表示します。

適応可能なバリアントはエクスポートされますか?

肯定的で適応性のあるビジュアルには、エクスポートされたサイトで srcset 属性と sizes 属性が含まれ、バリエーションは元のビジュアルとともに .zip ファイルの /images ディレクトリに保存されます。

Webflowブログで適応型ビジュアルに関するさらなる洞察を得る適応型ビジュアルテクノロジーについてさらに深く知りたい方は、 A List Apart の Eric Portis の記事 有益である可能性もある。