WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

アップロード済みの画像を軽量化して入れ替える方法(PageSpeed Insightsのスコア改善策)

公開日:2021(令和3)年7月5日/最終更新日:

,
WordPressに関する情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressを使っているサイトでのPageSpeed Insightsのスコア改善と言えば、

  • 時間のかかるスクリプトやCSSの読み込みを最適化する(レンダリングブロック対策)
  • 画像の表示サイズを変更する(適切なサイズの画像)
  • Core Web Vitalsの指標で指摘されている項目の改善
  • ウェブキャッシュやブラウザキャッシュの使用
  • ページそのものをキャッシュする

といったことが主なところでしょう。そしてそれらを改善できそうなプラグインもたくさんリリースされています。

しかしながらそれらの効果は限定的で、あまりスコアの改善がみられなかったり、不具合や不都合が起きて何かが正常に表示されない、動作しないということが起こる場合もあります。

上記のアプローチでPageSpeed Insightsのスコア改善を目論んで挫折した方は、実は肝心なことを忘れているのかも知れません。それは、訪問者がアクセスしたときに快適に表示されるかどうかということです。

そして、快適に表示されるため根本的に考えるべきは、ページをパソコンやスマホへ転送する容量はどうか?ということに他なりません。また、容量のほとんどはページ内に挿入されている画像や動画などのコンテンツであることも間違いありません。

試しに画像の全くない投稿を1つ用意して、PageSpeed Insightsのスコアを確認してみてください。同じ対策をしていても結構よいスコアが得られると思いますがいかがでしょうか?

ただ、WordPressは、プログラム内部では画像に対して「ID」という固有番号を設けて管理したり、アップロード時に複数の画像を生成したりしていますので、容易にアップロード済画像の入れ替えを行うことができないようになっています。

人海戦術で行うなら、最適化した画像を再び新規にアップロードして、1つ1つの投稿や固定ページを確認しながら入れ替えるというのが妥当なところですが、面倒で仕方ありませんよね?

そこで今回は、新しくアップロードではなく、便利なプラグインをいくつか使って、一度サイトへアップロードした画像を効率よく入れ替える方法を紹介します。人海戦術と比べれば、本当に簡単に入れ替えできますよ!

今回の記事内容について、具体的には、以下の手順でサイト内画像の軽量化をしていきます。

  1. アップロード済の画像をダウンロードする
  2. ダウンロードした画像を再最適化(軽量化)する
  3. 軽量化した画像をサイトへ戻す(入れ替える)

サイト・サーバーの環境によっては正常に入れ替えができない場合がありますので、万が一に備え、サイトを復元できる形でバックアップを取る、テストサイト等で試すなど、大切なサイトに不具合が発生しても対処できるようにしてから進めてください。

WordPressサイトへアップロード済の画像を入れ替える手順

0.【前準備】元画像のサイズを確認・変更する

後ほど紹介するツールを使った画像の縦横サイズ変更でも問題なく容量ダウン可能ですが、サイトから画像をダウンロードする前にメンテナンスできていたらより効率よく入れ替えができます。

画像の縦横サイズの変更は以下の手順で行えます

  1. メディア一覧から目的の画像の「編集」をクリックする
  2. 編集画面の画像下にある「画像を編集」をクリックする
  3. 画像縮尺の欄で縦または横のサイズを指定する(自動で縦横比が計算されます)
  4. 「縮尺変更」をクリックする
  5. 画面右下の「更新」をクリックする

4の手順を忘れると画像サイズは変わりませんので注意してください

下図は上記3の画面例です

アップロード済みの画像を軽量化して入れ替える方法(PageSpeed Insightsのスコア改善策)|Knowledge Base

画像は縮尺変更をした後に更新をクリックする前の段階です。更新をクリックするとボタン上のファイルサイズ・サイズが変わりますから、画像の大きさを変更するだけでどの位ファイルサイズが節約できたかが分かると思います。

ただ、画像の縦横サイズは上記1を行わないとできないので、メディア一覧から1つ1つ編集をクリックして..というのは面倒ですから、一覧上で分かるように情報表示させると便利です。

簡単なコードで実装できますので、以下の記事を参考に行ってください。

もちろん、この手順をスキップし、後述するツールを使ってのサイズ変更を行っても差し支えありませんから、やりやすい方法で行えばOKです。

一覧のファイル名末尾に「-scaled」という文字列が付加されている画像は、巨大な画像がアップロードされた際にWordPressが長辺側2560pxへ縮小した画像を追加し、「full」サイズの画像の代替として使用するものですので、「-scaled」がついた画像を編集で縮小しても元画像のサイズは縮小されず、作業が意味のないものとなりますのでご注意ください

1.サイトへアップロード済みの画像をダウンロードする

まずは、サイト内へ既にアップロードし、投稿などに使っている画像をパソコンへ保存(ダウンロード)します。

方法として真っ先に頭に浮かぶのが、FTPクライアントツールを使う方法。もちろんその方法でも入手は可能なのですが、FTPを使うと、生成されている複数サイズの画像も一緒にダウンロードされてしまうので、オリジナル画像を探すのがとても面倒になります。

そこでおすすめするのが、「Export Media Library」というプラグイン。

このプラグインの便利なところは、オリジナルの画像だけを一括でダウンロードできる点。FTPで行った場合のわずらわしさが解消されます。

具体的なダウンロードの方法は、上のリンク先ページにて、画像付きで詳しく紹介していますので参照ください。

サイトのメディア設定で「アップロードしたファイルを年月ベースのフォルダーに整理」にチェックを入れている場合には、階層構造を維持したままダウンロードすると、より画像が探しやすくなります。

ダウンロードしたら解凍しておきましょう。

2.ダウンロードした画像を再最適化(軽量化)する

画像の加工を行う前に・・・

ここから紹介する方法で画像を最適化後、次項の手順で画像を入れ替えると、当然ながら元の画像は最適化したものになります。元の画像を残したい場合は、前項でダウンロードしたファイルを複製し、オリジナルとしてどこかに退避させて保存するようにしてください。

画像を軽量化していきます。ポイントは以下の3つです。

  1. 画像ファイルの容量(ファイルサイズ)を減らす
  2. 必要な大きさの画像にする
  3. 画像の形式をJPEG形式にする

まず画像の容量を減らすため、オンラインツールを使います。おすすめはFree Online Image Compressorです。ページを開いて画像を選択するだけで、軽量化してくれます。軽量化した画像は元の画像に上書きしてしまえば戸惑うことがありません。これを行うだけで、画像の容量が1/4程度になる場合がありますからかなり効果的です。

次に画像の大きさ(縦横の寸法)を適正なものへ変更します。ページ内で一番広い幅(一般的には本文の幅)へ変更しましょう。この作業もオンラインツールで簡単にできます。おすすめはILoveIMGです。容量削減の時と同様、サイズ変更したものは上書き保存しましょう。この作業もかなり効果的です。

テーマの機能やプラグインを使ってAMPページを生成している場合には、幅1200px以上の画像を使わないとAMPエラーとなりますので注意してください。

最後にpng形式など重たい形式の画像をjpeg形式へ変換します。と言いたいところですが、次項の画像入れ替え時にトラブルが起きますので、本記事ではおすすめしません。もしも行うのであればオンラインツールのPNGtoJPGあたりを使うとよいでしょう。

3.軽量化した画像をサイトへ戻す(入れ替える)

「Enable Media Replace」というプラグインを使って入れ替えを行います。

使い方は以下のリンクページで詳しく紹介していますので参照いただければ大丈夫でしょう。

リンク先ページでも書かせていただいていますが、拡張子の違う画像ファイルを入れ替えると、入れ替えに失敗する、入れ替えた画像が全く表示されないといった不具合が発生しますのでご注意ください。

画像圧縮プラグインを使用しているときは

アップロードした画像をサイト内で最適化したり、WebP形式の画像を追加して表示分けをしたりするプラグインを使われている場合、ほとんどのプラグインで画像をアップロードした時という最適化のトリガー(きっかけ)が効きません。

従って、画像を入れ替えただけでは、最適化プラグインによる再最適化は行われず、以前の画像に対して最適化したままのものになってしまいますから、画像入れ替え後は再最適化を手動で行う必要があります。

QA AnalyticsQA Analytics

本記事の更新(変更)履歴

更新日更新内容
2021年7月5日アップロード済みの画像を軽量化して入れ替える方法(PageSpeed Insightsのスコア改善策)を公開しました
2021年7月14日サイトの管理画面上で事前に画像の大きさを調整する方法を追記しました
2021年7月16日「-scaled」画像についての説明を追加しました