このドキュメントは、Framerを学ぶ日本のユーザーが日本語の資料不足で感じる苦労を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使う皆さんに少しでも役立つことを願っています。

Framerで画像をアップロードする際に最も悩む点の一つが解像度設定です。大きすぎるとサイトの速度が遅くなり、小さすぎると画像がぼやけて見えることがあります。この文章では、Framerが提供する画像解像度オプションを一つずつ確認し、どの状況でどの設定が適しているのかをお知らせします。

画像解像度オプションの種類

Framerは画像をアップロードするときに自動でさまざまな解像度のバージョンを生成します。そのおかげで、訪問者のデバイスに最適な画像を表示できます。基本的に次のようなオプションがあります。

• Auto
  Framerに画像をアップロードする際にデフォルトで設定される値であり、アップロードした画像をさまざまなサイズに自動変換します。ブラウザがデバイス環境に合わせて最適なサイズを選択して表示します。
  
  

• Auto (Lossless)
  元の画像品質をそのまま保持するオプションで、圧縮過程で発生する可能性のある色の歪み、ノイズの減少、
  バンディング現象のような問題を避けることができます。ただし、ファイルサイズが5〜10倍に大きくなるため、性能に影響を与える可能性があります。
  
  

• Small, Medium, Large
  それぞれ512px、1024px、2048pxに固定されたサイズです。ほとんどのプロジェクトではあまり使われないため、将来的なアップデートで非表示になる可能性のあるオプションです。
  
  

• Full
  元のアップロードサイズをそのまま保持するオプションです。例えば6000pxの画像をアップロードすると、モバイルでも依然として6000pxに保持されますが、基本的な圧縮はされます。

状況別解像度オプションの選び方

• ほとんどのケースでAuto
  : 品質と性能のバランスが最も取れている基本オプションです。

• 高品質の画像が必要なときにAuto (Lossless)
  : 画像のディテールが重要な場所で使うと良いですが、読み込み速度は少し遅くなることがあります。

• 正確に元のサイズを保持したいときにFull
  : 大型背景画像のようにサイズを縮小してはならない場合など、元の画像そのままを保持するのに適しています。

• サイズが決まっている場合に Small/Medium/Large
  : 一般的なウェブサイトではほとんど必要ありません。必要でない場合はそのオプションを推奨しません。

まとめ

画像解像度の選択は単に見栄えの良い画面を作ることを超え、ウェブサイトの性能とユーザーエクスペリエンスに直接的な影響を与えます。ほとんどはAutoだけで十分ですが、状況に応じてAuto (Lossless)やFullを活用すると、ディテールまで捉えてくれることを念頭に置いてください。

詳しい内容はFramerでの画像を最適化する方法に関するドキュメントで参照してください。

この文章はFramer公式ブログの「Image resolution options」を翻訳・アダプトしたコンテンツです。