ブログの表示速度がなんとなく遅い気がしていて、画像が原因じゃないかと思っています。
ブログにアップロードする画像の最適なサイズってどれくらいなんでしょうか？
こんな疑問にお答えします。
僕はブログ運営歴2年で、現役でWeb制作副業をやっているWeb系エンジニアでもあります。
Googleの2017年の報告書では、モバイルサイトのページの読み込みに3秒以上かかると53％のユーザーが離脱すると言われています。
サイトの読み込み時間を改善するために、もっとも簡単にできて、かつ効果があるのが『画像の最適化』です。
以下では、ブログにアップロードする画像の最適なサイズを調べる方法や画像のアップロード方法について解説します。
ブログの表示速度で悩んでいる人は、参考になるはずです！
それでは、どーぞ！
目次
ブログにアップロードした画像の保存場所
ブログにアップロードした画像が保存される場所は「wp-content/uploads」フォルダの直下です。
WordPressでは画像をアップロードしたときに、複数のサイズの画像が作られます。
1枚の画像をアップロードしたときに保存される画像の数は最低4枚。それに加えて、テーマなどで決まった画像サイズの画像が保存されます。
実際に画像が保存されたフォルダ内を見てみると、以下のとおりです。
全部同じ画像のファイルですが、色々なサイズの画像ファイルができているのがわかりますね。
なぜこんなにいろんなサイズの画像ができるかというと、用途に応じて適切な画像サイズを使うためです。
それぞれの画像がどこで使われているか、以下で解説します。
画像をアップロードしたときに作成される画像の正体
画像をアップロードしたら、以下のサイズの画像が保存されます。
- サムネイルサイズの画像
- 中サイズの画像
- 大サイズの画像
- フルサイズの画像
実はこれ、フルサイズ以外の画像はWordPressダッシュボードの「設定」ー「メディア」で設定しているものです。
上記の設定を変えることで、保存される画像のサイズが変わります。
これらの画像が一体何に使われているかというと、記事内に画像を貼るときに選ぶアレです。
フルサイズの画像は、アップロード前のサイズのまま保存される画像です。
ちなみに、大サイズが表示されていないのは、僕がいつも大サイズ以下の画像をアップロードしていて、大サイズ画像が作成されないからです。
WordPressテーマによって作成される画像の正体
上記に加えて、テーマによってさらに決まったサイズの画像が保存されます。
WordPressテーマ「JIN」の場合だと、「640×360」と「320×180」のサイズの画像が自動的に保存されます。
これらのサイズの画像はトップ画面のアイキャッチ画像に使われています。
WebP拡張子のファイルは何者？
さらに先ほどのフォルダの中に「.webp」という拡張子の画像ファイルがありましたね。
これは何かというと、WebP（ウェッピー）というGoogleが開発した画像フォーマットの画像ファイルです。
WebPフォーマットは、他のフォーマットの画像よりも容量を抑えられるのが特徴です。
ただ、新しい画像フォーマットなので、まだ対応していないブラウザがあります。
そういうブラウザに対しては従来のフォーマットの画像を表示できるように、WebPと従来フォーマットの2種類のフォーマットの画像が用意してあるんですね。
ちなみに、このWebPフォーマットの画像はプラグインの「EWWW Image Optimizer」を使うことで自動的に作成してくれます。
ブログに最適な画像サイズを調べる方法
WordPressに画像をアップロードしたら、なんだかいっぱい画像が作られるんだな〜ということを理解してもらえたと思います。
以下ではブログに最適な画像サイズを調べる方法を解説します。
ブログに最適な画像サイズとは？
いろいろなサイズの画像が自動的に作られるなら、ブログにアップロードする画像サイズは何を基準に決めればいいのでしょう？
その答えは、「フルサイズの画像」のサイズです。
なぜなら、フルサイズの画像だけはアップロード前のサイズのまま保存されるからですね。
フルサイズ画像の使い道
フルサイズの画像は、以下のように記事内に画像を挿入するときに使います。
記事内に表示される画像サイズ以上の画像をアップロードした場合、必要以上に大きなサイズの画像を表示させていることになります。
これは表示速度を遅くしてしまう原因になります。
なので、最適なサイズの画像をアップロードするために、記事内に表示される画像のサイズをあらかじめ調べておきましょう。
画像サイズを調べるのに使うのが「デベロッパーツール」です。
デベロッパーツールの使い方がブラウザによって少しだけ違うので、以下ではGoogle ChromeとSafariの2通りの使い方を解説していきます。
Google Chromeでの最適な画像サイズの調べ方
Google Chromeでの最適な画像サイズの調べ方を解説していきます。
まず、下準備としてブラウザを開いて、記事の個別ページを表示してください。
そして、Google Chromeのデベロッパーツールを開きます。デベロッパーツールは、Macの場合「command + option + I」、Windowsの場合「Ctrl + Shift + I」で使えます。
そして、以下の部分をクリック。
その状態で、サイズを知りたい画像の上にマウスを置けばOK。
このように画像サイズが表示されます。
僕の場合は、余白分を引いた記事の幅が753.75pxなので、760pxの画像をアップロードするようにしています。
Safariでの最適な画像サイズの調べ方
Safariでの最適な画像サイズの調べ方を解説していきます。
Safariの場合はデベロッパーツールを使うために、少し設定が必要になります。
「Safari」ー「環境設定」を選択して、「詳細タブ」の「メニューバーに”開発”メニューを表示」にチェックを入れます。
そして、記事の個別ページを表示して、Safariのデベロッパーツールを「command + option + I」で開きます。
そして、以下の部分をクリック。
その状態で、サイズを知りたい画像の上にマウスを置けばOK。
ウインドウサイズがある一定の幅以下だとそれに応じて画像サイズも小さくなってしまうため、調べるときはある程度大きいウインドウサイズにしよう！
このように画像サイズが表示されます。
僕の場合は、余白分を引いた記事の幅が754pxなので、760pxの画像をアップロードするようにしています。
ブログに画像をアップロードする手順【画像圧縮方法もあり】
最適な画像サイズがわかったら、実際に画像をアップロードしてみましょう。
最適なサイズの画像をアップロードするもっとも簡単な方法は、プラグイン「EWWW Image Optimizer」をインストールして、設定で幅の上限を決めてしまうこと。
この方法であれば、アップロードするだけで自動的に幅を760pxにリサイズしてくれるので簡単ですね。
ただ、アップロード前にリサイズしてから、圧縮した方が最終的な画像の容量を抑えることができます。
なので、以下の手順でアップロードするのがおすすめです。
- 適切な画像形式を選ぶ
- 画像をリサイズする
- 画像を圧縮する
- 画像をアップロードする
以下で詳しく解説していきます。
手順①：適切な画像形式を選ぶ
Webサイトで使われる画像形式はJPEG、PNG、GIFの3種類です。
適切な画像形式を選ばないと画像が汚く見えたり、ファイル容量が増えてしまったりするので、画像形式が選べる場合は適切な画像形式を選びましょう。
適切な画像形式の判断は以下でするとOKです。
- JPEG：写真などの色の多い画像
- PNG：ベクター画像などの色の少ない画像
- GIF：アニメーション
手順②：画像をリサイズする
画像をリサイズする方法は、主に以下の方法があります。
- Photoshop
- Macのプレビューツール
- Webアプリ
僕はWeb制作副業をやっているのでPhotoshopを使っているのですが、このツールかなりお高めです。
Photoshopを使える人なら、ツールバーの「イメージ」－「画像解像度」を選択して、画像サイズを指定すればOK。
Photoshopを使えないMacユーザーなら標準のプレビューツールで、リサイズすることもできます。
ツールバーの「ツール」ー「サイズを調整」を選択して、画像サイズを指定すればOK
Windowsの人は、サルワカの画像サイズ変更ツールなどのWebサービスを使って、リサイズすることができます。
手順③：画像を圧縮する
続いて画像を圧縮して、画像の容量を削減します。
画像を圧縮するために使う代表的なツールは以下です。どちらも無料ツールです。
- ImageOptim（Mac）
- Antelope（Windows）
僕は普段Macを使っているので、ImageOptimを使っています。
画像を圧縮すると画像は粗くなるので、自分で見て許容できる程度まで圧縮すればOK。きれいに見せたい画像であれば圧縮しないという判断もありですよ。
画像を圧縮したら、だいたいの画像は数十MBくらいまで削減できます。
手順④：画像をアップロードする
あとはいつもどおりに画像をアップロードすればOKです。
「EWWW Image Optimizer」を使って、WebPファイルを自動で作成しておくとなお良しですね！
まとめ：ブログアップロード画像の最適なサイズの調べ方とアップロード方法
- WordPressでは画像をアップロードすると、最低4枚のサイズの画像が保存される
- ブラウザのデベロッパーツールを使えば、最適な画像サイズを調べられる
- 画像のアップロード手順は以下
①適切な画像形式を選ぶ
②画像をリサイズする
③画像を圧縮する
④画像をアップロードする
以上、ブログにアップロードする画像の最適なサイズを調べる方法と画像のアップロード方法について解説しました。
画像を最適化してアップロードする作業はちょっと手間ですが、読み込み時間の改善に効果があるので、めんどくさがらずにやっていきましょ！
では今回はこの辺で〜！
