簡単に出来る画像圧縮方法が知りたいな…
こんな疑問にお答えします。
【本記事の内容】
- ブログの画像を圧縮する必要性
- ブログの画像圧縮方法
- ブログの画像圧縮するときの注意点
- すでに使用している画像の重さを確認する方法
ブログでは「アイキャッチ画像」や「見出し下の画像」など画像を使う機会が多いです。
ですが使う画像をそのまま使ったりはしてないですよね？
もし圧縮もせず使っていると画像容量が多くなり、サイトの表示スピードが遅くなる原因となります。
「サイトの表示スピードなんて遅くなっても問題ないでしょ？」
とお考えのあなたは要注意！！
サイトの高速化はSEO対策に欠かせない項目の1つだからです。
目次
ブログの画像を圧縮する必要性
【ブログの画像を圧縮する必要性】
- ブログの表示速度が遅くなる
- 離脱率が上がる
それぞれについて解説します。
ブログの表示速度が遅くなる
以下のような経験はないでしょうか？
- サイトになかなか繋がらない
- 画像が読み込めない
ページがサクサク切り替わらない状態です。
ブログの表示速度が遅くなるとユーザーにとってはとても不便で、不満に感じるユーザーは46％にもなるそうです。
ブログの表示速度は速いに超したことはありませんよね。
離脱率が上がる
サイトへ繋がる時間として、何秒なら耐えられますか？
Webの世界では数秒の差でも致命的で、「読み込み速度が3秒以上かかると40％のユーザーが離脱する」と言われています。
またマーケティング会社の調査結果によると、サイト表示速度が1秒遅くなると以下のような悪影響が出るとしています。
【サイト表示が1秒遅くなるデメリット】
- PV（ページビュー）が11％減少
- CVR（コンバージョン）が7％減少
かなり痛手になることがわかります。
ブログの画像圧縮方法
【画像圧縮手順】
- リサイズする
- 画像圧縮する
では、具体的な画像圧縮方法について解説します。
①画像をリサイズする
画像はリサイズするだけでも圧縮できます。
リサイズツールのおすすめは、「BULK RESIZE」。
操作も簡単でとても便利です。
リサイズとは？
画像の大きさを変更する事。（拡大や縮小）
実際にリサイズするとどれくらい圧縮されるのかというと、「2560×1440」が「1200×800」にリサイズした結果が以下になります。
今回の場合リサイズをすれば、「185.7KB」が「105.71KB」と43％圧縮できました。
ブログでは基本的に横幅は1200px以上は必要ありませんので、リサイズして少しでも容量を減らしていきましょう。
では、具体的なリサイズ手順を解説します。
＜STEP1＞BULK RESIZEにアクセス
赤枠内に画像をドラッグ&ドロップ。
＜STEP2>画像幅を1200pxに設定
- メニューから「幅」をクリック
- 画像寸法に「1200」と入力
- 「スタートリサイズ」をクリック
＜STEP3＞容量を確認
以上でリサイズ完了です。
＼リサイズにおすすめ／
②画像圧縮ツールを使用
画像圧縮ツールのおすすめは、「TinyPNG」です。
理由は操作が簡単だから。
操作方法は以下の通りです。
＜STEP1＞TinyPNGにアクセスする
赤枠内に画像をドラッグ&ドロップ。
複数枚同時に圧縮できるので便利です。
＜STEP2＞圧縮したい画像をダウンロードする
「すべてダウンロード」をクリック。
※Googleクロームの場合は英語が翻訳されて上記のような日本語で表記されるのでわかりやすくておすすめです。
もし翻訳されない場合は「Download all」ボタンをクリックしてください。
以上で画像圧縮完了です。
今回の画像では、「2.0MB」⇒「480.7KB」と76％圧縮できました。
画像にもよりますが、これだけでおおよそ20～70％程度、容量を減らすことが可能です。
＼画像圧縮におすすめ／
ブログの画像圧縮するときの注意点
文字を入れる時はPNG形式
画像に文字を入れてアイキャッチ画像を作成する場合は「PNG形式」での圧縮をおすすめします。
理由は「JPG形式」だと画質が荒くなり読みにくくなるから。
「PNG形式」は「JPG形式」より高画質なので文字が見やすくなります。
大きい文字であればいいのですが、小さい文字の場合は特に見にくいので注意が必要です。
記事タイトルを画像にいれる程度の大きさであれば、正直全く問題はありません。
例として「PNG形式」と「JPG形式」の画像を比較してみましょう。
＜PNG形式：469KB＞
＜JPG形式：186KB＞
いかがでしょうか？
アイキャッチ画像くらいであれば何ら問題はありません。
小さい文字を使うときだけは「PNG形式」、それ以外は「JPG形式」で圧縮するようにしましょう！
プラグインで圧縮する場合はデメリット理解して使おう
WordPressの場合はわざわざ画像圧縮をしおなくても、プラグインで画像を圧縮してくれる便利な機能があります。
【画像圧縮のプラグイン】
- EWWW Image Optimizer
- ShortPixel Image Optimiaer
- Imsanity
- Smush
上記のプラグインを入れておけば、画像をアップロードした時に自動で圧縮されます。
大変便利ですが、もちろんデメリットもあります。
- プラグインが増える
- 画像圧縮ツールより圧縮率が低い
プラグインを入れすぎると、サイト速度低下やセキュリティの低下などいいことはありません。
また画像圧縮ツールの方が圧縮率が高いので、手間かもしれませんがプラグインより画像圧縮ツールの方がおすすめです。
すでに使用している画像の重さを確認する方法
これまでの画像を圧縮しないで使用されていた方や画像圧縮したものとしていないものの区別がつかないと悩まれている方もいるでしょう。
そんなときは「Googleアナリティクス」で簡単に調べることができます。
詳しく解説しますね。
①Googleアナリティクスにアクセス
まずは、「Googleアナリティクス」にアクセス
②「行動」⇒「サイト速度」⇒「速度についての提案」をクリック
画面左側のメニュー画面より「速度についての提案」をクリック。
③ページスピードスコアを確認
ページ別に「Page Speed スコア」が表示されます。
目安としては、スコア（赤枠内の数値）が50以下の場合は「低速」と判断。
スコアが50以下のページで使用する画像を圧縮すれば、サイトを高速化できすよ！
画像圧縮のまとめ
本記事では、画像圧縮について解説してきました。
- リサイズする
- 画像圧縮する
- 重いページはGoogleアナリティクスで確認
正直に言えば、そのまま画像を投稿した方が楽ですね。
ですがその一手間がSEOでは効果的で、ユーザビリティも向上させることができます。
サイトの表示速度を速めて離脱率を下げるためにも、「リサイズして画像圧縮する」ようにしましょう！
