レンタルサーバー

【画像圧縮】プラグインを入れてサイトを高速化する方法を紹介

2021-08-23

こんにちは、高校生ブロガーのNaokiです。

 

今回は、下記の疑問を解決します。

  • 簡単にできるサイトの高速化
  • 無料でできる画像の圧縮方法

 

下記のことを本記事では解説していきます。そこまで難しくないので、ぜひ最後まで目を通してみてくださいね。

  • サイトの軽量化は読み込み速度にどう影響するか
  • 画像の圧縮方法4つ紹介
  • 記事のまとめ
記事執筆時点(12/6)のGoogle PageSpeed Insightsのスコアをお見せします。
なおき

 

パソコンのPageSpeedスコア
12:7PageSpeed パソコン

 

モバイルのPageSpeedスコア
12:7PageSpeed モバイル

導入しているプラグインが気になる方は『AFFINGERに入れておくべきプラグイン7コ』をチェックしてください。記事を読むことで、画像圧縮の方法が4通り理解できるようになります。

 

結論を先にお伝えすると、画像の圧縮方法は下記の4つ

メモ

  • Tiny JPGを使って、png / jpegのサイズ削減
  • pngからjpegに変換して画像サイズを減らす
  • 次世代画像フォーマットWebPを利用
  • サルカワ道具箱でWebP画像に変換する

 

サイトの読み込み速度が測定できるWebサイト

 

僕は記事の投稿から1年経った今でも、上記の2サイトを活用しています。サイトのツールは結構長く使うことになるので、ブックマークしてブラウザに保存することを推奨します。

 

サイトの軽量化はどう読み込み速度に影響するのか?

サイトの軽量化をするには、画像の圧縮や次世代フォーマットへの対応は欠かせません。

 

実際Googleも画像の最適化が重要だと主張しています。

画像は、ページをダウンロードする際のデータ量の大部分を占めることがよくあります。そのため、画像を最適化するとデータ量が大幅に減ってパフォーマンスが改善することが少なくありません。ブラウザがダウンロードしなければならないデータ量が減るほど、クライアントの帯域幅の競合が少なくなり、ブラウザでコンテンツをダウンロードして画面に表示するまでの所要時間を短縮できます。
引用元:画像を最適化する

 

ぼくも、画像を軽量化してから記事の表示速度が早くなりました。実際の記事で表示速度を数えてみると、(軽量化前)5秒〜10秒→(軽量化後)2〜3秒という結果でした。
なおき

 

画像圧縮をすべての記事に適応した結果、サイトの読み込み速度は以下のようになりました。

GTmetrixの結果

画像の軽量化した画像(サルカワ道具箱を使用)

画像の軽量化をする前の画像(未加工)

GTmetrixの結果

画像を軽量化するだけでも、サイトの読み込み速度は大幅に改善します。次は具体的な画像の圧縮方法を紹介しますね。

 

画像を使ってサイトの軽量化をする方法

結論から言うと、画像の軽量化方法は一つではありません。画像の軽量化方法は下記の4つ

メモ

  • 圧縮ツールを使って画像サイズを削減する
  • pngからjpegに拡張子を変更
  • 次世代画像フォーマットに対応させる
  • pngやjpegをwebP画像に変換して軽量化

それぞれ4つの方法は各見出しで書いていきます。

 

4つの画像軽量化の中でも、次世代画像フォーマットへの対応は効果が高いです。実際、Google Developersにも下記の記載があります。

WebPのロスレス画像は、PNGと比較して26%のサイズ縮小が可能です。WebPのロスレス画像は、同等のSSIM品質指数で同等のJPEG画像と比較して25~34%小さくなります。
引用元:Web用の画像フォーマット

そのため、画像を軽量化したい場合はWebPフォーマットを使いましょう。

 

その①:Tiny JPGを使って画像を軽くする

Tiny JPGというサイトを使って、画像のサイズを削減する方法があります。圧縮化方法は、ページ上の「Drop your WebP, PNG or JPEG files here!」に画像を持っていくだけでOKです。

 

後は、download allをクリックするだけで完了。

僕の体感だと、画像は元のサイズより、40〜60%削減できますね。Tiny JPGで圧縮された画像を見ても、正直粗さは分かりません。プラグインを入れなくても画像圧縮したい方は、Tiny JPGがオススメです。

 

その②:pngをjpegに変換してさらに画像を軽量化

Tiny JPGなどで圧縮したpngをjpegに変換すると、さらに軽量化できます。やり方は、pngファイルを「名前を変更」→「.」の後をpngからjpegに書き換えるだけ。

 

ファイル拡張子の変更は、WindowsとMacでやり方が違うため、注意が必要です。jpegは拡大すると画像が少し荒くなるので、記事によっては注意が必要です。

 

画像が劣化してしまうため、僕は使っていません。

 

その③:次世代画像フォーマットに対応させる

次世代画像フォーマットWebPに対応させると、サイトの読み込み速度・画像の軽量化ができます。標準のWordpressだとWebPに対応してないため、プラグインを使う必要がありますよ。

 

 

僕のサイトでもWebP Expressを入れてますが、サイトの表示速度が高速になりました。結構オススメなプラグインです。サイトの次世代画像フォーマット対応もPageSpeed Insightsでは項目に入っている要素です。

 

 

その④:サルカワ道具箱でPNG・jPEGをWebP画像に一括変換

WebP Expressを導入した後にしておくと良いでしょう。今回はサルカワの道具箱内のPNG/JPEGをWebP画像に一括変換を使用します。PNGやJPEGをWebPに変換する方法は、WebP画像に一括変換にアクセス→画像をドラック&ドロップ→変換した画像をダウンロード

 

»サルカワ道具箱|WebP画像に一括変換

 

最後に:サイトは画像を使って軽量化しよう

さて今回は4つの画像圧縮・軽量化方法を紹介しました。記事を読むことで、サイトの画像軽量化方法について深く理解できたと思います。4コ紹介しましたが、その3とその4が利用できればOKです。

 

一度覚えれば、次世代画像フォーマットのWebP対応とPNGやJPEGのWebP変換は、これから先に役立ちますよ。PageSpeed Insightsのスコアも大幅にアップするため、メリットは大きいです。

 

今回は、4つの画像圧縮方法を紹介しました。

  • Tiny JPGを使って、pngやjpegのサイズ削減
  • pngをjpegに変換してサイズを減らす
  • 次世代画像フォーマットを利用
  • サルカワ道具箱でWebP画像に変換

 

サイトの軽量化関連の記事

  • この記事を書いた人
  • 最新記事

なおき|Z世代ブロガー

副業フェスティバルでは、スキルを習得するためのお手伝いをしています。プログラミング学習、Webデザイン学習、ブログ運営など、これからのWeb時代を生き残れるような発信を心がけてます。

18歳のブロガー|シドニーに留学中。16歳の時にNoteを始める→900本近くの記事を投稿。趣味は新しい知識を習得すること。

-レンタルサーバー
-,

/* LazyLoad for google adsense */