ブログの記事の画像がぼやけてしまう・・。
せっかく記事を頑張って書いたのに、画像がぼやけてよく見えないときありますよね。
例えば、別記事で設定方法をまとめていたのですが、こんな感じになりました。
もはやモザイク！
う～ん、せっかくの説明ページがぼやけて見えないぞ・・。
というわけで、原因と対処法を探ってみました。
記事の画像がぼやける原因
これは、運営しているサイトがレスポンシブ対応しているからなんですね。
要するにパソコンなら高画質、スマホはスマホに合わせた画質にしよう、というわけです。
なので、高画質の処理が難しいスマホの場合は、画質を落として表示することになります。これがぼやける原因なんですね。
ブログ記事の画像がぼやける対策
① 画像の名前を調べる
まずはスマホから、記事を表示して、問題の画像の部分を長押ししましょう。
そしてダウンロードを行います。詳細を見てみるとこんな感じでした。
名前を見ると、image-126-100×100.pngとなっていますね。どうやらスマホではこのサイズの画像を読み込んでいるようです。
② サーバーのファイルマネージャーへ移動
私はCONOHA-WINGを使用しているので、そこからファイルマネージャーを探します。「サイト管理」→「ファイルマネージャー」
ワードプレスの場合、「WP-content」→「uploads」→「2020（アップロードした年）」→「5（アップロードした月）」に画像データが入っていました。
おっ！問題の画像が見つかりました。
そこで、まずは「image-126.png」（リサイズされていない元のデータ）をcntrを押しながらドラッグして、コピーします。
コピーができました。そして、F2キーを押し、「image-126-100×100.png」のように、スマホで読み込まれるであろう名前にリネームします。ただ、このままだとリネームできません。同じ名前のファイルがあるからです。
隣にリサイズされてぼやけている「image-126-100×100.png」がありますから、そちらを消します。右クリックとかで削除できるはずです。
そして「image-126.png copy」を「image-126-100×100.png」にリネームしてください。
これでスマホのサイトに戻ってみると・・・。
このように、はっきり読み取れるようになりました。（もしなっていないなら、この記事の画質が悪いんです・・・）
応急処置的な感じですが、とりあえずOK。
どうしても画質を落とせない画像には使ってみるといいですね！
