ブログテクニック

wordpressでアップロードした画像が劣化する問題への対処法

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

wordpressでアップロードした画像が劣化

この記事に辿り着いた方はおそらく

  • 投稿時に「フルサイズ」に設定する
  • プラグインの設定を見直す
  • functions.php におまじないを追記する

なんてことはすでにお試しだと思う。
それでも解決しなかった方は下記をご確認いただければ。

編集画面とプレビューで画像ファイルが違うケース

例えば例として「2048 x 1152」のこんな画像をwordpressにアップロードする。

アップロード後にメディアライブラリで見てみると、下のようにしっかりと

2048 x 1152ピクセル

と表示されている。
ちなみにこの画像のファイル名は

lily-sullivan-portrait-4k_1538941304-2048x1152.jpg

よしこれを記事に貼り付けて投稿しよう、
とするわけだが、いざ投稿してみると劣化してしまっている。

ここで投稿の画像を右クリックしてアドレスを取得してみると、、

投稿された画像

なんとファイル名が

lily-sullivan-portrait-4k_1538941304-2048x1152-1-1024x576.jpg

のようになっており、どうやら

1024x576ピクセル

に縮小されてしまっているようだということがわかる。
これだと記事編集中は「よしよし」と思っていても、実際の記事になると画像が劣化していた!(しかも気づかない)ということが起こりうる。

ではどうすればいいか。
根本の設定を修正できればいいのだが、その辺りの設定を調べても確認することができなかったため、簡易的に対応する方法を考えた。
まず、編集画面で画像をクリックして「置換」を選択。

すると置換にいくつかの選択肢が出るので「現在のメディアのURL」に先ほどのURL(劣化していない画像のURL)を入力する。

これで記事を保存して、記事のプレビューで当該画像を右クリックして「画像アドレスをコピー」してみると劣化版になっていないことが確認できると思います。

結局何をやったのか

wordpressでアップロードした画像が劣化する問題。
いろんな原因があるのと、いろんな段階で発生することが混乱の原因の様子。
今回の話では

「メディアライブラリにアップされている状態では劣化していないが、記事に貼り付けられた時には劣化している」

ケースについて対処法をまとめた。

ただこれだとアップロードされた瞬間に劣化してしまっているケースは対応できない。
そこで発展系の話としては、別でアップロードしたファイルを参照するという方法。
適当なサーバーに画像をアップし、そのURLを上記の方法で参照するという形です。

ちなみに全編を通して「劣化」と言っているものの本質的には「最適に圧縮されている」はずなので、細かいところが気にならない場合は今回の対応は不要かなと思います。

  • この記事を書いた人

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

-ブログテクニック