Responsive imagesの使い方

webflowでは、画像をアップロードすると自動で複数の大きさの画像を生成するResponsive imagesという機能があります。

画像サイズはウェブサイトのスピードとパフォーマンスに直結するので、webflowの重要な機能の一つといえると思います。

今回はこのResponsive imagesの使い方について解説していきます。

Responsive imagesとは

Responsive imagesはwebflowが指定する要件にあった画像をアップロードすると、デバイスのサイズと解像度に適した画像を自動で表示してくれる機能です。

webflowでは、画像をサイトにアップロードすると以下の7つ画像を自動的に生成します。

• 3200px
• 2600px
• 2000px
• 1600px
• 1080px
• 800px
• 500px

生成された各サイズの画像は制作者側で使い分ける必要はなく、デバイスのサイズと解像度によって自動的に表示を切り替えてくれます。

（内部的には<img>要素にsrcset 属性とsizes属性が自動で追加されているようです）

Responsive imagesの使い方

Responsive imagesを使うためには

1. アップロードする画像が要件を満たしていること
2. Responsive images機能が有効化されていること

を満たす必要があります。

画像の要件

アップロードする画像の要件です。

1. 3200px以上の画像サイズであること(元の画像より小さい画像しか生成しない)
2. 4MB未満の容量であること
3. JPG/PNG/WebPいずれかであること

Responsive images有効化

Responsive imagesはデフォルトで有効化されていますが、念のため有効化されているか確認しましょう。

Designer画面から画像を選択し、画面右側のタブのDisable responsivenessにチェックが入っていないことを確認します。チェックが入っていなければResponsive images機能は有効化されています。

サイト全体の画像のスキャン

サイト全体でレスポンシブな画像が設定されているか確認したい場合は、Command + Shift + I (Mac の場合) またはControl + Shift + I (Windows の場合) で確認することが出来ます。

サイトのリリース前に一度実行しておくとよいかもしれませんね。

注意点

リッチ テキスト要素に追加した画像はResponsive imagesの対象外の様です。

This feature generates responsive variants for all inline JPGs, PNGs, and WebP images, except those added via rich text elements.

そのため、ブログやニュースを投稿する際に画像を使用する場合は自身で最適指し手からアップロードしたほうがよさそうです。

参考

https://university.webflow.com/lesson/responsive-images?topics=layout-design

https://webflow.com/blog/new-feature-responsive-images