画像のサイズがバラバラだと記事が読みずらいですよね。
いくつかの記事等を調べてみましたが、人によってこのサイズが良いというサイズが違っておりどれが正解なのかは、細かな部分はワードプレス等のデザインによって影響されるのでこれが必ずしも正しいとは言えませんがざっくりとした共通の解は得ることができたので、後々の自分のためにも備忘録として残しておこうと思います。
記事内の推奨画像サイズ 4:3
結論から述べると
推奨サイズ: 横1600px × 縦1200px（アスペクト比：4:3）
こちらは、スマホとパソコンの共通であるアスペクト比である4:3を考慮し、パソコンのような大きな画面でも高画質見れるように配慮した大きさです。
また、これ以上にも、画像の表示サイズを大きく高画質にもできますが、ファイルサイズも大きくなり読み込まれにくくなってしまいます。
ブログで利用する画像ファイルのデータ大きさは200KB以下がふさわしいとされています。
SEO（Googleなどの検索エンジンに表示されやすいか）に対応する場合ならファイルサイズも気にした方がいいと思います。
アイキャッチの推奨画像サイズ 16：9
アイキャッチ画像とは、サムネイルに使われる画像のことです。推奨サイズが16対9の比率を推奨されています。
16対9も4対3もだいたい同じやろ思うかも知れませんが、こちらが推奨しているのでそれに合わせたほうがいいと思います。
推奨サイズ: 横1200px × 縦675px（アスペクト比：16:9）
このサイズは、ブログ記事やページで見栄えが良く、SNS（特にFacebookやTwitter）にシェアした際にも最適な大きさです。
画像ファイルのデータの大きさも200KB以下がいいと思います。
画像のファイル形式
特に理由のない限りは、主流であるPNGまたはJPEGに推奨です。
PNGとJPEGのざっくりとした違いは、
PNG形式
- メリット 画像の大きさを変化しても画像が荒くならない
- デメリット JPEGよりファイルサイズが大きい
JPEG形式
- メリット PNGよりファイルサイズが小さい 写真に向いている
- デメリット 画像を圧縮すると画質が劣化する
正直どちらの形式でも、いいと思います。ファイルサイズが大きいといっても今のご時世なのでそこまで気にする必要はない気がします。200KBを超えるようならJPEGを選んで圧縮するという感じでいいと思います。個人的には背景を透過した画像が作れるPNG形式を好んで使っています。
レスポンシブに対応するなら
CSSというWEBサイトをカスタマイズをするプログラムのようなものをつかって、利用しているのが、スマホかパソコンを判断して自動的に画像のサイズを変更するという方法もありますが、CSSの編集は意図せぬ動作を引きおこす場合があるので、こちらはある程度コードのいじれるプログラマー向けだと思います。
今は、コード等は紹介できませんが興味のある方は調べてみてもいいと思います。
Windowsでショートカットを作っておこう
こちらはWindowsのみですMacでは使えません。すみません。
Windows10以降のWindowsに標準でインストールされている、ペイント3Dを使ってブログ用の画像を作るショートカットの作り方を紹介します。
またこのやり方は、ファイル形式のPNG、JPEGがペイント3Dと紐づいている必要があります。
詳しく説明します。
ペイント3Dを開く
キーボードのWindowsボタンを押して検索バーにペイント3Dと入力します。
キャンバスタブを開いてキャンバスサイズを幅1600px高さ1200pxに設定する
キャンバスでの画像サイズを変更ボタンのチェックボタンを押す
左上のメニュータブを押して、保存ボタンを押す
名前を付ける(blog.pngなど)
保存場所 Cドライブ＞Users>ユーザー名＞ここに保存
保存場所を開いて 右クリック→ショートカットを作成
ショートカットの名前を変更(blog)
作成されたショートカットに右クリックをして名前を変更ボタンを押して名前をblogとします。
キーボードのWindowsボタン＋Rボタンキー（ファイルを指定して実行）
検索バーに「blog」と入力すると先ほど作成した3Dペイントのショートカットからアプリが起動されるはずです。
上手くいかない場合は、画像ファイル形式（PNG、JPEG）が3Dペイントのアプリケーションとうまく紐づけされていない可能性が高いです。その場合は、ファイルの拡張子から開くアプリケーションを設定する必要があります。
こちらの設定は少し複雑ですので、別の機会に説明します。
画面のサイズについてのまとめ
正直画像サイズについて考えるのは、めんどくさいですね。サイト側で最適になるように自動で画像サイズを変更して欲しいです。
コメント