Smushで最適化したあと、透過PNGのロゴやアイコンの背景が白や黒で塗りつぶされた場合、原因の多くは「圧縮」そのものではなく、PNGからJPEGへの変換か、サムネイル生成時の処理にあります。JPEGは透明度を持てない形式なので、変換された時点で透過部分は失われます。この記事では、どの処理で透明度が消えたのかを見分ける方法、元の画像に戻す手順、再発させない設定を説明します。
Smushの機能構成や項目名は、無料版とPro版、またバージョンによって異なります。以下は（2026年10月現在）の一般的な構成を前提にしているので、手元の画面と照らし合わせながら読んでください。
まず「どの画像が」「どう変わったか」を確認する
最初に、透明度が失われた画像のファイルを確認します。メディアライブラリで該当画像を開き、添付ファイルの詳細でファイル名とファイルの種類を見てください。
- 拡張子が .jpg に変わっている：PNGからJPEGへの変換が行われています。もっとも多いパターンです。
- 拡張子は .png のまま、元サイズは透過しているがサムネイルだけ背景が付く：WordPressがサムネイルを生成する段階の処理が疑われます。
- 拡張子は .png のまま、輪郭がギザギザになった、半透明の影が汚くなった：非可逆の圧縮で、透明度の段階（グラデーション）が減った可能性があります。
- ファイル自体は透過しているのに、ページ上では背景が付いて見える：画像ではなく、テーマのCSSやキャッシュの問題です。
最後のケースを除外するために、画像のURLを直接ブラウザで開くか、ダウンロードして画像編集ソフトで開き、本当に透明部分が残っているかを確かめておくと、無駄な作業を避けられます。
サーバーにSSHで入れる場合は、file コマンドでもPNGがアルファチャンネルを持っているかを確認できます。
file wp-content/uploads/2026/10/logo.png
# 例: PNG image data, 600 x 200, 8-bit/color RGBA, non-interlaced結果に RGBA と表示されていれば、アルファチャンネル（透明度）を持つ画像です。RGB と表示される場合は透明度の情報がありません。「colormap」と表示されるパレット形式のPNGは、別の仕組みで透明色を持っていることがあり、変換処理で扱いを誤りやすい形式です。
PNGからJPEGへの変換を確認する
Smushには、PNG画像をJPEGに変換してファイルサイズを減らす機能があります（プランやバージョンによって有無や名称が異なります）。この機能は透明部分を持つPNGを変換対象から外す考え方で作られていますが、半透明のピクセルがわずかしかない画像やパレット形式のPNGなどでは、判定と見た目が食い違うことがあります。
透過画像を多く使うサイトでは、Smushの設定画面でPNGからJPEGへの変換に関する項目を探し、無効にすることを検討してください。ファイルサイズの削減はWebPへの変換でも得られます。WebPは透明度を保持できる形式なので、透過画像を多く扱う場合はこちらのほうが向いています。
元の画像に戻す
Smushの設定で「元画像のバックアップ」に相当する項目が有効になっていれば、最適化前の画像に戻せます。メディアライブラリをリスト表示にすると、Smushの列に画像ごとの状態が表示され、バックアップがある画像では復元の操作ができます。まとめて戻す機能もありますが、作業の前にサイト全体のバックアップを取ってから実行してください。
バックアップが無効だった場合、Smushから元の画像を取り戻すことはできません。手元のPCに残っている元ファイルや、サーバーのバックアップから戻すことになります。その場合は、元のPNGを新しくアップロードし直し、記事内の画像を差し替えるほうが手順として分かりやすく、安全です。
復元や差し替えをしたら、ブラウザのキャッシュ、キャッシュプラグイン、CDNのキャッシュを削除してから表示を確認します。キャッシュが残っていると、直っているのに古い画像が表示され続けます。
サムネイルだけ背景が付く場合
元のPNGは透過しているのに、アイキャッチや一覧に使われる縮小画像だけ透明度がおかしい場合は、WordPressが使っている画像処理ライブラリ（GD または Imagick）の影響を疑います。どちらが使われているかは、「ツール」→「サイトヘルス」→「情報」の「メディア処理」で確認できます。
切り分けのために、使うライブラリの優先順位を一時的に入れ替える方法があります。次のコードはWordPressコアのフィルター wp_image_editors で、GDを優先して使うよう指定するものです。
add_filter( 'wp_image_editors', function ( $editors ) {
// GD を優先し、使えない場合は Imagick を使う
return array( 'WP_Image_Editor_GD', 'WP_Image_Editor_Imagick' );
} );このコードを子テーマの functions.php などに追加したうえで、テスト用に透過PNGを新しくアップロードし、縮小画像の透明度が保たれるかを確認します。結果が変わるなら、ライブラリ側の処理が原因です。既存の画像のサムネイルを作り直す場合は、Regenerate Thumbnails プラグインや WP-CLI の wp media regenerate を使います。サムネイルの再生成はサーバーに負荷がかかるため、画像が多いサイトでは時間帯を選び、実行前にバックアップを取ってください。
テーマや他のプラグインが image_editor_output_format フィルターで出力形式を変更している場合も、PNGが別の形式で保存されることがあります。functions.php や導入中のプラグインにこのフィルターの記述がないかも確認しておくとよいでしょう。
輪郭が粗くなった場合
透明部分は残っているものの、ロゴの縁がギザギザになった、影の半透明部分が汚くなったという場合は、非可逆の圧縮で色数や透明度の段階が減らされた可能性があります。Smushの圧縮レベルを下げる、あるいは対象の画像だけ最適化から除外する設定を使うと改善します。ロゴやアイコンのように小さく、品質が目立つ画像は、最適化の対象から外す運用も合理的です。
再発させないための設定
透過画像を守りながら最適化を続けるために、次の点を見直しておくと安心です。
- 元画像のバックアップを有効にしておく（ストレージは増えるが、問題が起きたときに戻せる）
- PNGからJPEGへの変換は、透過画像を使わないサイトでのみ有効にする
- 透過が必要な画像は、WebPへの変換で軽量化する
- ロゴなど重要な画像は、アップロード後に表示を確認してから記事に使う
- 設定を変えたら、まず数枚で試してから一括最適化を実行する
まとめ
Smushで透明度が失われたときは、原因の場所を見分けてから対処すると無駄がありません。
- 拡張子が .jpg に変わっていれば、PNGからJPEGへの変換が原因
- サムネイルだけおかしい場合は、GD・Imagickなど画像処理ライブラリの影響を切り分ける
- 輪郭が粗くなった場合は、圧縮レベルを下げるか対象から除外する
- 元画像のバックアップがあればSmushの復元機能で戻せ、なければ元ファイルを再アップロードする
- 復元後はキャッシュを削除してから表示を確認する