Framerの画像・動画

基本的な挿入方法

Framerで画像や動画を追加するには、左側のツールバーから「Insert」を開き、「Media」セクションから画像コンポーネントをキャンバスにドラッグします。

または、ショートカットでも追加することができます。

• 画像挿入： Shift + I

• 動画挿入： Shift + V

対応形式・メディア

画像はJPEG、PNG、WebP、GIF、TIFF形式の画像に対応しています。
動画はmp4やwebmなどのローカルファイルアップロードの他、YouTubeやVimeoのURLを使用した埋め込みにも対応しています。自動再生、ループ再生など、様々な設定が右パネルで可能です。

画像の自動最適化と設定のポイント

Framerは画像をアップロードすると、以下の最適化を自動的に行います：

1. 複数サイズの生成

   • 512px、1024px、2048px、4096pxの4種類を自動生成

   • ブラウザが画面サイズに応じて最適なものを選択

   • 元のサイズより大きくなることはありません

2. フォーマット変換

   • AVIF形式への自動変換（品質80で圧縮）

   • 非対応ブラウザにはWebPまたは最適化された元形式で提供

   • アニメーション画像はWebP形式を使用

以下のような場合、設定に注意が必要です。

画質を重視する場合の設定
通常はAVIF形式への自動変換（品質80で圧縮）が行われますが、画質を重視する場合は「Fill」→「Image」→「Resolution」を「Auto (Lossless)」を選択。

SVGファイルを使用する際の設定
パスやレイヤーが多い場合、パフォーマンスに影響を与える可能性があります。プロパティパネル「Fill」→ 「Image」→ SVGファイルを追加で画像fillとしてアップロードすることを推奨しています。

動画の自動最適化と設定のポイント

Framerは動画の読み込み方法を最適化しますが、ファイル自体は変更しません：

1. 効率的な読み込み

   • ビューポート付近まできて初めて読み込み開始 ※ページの読み込み時に空白が表示されるのを防ぐためポスター画像（サムネイル）の設定が重要です。

2. 自動制御

   • GIFのように使用する動画（ミュート+ループ再生）は表示時のみ再生

   • 画面外に出ると自動的に一時停止

以下のような場合、設定に注意が必要です。

高品質な配信が必要な場合
YouTube/Vimeoを活用する方法が良いとされています。

動画は自動再生を設定する場合
音声をミュートにします。音声付きの自動再生は、ユーザーにストレスを与える可能性があるだけでなく、多くのブラウザでブロックされる可能性があります。

公式の記事はこちら(画像の最適化・動画の最適化)