MIYAJI NAMI DESIGN

BLOGS

a-blog cmsで画像が粗く感じられた時の対処法

BLOGS

綺麗な画像を用意して掲載してみたけど、なんだかぼんやり見える?
その原因と対処法を記載しました。



アップロードした画像のサイズを確認してみる


1280×1280pxですね。

表示された画像のサイズを確認してみる


検証モードで画像サイズを確認

あれ?なんかサイズが変わってる?
CMS側で何か処理しているのでしょうか?


CMS側で横幅640pxにしてるみたいです。

アップロードした画像サイズと、実際に表示された画像サイズが異なる理由

a-blog cmsでは読み込み速度が遅くならないよう、デフォルトで画像のサイズがリサイズされるようです。

WordPressの場合はプラグインを使って画像をリサイズすると思うので、私のようなa-blog cms初心者だとちょっと気づきにくいかもしれません。

管理ページから画像サイズを指定する方法

コンフィグ>編集設定>メディアサイズセレクトで画像サイズを設定できるようです。
ここを試しに640から1280にしてみました。


もう一度同じ画像を掲載してみると…
表示された画像サイズが1280pxになっていることが確認できました。


最後に

この方法で画像の表示サイズを変更することができましたが、設定を変更する前に掲載していた画像の表示サイズは変わりません。
設定を変更する前に掲載していた画像に関しては、エントリー>編集(実際には編集しなくてOK)>保存で変更が適用されるようです。

また、画像サイズを大きくしすぎるとサイトの読み込み速度が遅くなるので、保存形式をpngからjpgに変更したり、解像度が高いものは72〜96dpiに落とすなど、サイズ変更以外にもアレコレやってみるのも良さそうです。