はじめに
前回の記事では、EC2 でのデータ転送量削減についてお話しました。
今回は、前回記事でもお伝えした「画像データの最適化」について効果を検証します。
使用するプラグインは、「TinyPNG」です。
なぜ TinyPNG なの?
以下は、WordPress で人気のある画像最適化プラグインです。
- EWWW Image Optimizer:
- このプラグインは、新しくアップロードした画像を自動的に最適化します。
- 既存の画像も自動的に最適化します。
- JPEG、PNG、GIFなどの形式に対応しています。
- 無料版では、サーバー上で画像の圧縮が行われます。
- Smush – Lazy Load Images, Optimize & Compress Images:
- このプラグインも、画像の圧縮と最適化を自動で行います。
- Smushは、画像の品質をほとんど損なわずに優れた圧縮率を達成します。
- 画像のリサイズ機能もあります。
- 無料版では、一度に最大50枚の画像を圧縮することができます。
また、各画像の最大圧縮サイズが1MBに制限されています。
- TinyPNG – JPEG, PNG & WebP image compression:
- TinyPNG 提供のこのプラグインは、JPEG と PNG 画像を自動的に圧縮します。
- 画像の品質を維持しつつ、非常に高い圧縮率を達成することで評価されています。
- 無料版では、1ヶ月に最大500枚の画像を圧縮できます。
私が TinyPNG を選択した理由としては、以下の特徴が魅力的だったからです。
- 圧縮効果が高い
- 無料利用時の制限による影響を受けにくい
もちろん、選定時はご自身に適したものを選択してください。
実際に TinyPNG を使ってみる
TinyPNG プラグインをインストールし、アカウントをアクティベート
- まず、WordPress 管理画面にログインする
- [プラグイン] > [新規追加] を選択する
- 次に、「TinyPNG」で検索する
- 「TinyPNG – JPEG, PNG & WebP image compression」をインストール・有効化する
- [インストール済みプラグイン] > [TinyPNG] > [Settings] を選択する
- メールアドレスを入力し、Register する
- メールを確認し、アカウントを Activate する
- 最後に、WordPress TinyPNG Settings に戻り、アカウントが有効化されていることを確認する
特に難しい作業はありません。
なお、英語での案内のため、苦手な方は適宜翻訳してください。
Bulk Optimization を用いて既存のメディアを最適化する
- [メディア] > [Bulk Optimization] を選択し、[Start Bulk Optimization] を押下します
数十秒~数分待てば完了します。
なお、「Bulk Optimization」はメディアライブラリ内の既存の画像を一括で最適化します。
以後、新しく追加される画像はアップロード時に自動的に最適化されます。
つまり、この手順を実施するのは最初の一度きりとなります。
WordPress 管理画面でメディアの最適化結果を確認する
ここでは、Total Savings からどの程度最適化されたかを確認できます。
69.3%
savingsTinyPNG Bulk Optimization
118 image sizes optimized 4.44 MB initial size 1.46 MB current size
トータルで 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 割程度のサイズ縮小ができました。
これによって、ストレージ費用の削減や、データ転送量の削減が可能となります。
まだ画像最適化を実施していない人は、是非一度お試しください。
コメント