【WordPress】TinyPNG を用いた画像データ最適化検証

Blog-Thumbnail_WordPress-01 WordPress
2023.07.10

はじめに

前回の記事では、EC2 でのデータ転送量削減についてお話しました。

データ転送量の課金に要注意！【WordPress EC2 無料利用枠】
はじめに こんにちは、KUDs です。現在、AWS EC2 にて WordPress をホストしています。先日、「データ転送量の無料利用枠超過」についてアラートメールを受信しました。今回は、WordPress 利用時の転送量最適化について、...
kuds.blog
2023.07.10

今回は、前回記事でもお伝えした「画像データの最適化」について効果を検証します。

使用するプラグインは、「TinyPNG」です。

なぜ TinyPNG なの？

以下は、WordPress で人気のある画像最適化プラグインです。

  1. EWWW Image Optimizer:
    • このプラグインは、新しくアップロードした画像を自動的に最適化します。
    • 既存の画像も自動的に最適化します。
    • JPEG、PNG、GIFなどの形式に対応しています。
    • 無料版では、サーバー上で画像の圧縮が行われます。
  2. Smush – Lazy Load Images, Optimize & Compress Images:
    • このプラグインも、画像の圧縮と最適化を自動で行います。
    • Smushは、画像の品質をほとんど損なわずに優れた圧縮率を達成します。
    • 画像のリサイズ機能もあります。
    • 無料版では、一度に最大50枚の画像を圧縮することができます。
      また、各画像の最大圧縮サイズが1MBに制限されています。
  3. TinyPNG – JPEG, PNG & WebP image compression:
    • TinyPNG 提供のこのプラグインは、JPEG と PNG 画像を自動的に圧縮します。
    • 画像の品質を維持しつつ、非常に高い圧縮率を達成することで評価されています。
    • 無料版では、1ヶ月に最大500枚の画像を圧縮できます。

私が TinyPNG を選択した理由としては、以下の特徴が魅力的だったからです。

  • 圧縮効果が高い
  • 無料利用時の制限による影響を受けにくい

もちろん、選定時はご自身に適したものを選択してください。

実際に TinyPNG を使ってみる

TinyPNG プラグインをインストールし、アカウントをアクティベート

  1. まず、WordPress 管理画面にログインする
  2. [プラグイン] > [新規追加] を選択する
  3. 次に、「TinyPNG」で検索する
  4. 「TinyPNG – JPEG, PNG & WebP image compression」をインストール・有効化する
  5. [インストール済みプラグイン] > [TinyPNG] > [Settings] を選択する
  6. メールアドレスを入力し、Register する
  7. メールを確認し、アカウントを Activate する
  8. 最後に、WordPress TinyPNG Settings に戻り、アカウントが有効化されていることを確認する

特に難しい作業はありません。
なお、英語での案内のため、苦手な方は適宜翻訳してください。

Bulk Optimization を用いて既存のメディアを最適化する

  1. [メディア] > [Bulk Optimization] を選択し、[Start Bulk Optimization] を押下します

数十秒~数分待てば完了します。

なお、「Bulk Optimization」はメディアライブラリ内の既存の画像を一括で最適化します。
以後、新しく追加される画像はアップロード時に自動的に最適化されます。
つまり、この手順を実施するのは最初の一度きりとなります。

WordPress 管理画面でメディアの最適化結果を確認する

TinyPNG「Bulk Optimization: Available Images / Total Savings」
TinyPNG「Bulk Optimization: Available Images / Total Savings」

ここでは、Total Savings からどの程度最適化されたかを確認できます。

69.3%
savings

118image sizes optimized
4.44 MBinitial size
1.46 MBcurrent size
TinyPNG Bulk Optimization

トータルで 69.3 % のサイズ圧縮がされていますね。

EC2 でメディアの最適化結果を確認する

ファイルそのものがリサイズされているのか気になったので、実機にて before / after をチェックしました。

##### before #####

$ ll /var/www/html/wp-content/uploads/2023/07/
total 4808
5932 aws-architecture-2d.drawio-100x100.png
4566 aws-architecture-2d.drawio-120x68.png
10591 aws-architecture-2d.drawio-150x150.png
7421 aws-architecture-2d.drawio-160x90.png
14739 aws-architecture-2d.drawio-300x135.png
19781 aws-architecture-2d.drawio-320x180.png
58138 aws-architecture-2d.drawio-768x346.png
71475 aws-architecture-2d.drawio.png
...

##### after #####

$ ll /var/www/html/wp-content/uploads/2023/07/
total 1616
2773 aws-architecture-2d.drawio-100x100.png
2337 aws-architecture-2d.drawio-120x68.png
4048 aws-architecture-2d.drawio-150x150.png
3274 aws-architecture-2d.drawio-160x90.png
5215 aws-architecture-2d.drawio-300x135.png
6460 aws-architecture-2d.drawio-320x180.png
17098 aws-architecture-2d.drawio-768x346.png
14566 aws-architecture-2d.drawio.png
...

実際にディレクトリのトータルサイズも削減されていることが確認できました。
また、「aws-architecture-2d.drawio.png」のサイズも WordPress 管理画面と差異はなかったです。

さいごに

WordPress を利用している場合、記事によっては画像が多く含まれるかと思います。

その場合、画像ファイルの最適化を行うことは、ユーザ体験だけでなく、費用の観点でも非常に重要です。

今回は、TinyPNG にて検証しましたが、7 割程度のサイズ縮小ができました。

これによって、ストレージ費用の削減や、データ転送量の削減が可能となります。

まだ画像最適化を実施していない人は、是非一度お試しください。

コメント