以前調べていて、なかなか答えが出るまで時間がかかった現象だったため、こちらにメモしておきます。

状況

• 写真をWordpressでアップすると画像がぼやけてしまう。
• 画像のみをブラウザで100%の大きさで表示するとぼやけない。＝（イコール）アップされた画像そのものがぼやけていない。
• 画像には枠線を付けていた。

解決方法

ページ全体に　box-sizing: border-box; の設定を入れていたことが原因でした。

box-sizing: border-box;

アップする画像に付与されるclassに　box-sizing: content-box;　のCSS設定を追加したことで解決しました。

#layout-blog-body img {
  border: 1px solid #dcdcdc;
  box-sizing: content-box;
  text-align: center;
}

「画像ぼやける」などで検索しても、どうも解決策をなかなか探し出せませんでした。

そんな中、やっと以下の記事を発見し、解決に至りました。

「画像の枠（border）を設定すると、画像がぼやける」

ページ全体の設定では　box-sizing: border-box;　のほうがpaddingがborderの細かな設定を考えなくてよいので便利ですが、例えば画像にborderを1pxで設定した場合、常に設定した画像よりも2px縮小することになるので、画像がぼやけてしまうといった現象が起こってしまうのです。

今回はbody全体で「box-sizing: border-box;」の設定していたことを失念していたことがそもそもの原因でした。