画像が大きいとホームページの表示が遅くなるのは分かるけど、結局、画像のサイズはいくつが正解なのか教えて欲しいわ！
神社には四季折々の顔があります。自然やお祭りによって神社の魅力を伝えたいですよね。でも、デジカメやスマホで撮影した写真をそのまま投稿するには、画像がちょっと大きすぎます。今回の記事は画像サイズについて初心者目線で解説したいと思います。
- 画像サイズって何？
- 自分のホームページにピッタリにするにはどうしたらいいの？
- どうやって画像サイズを変えるの？
ホームページ作りには適切な画像サイズが必要です。だけども、その「適切」の標準があれば楽なのですが・・・。残念ながら、試行錯誤するしかありません。
今回はその適切な画像にするコツをまとめました。その他にPhotoshopElementsで画像サイズを変える方法を解説しています。どうぞ最後までお付き合いください。
このブログはホームページ作成についてお話ししていますので、画像サイズはホームページ用に使う画像限定で考えてくださいね。
目次にはリンク張ってありますので、気になるところに飛ぶことができます
画像サイズについて
画像サイズには大きさと重さがある
人のサイズには身重と体重があります。画像のサイズにも2つあります。1つは、縦横の大きさ。2つめは、重さです。大きさはピクセル、重さはバイトで表します。
同じ身長でも体重が違う人がいますよね？画像でも同じです。同じ縦横の大きさでも重さが違うと、見た目に影響します。
 |  |
| 横313ピクセル、縦209ピクセル | 横313ピクセル、縦209ピクセル |
| 22KB | 5KB |
| うさぎの柔らかさが伝わる感じ | ぼやけている感じ |
上のウサギ画像の大きさは、横625ピクセル×縦418ピクセルです。重さは39KBです。この画像の大きさをどちらも約半分にして、重さを変えました。軽い画像の方が見た目がぼやけています。ぼやけていることを、「荒い」言ったりします。
ホームページに使う画像のサイズには大きさと重さがあるので、意識して文脈から理解してみてくださいね。また、大きさを画像サイズ、重さをファイルサイズと特に呼び分ける場合があります。
解像度と画像サイズの違い
解像度とは、１インチあたりのピクセル数になります。dpiまたはppiの単位を使います。
１インチは2.54センチメートルです。１インチにどれくらいピクセルがならんでいるか表しています。１インチに３００個ピクセルが並んでいたら、300dpiまたは300ppiと表記します。
解像度は見た目に関わります。先ほどの２つのウサギ画像がありました。見た目が違っていましたよね？解像度は見た目に「荒い、細かい」に関わってきます。
どうして画像サイズにこだわるのか？
どうして画像サイズにこだわるのだと思いますか？見た目がいい方がきれいだから？それもあります。
ホームページの表示速度に影響するからです。それが何を意味するのかというと、
- ホームページの評価に関わる
- SEOに影響する
- 読み手が離脱する可能性が高まる
- レンタルサーバーの転送量に関わる
- 読み手の時間を奪う
- 読み手の通信費に影響する
- 読み手の電力を消耗させる
画像サイズが適切でないと、自分も損だし、相手にも迷惑がかかります。そのために適切な画像サイズにこだわるのです。
横幅ぴったりの画像サイズの決め方
画像サイズの正解は残念ながらありません。
それは、見ているモニターによって変わるからです。また、このブログみたいに２カラムにしている場合は幅が変わります。そのため、万人に正解な答えがないのです。
逆に考えれば、あなたが何かに基準を合わせることによって適切なサイズを求めることができます。
- モニターサイズ
- 有名なサイトのサイズ
モニターサイズを基準にする
例えば、私のモニターのサイズ（解像度）は横は１２８０ピクセル、縦は１０２４ピクセルです。次のリンクをクリックしてみてください。あなたのサイズがすぐ分かりますよ。
どのサイズを目的にするかによって画像サイズが変わります。Syncerによる2019年の統計では、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でよく使われる画像です。記事のサムネイルや記事の一番上に表示される画像です。ある画像を元サイズで表示せず小さくしたサンプルのことをいいます。
「アイキャッチ画像のサイズって、結局何ピクセルがいいの？」によると、１２００ピクセル×６３０ピクセルを推奨しています。
私は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用に保存」で重さを軽くする
PhotoShop Elementsは手軽に適切な画像サイズ、拡張子へ変換が楽です。持っているとホームページ以外にも使えて便利ですよ。