効率的な画像フォーマットにする画像圧縮法【初心者の速度対策】

効率的な画像に圧縮する方法アイキャッチ SEO検索対策

効率的な画像フォーマットてどういうこと?

PageSpeed Insights で「効率的な画像フォーマットにする」とアドバイスが出たら、画像を圧縮しましょう。

Web上では、通常それほどキレイな画面でなくてもOK。

逆に高画質な画像を使うとムダに重くなり、表示されるまで時間がかかりってしまうのです。

プラグインを使って画像を圧縮すれば、簡単に容量を小さくできますよ。

効率的な画像フォーマットにするプラグイン

おすすめのプラグインは、Compress JPEG & PNG images です。

Compress JPEG & PNG imagesプラグイン

じゅんこ
じゅんこ

パンダが目印!

毎月500枚まで無料で使えます。

つまり普通は無料、ということですね。

【必見】Compress JPEG & PNG images の初期設定

プラグインを有効化したら最初に初期設定を行いましょう。

「setting」ボタンをクリックします。

Compress JPEG & PNG images設定2

1. API の設定

最初にアカウント名とメールアドレスを登録します。

登録後「Register Account」ボタンをクリック。

Compress JPEG & PNG images設定3

すると登録したメールアドレス宛にメールが届きます。

「Log in with magic link」をクリック。

Compress JPEG & PNG images設定4

リンク先に API Keyが表示されます。

コピーして「setting」画面に貼り付けてあげればOK。

2.New image uploads の設定

APIキーを紐づけたら、その他の設定を行います。

「setting」画面の「New image uploads」の一番上にチェックをいれましょう。

これで画像ファイルをアップロードする際、自動で圧縮してくれます。

3.Image Files の設定

「Image Files」で処理する画像ファイルを選択します。

「Original Image」は自分がアップした画像、他の選択肢はWordpressで勝手に作られる画像です。

一番上の「Original Image」にのみチェックをいれておきましょう。

Compress JPEG & PNG images設定

実は、何種類のファイルを選択するかで無料で処理できる枚数が変わってきます。

「Original Image」のみにチェックを入れれば、毎月500ファイルまでタダ。

ですがすべてにチェックをいれると、たった41ファイルになってしまいます。

どれだけの数が無料処理可能か下に数字が出るので、チェックしながら選択してくださいね。

500ファイルも処理不要、という場合は「Large」にもチェックを入れておきましょう。

ちなみに私は最初何も考えず、全部にチェックを入れていました。

すると42ファイル目から圧縮されないままになり、プラグインを入れた効果が半減…

じゅんこ
じゅんこ

ちゃんと読まずボタンを押しちゃうことがありまして。

危険なタイプにゃ。

Compress JPEG & PNG images 導入前のファイル処理

この後は画像ファイルがアップロード時に圧縮されます。

ただし、プラグインを入れる前にアップロードしたファイルは別途処理が必要。

その方法を個別処理と一括処理の2種類あります。

一気に行うのが不安な場合は個別処理、時間短縮したい場合は一括処理をしましょう。

個別処理で画像を圧縮

メディアファイルの右側に「Compress」ボタンが出てくるので、ひとつずつ押して圧縮していきましょう。

下記のような表示になっていない場合は、右上のボタンを押すと表示が切り替わります。

Compress JPEG & PNG images個別処理

一括処理で画像を圧縮

一括処理を行う場合はプラグイン画面より「Bulk Optimization」をクリック。

Compress JPEG & PNG images設定2

「Start Bulk Optimiizatioin」を行うと一括処理スタート。

どれぐらい効果があったかも算出してくれます。

Compress JPEG & PNG images 一括処理オプション2

上限を超えるとTing PNGからメールが来る

なお月の上限数を超えてしまった場合、月末頃にTiny PNG から英語でメールがきます。

件名は “Your compression limit has been reached” ですが、これは「圧縮の制限に達しました」という意味。

tiny png からのメール

「お金払ったら、もっといっぱい使えるよ」といっているだけなので、心配ご無用

プラグインを使う時にクレジットカードの登録も不要なので、勝手にお金が引き落とされたりしません。

ただ、月に500枚も圧縮できるはずが上限に達しちゃうのってオカシイですよね。

設定が間違えているかもしれないので、本記事を参考に [setting]をチェックしてみてくださいね。

じゅんこ
じゅんこ

わたしは設定を間違えていて、このメールがきました。

まとめ

  • Compress JPEG & PNG imagesで画像を圧縮できる
  • 設定によって無料で使える枚数が違うので注意
  • プラグイン導入前の画像は別途処理が必要

画像の圧縮で大分キレイになります。

ただこれだけでは、ページの読み込み速度は万全とはいえません。

ワードプレスの速度を上げる対策はこちらの記事にまとめてあるので、併せて役立ててくださいね。

じゅんこ
じゅんこ

上記ファイルの対策を全て行った結果、わたしのサイトは、PageSpeed Insightsでの計測結果が59点もアップしました。

SEO検索対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

最新版Laravel11用のサポートガイドご用意しています。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました