画像が大きいとサイト表示が遅くなるのは分かるけど、何が正解なのか教えて欲しいわ！
画像サイズって困りますよね。
サイズが大きすぎたらブログの表示が崩れるし、遅くなる・・・。
なんと！表示に5秒以上かかると、ほぼ100％確実にあなたのブログは読まれません。
だけど、画像が小さくても記事の印象が残らないし、画質が乱れてしまう・・・。
一体、どうしたら画像のちょうどよいサイズがみつかるのでしょうか？
今回は画像サイズについて悩めるあなたに、ちょうどいいサイズにする方法をお伝えします。
あわせて、PhotoshopElementsで画像サイズを変える方法も解説しています。どうぞ最後までお付き合いください。
画像サイズについて
画像サイズには大きさと重さがある
人のサイズには身重と体重があります。画像のサイズにも2つあります。
同じ身長でも体重が違う人がいますよね？画像でも同じです。同じ縦横の大きさでも重さが違うと、見た目に影響します。
1つは、縦横の大きさ。2つめは、重さです。大きさはピクセル、重さはバイトで表します。
同じ大きさの画像を比較します。
 |  |
| 横313ピクセル、縦209ピクセル | 横313ピクセル、縦209ピクセル |
| 22KB | 5KB |
| うさぎの柔らかさが伝わる感じ | ぼやけている感じ |
どちらも同じ大きさですが、重さを変えています。軽い画像の方が見た目がぼやけていますね。ぼやけていることを、「荒い」言ったりします。
画像のサイズには大きさと重さがありますので、大きさを画像サイズ、重さをファイルサイズと特に呼び分ける場合があります。
画像を軽くする場合、3種類の方法があります。
- 画像サイズはそのままでファイルサイズを小さくする方法
- 画像サイズを小さくして、ファイルサイズを小さくする方法
- 画像サイズ、ファイルサイズとも小さくする方法
解像度と画像サイズの違い
解像度とは、１インチあたりのピクセル数になります。dpiまたはppiの単位を使います。
１インチは2.54センチメートルです。１インチにどれくらいピクセルがならんでいるか表しています。１インチに３００個ピクセルが並んでいたら、300dpiまたは300ppiと表記します。
ドッド絵を想像するとわかりやすいかもしれません。1ドットが1ピクセルです。
黒いドットが最小単位だとすると288個のドットから、この絵は書かれています。
もっと細かいドットならば、もっと滑らかに描かれて犬になります。
解像度は見た目に「荒い、細かい」「ざらざら、滑らか」に関わってきます。
どうして画像サイズにこだわるのか？
どうして画像サイズにこだわるのだと思いますか？
それは、ホームページの表示速度に影響するからです。それが何を意味するのかというと、
- ホームページの評価に関わる
- SEOに影響する
- 読み手が離脱する可能性が高まる
- レンタルサーバーの転送量に関わる
- 読み手の時間を奪う
- 読み手の通信費に影響する
- 読み手の電力を消耗させる
画像サイズが適切でないと、自分も損だし、相手にも迷惑がかかります。そのために適切な画像サイズにこだわるのです。
横幅ぴったりの画像サイズの決め方
画像サイズの正解は残念ながらありません。
それは、見ているモニターによって変わるからです。また、このブログみたいに２カラムにしている場合は幅が変わります。そのため、万人に正解な答えがないのです。
逆に考えれば、あなたが何かに基準を合わせることによって適切なサイズを求めることができます。
- モニターサイズ
- 有名なサイトのサイズ
モニターサイズを基準にする
例えば、私のモニターのサイズ（解像度）は横は１２８０ピクセル、縦は１０２４ピクセルです。次のリンクをクリックしてみてください。あなたのサイズがすぐ分かりますよ。
どのサイズを目的にするかによって画像サイズが変わります。Syncerによる2019年の統計（https://lab.syncer.jp/Statistic/Screen-Size/）では、1920×1080ピクセルが一番多いです。最大幅は1920ピクセルにならないようにするのがベターですね。
有名なサイトのサイズを基準にする
有名なサイト、例えばYahoo!ジャパンを基準にします。
ヤフーは日本の検索サイトでは二番目に使われています。私もブラウザを立ち上げたときの最初のページ（ホーム）はヤフーに設定しています。そのため、日本人にとっては見慣れたサイズだと考えられます。
Yahoo!ジャパンを開きます。次に、F１２ボタンを押します。開発者ツールでYahoo!が表示されます。HTMLとCSSで表示されると思います。CSSのサイズを確認すると「９９０PX」とあります。小さくて見づらいかもしれませんが、赤線のところです。Yahoo!ジャパンは横幅を990ピクセルで指定していることがわかります。
990ピクセルのサイズはインターネットエクスプローラでお気に入りを固定させても、スクロールしなくて済むサイズです。
990ピクセルを参考にホームページの幅や画像の最大サイズの基準にしてもいいですね。
余白は必要か？
余白はブロックとブロックの隙間や枠と文字の間を指す何もない空間のことです。
文字と文字が詰まっていたら、読みづらいです。また、圧迫感を感じます。そのため、適度な余白は必要です。
Yahoo!ジャパンを確認すると水色で囲まれた部分は,枠と文字び余白が１０ピクセルで設定されています。
余白は10～20ピクセルで設定するのが一般的です。あまり飽きすぎても間延びした感じで、逆に見づらくなります。
画像の最大横幅を計算する
ホームページ全体の横幅を９９０ピクセルと決めました。余白を左右に設ける場合は２０ピクセル分ホームページの横幅から引きます。残りの９７０ピクセル分が、文字や画像が表示される部分になります。
９９０ピクセル－２０ピクセル＝９７０ピクセル
最大でも９７０ピクセルの画像にすればいいことが分かります。もし、画像を横に並べたいときは追加する画像の左右の余白分を引いて２で割れば、２枚の横幅が計算できます。
（９９０－２０－２０）／２＝４７５ピクセル
縦幅ぴったりの画像サイズの決め方
これで、横幅はどのくらいにしようか検討がついたと思います。次は、縦幅を考えましょう。その一つにアスペクト比を利用するといいと思います。
縦横比（アスペクト比）
アスペクト比は縦と横の比のことです。アスペクト比には定番があります。定番のアスペクト比はテレビやモニター、カメラ、画像など身近にあるんですよ。縦横比には６タイプあります。
| 1:1 | 正方形 |
| 3:2 | フィルム写真 |
| 4:3 | デジカメ、一般的なモニタ、アナログTV |
| 7:5 (5:7) | 白銀比 |
| 8:5 (5:8) | 黄金比 |
| 16:9 | 横長のモニタ、Youtube、テレビ |
どのアスペクト比を選ぶかは自由です。運営しながら、あなたがご奉仕する神社のホームページにぴったりのサイズを決めたらいいと思います。私は３：２を使うことが多いです。
アスペクト比計算ツールを使えば、自動でも一辺を計算してくれるので楽ですよ。３：２のアスペクト比の時、横が４７５ピクセルだったら縦は３１７ピクセルです。
その他のサイズを決める要因
実は、その他にもサイズを決める要因があります。
- 本文中に使う画像か
- アイキャッチ用か(WordPressの場合)
- 画像を配置する位置
本文中の画像
本文中で使う場合、ホームページの横幅を超えないサイズならばOKです。ホームページの横幅を超える場合デザインが崩れます。画像がモニターより大きくなった場合、横スクロール表示されます。横スクロールは使い勝手が悪くなるのでなるべく出ない方がいいと思いますよ。
アイキャッチ画像
アイキャッチ画像は、WordPressでよく使われる画像です。記事のサムネイルや記事の一番上に表示される画像です。ある画像を元サイズで表示せず小さくしたサンプルのことをいいます。
「アイキャッチ画像のサイズって、結局何ピクセルがいいの？」（https://communitycom-shop.jp/blog/eyecatch/）によると、１２００ピクセル×６３０ピクセルを推奨しています。
私は1024ピクセル×683ピクセルでアイキャッチ画像を保存しています。以前は横幅が１５００ピクセルでした。ホームページに使う画像が多くなると、レンタルサーバーの容量に影響するので小さくしました。
アイキャッチ画像も横幅がカラム内より超えることはないので、あまり大きすぎなくていいと思います。
画像の配置場所
さきほどの画像を使って説明します。
先ほどの画像の横幅を半分のサイズにしました。
これを、左寄せにしました。
つぎは、右寄せです。
最後は中央です。
どうでしょうか？配置によって画像の大きさが違って見えませんか？
私には左右に置いた画像は中央に置いた画像よりも大きい印象をうけます。
配置によって印象が変わるので、画像を左右に配置する場合はサイズを小さくし、中央に配置する場合は大きめにすることをオススメします。
ファイルサイズは１００KBを目安に軽くする
ホームページで使う画像は１つにつき１００KBを目安に圧縮します。画像によっては100KBもなくても全然OKなものがあります。思い切って圧縮してみてください。
１００KBは経験上の数値です。LINEやメールでちょっと画像を送る時のサイズはほとんど１００KBあたりです。それで違和感なく相手に伝わっています。また、このブログのアイキャッチ画像も１００KB以下で調整しています。
１００KBで画像がぼやけるようだったら、１００KB以上でもいいと思っています。一度１００KBまで画像を粗くして、それから調節したらいいと思いますよ。
PhotoshopElementsの画像サイズ変更
イメージ／サイズ変更
メニューの「イメージ」にあるサイズ変更は、大きさを変更します。ここで好きな大きさに変更します。
縦横比を固定にチェックが入っているか確認してください。チェックが入っていれば、幅か高さのどちらかを入力したら、片方が自動計算されます。
ファイル／Web用に保存
メニューの「ファイル」の「Web用に保存」は、画像の重さを変更します。
赤枠は、拡張子を表しています。写真の様ななめらかなグラデーションがある場合はJPEG、イラストのように色がハッキリしているものはGIFで保存します。拡張子については「【JPEG,GIF,PNG,BMP】ホームページに使える画像はどれ？」を参考にしてくださいね。
青枠でどのくらい画像を軽くするか指定します。JPEGの場合は低画質から最高画質、または数字で指定します。３０～６０くらいで指定すると１００KBくらいになりますよ。
緑枠は赤と青枠で指定した結果を表示しています。
Adobe photoshopでは電話回線（56.6kbps）を基準にして画像が表示される早さをしめします。１００KBだと大体２０秒かかります。通信速度によって変わりますが、ちなみに5Gは最大で２０Gbpsです。通信制限がかけられた場合でも１２８kbpsです。
最後に
適度に画像を挟むことは大切です。記事を読んで貰うために、記事を分かりやすくするために画像は大事な役割があります。でも、サーバーの容量を食うことになりますから、画像のサイズとともに記事に使う画像の枚数も考慮に入れた方がよいですね。
画像サイズを変える手順は
- ホームページの横幅を決める
- 余白を決める
- 本文中の画像サイズの横幅を決める
- アスペクト比より画像財図の縦幅を求める
- PhotoshopElementsの「サイズ変更」で大きさを縮小する
- PhotoshopElementsの「Web用に保存」で重さを軽くする