Word press cocoon 【画像サイズについて】

今まではフリーの画像を適当に設定していたけど出来てるからこれでいいのかしら？

大きすぎる画像は表示速度にも影響するし、いろんなところが勝手にトリミングされたりして思うようにならない事が有るから用途に合わせてそろえた方が良いよ。

blog内で使う画像サイズ

適当に画像を表示しても何となく出来てしまうのでそのままやってしまいがちです。

後からそろえようとすると大変なので最初からそろえた方が良いでしょう。

画像圧縮プラグインとの絡みもありますが、メディアライブラリーにアップする段階で調整済みの画像を上げるのが結果面倒がないように思います。例えば元画像をサイズ調整して保存しておき用途に合わせて文字を入れたものをアップするときなどもフォントのサイズが揃いますので綺麗かと思います。

まず、アイキャッチ画像。

これが有ると無いとでは趣がかなり違います。

比率で言えば16：9が良いでしょう。このブログでは当初１２００×675ピクセルにそろえてアップしていましたが現在は推奨サイズの最大幅である横幅は1024に変更しています。1024×576ピクセルです。横長のスクリーンサイズとでも言うのでしょうか？

サイトをカスタマイズしていくとボックスメニューを使いたくなります。

このサイズが5：3の300×180に調整したものです。このブログでも採用しています。

サイドメニューに設置する場合は偶数、ヘッダー下に設置する場合は奇数でもよいですが６個ならびますので７個や８個だとそろいません。奇数の場合はセンターに寄せることが出来ます。

これはプロフィールぐらいでしか使いません。

でも画像が有ると無いとでは親しみやすさが大きく違いますので是非画像を設定してみてください。

このブログ内でもまだそろっていない部分がありますが、概ね1000×800ピクセル～600×360ピクセル程度にそろえた方が良い感触です。記事の編集中に拡大したり縮小したりしないでそのままでいい感じです。

今後は極力5：3でそろえていこうと思っています。600×360か800×480を採用予定

極端な話ですが、横幅のみそろえておけば良いという事もあります横幅さえそろえておけばcocoon

がそれなりにやってくれますし画像圧縮もプラグインがうまい事やってくれます。避けたいのは横幅が切れてしまう事です。その為横幅は最大値を決めそれ以下にする事その際にある程度横幅をそろえる事です。

水晶の横幅が1024ピクセルですのでそれ以下に設定してください。

この辺りは長辺1000だと大きい感触ですが様子見ながら統一していき丁度いい数字が出来たら更新したいと思います。いずれにしろそろえた方が良いのは確かです。

現時点ではペイントかGIMPで加工しています。

ペイントの方が簡単だと思います。

またアップ時の形式はJPGとPNGどちらでも変わらんだろうと思い、背景を透明に出来たりする関係で当方ではPNGで保存で統一していました。

ただし画像を最適化する前にPNG形式でアップしてしまった画像はプラグイン（EWWW Image Optimizer)でサイズを最適化出来ない事が分かりました。その為現在はJPGで統一しています。圧縮の効果が出ますからサイトの高速化につながります。

　画像を調整する具体的な操作については別途記事にしていきます。

特にGIMPは文字入力にやや難があり、慣れないと面倒です。面倒ですが慣れればかなり加工の自由度が上がると思います。

ペイントは大きさをそろえて文字を入れるだけなら簡単ですがこちらそろそろMSの更新が終わるという話を聞きました。

今日はここまでです。

ご覧くださりありがとうございます。

覚えておいた方が良いのはおおむね画像には4サイズ

アイキャッチ、ボックスメニュー、プロフィール、記事内画像です。