WordPress(ワードプレス)などでブログを運営しているなら、画像圧縮によるサイト軽量化は必須な対策です。
画像が重いとブログの表示スピードや、読み込み速度を遅くしてしまう原因になります。
特に１記事内に10枚・20枚の画像を利用しているなら、圧縮済みとそうでない場合とで重さがまったく違ってきます。
こう感じている方も多いかと思うので、ここではブログの画像圧縮方法をわかりやすく解説していきます。
ちなみに画像圧縮ツールを使いますが、すべて無料でPCにインストールも不要です。
ブログの画像圧縮をする前に知っておくべき知識
画像圧縮ツールをご紹介する前に、以下の点について確認しておきましょう。
- 画像の横幅は700px～800pxあれば十分
- 保存形式はPNGよりJPGの方が軽量
- JPGは画像圧縮すると劣化しやすい
- ファイルサイズは圧縮済みで70KB以下が目安
それぞれ簡単に解説しておきますね。
画像の横幅は700px～800pxあれば十分
利用しているブログサービスによって若干サイズの違いはありますが、ブログの記事エリアの横幅は基本的に700～800pxです。
私が利用しているWordPressテーマ「JIN」であれば、700pxで横幅いっぱいに画像を表示できますね。
CSSによって各自でエリア幅を調整されている場合は、それにサイズを合わせるのがいいかと思います。
仮に記事エリア以上の横幅、例えば1,000pxの画像サイズでアップすると、自動的に700pxなどの幅に調整されます。
なので、エリア以上の画像サイズを用意する必要はありません。
大きい画像はファイルサイズも大きくなってしまうので、ブログを重くしてしまう原因にもなりますからね。
保存形式はPNGよりJPGの方が軽量
画像を保存する形式として一般的によく利用されるのが「PNG」「JPG(JPEG)」です。
- PNG：容量は大きいが画像が鮮明
- JPG：少し粗いが容量は小さい
それぞれの特徴としてはこんな感じですね。
ここで少し悩むことがあるかと思います。
個人的な考えですが、テキストなどが入っていない写真や風景画像などは、JPGで保存した方が鮮明かつ軽量です。
対して自分で作成したテキスト入り画像などは、PNGで保存しても容量が大きくなりにくく、鮮明な状態で表示できます。
もし写真などにテキストを加工した場合は、PNGだと容量が大きいのでJPGで保存するのがおすすめですね。
JPGは画像圧縮すると劣化しやすい
保存した画像を圧縮するときの注意点として、JPG形式はPNG形式に比べて劣化しやすいです。
とはいえ、写真や風景などのフリー画像をそのまま使うなら、JPG形式で圧縮しても画像はほとんど劣化しません。
ここで劣化してしまうのは「テキスト入り」の画像です。
例えば、画面をキャプチャーして記事で手順を説明するときには、JPG形式で圧縮した画像だと少し粗くなるので注意が必要です。
なので、テキストが多く入っている画像は、ファイルサイズが許容範囲ならPNG形式で保存するのがおすすめですね。
ファイルサイズは圧縮済みで70KB以下が目安
ファイルサイズは、画像の大きさと保存形式によって異なります。
例えば、「横700px縦500px」の風景画像があったとすると、PNGなら500KB、JPGなら100KBというように差があります。
ここから画像圧縮ツールを使ったときに、70KB以下を目安に圧縮できれば問題ないレベルだと思います。
これはあくまで個人的な目安なので、別に越えてしまったからといって問題があるわけじゃないですよ。
ただ、ファイルサイズが大きくなると読み込みに時間がかかってしまうので、なるべく大きくなりすぎない画像を使用しましょう。
【アップ前】ブログの画像圧縮でサイトを軽量化する方法
ここからは、画像をブログにアップロードする前に、無料圧縮ツールで軽量化する方法を解説していきます。
画像の圧縮作業に利用するツールは以下の３つ。
- BULK Resizeでサイズ変更＆JPG自動変換
- Optimizillaで画像のファイルサイズ圧縮
- TinyPNGで画像のファイルサイズ圧縮
画像圧縮ツールといってもインストールする必要がなく、いつでもすぐに利用することができますよ。
それぞれ順に画像付きでわかりやすく解説していきますね。
①：BULK Resizeでサイズ変更＆JPG自動変換
まずはブログにアップする画像を用意できたら、記事エリアに最適な横幅に合わせるために「BULK Resize」のツールでリサイズを行います。
ツールを開いたら、「Drag & Drop Images Here!」と書かれた枠内に、リサイズしたい画像をドラック＆ドロップします。
そうするとリサイズする大きさを指定できるようになります。
「Width(横幅)」を選択してImage Sizeを「700px(好きな幅)」にして、最後に「Start Resizing」をクリックすると保存できます。
BULK Resizeは、一度に最大150枚まで画像をリサイズすることが可能です。
リサイズを実行すると、PNG形式の画像は自動的にJPG形式に変換されます。
こういった場合はBULK Resizeでは対応できないので、PCに標準搭載されている「ペイントツール」を活用するといいですね。
画像にマウスを合わせて右クリックで「プログラムから開く」⇒「ペイント」を起動させます。
続いて「サイズ変更」⇒「ピクセル」を選択して横幅を指定したら、「OK」をクリック後に上書き保存すればリサイズ完了です。
②：Optimizillaで画像のファイルサイズ圧縮
画像の横幅をブログに合わせることができたら、次に行っていくのが「Optimizilla」の画像圧縮ツールです。
ツールを開いたら、「ファイルをここにドラッグ＆ドロップして下さい。」と表示があるので、画像を追加すると自動圧縮が開始されます。
Optimizillaは、一度に最大20枚までアップロードすることが可能です。
PNG・JPG(JPEG)どちらの形式にも対応。
自動圧縮が完了したら、すべて１ファイルにまとめてダウンロードできます。
Optimizillaでは、圧縮率やオリジナルとクオリティの差をすぐに確認することもできます。
圧縮率は画像によって違いますが、40～70％ほどはファイルサイズを縮小できる感じですね。
③：TinyPNGで画像のファイルサイズ圧縮
Optimizillaで圧縮済みの画像は、もう１段階さらに圧縮することができます。
そこで利用するのは、パンダのキャラクターが印象的な「TinyPNG」の画像圧縮ツール。
ツールを開いて、「Drop your .png or .jpg files here!」へ画像を追加すると、自動的に圧縮が開始されます。
TinyPNGはOptimizillaと同様に、一度に最大20枚までアップロードすることが可能です。
PNG・JPG(JPEG)どちらの形式にも対応。
自動圧縮が完了したら「Download all」から一括保存できます。
Optimizillaで圧縮した画像をTinyPNGで再度圧縮した場合は、10～40％ほどはファイルサイズを縮小できる感じですね。
ブログの画像「圧縮前」と「圧縮後」の違い
ここでは一例として、JPG形式の風景画像(横700px縦466px)を圧縮しましたが、
- オリジナル：103KB
- １段圧縮時：58KB(‐44％)
- ２段圧縮時：38KB(‐35％)
という結果になりました。
つまり、オリジナルのままブログにアップするときと比べて、約80％もファイルサイズを縮小することに成功しています。
たった１枚の画像でこの差ですから、これから100枚・1,000枚と増えることを想像すると、画像圧縮の重要性が理解できますよね。
ここで実際に圧縮した画像も貼っておきます。
▼２段圧縮後の画像▼
このクオリティを見て「粗い画像だなぁ…」と感じるようなら、PNG形式で圧縮するのがいいかと思います。
- BULK Resize：リサイズ＆JPG自動変換
- Optimizilla：自動圧縮ツール①
- TinyPNG：自動圧縮ツール②
【アップ後】WordPressで圧縮済み画像を軽量化する方法
ここでは、ブログで使用する画像を事前に圧縮した後、WordPressにアップロードするときに軽量化する方法をご紹介します。
方法としては、WordPressの圧縮プラグインを導入する簡単なものです。
- EWWW Image Optimizerで自動圧縮
- Compress JPEG & PNG imagesで自動圧縮
※２つのプラグインの併用はできません。
それぞれ解説していきますね。
EWWW Image Optimizerプラグインで圧縮する方法
- アップロード時の自動圧縮で最適化できる
- 既存の画像も一括圧縮できる
- 圧縮できる画像枚数は無制限
- WordPressサーバーに負荷がかかる
EWWW Image Optimizerは最もメジャーな画像圧縮プラグインで、有効化するだけですぐに使えます。
詳しい設定に関しては、プラグイン内の「Basic」設定で、「Remove Metadata」にチェックが入っているか確認。
「Convert」設定で「コンバージョンリンクを非表示」にチェックするだけです。
これは画像最適化のときに、PNG⇒JPGやJPG⇒PNGのような自動変換機能を無効にする目的があります。
これだけで今後ブログに画像をアップしたときには、自動的にプラグインが動作して圧縮・最適化してくれます。
既存の画像に関しては、WordPressメニューの「メディア」⇒「一括最適化」で、すべて圧縮することができます。
EWWW Image Optimizerは、圧縮済み画像をアップするとまったく削減できない場合もあります。
また、WordPresssサーバーで直接処理を行うので負荷がかかり、実質的にはサイトが軽くなるわけではありません。
Compress JPEG & PNG imagesプラグインで圧縮する方法
- アップロード時の自動圧縮で最適化できる
- 既存の画像も一括・個別圧縮できる
- 無料で圧縮できるのは月500枚まで
- WordPressサーバーの負荷を軽減できる
Compress JPEG & PNG imagesは、少し設定に手間がかかりますが自動圧縮に加えて、WordPresssのサーバー負荷も軽減できる特徴があります。
ブログを最適化する意味においては、こちらのプラグインの方が効果的と言えますね。
設定方法は、プラグインをインストール＆有効化して、WordPresss画面上部のリンクから名前とメールアドレス入力後に『Register Account』をクリック。
入力したアドレス宛に届く、メール内に記載された『Activate your account』をクリック。
これで月間500枚までは、アップロード時に自動圧縮してくれます。
ただ、プラグインの設定で「Image sizes」の項目を必ず確認しておいて下さい。
「Thumbnail」「Medium」「Large」はWordPresssのデフォルトサイズで、その他は使用テーマによって違います。
このチェック項目が多くなると、毎月圧縮できる画像枚数が減少します。
例えば２項目にチェックすると、月間最大250枚までとなります。
個人的にはオリジナルサイズしか使用しないので、「Original image」だけでも十分効果がありますね。
また、700pxまでの画像しか作成しないなら、それ以上のサイズは生成されないのでチェックする必要はありません。
実際にプラグインで圧縮する前と後の変化も見てみましょう。
先ほど２項目にチェックしていたサイズはしっかり圧縮されています。
300px程度の「Medium」などはファイルサイズが小さいので、圧縮をそれほど意識する必要はありません。
また、オリジナル画像が大きすぎると不要なサイズまで生成されてしまうので、この辺も意識して画像を作成しましょう。
このプラグインはWordPresssメニューの「メディア」⇒「Bulk Optimization」で、一括圧縮できますが月間上限をすぐ越えてしまいます。
そこで「メディア」⇒「ライブラリ」から、画像右側にある「Compress」で個別圧縮を行うことが可能です。
まとめ：手間はかかるがブログの画像圧縮は必要不可欠！
- 画像の横幅は700px～800pxあれば十分
- 保存形式はPNGよりJPGの方が軽量
- JPGは画像圧縮すると劣化しやすい
- ファイルサイズは圧縮済みで70KB以下が目安
私のブログではすでに3,800枚以上の画像がありますが、初めからしっかり圧縮できていたわけじゃありません。
というよりも、ここまで意識するようになったのは結構最近になってからです…
これだけ画像があると、イチから修正するのも一苦労ですね。笑
ブログの画像圧縮は、できるだけ早めに取り組むに越したことはありません。
ブログ初心者の頃は、もっと他のところで手一杯になるのでなかなか意識するのも難しいですが、読み込み速度に関わってくるので重要なポイントです。
もし、まだ取り組まれていない方は、さっそく画像圧縮ツールを使ってサイトの軽量化を進めていきましょう！
- BULK Resize：リサイズ＆JPG自動変換
- Optimizilla：自動圧縮ツール①
- TinyPNG：自動圧縮ツール②
- EWWW Image Optimizer：圧縮プラグイン
- Compress JPEG & PNG images：圧縮プラグイン
▼こちらも合わせてどうぞ▼
