トレンドはフレンド

画像の圧縮・最適化でページ表示を速くして、サーバーコストを下げる

この記事は約6分で読めます。

よこのじ(@yokonoji_work)です。

Webページで表示するサイズ以上の画像を読み込む場合、それは余計なデータをダウンロードしていることになります。これはページの表示速度低下の原因です。また、データサイズが大きいと、ストレージ容量を大きくしたり、転送負荷に耐えられるサーバーを用意する必要があるなどのハードウェア的なコストにも影響します。画像圧縮すると多くのメリットがありますので、ぜひ利用を検討してください。

画像圧縮サービス

画像の圧縮とは、画像のピクセルサイズを小さくすることではありません。見た目にはわからないレベルで色の数を減らすなどして、データサイズを小さくすることです。この処理は無料のオンラインツールで簡単に行なえます。

今回はこちらのJPEG画像(2,620,791 バイト)を利用して、圧縮によるデータサイズ削減の効果を確認してみました。

image-compression-sample

TinyJPGTinyPNG

PNG、JPEGの画像圧縮をすることができます。パンダでお馴染みのよく紹介されているサイトですね。TinyJPGで圧縮すると2,620,791 バイト -> 972,673 バイトで63%のデータサイズ削減です。

 

Compress IMAGE

2,620,791 バイト -> 1,210,418 バイトで54%の削減です。I Love IMGには、サイズ変更や切り抜き、形式変換を行えるツールもあります。

 

Compress JPEGCompress PNG

Compress JPEGで圧縮すると2,620,791 バイト -> 1,294,679 バイトで51%のデータサイズ削減となりました。クオリティの変更で圧縮具合を調整することもできます。

圧縮前後の画像を比較

今回使用した画像では、TinyJPGで63%も圧縮されました。63%もデータサイズが小さくなってキレイな画像が保てているのか?という品質が気になるところです。しかし、次のとおり見た目にはわからないのでアイキャッチや記事内で説明に使うための画像であれば問題なさそうです。

左:圧縮なし/右:圧縮あり

06-image-compression-圧縮前後比較

フォトグラファーが作品の写真に使うのには向いていませんが、作品の一覧として表示させる画像には圧縮をかけて、リンク先にはフルサイズの写真といった利用は考えられます。

WordPressプラグイン

WordPressの場合でも上記サービスで画像圧縮すれば良いのですが、アップロードするたびに圧縮作業するのは面倒ですし、既にアップロード済みの過去の画像も圧縮するべきなので、プラグインを利用するのが良いかと思います。また、画像圧縮だけではなく、画像の遅延読み込みでページの表示を速くする方法も提案します。

画像圧縮プラグイン

よく知られた画像圧縮プラグインは次の2つになります。

「Compress JPEG & PNG images」は先ほど紹介したTinyJPG/TinyPNGが提供しているWordPressプラグインです。設定・使い方は簡単です。

プラグインをインストールして有効化すると、次のような赤い表示が出てきます。

06-image-compression-登録

このリンク先はアカウント登録画面です。ここでアカウント登録をして、送られてきたメールから認証完了すれば使用可能となります。または、こちらから登録して、取得したAPI Keyを入力するのでもOKです。(設定画面は英語表示なのでGoogle翻訳をしています)

06-image-compression-登録入力

設定は特に変更をしなくても利用できますが、アップロードした画像の圧縮タイミングと圧縮をかける画像サイズは確認しておいた方が良いかもしれません。

06-image-compression-設定

私の場合はバックグラウンドでの圧縮ではなくて、アップロード時に圧縮させています。多少アップロードに時間はかかりますが、アップロード完了時に圧縮されていることが確認できるのでこの設定を選びました。また、無料利用の場合アップロードできる画像は月500枚ですが、圧縮する画像サイズにチェックを入れるほど上限枚数は少なくなります。

以上の設定で新しくアップロードする画像については圧縮されるようになります。

既にアップロードした画像については、2つの方法があります。

  • 画像ごとに圧縮する方法
    メディアライブラリより対象画像を開いて「さらに詳細を編集」->「Compress」
  • 一括で圧縮する方法
    ダッシュボードの「メディア」->「Bulk Optimization」->「Start Bulk Optimization」

「Start Bulk Optimization」ボタンが現れる前にアップグレードしないか?と聞かれるかと思いますが「No thanks, continue anyway」で無視して大丈夫です。

06-image-compression-nothankyou

以上でCompress JPEG & PNG imagesの設定と使い方は終わりです。

EWWW Image Optimizerの使い方については「EWWW Image Optimizer の設定方法と使い方」が分かりやすいです。両プラグインはどちらも同じようなことができるので、お好みの方をご利用ください。

遅延読み込みプラグイン

画像の遅延読み込みプラグインを利用すると、ページ表示時には画像を読み込まずに画像の手前までスクロールしたときに読み込みを行うため、ページの表示速度が速くなります。この手のプラグインとして有名なのは「Lazy Load」ですが、おすすめしたいのは「Unveil Lazy Load」です。

Unveil Lazy Loadは、Lazy Loadなどの遅延読み込みプラグインの改良版といえるプラグインです。ファイルサイズの縮小やBase64の利用により、読み込みが早くなっています。設定は必要なく、インストールして有効化するだけで使うことができます。

なお、こちらの記事にあるように遅延読み込みする場合はGoogle botが画像をクロールできない可能性があるのでSEOへの影響が懸念されます。

WordPress でスクロールにより画像を遅延読み込みするプラグイン Lazy Load

そこでプラグインの編集より、プラグインのファイル「unveil-lazy-load/unveil-lazy-load.php」を編集するのが良さそうです。これによりGoogle botに対しては遅延読み込みが発生せずに画像を取得してもらえます。

変更前:if(is_feed() || is_preview() || $this->is_smartphone()) return $content;
変更後:if(is_feed() || is_preview() || $this->is_smartphone() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot')) return $content;

遅延読み込みライブラリ

プラグインではなく、ライブラリで実装する方法もあります。ライブラリですとjQueryなしで実装することもできそうですね。

 

[toggle title=”参考サイト”]

[/toggle]

タイトルとURLをコピーしました