png写真をアップロードしたらjpgになってしまう時の対処方法

＜スポンサーリンク＞

Webサイト作成用の写真素材に使ってもらえればと思い、WooCommerceを利用してFree Photo Stockを作ったのですが、その際、png形式で保存した写真をアップロードすると一部の写真がjpg形式に変換されていました。

最初にpng形式の写真をメディアに一括アップロードしておき、CSVファイルを使ってWooCommerceにインポートする方法で行ったため、png形式がjpg形式に変換されていることに全く気が付かず、一部の写真がWooCommerceにインポートできない状態に陥ってしまいました。

このWooCommerceに写真がインポートできない問題が、png形式で保存した写真がjpg形式として保存されていたことにより発生したと判明するまでに、ちょっと手こずったので問題発生の状況と解決方法を紹介します。

CSVファイルを作成して商品登録を一括で行うことができるWooCommerceの機能を応用してFree Photo Stockを作成しようと、png形式で保存した写真をメディアにアップロードしました。CSVファイルをWoocommerceに読み込ませて商品一覧を見ると、いくつかの写真が商品ページに登録されていませんでした。

写真のURLアドレスを間違えたのかとCSVファイルを確認したのですが間違えはなく、アップロードしたpng形式の写真もメディアに登録されている。CSVファイルを読み込ませる手順に誤りもない。png形式の写真が正常に商品ページに登録出来ているものもある。

商品ページに登録できない写真に何か規則性がないか、１つずつ確認していったところ縦長の写真がすべて商品ページに登録できていないことに気が付きました。また、CSVファイルを使わずに商品ページにpng形式の写真をアップロードすると正常に写真が登録されることも確認できました。

この時点で、Woocommerceに起因する問題だと推測したのですが、念のためテーマを別のものに変えてCSVファイルを読み込ませてみたものの、縦長の写真だけが商品ページに登録できない症状に変化なし。

不具合の原因はWoocommerceのCSVファイルの読み取りと結論付けて、アップロードしたpng写真を削除しようとリスト表示したところ、縦長のpng写真の拡張子がjpgになっていることに気が付きました。

なぜ、png形式の写真がjpgになってるんだ？

２縦長のpng形式だけがjpg形式に変換されていた理由

png形式の写真がjpg形式の写真になっているということは、拡張子が変わって来るので、CSVファイルに打ち込んでURLアドレスと相違することになります。

CSVファイルを修正してWooCommerceに読み込ませると、写真が登録できなかった商品も正常に一括インポートできている。WooCommerceに起因する問題と思っていましたが、WooCommerceが原因ではない可能性が高くなりました。

png形式の写真がjpg形式の写真としてアップロードされてしまう原因を探るべく、すべてのプラグインを停止してpng形式の写真をメディアにアップロードしてみると、png形式の写真としてアップロードできていました。

停止したプラグインを順次有効化してpng形式の写真をアップロードを繰り返し、問題を引き起こしているプラグインを探したところ、「EWWW Image Optimizer」が関係していることが判明しました。

３ EWWW Image Optimizerは縦長のpng写真をjpg写真にしてしまう

EWWW Image Optimizerは、ワードプレス内の画像ファイルを容量を縮小してくれるプラグインです。画像の保存形式として「jpg」「png」「gif」がよく利用されますが、「jpg」形式が画像容量を小さくすることができます。

縦長のpng写真だけを自動的にjpgに変換してしまうEWWW Image Optimizerの動作が、正常な動作なのかバグなのかはわかりませんが、EWWW Image Optimizerを停止しておけば、勝手にjpg形式に変換されてしまう事態は回避できます。

今までサイト内に掲載していた写真は、jpg形式の写真を利用していたため、EWWW Image Optimizerが縦長のpng形式をjpg形式に変換してしまうことに気が付きませんでした。

jpg形式の画像は、容量を小さくできる反面、非可逆圧縮のため保存する度に画質が劣化する特性があります。その点、png形式の画像は、jpg形式に比べて容量が大きくなりますが、可逆圧縮のため保存する度に画質が劣化することがありません。また、jpg形式では扱えない透明色を使用することができるため、透過性を必要とする画像に適しています。

サイト内で透過性のある縦長のpng写真を利用する際、アップロードすると透過性がなくなる場合は、png写真がjpgに変換されているかもしれません。EWWW Image Optimizerを使用しているならば、一度EWWW Image Optimizerを無効化してアップロードを試してみて下さい。

４専門知識がない我々ができること

ワードプレスを使って自分でサイトやブログを作成する場合、ワードプレスが自分の意図しない動きをするトラブルは付き物です。その原因がワードプレス本体にあるのか、テーマによるものなのか、プラグインが原因なのか、これらが複合的に引き起こしているのか、トラブルの原因を付き止めない限りトラブルを解消することはできません。

HTMLやCSS、プログラミングの知識の専門知識がない我々素人が、トラブルの根本的な解決をすることはできませんが、トラブルの発生源を付き止めてそれを使用しない、または変わりを探すという選択をすることはできます。

補足ですが、この一連の流れは公開サイトでは行っていません。問題なくFree Photo Stockを公開できるかテストサイトで確認している最中に問題を把握しました。会社やお店のホームページでサイト内の表示の異常は、会社やお店の信頼を落しかねません。

サイトに新しいものを取り入れたり、テーマやプラグインのバージョンアップをしたりする場合は、非公開のテストサイトを作成してサイトの表示状況を確認してから公開サイトで行うようにした方が無難です。（テストサイトの作り方は「Duplicatorでテストサイトを作る方法」で紹介しています。）

CSVファイルをWooCommerceに読み込ませて商品を一括登録する際に発生した商品の写真が登録できないトラブルに、私が行った原因の探り方と解決方法を紹介しました。