こんにちは、高校生ブロガーのNaokiです。
今回は、下記の疑問を解決します。
- 簡単にできるサイトの高速化
- 無料でできる画像の圧縮方法
下記のことを本記事では解説していきます。そこまで難しくないので、ぜひ最後まで目を通してみてくださいね。
- サイトの軽量化は読み込み速度にどう影響するか
- 画像の圧縮方法４つ紹介
- 記事のまとめ
パソコンのPageSpeedスコア
モバイルのPageSpeedスコア
導入しているプラグインが気になる方は『AFFINGERに入れておくべきプラグイン7コ』をチェックしてください。記事を読むことで、画像圧縮の方法が4通り理解できるようになります。
結論を先にお伝えすると、画像の圧縮方法は下記の4つ
メモ
- Tiny JPGを使って、png / jpegのサイズ削減
- pngからjpegに変換して画像サイズを減らす
- 次世代画像フォーマットWebPを利用
- サルカワ道具箱でWebP画像に変換する
サイトの読み込み速度が測定できるWebサイト
僕は記事の投稿から1年経った今でも、上記の2サイトを活用しています。サイトのツールは結構長く使うことになるので、ブックマークしてブラウザに保存することを推奨します。
サイトの軽量化はどう読み込み速度に影響するのか？
サイトの軽量化をするには、画像の圧縮や次世代フォーマットへの対応は欠かせません。
実際Googleも画像の最適化が重要だと主張しています。
画像は、ページをダウンロードする際のデータ量の大部分を占めることがよくあります。そのため、画像を最適化するとデータ量が大幅に減ってパフォーマンスが改善することが少なくありません。ブラウザがダウンロードしなければならないデータ量が減るほど、クライアントの帯域幅の競合が少なくなり、ブラウザでコンテンツをダウンロードして画面に表示するまでの所要時間を短縮できます。
引用元：画像を最適化する
画像圧縮をすべての記事に適応した結果、サイトの読み込み速度は以下のようになりました。
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の詳細
僕のサイトでもWebP Expressを入れてますが、サイトの表示速度が高速になりました。結構オススメなプラグインです。サイトの次世代画像フォーマット対応もPageSpeed Insightsでは項目に入っている要素です。
その④：サルカワ道具箱でPNG・jPEGをWebP画像に一括変換
WebP Expressを導入した後にしておくと良いでしょう。今回はサルカワの道具箱内のPNG/JPEGをWebP画像に一括変換を使用します。PNGやJPEGをWebPに変換する方法は、WebP画像に一括変換にアクセス→画像をドラック&ドロップ→変換した画像をダウンロード
最後に：サイトは画像を使って軽量化しよう
さて今回は4つの画像圧縮・軽量化方法を紹介しました。記事を読むことで、サイトの画像軽量化方法について深く理解できたと思います。4コ紹介しましたが、その3とその4が利用できればOKです。
一度覚えれば、次世代画像フォーマットのWebP対応とPNGやJPEGのWebP変換は、これから先に役立ちますよ。PageSpeed Insightsのスコアも大幅にアップするため、メリットは大きいです。
今回は、4つの画像圧縮方法を紹介しました。
- Tiny JPGを使って、pngやjpegのサイズ削減
- pngをjpegに変換してサイズを減らす
- 次世代画像フォーマットを利用
- サルカワ道具箱でWebP画像に変換
サイトの軽量化関連の記事
