- ブログ画像のリサイズ・圧縮の前に知っておくべきこと
- ブログ画像のリサイズ・圧縮の具体的な方法
本記事の信頼性
※ただし、ほかの対策も施しているので画像リサイズ・圧縮のみで劇的に改善するわけではありません。
ブログ画像のリサイズ・圧縮の前に知っておくべきこと
ブログ画像のリサイズ・圧縮の話をする前に、ブログ画像について知っておくべきことが3つあります。
- 元の画像サイズは大きすぎる
- 画像の容量はページ表示速度に影響する
- ブログ画像の拡張子はJPG/JPEGまたはPNGのみ
それでは上記についてそれぞれ詳しく説明します。
元の画像サイズは大きすぎる
スマホで撮影した写真やフリー素材として取得した画像は、基本的に画像サイズが大きいです。
例えば、本記事のアイキャッチ画像の元サイズは『5500×3546px』です。
画像の幅は 1,200 ピクセル以上にする必要があります。
(Google検索：構造化データ『Article』)
AMP(Accelerated Mobile Pages：通称『アンプ』)とは、モバイル端末でページを高速表示させるための仕組みのこと
本記事のアイキャッチ画像の元サイズは、Googleの推奨サイズより4.5倍も大きいため、リサイズをして幅1200pxにしています。
画像の容量はページ表示速度に影響する
画像の容量が多いと読み込みに時間がかかり、結果としてページ表示速度が遅くなります。
本記事のアイキャッチ画像の元容量は『1.06MB(1060KB)』です。
記事で使用する画像枚数にもよりますが、基本的に1画像50～100KB以内に収めたいです。
モバイルサイトの訪問者の53％が、読み込みに3秒以上かかるページを離れています。
(引用：Think with Google)
このように、3秒以内にページが表示されないと半数以上のユーザーがページを読むのをやめてしまいます。
ユーザビリティが低いサイトはSEO評価も下がってしまうため、ページ表示速度を向上させるために画像は50～100KB以下まで圧縮したほうが良いです。
ブログ画像の拡張子はJPG/JPEGまたはPNGのみ
画像で使用される拡張子は、主に5種類があります。
- JPG/JPEG
- PNG
- GIF
- BMP
- TIFF
以上の拡張子のなかで、ブログ画像に使用するのは『JPG/JPEG』と『PNG』のみで良いです。
PNG⇒アイキャッチ画像、スクリーンショット、図や表、文字入れ画像
JPG/JPEG⇒一部の写真(グラデーションやスキャン画像など)
結論として、ブログ画像は基本的にPNGにしておけば問題ありません。
ただし、画像サイズによって上記のとおりにならない場合もあるため、『〇〇はPNG』『××はJPG/JPEG』などブログ内で扱う画像のルールを決めておくと良いです。
ブログ画像のリサイズ・圧縮の具体的な方法３つ
次は、本題のブログ画像のリサイズ・圧縮の方法です。
具体策は3つあります。
- 画像のリサイズ『i Love IMG』
- 画像の圧縮『Tiny PNG』
- 画像の最適化プラグイン『EWWW Image Optimizer』
以上のツールを用いることで、ブログ画像のリサイズ・圧縮は簡単に行うことができます。
それぞれ画像を用いながら説明していきますね。
①画像のリサイズ『i Love IMG』
『i Love IMG』はオンラインの画像編集ツールです。
画像のリサイズのほかに、切り抜き、形式の変更などさまざまな編集をすることができる優れもの。
ブログ画像のリサイズ手順を説明します。
画像のリサイズ手順
- 『i Love IMG』のホームページを開く
- 『画像のサイズ変更』をクリックする
- リサイズする画像を選択してサイズを指定する
- 『サイズ変更された画像をダウンロード』から画像を保存する
1.『i Love IMG』のホームページを開く
2.『画像のサイズ変更』をクリックする
3.リサイズする画像を選択してサイズを指定する
- 横縦比を変更する場合はクリック(しない場合は無視でOK)
- 横幅を指定する
- 高さを指定する(横縦比を変更しない場合は自動入力されます)
- 『画像のサイズ変更』をクリック
※横幅はGoogle推奨の『1200px』、高さは『800px』がおすすめです
4.『サイズ変更された画像をダウンロード』から画像を保存する
- 次に行いたいコマンドがある場合は選択する(今回は飛ばします)
- 『サイズ変更された画像をダウンロード』をクリックして画像を保存
『i Love IMG』を使用した、ブログ画像のリサイズ方法は以上です。
②画像の圧縮『Tiny PNG』
Tiny PNGはオンラインの画像圧縮ツールで、PNG以外にJPEG/JPGも強力に圧縮することができます。
ブログ画像の圧縮手順
- 『Tiny PNG』のホームページを開く
- 『.pngまたはjpg.ファイルをここにドロップしてください！』をクリック、または画像をドロップする
- 画像を選択したら自動で圧縮が開始される
- 圧縮が完了したら『ダウンロード』をクリックして画像を保存する
1.『Tiny PNG』のホームページを開く
2.『.pngまたはjpg.ファイルをここにドロップしてください！』をクリック、または画像をドロップする
3.画像を選択したら自動で圧縮が開始される
4.圧縮が完了したら『ダウンロード』をクリックして画像を保存する
画像圧縮の操作は以上です。
③画像の最適化プラグイン『EWWW Image Optimizer』
EWWW Image OptimizerはWordPressプラグインで、過去画像も含めてブログ内の画像を自動で一括最適化してくれるツールです。
EWWW Image Optimizer設定手順
- プラグイン『EWWW Image Optimizer』をインストール→有効化する
- 管理画面の『設定』から『EWWW Image Optomizer』を選択する
- 『ベーシック』の設定をする
- 『変換』の設定をする
- 画面上の『一括最適化』をクリックする
- 『最適化されていない画像をスキャンする』をクリックする
- 『画像を最適化』をクリックする
- 最適化を完了する
ここでは設定の細かい説明は省くので、以下の手順に沿って行ってください。
1.プラグイン『EWWW Image Optimizer』をインストール→有効化する
2.管理画面の『設定』から『EWWW Image Optomizer』を選択する
3.『ベーシック』の設定をする
- 『メタデータを削除』を選択する
- デフォルトのままにする
- 変更を保存をクリックする
4.『変換』の設定をする
- 『コンバージョンリンクを非表示』を選択する
- デフォルトのままにする
- 『変更を保存』をクリックする
5.画面上の『一括最適化』をクリックする
6.『最適化されていない画像をスキャンする』をクリックする
7.『画像を最適化』をクリックする
8.最適化を完了する
EWWW Image Optimizerの設定と最適化方法は以上です。
上記の項目以外あまり触る必要はありませんが、『WebP』に関しては別記事として紹介します。
まとめ：今すぐブログ画像のリサイズ・圧縮をしよう
ブログ画像のリサイズ・圧縮についてこれまで話したことを最後にもう1度まとめます。
ブログ画像について大切なこと
- 元の画像サイズは大きすぎる
- 画像の容量はページ表示速度に影響する
- ブログ画像の拡張子はJPG/JPEGまたはPNGのみ
画像の拡張子は、基本的にPNGを使用しておけば良いですが、ブログ内で扱う画像のルールを決めておくようにしましょう。
ブログ画像のリサイズ・圧縮の方法
- 画像のリサイズ『i Love IMG』
- 画像の圧縮『Tiny PNG』
- 画像の最適化プラグイン『EWWW Image Optimizer』
ブログ画像のサイズや容量は、ブログのページ表示速度に大きく関わる重要な要素です。
もし「これまでいい加減に画像貼っていたな～」という方は、今すぐ画像をリサイズ・圧縮して、ユーザビリティが高くSEOに評価されるブログ作りをしていきましょう。
