- なぜ画像の軽量化が必要なのか？
次世代画像フォーマット「WebP」とは？
Converter for Mediaの使い方
以上のような内容でお伝えしていきます。
なぜ画像の軽量化が必要なのか？
そもそもなぜ画像の軽量化が必要なのかという点に疑問を抱いている方もいるかと思います。
その理由としては画像の容量が大きいとサイトの表示スピードが遅くなってしまうからです。
サイトの表示スピードがどれくらいなのかは以下のサイトで確認することが出来ます。
画像について何も対策を施していなければ、改善項目において
- 適切なサイズの画像
- 次世代フォーマットでの画像の配信
以上の2点においてパフォーマンススコアが低くなっているかと思います。
ブログ更新を続けていると画像はどんどん増えていきますので、サイズを圧縮して読み込みに時間が掛からないようにするべきなのです。
画像圧縮の方法は主に以下の2通りです。
- 画像圧縮サイトを利用する
- プラグインを利用する
画像圧縮サイトを利用する
TinyPNGという画像圧縮サイトを利用します。
使い方はとっても簡単です。
それではTinyPNGにアクセスしてみましょう。
笹の葉を食べているパンダの右隣に「Drop your WebP, PNG or JPEG files here!」と書かれている場所があります。
ここに圧縮したい画像をアップロードします。
画像は一度に20枚までアップロードすることが出来ます。
画像圧縮が完了すると以下のような画面が表示されます。
一枚づつダウンロードする場合は、各画像ファイルの右側に表示されている「download」をクリックします。
「Save to Dropbox」をクリックすると圧縮した画像を一括でドロップボックスに保存できます。
「Download all」をクリックした場合はzipファイルでダウンロードされます。
プラグインを利用する
画像圧縮が出来るプラグインはいくつかありますが、最も有名なのは「EWWW Image Optimizer」というプラグインです。
アップロードした画像を自動的に圧縮してくれる優れもののプラグインのため、僕も利用していたのですが、EWWW Image Optimizerでは次世代画像フォーマット「WebP」に対応させるためには多少複雑な設定が必要となります。
出来れば画像は全てWebPに対応させて、PageSpeed Insightsでの「次世代フォーマットでの画像の配信」という項目をクリアさせたいと思い、設定も非常に簡単な「Converter for Media」というプラグインに差し替えました。
というわけで本記事ではConverter for Mediaで画像を軽量化する方法について解説していきたいと思うのですが、「WebPとはなんぞや？」という方もいらっしゃるかと思いますので、次項にて簡単に解説させていただきます。
次世代画像フォーマット「WebP」とは？
従来の画像フォーマットといえば、「JPEG」、「PNG」、「GIF」が主流でしたが、さらなる画像軽量化を目指して「次世代フォーマット」と呼ばれる画像形式がいくつか登場してきています。
中でも今後主流となっていくであろうと予想されているのがGoogleが開発した「WebP」と呼ばれる画像フォーマットです。
圧縮率が高く、画像劣化も少ないということでWordPressではJPEGを利用する方が多いかと思いますが、WebPは画像品質についてはJPEGとほぼ変わらずにさらに30％程度圧縮して画像を扱うことが出来るのです。
つまり、WebPの特徴を一言で表すとすれば超軽量なのに高品質！ということになります。
これほど優秀な画像フォーマットであれば今すぐにでも利用するべきと言えるのですが、実はWebPについてはすべてのブラウザが対応しているわけではないのです。
主要ブラウザではすでに対応済の場合が多いのですが、未対応のブラウザではWebP画像は表示されない不具合を起こしてしまいます。
とはいえPageSpeed Insightsでの「次世代フォーマットでの画像の配信」という項目をクリアするためにはWebPを利用したい・・・、なにか良い方法はないものか・・・というジレンマを解消してくれるのがConverter for Mediaというプラグインなのです。
Converter for Mediaは、
- 対応ブラウザではWebPを表示
- 未対応ブラウザでは元形式の画像を表示
このように自動的に画像を使い分けてくれる非常に優れもののプラグインなのです。
さらなる画像軽量化≒サイトスピードの向上を目指すのであればぜひとも導入しておきたいプラグインと言えます。
Converter for Mediaの使い方
Converter for Mediaの特徴については先程も少し触れましたが、おさらいすると以下のような感じです。
- 対応ブラウザではWebPを表示
- 未対応ブラウザでは元形式の画像を表示
- 画像アップロード時に自動でWebPに変換
- 既存の画像も一括でWebPに変換可能
それではConverter for Mediaを実際に導入していきましょう。
Converter for Mediaのインストール
ダッシュボードの「プラグイン」→「新規追加」と進み、検索窓に「Converter for Media」と入力します。
「今すぐインストール」をクリック、さらに「有効化」をクリックします。
以上でConverter for Mediaのインストールは完了です。
Converter for Mediaの設定
Converter for Mediaをインストールしたら、ダッシュボードのメニュー「設定」→「Converter for Media」と進みます。
すると設定画面が表れますので適宜設定を行ってください。
設定画面はすべて英語表記となっていますので、翻訳すると分かりやすいかと思います。
基本的にはデフォルトのままで良いかと思いますが、本サイトでの変更箇所を載せておきますので参考にしてください。
「General Settings（一般設定）」の「List of supported directories」のみ変更しました。
デフォルトでは変換対象のディレクトリは「/uploads」のみとなっていますが、「/themes」にもチェックを入れてテーマ内の画像も変換対象となるようにしました。
設定を変更したら、「Save Changes」を忘れずにクリックするようにしましょう。
既存画像の一括変換
設定画面の一番下に「Bulk Optimization of Images（画像の一括最適化）」という項目があります。
アップロード済みの画像を全てWebPに変換する場合は一番下の「Start Bulk Optimization（一括最適化を開始）」をクリックします。
これで画像は全てWebPに変換することができました。
あとがき
Converter for Mediaを導入して、画像を全てWebPに変換した後にPageSpeed Insightsで改めて検査をしてみたら、「合格した監査」という項目に「次世代フォーマットでの画像の配信」が載るようになりました。
サイトスピード向上には確実に効果ありと言えますので、画像関係でサイトスピードが遅いと感じているのであればConverter for Mediaは非常におすすめできるプラグインだと言えます。