EWWW Image Optimizer API クレジットの購入と Cloud版の使用

 

ブログで使用している画像は経験値として、
全て「.jpg」形式のフルサイズで、７
・デジカメ写真の場合は「800 x 600」
・スマホ写真の場合は「840 x 472」
に、サイズを縮小してアップロードしている。

 

 

ここに来て「Webサイトの高速化」の為に、画像サイズについて、今一度見直しを行ってみた。

 

 

 

 

 

 

 

『PageSpeed Insights』で、WordPressのページを測定した結果、【モバイル】での評価スコアが低速の「38」と相当遅い。

 

ラボデータの値。
速度インデックス以降の項目が「▲」の赤色になっている。

 

改善できる項目のトップに、「適切なサイズの画像」が赤色の「▲」で指摘される。

 

「適切なサイズの画像」の詳細には、該当の画像名とサイズ、及び、減らせるデータ量まで、具体的な指示が表示されている。

 

指示された該当の画像を、Windowsのペイントで「1600 x 960」から「800 x 480」に「サイズ変更」する。

 

再度『PageSpeed Insights』で、同じページを測定した結果、【モバイル】での評価スコアが低速の「38」から中速の「52」に「14」ポイントも改善された。

 

ラボデータの速度インデックスが、「■」のオレンジ色になった。

 

改善できる項目の中から「適切なサイズの画像」が消え、トップは「次世代フォーマットでの画像の配信」が赤色の「▲」で指摘されるようになった。

 

画像サイズを見直すことによって、大きな効果が得られることがわかったので、「次世代フォーマットでの画像の配信」については、当面様子を見ることにするも、４番目に「効率的な画像フォーマット」の指摘もあり、画像の容量について見直してみることにした。

 

 

 

該当のブログでは、スマホで撮影した画像を数多くアップしている。

 

WordPressにおけるメディアのアップロードは、次のように統一している。

 

★ブログで使用している画像は、全て「.jpg」のフルサイズで、
・デジカメ写真の場合は「800 x 600」
・スマホ写真の場合は「840 x 472」
に、サイズを縮小してアップロードしている。

 

★メディア設定での画像サイズは、
・サムネイルのサイズは「450 x 253」
・中サイズと大サイズは「0」にして、生成していない。

 

ページの読み込み速度を改善する、画像の容量＝ファイルサイズについて。

 

画像自体を圧縮するには、「tinyjpg」が便利。圧縮したい画像をアップロードするだけで、画質を下げずにサイズを小さくしてくれる。

 

画像の大きさは、Windowsの標準ソフト「ペイント」で、簡単にサイズ変更ができる。

 

 

画像の圧縮とサイズ変更による、ファイルサイズの変化。

 

 

元の画像 A：199KB の圧縮とサイズ変更。

 

 

結論：
一旦、サイズを小さくした後、圧縮を行う。

 

 

スマホ写真の場合は、下記例のように「ペイント」で「840 x 472」にサイズ変更した後、「tinyjpg」による圧縮を行ってから、アップロードするのがベスト。

 

 

参考：「tinyjpg」では、【5MB】を越える画像は圧縮できない。

 

 

 

 

『画像圧縮』により、【 画質 】を落とすことなく、ファイルサイズ半減できることがわかったので、WordPressにアップロードしてある過去の画像を圧縮してみることにした。

 

幾つか調べた結果、「EWWW Image Optimizer（以降、EWWW IO と略称）」というプラグインがよさそうだったので、導入してみることにした。

 

「EWWW IO」のインストール。

 

インストールが終わったら、有効化する。

 

有効化すると、管理画面の左メニューの「設定」の中に「 EWWW Image Optimizer 」という項目が追加される。

 

「 EWWW Image Optimizer 」をクリックすると、詳細設定の画面が表示される。最適化ステータスの、画像の圧縮率の表示が【20%】になっている。

 

「ベーシック」タブでの設定。

 

【Optimization API Key】には、「EWWW IO」をインストールした時点で、メールで送られてきた『500枚』の画像が圧縮できる報酬クレジットの『API Key』を入力する。

 

【メタデータを削除】にチェックをを入れる。
　→　撮影日時・場所などのメタデータを削除する。

 

【PNG 最適化レベル】を無圧縮にした。

 

「変換」タブでの設定。

 

【コンバージョンリンクを非表示】にチェックをを入れる。
　→　「jpg」から「png」や「png」から「jpg」などに、拡張子が自動的に変換されるのを無効にする。

 

以上の設定を行った後、「変更を保存」をクリックする。

 

『API Key』が検証され、最適化ステータスの画像の圧縮率の表示が【85%】になった。

 

無料版での圧縮率は【20%】、有料版＝『API Key』での圧縮率は【85%】ということ？。

 

 

 

 

「EWWW IO」の設定を行うと、管理画面の左メニューの「メディア」の中に「一括最適化 」という項目が追加されているので、これををクリックする。

 

「一括最適化 」画面が表示され、メディアライブラリにある画像数が表示されるので、「最適化されていない画像をスキャンする」をクリックする。

 

最適化出来る画像数が表示されるので、「xxx点の画像を最適化」をクリックする。この時上部には、残っているクレジットの画像数が表示されている。

 

「一括最適化 」が開始され、最適化済み画像数が増加するとともに、クレジット数が減少して行く。

 

最適化された画像の圧縮率は、殆んど【50%】以上になっている。

 

クレジットが無くなると「ライセンス超過」でストップする。

 

元の設定画面に戻って最適化ステータスを見ると、圧縮率は【5%】で、その右横には削減結果が表示されている。

 

『API Key』を削除し、最適化レベルを変更すると、無料版での圧縮率【20%】に変わった。

 

「変更を保存」をクリックすると、「元の画像のコピーを30日間安全なサーバーに保存する。※有効な APIキーが必要です。」のメッセージが出るが無視。

 

「一括最適化 」画面に戻り、中断した場所から最適化を行う。

 

圧縮処理の経過を見ていると、軒並み『節約なし』と表示され、圧縮がなされていない。

 

無料版の圧縮率【20%】では意味がないと分かり、最適化を中断する。

 

 

 

 

カートに入れる。

 

 

 One-Time クレジットとは
・購入した枚数までの画像が圧縮できる。
・3,000、13,000、33,000と3種類あるが、どれも $0.003/1枚。
・有効期限はない。
・他のWordPressのサイトでも使える。
・無くなれば追加購入すればよい。
・自動購入の設定もできる。

 

 

「PayPal」での支払いにした。日本円で、￥1,028 になった。

 

購入確認画面が開く。

 

『API Key』が届く。

 

APIキーを購入したので、「EWWW Image Optimizer Cloud」を使うことにした。

 

設定画面の【Optimization API Key】に、APIキーを入力すると、圧縮率が【85%】になる。

 

購入したクレジットには「500枚」分のおまけがついてくる。

 

中断した場所から再開する。

 

クレジットが無くなったら再購入する。再購入では『API Key』は変わらないので、そのまま継続できる。

 

 

 

 

 

前提条件
WordPressにアップロードしている画像のサイズが、
「800 x 600」程度の大きさの場合。

 

 

EWWW IOによる圧縮率。

 

 

EWWW IO Cloudを使用すべし。

 

 

EWWW Image Optimizer の有料版で画像を圧縮しても・・・。

 

 

画像は「ペイント」で「840 x 472」にサイズ変更した後・・・。

 

「tinyjpg」は、
・画質を下げずに画像サイズを小さくできる。
・無料且つ、利用登録無しで使える。
・画像をドラッグするだけで圧縮できる。
・複数（Max 20）同時に圧縮することもできる。
・画像が多い場合は、数回に分けて圧縮する。
・【5MB】を越える画像は圧縮できない。

 

 

 

 

 

以上。
(2019.12.18)