目次
目次
この文書は、Framerを学ぶ国内ユーザーが韓国語資料の不足で苦労をしていることを解消するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆様に少しでもお役に立てれば幸いです。
最適化の要点まとめ
JPEG, PNG, WebP, GIF, TIFF: 元のままアップロードし、Image → Fillセクションで解像度を「Auto」に設定してください。Framerはほとんどの画像を自動でAVIFに変換し、サイトや画面の解像度に合わせてサイズを調整します。
SVG: フレームを描いた後にFillオプションでImageを選んでアップロードしてください。
Framerに画像をアップロードすると自動的に最適化されるため、WebP/AVIFへの変換やコンテンツサイズに合わせたリサイズは必要ありません。
JPEG, PNG, WebP, AVIF, GIF, TIFF 自動リサイズ
モバイルユーザーの画面はより小さいです。例えば、デスクトップ向けに3000×2000 pxの画像をアップロードした場合、390×890の画面の携帯電話で同じ画像をそのまま表示すると不必要なデータ消費が発生します。これを防ぐために、Framerは画像を自動でリサイズし、ブラウザが画面に適した最適なサイズを選択できるようにします。
画像リサイズの仕組み
アップロードされた
JPEG,PNG,WebP,AVIF,GIF,TIFF画像は512, 1024, 2048, 4096 pxのサイズに自動的に縮小されます。画像を拡大（アップスケール）することはなく、例えば幅が3000 pxの画像の場合、512, 1024, 2048 pxバージョンのみが生成されます。
リサイズは長い側を基準とします。縦が3000 pxで長い場合は、縦を基準に変換されます。
ブラウザの最適化処理
ほとんどの<img>タグにはsrcsetとsizes属性が自動で追加されます。sizes: ブラウザに画像の表示サイズを知らせます。srcset: リサイズされたすべてのバージョン（元の画像含む）を提供し、ブラウザが最適な画像を選択するようにします。
Resolutionオプション
Fill → Image → Resolutionで制御できます。
“
Small”, “Medium”, “Large”, “Full”オプションはそれぞれ512, 1024, 2048, 4096 pxバージョンを強制的に使用します。ただし、元より大きいサイズにはアップスケールしません。例えば、幅が1500 pxの画像ならLargeやFullを選んでも1500 pxのままで提供されます。
JPEG, PNG, WebP, GIF, TIFF > AVIF 変換ルール
区分 | 処理方法 | 備考 |
|---|---|---|
基本変換 | AVIFの損失圧縮（品質80） | 対象: JPEG, PNG, WebP, GIF, TIFF |
Auto (Lossless) 選択 | WebP 無損失変換 | ファイルサイズ↑、圧縮アーティファクトなし |
アニメーション画像 | WebPの損失を保持 | AVIFアニメーション変換不可 |
初回リクエスト時 | WebP 損失（品質90）を優先提供 → 以後AVIFに置換 | 変換完了後自動で交換 |
変換後の容量 > 元の容量 | 元のまま提供 | 効率的でない場合は元を維持 |
ブラウザサポート
ブラウザ環境 | 提供フォーマット |
|---|---|
AVIFサポートあり（例: Safari 16.4+） | AVIF |
WebPのみサポート | WebP |
AVIFとWebPサポートなし | 元の再圧縮版 |
PNG損失圧縮の理由
PNGは元々無損失フォーマットだが、多くのアップロード画像がスクリーンショットであるため
損失圧縮（品質90）を適用することでサイズを大幅に削減
目に見える品質低下なしに最適化可能
SVG -> SVGOで最適化
FramerはアップロードされたSVGをSVGOで最適化します。
SVGグラフィック（
<svg>タグで表示）とImage Fillの両方に適用されます。ただし、SVGにパスやレイヤーが多いとサイトのパフォーマンスに影響を与える可能性があるため、必要に応じてSVGをImage Fillとしてアップロードすることをお勧めします。
画像が正しく表示されないか品質の問題が発生した場合は、Framerの連絡先ページを通じてサポートチームに問い合わせてください。
この投稿はFramer公式ブログ『How images are optimized in Framer』の翻訳・脚色コンテンツです。
