Figmaの画像圧縮は、Downsize・TinyImage Compressor・Olive Pressの3プラグインで完結します。圧縮率70〜80に設定すれば画質を保ちつつファイルサイズを大幅に削減でき、webp出力や一括処理にも対応しています。この記事では、プラグイン別の手順と用途別の使い分けを解説します。
▶ 3日で初案件PR
この記事でわかること
この記事を読むと、3つのことが明確になります。Figmaファイルを最大70%軽量化する具体的な圧縮手順、PNG・JPEG・webpを用途別に使い分ける判断基準、そしてプラグイン選択を30秒で終わらせる診断フローです。
今の仕事について、一番近いものは？
この記事の結論
Figma内の画像圧縮は、Downsizeプラグインを使い圧縮率70〜80に設定するだけで、ファイルサイズを最大70%削減できます。webp出力が必要な場合はOlive Press、書き出し後の容量確認にはTinyImage Compressorを使う3プラグイン体制が最も効率的です。外部ツールに頼る必要はなく、Figma内で一括処理まで完結します。
今日やるべき1つ
Figmaのプラグインメニューから「Downsize」を検索してインストールし、試しに1枚の画像を圧縮率75で変換する（所要時間：5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| ファイルが重くてDownsizeを今すぐ使いたい | Figma画像圧縮はDownsizeで3ステップ | 3分 |
| PNG・JPEG・webpの使い分けを知りたい | Figma画像はPNG・JPEG・webpを用途で使い分け | 3分 |
| どのプラグインを選ぶか判断したい | Figmaの画像圧縮は3プラグインを3分で診断 | 3分 |
| webpで書き出したい | FigmaのwebP出力はOlive Pressで1分設定 | 3分 |
| 圧縮失敗・画質劣化の原因を知りたい | Figma画像圧縮は5つの仕組みで最適化 | 5分 |
Figma画像圧縮はDownsizeで3ステップ
Figmaでファイルが重くなる原因のほとんどは、貼り付けた画像の容量です。Downsizeは、Figma内の画像を自動検出して一括圧縮できるプラグインで、設定項目がシンプルなため初めて使う方でも5分以内に完了できます。
DownsizeをFigmaにインストールする方法
Figmaのトップメニューから「プラグイン」→「プラグインを管理」→検索窓に「Downsize」と入力し、インストールボタンをクリックします。インストール後は「最近使ったプラグイン」に表示されるため、次回以降はメニューから1クリックで起動できます。Figma Communityから直接検索してインストールすることも可能です。
DownsizeはブラウザVersion・デスクトップ版どちらのFigmaでも動作します。作業環境を問わず導入できるため、チーム共有ファイルにも即日適用できます。インストール自体は無料で、追加の設定なしに起動した直後から使えます。
Downsizeで画像を圧縮する3ステップ手順
Figmaのキャンバス上で圧縮したい画像を選択した状態でDownsizeを起動すると、選択画像のみが対象になります。全画像を一括処理したい場合は、何も選択せずに起動することで、ファイル内のすべての画像を自動検出します。
設定画面では3つの項目を確認します。「PNG → JPEG where possible」のチェックをオンにすると、透過不要の画像が自動でJPEGに変換されます。「Compress」のスライダーを70〜80の範囲に設定することで、画質の劣化を抑えながら容量を削減できます。「Resize」は元の解像度を維持したい場合はオフのままにします。最後に「Run」ボタンを押すと処理が始まり、完了後に各画像の削減容量が一覧で表示されます。
「選択→設定確認→Run」の3ステップで完了します。1ファイルあたりの処理時間は画像枚数によりますが、10枚程度なら30秒以内に終わります。
Downsize圧縮率70〜80が最適な理由
圧縮率の数値は高いほど高画質・大容量、低いほど低画質・小容量を意味します。50以下に設定するとJPEGの圧縮アーティファクト（ブロックノイズ）が目立ち始め、文字まわりの輪郭がにじみます。90以上では容量削減効果がほとんど得られません。70〜80の範囲は「目視で画質劣化を判別しにくく、かつ容量を40〜70%削減できる」実務上の最適ゾーンです。
Downsizeプラグインの利用体験・手順解説では、「Downsizeを使ったら、10MBあったFigmaファイルが3MBになった。設定はCompressを75にしただけ」という報告があります。圧縮後は必ずズームインして文字の輪郭を確認してください。なお、画像圧縮で画質を落とさない方法も参考にすると、形式選択の理解が深まります。
CHECK
▶ 今すぐやること: Downsizeをインストールし、現在作業中のFigmaファイルで「全画像自動検出」モード（何も選択せずに起動）を試す（5分）
Q: Downsizeは無料で使えますか？
A： はい、基本機能は無料で使えます。商用利用を含む通常の圧縮・リサイズ機能はすべて無料の範囲内で利用できます。
Q： 圧縮後に元の画像に戻せますか？
A： Figmaの「元に戻す（Ctrl/Cmd+Z）」で直後であれば戻せます。ファイルを保存・閉じた後は元のデータには戻せないため、圧縮前にFigmaファイルの複製を作成してください。
Figma画像はPNG・JPEG・webpを用途で使い分け
形式の選択を誤ると、圧縮しても思ったほど容量が減らない、または必要な透過情報が失われる、という問題が発生します。判断基準は「透過が必要かどうか」の1点に絞ると、迷わなくなります。
PNGを使うべき画像の条件
PNGは透過（アルファチャンネル）が必要な画像、つまりアイコン・ロゴ・UIパーツで背景が透明になっているものに限定して使います。スクリーンショットや写真素材にPNGを使うと、JPEGと比べてファイルサイズが2〜5倍になります。
「書き出し時に背景が透明である必要があるもの」のみPNGを選ぶと判断が早くなります。ロゴをバナー内に配置する場合など、後から背景変更が発生する可能性があるものもPNGが適しています。画像フリーアイコン選びと同様に、素材の用途から逆算して形式を決めるアプローチが有効です。
JPEGに変換してよい画像の条件
写真・スクリーンショット・グラデーション背景のバナー素材は、JPEGに変換することで容量を大幅に削減できます。透過が不要であれば、ほぼすべてのビジュアル画像はJPEGで代替できます。Downsizeの「PNG → JPEG where possible」オプションはこの判断を自動化するもので、透過ピクセルが存在する画像は自動的にPNGのまま保持されます。
「透過が必要か否か」だけを判断軸にすると、形式選択の迷いがなくなります。
webpが必要な具体的なケース
webpはPNGとJPEGの中間的な特性を持ち、透過も表現できる上にJPEGより20〜30%小さいファイルサイズを実現できます。ただし、Figmaのネイティブ書き出し機能ではwebpを直接選択できないため、Olive Pressプラグインが必要です。
webpが必要なケースは「Webサイト用の画像素材を書き出す」場面に限定されます。クライアントへの納品がPhotoshop・Illustratorでの再編集を前提としている場合は、webpよりPNG/JPEGの方が互換性が高く扱いやすいです。
CHECK
▶ 今すぐやること: 現在Figmaに配置している画像を1枚選び、透過が必要かどうかを確認して、不要であればDownsizeの「PNG → JPEG」オプションで変換する（3分）
Q: webpはFigmaのネイティブ機能で書き出せますか？
A： Figmaの標準書き出し機能ではwebpを選択できません。Olive Pressプラグインを使うことで、webp形式での書き出しが可能になります。
Q： JPEGに変換すると透過はどうなりますか？
A： JPEG形式は透過をサポートしていないため、透過部分は白または指定背景色で塗りつぶされます。DownsizeのJPEG自動変換は透過ピクセルを検出して除外するため、透過画像はPNGのまま保持されます。
Figmaの画像圧縮は3プラグインを3分で診断
どのプラグインを選ぶか、状況によって最適解が変わります。以下の質問に答えるだけで、用途に合ったプラグインが分かります。
Q1: 主な目的は何ですか？
Figmaファイル自体を軽くしたい場合はQ2へ進んでください。書き出し後の画像ファイルを軽くしたい場合はQ3へ進んでください。
Q2: 複数の画像をまとめて処理したいですか？
Yesの場合はDownsizeが最適です。全画像を自動検出して一括圧縮でき、PNG→JPEG変換も自動化できます（Downsizeプラグイン詳細）。Noの場合（1枚だけでよい）はDownsizeでもTinyImage Compressorでも対応可能です。
Q3: 書き出し形式はwebpが必要ですか？
Yesの場合はOlive Pressが唯一の選択肢です。webp形式での出力と1〜100%の圧縮率調整に対応しています（Olive Pressでwebp出力する方法）。Noの場合はTinyImage Compressorが適しています。PNG・JPEG・GIF・SVGに対応し、書き出し後のファイルサイズを確認しながら調整できます。
Result A: Downsizeを使う
Figmaファイルを開き、プラグインメニューからDownsizeを起動して「Run」で完了です。圧縮率75を起点に調整してください。
Result B: TinyImage Compressorを使う
書き出したい画像を選択してプラグインを起動し、形式とクオリティを設定してエクスポートします。PNG・JPEG・SVG・GIFすべてに対応しています。
Result C: Olive Pressを使う
webp出力が必要な場合は、後のセクション「FigmaのwebP出力はOlive Pressで1分設定」を参照してください。
CHECK
▶ 今すぐやること: 上の診断で該当したプラグインをFigma Communityから検索してインストールする（3分）
Q: 複数のプラグインを同時に使っても問題ありませんか？
A： 問題ありません。FigmaはDownsize・TinyImage Compressor・Olive Pressを同時にインストールして用途別に使い分けることを前提に設計されています。場面に応じて使い分けてください。
Q： 無料で使えるプラグインはどれですか？
A： Downsize・TinyImage Compressor・Olive Pressはすべて基本機能が無料です。TinyImage Compressorは処理枚数に上限がある場合があるため、大量処理が必要な場合は公式ページで最新の制限を確認してください。
PR提供: 日本デザインスクール（デザスク）
FigmaのwebP出力はOlive Pressで1分設定
Figmaの標準機能ではwebpを書き出せないため、「webpで納品してほしい」という要望に対応できないケースがあります。Olive Pressは、この問題をプラグイン内で完結させます。
Olive Pressのインストールと基本設定
Figmaのプラグインメニューから「Olive Press」を検索してインストールします。起動すると、書き出したい形式としてwebp・PNG・JPEGを選択できます。圧縮率は1〜100%のスライダーで調整可能で、プレビューを確認しながらリアルタイムで変化を確認できます（Figmaでwebpを出力する詳細手順）。
webp書き出しの推奨圧縮率
webpの場合、圧縮率80〜85が品質と容量のバランスが最も取りやすい設定です。JPEGの圧縮率75に相当する画質をwebp80で実現でき、ファイルサイズはJPEGより約20%小さくなります。サイト用のバナーやアイキャッチ画像では、webp80を標準設定としておくと、クライアント納品のたびに設定を考える手間がなくなります。
webpを使う際の注意点
webpはInternet Explorer 11では表示できません。ただし、2022年6月にMicrosoftによるIE11のサポートが終了しており、主要ブラウザのwebp対応率は2024年時点で97%以上です（Can I use – webp）。IE対応を明示的に求められていない案件では、webpを積極的に採用してよいです。「IE対応が必要か」をクライアントに最初に確認するだけで、形式選択の迷いをなくせます。
CHECK
▶ 今すぐやること: Olive PressをインストールしてFigmaのテスト画像をwebp80で書き出し、ファイルサイズをJPEGと比較する（5分）
Q: Olive Pressで書き出したwebpはそのままWebサイトに使えますか？
A： はい、Olive Pressで書き出したwebpファイルは標準的なwebp形式のため、HTML・CSS・WordPress・各CMSに直接アップロードして使用できます。
Q： webpとPNGを同じデザインで両方書き出せますか？
A： Olive Pressは1回の操作でwebpとPNGを同時に書き出す機能を持っていません。Figmaの標準書き出し機能でPNGを、Olive Pressでwebpをそれぞれ書き出す方法が最も効率的です。
Figma画像圧縮は5つの仕組みで最適化
圧縮効率を最大化しつつ画質トラブルを防ぐための実務ノウハウを5つ紹介します。多くの失敗パターンはプラグインの使い方ではなく「前後の処理」に集中しています。
ハック1: 元画像を4096px以下に事前リサイズして圧縮ロスをゼロにする
【対象】: 大きな写真素材・バナー用の高解像度画像をFigmaに貼り付けている方
【手順】: Figmaに貼り付ける前に、macOSの「プレビュー」またはWindowsの「フォト」アプリで画像の幅と高さを確認します（1分）。幅または高さが4096pxを超えている場合は、Squooshで4096px以下にリサイズしてから保存します（3分）。リサイズ後の画像をFigmaに貼り付け、Downsizeで圧縮します（2分）。
【コツと理由】: 幅または高さが4096pxを超えた画像はFigmaに読み込む段階で自動的に縮小され、意図しない解像度になります（4096px制限の解説）。縮小処理はFigma側が行うため、縮小後の品質はコントロールできません。事前に4096px以下に整えておくことで、Figmaが自動縮小する処理を回避し、自分で選んだ品質で画像を管理できます。「Figmaに入れたら画像が荒くなった」という問題の原因はほぼここにあります。「4096pxを確認する」という1ステップを習慣化するだけで、このトラブルをゼロにできます。
【注意点】: 4096px以下であれば解像度を上げ直す必要はありません。拡大後に圧縮しても元の情報量は増えないため、「画像が小さいから拡大してから貼り直そう」という操作は逆効果です。
ハック2: 圧縮前後の容量を数値で記録して最適圧縮率をテンプレ化する
【対象】: 同じクライアントや案件で繰り返し画像を書き出す頻度が高い方
【手順】: Downsizeで圧縮率を70・75・80の3パターンで同じ画像を試します（5分）。各圧縮率の書き出し後ファイルサイズと目視品質をNotionやスプレッドシートに記録します（3分）。最も効率が高かった圧縮率を「この案件の標準設定」としてメモに残し、次回からその数値を起点にします（1分）。
【コツと理由】: 「記録した数値を根拠に設定する」アプローチが有効な理由は、画像の種類（写真/スクリーンショット/イラスト）によって最適な圧縮率が異なるためです。写真は80でも高圧縮効果が出ますが、文字が多いスクリーンショットは75以下にすると文字輪郭がにじみます。記録を持つことで、次の案件の1回目から最適設定を適用でき、クライアントへの確認往復を削減できます。画像トリミング無料サイト7選のように、ツール選定と同様に「用途に合わせた記録管理」が業務効率化の鍵です。
【注意点】: 記録した数値は同種の画像に対する目安です。素材の種類が変わった場合は再テストが必要です。前の案件の設定をそのまま流用する固定化は品質事故のリスクになります。
ハック3: 一括圧縮の前に処理対象を意図的に選んでトラブルを防ぐ
【対象】: コンポーネント化・グループ化を多用したFigmaファイルを圧縮したい方
【手順】: Downsizeを「全画像自動検出」モードで起動し、検出された画像一覧を確認します（1分）。差し替え予定のプレースホルダー画像など意図しない画像が含まれている場合は、該当画像を除外してから処理します（2分）。「Run」を実行し、完了後に変更された画像の一覧をスクリーンショットで記録します（1分）。
【コツと理由】: 「差し替え予定の仮画像まで圧縮して、後から元の品質で差し替えられなくなった」というトラブルが実務で発生します。圧縮後にCtrl/Cmd+Zで戻せますが、ファイル保存後は不可能です。「処理対象を意図的に選ぶ」という1手間が、後工程での品質事故を防ぎます。
【注意点】: クライアントから支給されたブランド素材（ロゴ・製品写真）は、圧縮から除外することを原則にしてください。
ハック4: TinyImage Compressorで書き出し直前に容量を最終確認する
【対象】: クライアント納品前に書き出し後のファイルサイズを確認したい方
【手順】: Figma上で書き出したい画像を選択し、TinyImage Compressorを起動します（1分）。書き出し形式（PNG/JPEG/SVG）とクオリティを設定し、プレビューでファイルサイズを確認します（2分）。目標ファイルサイズ（例：バナー1枚あたり200KB以下）を超えている場合は、クオリティを5〜10下げて再確認します（1分）。
【コツと理由】: TinyImage Compressorを経由することで書き出し前にファイルサイズが確認できます。Figmaのネイティブ書き出し機能はサイズプレビューを表示しないため、実際に書き出してみないと容量が分かりません。TinyImage Compressorのプレビュー機能を使えば、「書き出してからサイズオーバーに気づいて再書き出し」というやり直しがなくなります。
【注意点】: TinyImage Compressorで処理した画像はFigmaファイル内のデータにも反映されます。書き出し専用のチェックに使う場合は、元データへの影響を確認してから使用してください。
ハック5: 外部圧縮ツールで事前処理してFigmaへの負担を最小化する
【対象】: 100枚以上の画像を扱う大規模Figmaファイルを管理している方
【手順】: Figmaに入れる前に、Squoosh（Googleが提供する無料の画像圧縮ツール）で画像を圧縮します（5〜10分）。Squooshでwebp変換も同時に行う場合は、フォーマットをwebpに設定して品質75〜80で書き出します（2分）。圧縮済みの画像をFigmaに貼り付け、Figmaファイル自体の容量増加を最初から抑えます（1分）。
【コツと理由】: 画像枚数が多いプロジェクトでは「Figmaに入れる前に外部ツールで圧縮する」方が結果的に効率がよいです。Figmaファイルは全画像の容量の合計が直接ファイルサイズに影響するため、貼り付け前に圧縮すれば「ファイルが重くなってからプラグインで解決する」という後追いの手間がなくなります。Squooshはブラウザ上で動作し、インストール不要のGoogle公式サービスです（Squoosh公式）。
【注意点】: 外部ツールで圧縮済みの画像をさらにDownsizeで圧縮する「二重圧縮」は避けてください。二重圧縮は画質を低下させるだけでファイルサイズの削減効果はほとんどなく、特にJPEGでは圧縮ノイズが蓄積します。
CHECK
▶ 今すぐやること: 現在作業中のFigmaファイルのファイルサイズをFigmaのタイトルバーで確認し、10MB以上の場合はDownsizeをすぐに起動する（2分）
Q: プラグインを使わずに圧縮する方法はありますか？
A： Squoosh・TinyPNG・Compressor.ioなど外部の圧縮ツールで圧縮した画像をFigmaに貼り直す方法があります。ただし、Figmaファイル内にすでに配置された画像を後から圧縮するにはプラグインが最も効率的です。
Q： Figmaファイルの容量はどこで確認できますか？
A： Figmaのダッシュボードではファイル一覧画面でサムネイルにカーソルを合わせると容量が表示されます。ファイルを開いた状態ではタイトルバー近くの情報から確認できます。
Figma画像圧縮を今日から実践する
Figmaの画像圧縮は、Downsizeで一括圧縮（圧縮率70〜80）、webp出力はOlive Press、書き出し前の容量確認はTinyImage Compressorという3プラグイン体制で、外部ツールなしに完結します。4096px超の画像は事前にリサイズしておくことで、Figmaの自動縮小による画質劣化を回避できます。圧縮率は「最初に75で試して目視確認」を習慣にするだけで、ほとんどのケースに対応できます。
まず今日やることは1つです。Downsizeをインストールして、現在作業中のFigmaファイルで圧縮率75を試してください。それだけでファイルサイズが数MB単位で削減されます。プラグインの選択に迷ったら、この記事の診断セクションに戻れば30秒で答えが出ます。画像圧縮で画質落とさない方法も合わせて読むと、形式選択の理解がさらに深まります。
| 状況 | 次の一歩 | 所要時間 |
| ファイルが重くて今すぐ軽くしたい | Downsizeをインストールして圧縮率75でRunを実行 | 5分 |
| webpで書き出す必要がある | Olive Pressをインストールしてwebp80で書き出し | 5分 |
| 書き出し後のサイズを確認したい | TinyImage Compressorでプレビューしてから書き出し | 3分 |
| 大量画像を一括処理したい | Squooshで事前圧縮してからFigmaに貼り付け | 10分 |
Figma画像圧縮に関するよくある質問
Q: Figmaで画像を圧縮するとオリジナルデータは失われますか？
A： Downsizeなどのプラグインで圧縮すると、Figmaファイル内の画像データは圧縮後のものに置き換わります。元データは失われるため、圧縮前にFigmaファイルを複製（右クリック→「複製」）しておいてください。
Q： 画像を圧縮してもFigmaが重いままの場合はどうすればよいですか？
A： 画像以外に、大量のフレーム・エフェクト（シャドウ・ブラー）・非表示のレイヤーもFigmaのパフォーマンスに影響します。不要なレイヤーを削除し、使用頻度の低いフレームを別ファイルに分割することで改善できます。画像圧縮後も重い場合は、レイヤー整理を次のステップとして進めてください。
Q： Figma無料プランでも画像圧縮プラグインは使えますか？
A： はい、Downsize・TinyImage Compressor・Olive Pressは無料プランのFigmaでも使用できます。Figmaのプラグイン機能はプラン制限の対象外です。