ブログを運営するうえでの悩み事といえば、画像サイズをどうしたらよいか？迷いますよね。
今回は記事の前半で「ブログの画像の最適なサイズ」についてGoogleが推奨しているサイズを説明し、後半で「サイズ変更方法と圧縮方法」を紹介していきます。
最後にブログに画像を貼る場合の良くある質問事項もまとめているので参考にしてみてください！
ブログの画像サイズの最適値
ブログに貼る画像の最適なサイズを考えるうえで、避けてとおれないのがGoogleの評価基準ですよね。
Yahoo!やBingでいくら評価されたところで、ブログへの流入の9割以上はGoogleって事実を忘れてはいけません。
ならばGoogleの基準がどうなっているのかを確認し、Googleの基準に合わせていくことが正解と言えます。
Googleが推奨しているサイズ
Googleが推奨するサイズはAMPについてのみ公表されています。
Googleが最も力を入れているモバイルファーストのプロジェクトの１つですね。
今あなたのブログがAMPに対応していなかったとしても、いずれ優れたプラグインができた時にAMP化させることもあるでしょう。
つまり、AMPに対応しているブログも対応していないブログも今後はAMPの基準で運営することが望ましいと言えます。
それではGoogleがどのようなサイズを推奨しているのかを確認していきましょう。
・記事に直接属するマークアップされた画像のみを指定する必要があります。
・画像の幅は 1,200 ピクセル以上にする必要があります。
・すべてのページに画像を少なくとも 1 つ含める必要があります（マークアップを含めるかどうかは問わない）。Google は、アスペクト比と解像度に基づいて、検索結果に表示する最適な画像を選択します。
・画像の URL は、クロールやインデックス登録に対応できる必要があります。
・画像はマークアップされたコンテンツを表している必要があります。
・画像の形式は、.jpg、.png、.gif のいずれかである必要があります。
・適切な画像が選択されるようにするために、アスペクト比が 16×9、4×3、1×1 の高解像度画像（800,000 ピクセル以上の画像）を複数指定してください。
要約するとこんな感じです。
- 横幅は1200px以上で作成しろよ！
- 画像のURLはクロールやインデックス登録に対応しろよ！
- 保存形式はjpg、png、gifで指定しろよ！
- アスペクト比は16:9、4:3、1:1にしろよ！
- 高解像度（800,000ピクセル以上の画像)を複数指定しろよ
Googleがはっきりと画像サイズについて説明してくれているので、上の基準に合わしていくのが結論です。
ブログに最適なアスペクト比は？
アスペクト比とは、矩形における長辺と短辺の比率のことをいいます。もっと簡単に言うと四角形の縦と横の比率のこと。
Googleが推奨しているアスペクト比は16:9、4:3、1:1でしたのでこれらの比率を使っていきましょう。
スマホから見た場合16:9が一番しっくりきます。4:3はパソコンで見た場合は良いですがスマホから見るとちょっと縦長でもっさり感が出てしまいます。（画像の圧を感じてしまいます）
私としては黄金比の1:1.618が良いんですが、Googleに媚びを売るためブログの画像は全て16:9に統一しています。
アイキャッチ画像に使うサイズ
アイキャッチはブログの記事の顔になるので、特に注意しておきたいところですよね。
とは言うもののアイキャッチ画像は各テーマによりアスペクト比が決まっているので、テーマに合ったアスペクト比で作成しましょう。
参考までにメジャーなテーマのアイキャッチのアスペクト比を紹介しておきます。
| テーマ名 | アスペクト比 | 1200×〇〇 |
|---|---|---|
| JIN | 16：9 | 1200×675 |
| STORK19 | 73：46 | 1200×756 |
| Cocoon | 16：9 | 1200×675 |
| THE THOR | 16：9 | 1200×675 |
| Sango | 68：39 | 1200×688 |
| DIVER | 自由 | ー |
ブログに画像を貼るまでの手順
前半で画像のサイズとアスペクト比を紹介していきましたので、ここからは実際にブログに画像を貼る前の準備について紹介していきます。
- 記事にあった画像を用意する（h2には全部）
- 画像サイズを調整する
- 画像を圧縮する
ブログの画像サイズの変更方法（パソコン編）
以前はPhotoshopやGIMPなどの画像加工サイトを利用して画像サイズを変更していましたが、最近は画像編集に時間をかけたくないためCanvaを使ってサイズ変更をしています。
Canvaならパソコンでもスマホでも簡単に画像サイズを変更することができるので、画像ソフトを使いこなせない方にもおすすめの方法です。
- デザインを作成クリックします。
- ＋カスタムサイズをクリックしましょう。
- 16：9で作成する場合は横1200 縦675 と入力します。
- デザインを作成をクリックしましょう。
- 加工したい画像をクリックしてください。
- 編集エリアに加工したい画像が表示されます。
- 画像の四隅の〇をクリックしたまま横へ動かします。
- キャンバス全体に写真が広がるまで広げましょう。
- 画像をクリックして上下左右に動かし位置を調整します。
- 位置が確定したら保存して完了です。
Canvaを使えばどんな画像のサイズもキャンバスサイズに調整することが可能です。複雑な画像ソフト使わなくても簡単にサイズ調整が可能になります。
ブログの画像サイズの変更方法（スマホ編）
ここからはCanvaを使ってスマホで画像サイズを変更する方法を紹介していきます。スマホで撮影した写真のサイズ変更にも使えるのでパソコンより利用頻度は高くなります。
- カスタムサイズをタップします。
- 16：9で作成する場合は横1200 縦675 と入力します。
- 作成するをタップします。
- 空白のキャンバスをタップします。
- サイズを変更したい画像をタップしてください。
- ピンチアウトやスライドして位置を調整します。
- 画像を保存して完了です。
Canvaならスマホで撮影した写真も簡単にサイズを変更することができるので便利ですよね。2年前にブログを始めたときに知っていたら今頃たくさんの記事が量産できていたはずです。
ブログの画像の圧縮方法
画像の圧縮はプラグインを使う方法もありますが、個別に圧縮するのに比べ圧縮が甘くなるので個別に圧縮する方がよいです。
画像圧縮はパソコンからもスマホからも利用できる【 tiny png 】がおすすめ。
それでは圧縮手順を説明していきますね。
- ｔｉｎｙ ｐｎｇのＨＰへいく
- 赤枠をクリックしましょう
- 圧縮したい画像をクリックかドラッグさせましょう
- 赤枠内のdownloadをクリックして保存する。
- 圧縮完了です。
圧縮は簡単ですね。ただ、毎回画像を圧縮するのは結構面倒なので隙間時間などにスマホから作業すると生産性がアップしますよ！
ブログに使う画像で良くある質問
ここからはブログで画像を使用する際によくある質問を紹介していきます。
最近はスマホでの利用者が増えているためスマホのネット環境でもスムーズに読み込みができるようにしなければなりません。
モバイルサイトの読み込みに3秒以上かかると53％の方が閲覧を止めて離脱してしまうと言われています。
またGoogleの検索順位においても読み込み時間が遅いと評価が下がるため、画像を軽くし読み込み速度を上げることがSEOの観点からも重要です。
わたし個人の意見としては小さい画像を使うことは悪くないと思っています。
ただし、限定的な使い方という条件付きです。
スマホのキャプチャー画面をブログに貼るときなどは小さくした方がユーザーにとって見やすくなります。
スマホの画面一面にスマホのキャプチャー画面が映し出されたらウザくないですか？当ブログではスマホの画像を紹介するときは一番注意してます！
結論言ってしまうと揃えるべきです。
これもユーザー目線から見て、写真や画像がガタガタのブログ記事は読みたくないですよね？
読んでたら気持ち悪くなってすぐに離脱してしまいます。
正しいルールで引用すれば問題ありません。
画像の引用については、著作権や肖像権、パブリシティー権などの法律も関わってくるのでしっかり理解しておきましょう。
詳しくは ブログに画像を引用する場合の7つの注意事項と方法 で詳しく説明しています。
WordPressのテーマを変更するとアイキャッチ画像などを変更する必要が出てくることがあります。
テーマを変更すると画像サイズのほか専用コードなど変更するのがかなり大変です。
コードやhtmlを置換してくれるプラグインなどもあるので別の記事でまた紹介していきます。
ブログの画像サイズ：まとめ
最後にもう一度ブログに使用する画像サイズのGoogleの推奨サイズと注意事項をまとめておきます。
Googleの推奨サイズ
- 横幅は1200px以上
- 画像のURLはクロールやインデックス登録に対応
- 保存形式はjpg、png、gifで指定
- アスペクト比は16:9、4:3、1:1
- 高解像度（800,000ピクセル以上の画像)を複数指定
ブログに利用する画像の注意事項
- 画像サイズは統一
- ブログに貼る前に圧縮を行う
- 重たい画像は閲覧者の離脱を招く
- 画像を引用するときはルールを守ろう
