Image Doctor は、Framer プロジェクト内にあるサイズの大きすぎる画像を検出して縮小するツールです。さらに、お使いのデバイス上で英語の代替テキスト（altテキスト）の下書きも生成します。
当社の開発したImage Doctor は、Framer プロジェクト内にあるサイズの大きすぎる画像を検出して縮小するツールです。さらに、お使いのデバイス上で英語の代替テキスト（altテキスト）の下書きも生成します。当社のサーバーへデータがアップロードされることは一切ありません。
Framer は公開時に画像の配信を自動で最適化（AVIF/WebP 変換やレスポンシブサイズ調整）します。一方、Image Doctor はエディタの動作を重くし、CMS画像が必要以上に大きい場合に PageSpeed のスコアを低下させる「元のソースファイル」自体を縮小します。
無料（ベータ版）— 一括最適化を含むすべての機能をご利用いただけます。
主な機能・特徴
サイト全体のスキャン: ページ、コンポーネント、CMS を包括的にチェック
スマートなリサイズ: 配置済み画像は画面表示の2倍サイズに調整。CMS画像は長辺の最大ピクセル数を自由に入力可能（640px / 1280px のショートカットあり）
一括最適化: ワンクリックで大きすぎる画像をまとめて処理
画質調整スライダー: JPEG/WebP の再エンコード品質を設定
Alt / SEO: 設定漏れの alt を検出し、ローカル環境で英語のキャプションを生成・確認・適用
100% ローカル処理: 画像データや生成されたテキストがデバイス外に送信されることはありません
使い方
サイトをスキャンする
CMS の「長辺の最大サイズ」を設定する（必要に応じて画質も調整）
「すべて最適化」（またはカードごとに個別に処理）を実行する
サイトを再公開し、PageSpeed を再測定する
（任意）Alt / SEO 項目 → モデルをロード → キャプションを生成して適用
注意事項
アニメーション GIF はスキップされます（リサイズすると静止画になってしまうため）。
alt 生成モデルの初回ダウンロードは容量が大きくなる場合がありますが、その後はブラウザにキャッシュされます。
生成されるキャプションは英語のベース案です。公開前に内容をご確認ください。
最適化後にサイトを再公開してから PageSpeed を再測定すると、最も正確な効果を確認できます。
最適化後のフォーマット処理
JPEG → JPEG のまま維持（すでに圧縮されているため。WebP に変換しても容量削減効果が薄く、色味や細部が変化する可能性があるため）
PNG → WebP に変換（写真のような PNG の容量を大幅に削減可能。透過情報は保持）
WebP → WebP（再エンコード）
静止画 GIF → PNG に変換（Canvas が GIF の書き出しに対応していないため）
アニメーション GIF → スキップ
SVG → スキップ（ベクターデータのため）
Framerが画像を最適化する方法について
さて、以下のようにFramerは元画像を縦か横の大きいサイズに合わせて４パターンの大きさで自動リサイズをしてくれます。最大（Full）で4096pixelで、最小が512pixelです。
https://www.framer.com/help/articles/how-are-images-optimized-in-framer/
4kや大きい解像度を持つモニタではFullが、モバイル端末の場合は概ねsmallが利用されます。さらに次世代フォーマット（AVIF / WebP）： デフォルトでAVIF形式へ自動変換され、非対応ブラウザにはWebPまたは圧縮画像へフォールバックされる配信システム機能を備えています。
なぜImage Doctorが必要なのか？
Framerの自動最適化は前述の通り「Webサイトの訪問者」に対して非常に優れていますが、サイトの制作・運用現場における「制作環境の負荷」や「CMSの運用事故」まではカバーできていません。当社のImage Doctorは、その隙間を補うために開発されました。
1. エディタ（編集画面）の動作を劇的に軽量化
Framerの自動変換はあくまで「サイト公開時・閲覧時」の処理です。高解像度のカメラ写真や未圧縮の数MB〜数十MBある画像（4K/8K等）をFrameのキャンバスにそのまま配置すると、プロジェクト内部にはその巨大な元データが保持され続けます。 画像が増えるほどエディタのメモリ消費量が跳ね上がり、キャンバスの操作が重くなったり、プロジェクトの読み込みに時間がかかるようになります。Image Doctorで「元ファイル自体」を縮小することで、デザイン制作中のレスポンスを快適に保つことができるのです。
2. CMS画像によるPageSpeedの低下（過剰サイズ配信）を防止
CMS（コレクション）に記事ライターや運用担当者が巨大な画像をアップロードした場合、表示枠がどれだけ小さくても（例: 300px幅の記事カード）、Framerの自動レスポンシブによって大きすぎるバリアント（2048pxや4096px）が割り振られてしまうケースがあります。 これが要因でGoogle PageSpeed Insightsの「Properly size images（画像を適切なサイズにする）」警告が発生し、スコアを大きく落とす原因になります。Image DoctorでCMS画像の長辺上限（例: 1280pxなど）をあらかじめ強制設定しておくことで、どれだけ巨大な画像がアップロードされても配信サイズを適正範囲内に抑えることができます。
昨今４Kもモニタで見ているとしても画像自体を全画面で見せるケースは多くないため当社としては1280から2000ピクセルの間で設定処理をするのをお勧めします。
3. プロジェクトのストレージ容量を節約
Framerの価格プランには各種アセット容量の制限や運用上の上限が存在します。大きすぎる元画像をそのまま溜め込むと、あっという間にストレージを圧迫してしまいます。元データそのものを事前に最適化しておくことで、プランの容量枠を効率的に活用できます。
https://www.framer.com/help/articles/module-too-large-warning/
4. 100%ローカル・安全なAIによるAlt（代替テキスト）一括生成
この機能は実はプラグインのおまけでつけた機能です。画像枚数の多いメディアやポートフォリオサイトにおいて、手動でのAltテキスト入力は面倒で、膨大な地味な工数がかかります。Image Doctorは、画像を外部サーバーに送信することなく、お使いのデバイス上で動作する軽量AIモデルを用いて英語の代替テキストを一括下書きします。プライバシーを完全に保護しながら、SEOとアクセシビリティの基本対策を最速で完了できます。あくまでおまけ機能ではありますが、ユーザーニーズに合わせて改良していきたいと思います。
Framerの自動最適化が「公開後の閲覧者」のための機能であるのに対し、Image Doctorは「制作時のパフォーマンス維持」「ストレージ節約」「CMS運用時の表示速度ダウン防止」「SEO対策の自動化」を実現するためのツールとして開発されたということをご紹介させていただきました。
ぜひ利用いただけたら嬉しいです。
