どうもこんにちは！今日も限界プロ集落で無事生き抜いたプロカメラマンのひげおです！
20年以上、写真撮影の業界で働いています。
このシリーズは、写真を始めてみたい！写真に興味を持ち始めた！撮影からレタッチまでやってみたい！
そんな初心者さん向けに、ひげおが働きながら獲得した知識を紹介しています。
今回は、写真の知識はないし、興味もないけどブログ運営で必要になって勉強してる。そんな人に役立ちそうな内容です。
前々回「72dpiと300dpiの違いとは？ブログ運営者が知るべき画像解像度の基礎」で画像解像度とは何かをお伝えし、前回は「webpとは何か？JPG・PNGとの違いと画像拡張子の基礎」で最適な圧縮フォーマットをお伝えしました。
今日は「解像度と圧縮フォーマットはわかったけど、結局『縦横何ピクセル』で『何キロバイト（KB）』にしてアップロードすればいいの？」という疑問に答える記事です。
ブログ画像の「サイズ（寸法）」、最適解と目安
基本的には画像の容量と画像の圧縮形式の組み合わせで最適解を探していく作業です。
横幅は「1000〜1500ピクセル」がおすすめ
ひげおの場合はブログに使う写真は全て72dpiの横幅1500ピクセルに固定してます。（ギャラリーで使ってる写真は除きます）
圧縮はwebpで。
解像度を72dpiにする理由は前々回「72dpiと300dpiの違いとは？」で説明した通り、モニターの表示が72dpiで表されるものが多いためです。実際は4Kモニターがあったりしてモニター側の表示ピクセルはもはや関係ないのですが、こちらは72dpiで統一しています。
ひげおが横幅を1500ピクセルにする理由は大体のブログの横幅にちょうどいいバランスになるからです。
1000ピクセルがいいと思う方は1000ピクセルで問題ありません。
別に800ピクセルでも2000ピクセルでもいいですが、一般的には解像度72dpiの横幅1000〜1500ピクセルがバランスがよく見やすいとされています。
これはもう決めておいた方がいいと思います。
毎回毎回「これくらいかな〜」「もうちょっと大きくかな〜」「小さくかな〜」とやってると１回更新するのに3日くらいかけてしまうことになりかねません。
最初の方に横幅1200くらいがちょうどいいかな？1400がいいかな？と思ったらもう決めてしまって全画像それで作成した方がスムーズにブログ更新ができるはずです。
もうちょっと言うとバラバラでも1000〜1500ピクセルの間にいるならOK。そんなにこだわってもしょうがない。とも言えます。
縦画像の場合
ひげおはなるべくブログには横画像を使うようにしていますが、どうしても縦画像を使う場合、横幅1500ピクセルにはしません。
縦幅を1000ピクセルくらいにします。経験上縦幅1500ピクセルの縦画像は大きすぎるかなと思っています。
ただその辺は好みなので色々試してみてください。
アイキャッチ画像に推奨される黄金比（アスペクト比）
アイキャッチとはサムネとも言いますね。その記事の顔。的な画像です。
↓この下のようなやつです。
アイキャッチのサイズは16:9がいいとされています。16:9で横幅1200ピクセルにした場合、縦は675ピクセルになります。
これはSNS等でシェアされた時に見切れない最適な比率とされています。
16:9はテレビも同じ比率ですね。このブログのアイキャッチも解像度72dpiで1200×675で作っています。
多少違ってもそんなに問題ないかなとは思います。
ブログ画像の「容量（データサイズ）」の推奨ライン
ひげおとしては容量（データサイズ）が1番重要だと思います。
ブログの世界では使ってる画像が、横幅が2500ピクセルだろうと30ピクセルだろうと、有名カメラマンが撮影した写真であろうと、
その画像が重ければそれだけで価値はありません。
むしろ害悪です。
なぜなら、重い画像は表示が遅くなります。2秒待てないで離脱する読者は珍しくありません。
また表示速度の遅さはGoogleの評価も下げます。
Googleの評価が下がればクリック率も落ちその画像が見られる事も無くなります。
つまりブログで使う画像の価値は容量が全てと言っても過言ではありません。瞬時に表示されない画像に価値などないのです！
1枚あたり「100KB〜200KB以下」を目標に
200kbくらいまでなら光回線で見てようが4G回線で見てようがストレスなく表示される範囲です。
ただ、最近は画像の圧縮も進んでいるので40kくらいまでは目指せます。写真にもよりますけど。
画像が著しく荒れないレベルでなるべく小さいサイズを目指しましょう。
画像を軽くする3つの要素（おさらい）
- ピクセル数（画像サイズ）を適正にする
- 拡張子を選ぶ（WebP推奨）
- 圧縮率を調整する。
Photoshopでブログ画像を最適化！書き出しの具体的ステップ
ここでやはり泣く子も黙るPhotoshopの登場です。去年値上がりしてしまいましたが、それでもフォトプランなら¥2,380 / 月（年間プラン月々払い）なのでおすすめです。Canvaでも画像の圧縮はできますがwebpは対応していません。
Photoshopを使ったwebp画像を作る手順
ではひげおが運営してるもう一つのブログ「T.M.E. Chronicles」用に撮った以下の写真を使います。
レタッチ（補正や余計なもの消したり）は終わらせている想定です。
これはすでにリサイズされてて小さいですがそれでも72dpiの2500×1670で3.5MBあります。これをブログで使えるサイズにしていきます。
Step1. 画像解像度を「72dpi」にし、ピクセル数を合わせる
レタッチが終わった段階でレイヤーは統合しておきます。
これで画像のリサイズが完了。解像度72dpi、幅1500ピクセルの画像が完成です。
Step2. 「書き出し形式」でフォーマットをWebPに設定する
メニュー＞別名で保存をクリック。ショートカットだと⌘＋シフト＋S
↓保存先フォルダとファイル名を入力
Step3. 画質（圧縮率）を調整する
プレビューはないので勘でやってみて大きければやり直します。ここはプレビュー無いの不便です。
ひげおは画質を80にすることが多いですが60でも見た目にすごい荒れたような印象はないです。60でも使えます。
※60で耐えれるかどうかは写真によります。
これにて完成です。解像度72dpi、幅1500ピクセルで176kの画像が作成できました。
よくある質問（FAQ）
Q：画像サイズを小さくすると画質は悪くなりますか？
画像サイズ（ピクセル数）を適正にリサイズするだけなら、見た目の画質はほとんど変わりません。
むしろ必要以上に大きな画像を使う方がブログ表示速度の面でデメリットがあります。
Q：WebPにすると画質は落ちますか？
圧縮率によっては画質は少し劣化します。ただしブログ用途の設定（画質60〜80程度）であれば、見た目ではほぼ同じです。
Q：PNGじゃダメなんですか？
PNGでも問題ありません。ただ、軽くしつつ画質を保つ方法としてwebpが最強と言うだけです。
Q：画像は何枚まで使っていいですか？
特に決まりはありませんが多すぎて表示速度が遅くなる可能性はあります。
画像サイズ・容量のまとめ：迷ったらこの設定がおすすめ！
今回は数字が多めでしたが、一度設定を決めてしまえばあとは迷わず作業できます。まずは72dpi・横幅1500ピクセル・WebPで試してみてください。
とにかく小さく！軽く！にフォーカスしすぎて画像がガビガビに荒れてしまっては意味がありません。
画像は画像として成立して、その中での最軽量にするのが正解だと思います。
いろいろ試してみてご自身の正解を確立してもらえたら幸いです。
