HOME → 3 WordPress → 04 運用とトラブル → 

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

WordPress Twenty Seventeen
Webサイトの高速化
その-7 「適切なサイズの画像」

EWWW Image Optimizer を使ってみる
 
ブログで使用している画像は経験値として、
全て「.jpg」形式のフルサイズで、7
・デジカメ写真の場合は「800 x 600」
・スマホ写真の場合は「840 x 472」
に、サイズを縮小してアップロードしている。
 
スマホ写真の場合は、「840 x 472」にサイズ変更して後、「tinyjpg」による圧縮してプロードするのが良い。
 
ここに来て「Webサイトの高速化」の為に、画像サイズについて、今一度見直しを行ってみた。
 

 

スポンサー リンク

 

 
 
 
 
 
1. 「適切なサイズの画像」
 
『PageSpeed Insights』で、WordPressのページを測定した結果、【モバイル】での評価スコアが低速の「38」と相当遅い。
『PageSpeed Insights』で、WordPressのページを測定した結果、【モバイル】での評価スコアが低速の「38」と相当遅い
 
ラボデータの値。
速度インデックス以降の項目が「」の赤色になっている。
ラボデータの値。速度インデックス以降の項目が「▲」の赤色になっている。
 
改善できる項目のトップに、「適切なサイズの画像」が赤色の「」で指摘される。
改善できる項目のトップに、「適切なサイズの画像」が赤の「▲」で指摘される
 
「適切なサイズの画像」の詳細には、該当の画像名とサイズ、及び、減らせるデータ量まで、具体的な指示が表示されている。
「適切なサイズの画像」の詳細には、該当の画像名とサイズ及び減らせるデータ量までが表示されている
 
指示された該当の画像を、Windowsのペイントで「1600 x 960」から「800 x 480」に「サイズ変更」する。
 
再度『PageSpeed Insights』で、同じページを測定した結果、【モバイル】での評価スコアが低速の「38」から中速の「52」に「14」ポイントも改善された。
再度『PageSpeed Insights』で、同じページを測定した結果、【モバイル】での評価スコアが低速の「38」から中速の「52」に「14」ポイントも改善された。
 
ラボデータの速度インデックスが、「」のオレンジ色になった。
ラボデータの速度インデックスが、「■」のオレンジになった
 
改善できる項目の中から「適切なサイズの画像」が消え、トップは「次世代フォーマットでの画像の配信」が赤色の「」で指摘されるようになった。
改善できる項目の中から「適切なサイズの画像」が消え、トップは「次世代フォーマットでの画像の配信」が赤の「▲」で指摘されるようになった
 
画像サイズを見直すことによって、大きな効果が得られることがわかったので、「次世代フォーマットでの画像の配信」については、当面様子を見ることにするも、4番目に「効率的な画像フォーマット」の指摘もあり、画像の容量について見直してみることにした。
 
 
2. WordPressにおけるメディアの追加要領
 
該当のブログでは、スマホで撮影した画像を数多くアップしている。
該当のブログでは、スマホで撮影した画像を数多くアップしている
 
WordPressにおけるメディアのアップロードは、次のように統一している。
 
★ブログで使用している画像は、全て「.jpg」のフルサイズで、
・デジカメ写真の場合は「800 x 600」
・スマホ写真の場合は「840 x 472」
に、サイズを縮小してアップロードしている。
 
★メディア設定での画像サイズは、
・サムネイルのサイズは「450 x 253」
・中サイズと大サイズは「0」にして、生成していない。
 

ページの読み込み速度を改善する、画像の容量=ファイルサイズについて。
①.画像自体を圧縮することで、ファイルサイズを小さくする
②.画像のサイズを最適化することで、ファイルサイズを小さくする
 
画像自体を圧縮するには、「tinyjpg」が便利。圧縮したい画像をアップロードするだけで、画質を下げずにサイズを小さくしてくれる。
画像自体を圧縮するには、「tinyjpg」が便利。圧縮したい画像をアップロードするだけで、画質を下げずにサイズを小さくしてくれる。
 
画像の大きさは、Windowsの標準ソフト「ペイント」で、簡単にサイズ変更ができる。
画像のサイズ変更は、Windowsの標準ソフト「ペイント」で簡単にできる
 

 
画像の圧縮とサイズ変更による、ファイルサイズの変化。
画像の圧縮とサイズ変更による、ファイルサイズの変化
 
「tinyjpg」による圧縮
 
元の画像 A:199KB の圧縮とサイズ変更。
A → B:「tinyjpg」による圧縮=大きさは変わらずサイズが 45%に。
A → a:「ペイント」によるサイズ変更=サイズが 41%に。
B → b:圧縮した画像を小さくしても、89%にしかならない。
a → c:大きさを小さくした画像を圧縮すると、更に 49%になる。
 
 
結論:
一旦、サイズを小さくした後、圧縮を行う。
 
 
スマホ写真の場合は、下記例のように「ペイント」で「840 x 472」にサイズ変更した後、「tinyjpg」による圧縮を行ってから、アップロードするのがベスト。
 
スマホ写真の場合は、「ペイント」で「840 x 472」にサイズ変更した後、「tinyjpg」による圧縮をおこなってから、プロードするのが良い。
 
参考:「tinyjpg」では、【5MB】を越える画像は圧縮できない。
「tinyjpg」では、【5MB】を越える画像は圧縮できない
 
 
 
3. EWWW Image Optimizer の導入と設定
 
『画像圧縮』により、【 画質 】を落とすことなく、ファイルサイズ半減できることがわかったので、WordPressにアップロードしてある過去の画像を圧縮してみることにした。
 
幾つか調べた結果、「EWWW Image Optimizer(以降、EWWW IO と略称)」というプラグインがよさそうだったので、導入してみることにした。
EWWW Image Optimizer
 
EWWW IO」のインストール。
EWWW Image Optimizer プラグインのインストール
 
インストールが終わったら、有効化する。
インストールが終わったら、有効化する
 
有効化すると、管理画面の左メニューの「設定」の中に「 EWWW Image Optimizer 」という項目が追加される。
管理画面の左メニューの「設定」の中に「 EWWW Image Optimizer 」という項目が追加される
 
「 EWWW Image Optimizer 」をクリックすると、詳細設定の画面が表示される。最適化ステータスの、画像の圧縮率の表示が【20%】になっている。
「 EWWW Image Optimizer 」をクリックすると、詳細設定の画面が表示される
 
「ベーシック」タブでの設定。
「ベーシック」タブでの設定
 
【Optimization API Key】には、「EWWW IO」をインストールした時点で、メールで送られてきた『500枚』の画像が圧縮できる報酬クレジットの『API Key』を入力する。
メールで送られてきた『500枚』の画像が圧縮できる報酬クレジット
 
【メタデータを削除】にチェックをを入れる。
 → 撮影日時・場所などのメタデータを削除する。
 
【PNG 最適化レベル】を無圧縮にした。
 
「変換」タブでの設定。
「変換」タブでの設定
 
【コンバージョンリンクを非表示】にチェックをを入れる。
 → 「jpg」から「png」や「png」から「jpg」などに、拡張子が自動的に変換されるのを無効にする。
 
以上の設定を行った後、「変更を保存」をクリックする。
 
『API Key』が検証され、最適化ステータスの画像の圧縮率の表示が【85%】になった。
最適化ステータスの、画像の圧縮率の表示が【85%】になった
 
無料版での圧縮率は【20%】、有料版=『API Key』での圧縮率は【85%】ということ?。
 
 
 
4. EWWW Image Optimizer による一括最適化
 
「EWWW IO」の設定を行うと、管理画面の左メニューの「メディア」の中に「一括最適化 」という項目が追加されているので、これををクリックする。
管理画面の左メニューの「メディア」の中に「一括最適化 」という項目が追加されているので、これををクリックする
 
「一括最適化 」画面が表示され、メディアライブラリにある画像数が表示されるので、「最適化されていない画像をスキャンする」をクリックする。
「一括最適化 」画面が表示され、メディアライブラリにある画像数が表示されるので、「最適化されていない画像をスキャンする」をクリックする
 
最適化出来る画像数が表示されるので、「xxx点の画像を最適化」をクリックする。この時上部には、残っているクレジットの画像数が表示されている。
最適化出来る画像数が表示されるので、「xxxの最適化」をクリックする。 この時上部には、残っているクレジットの画像数が表示されている。
 
「一括最適化 」が開始され、最適化済み画像数が増加するとともに、クレジット数が減少して行く。
「一括最適化 」が開始され、最適化済み画像数が増加するとともに、クレジット数が減少して行く
 
最適化された画像の圧縮率は、殆んど【50%】以上になっている。
最適化された画像の圧縮率は、殆んど【50%】以上になっている
 
クレジットが無くなると「ライセンス超過」でストップする。
クレジットが無くなると「ライセンス超過」でストップする
 
元の設定画面に戻って最適化ステータスを見ると、圧縮率は【5%】で、その右横には削減結果が表示されている。
元の設定画面に戻って最適化ステータスを見ると、圧縮率は【5%】で、野の右には削減結果が表示されている
 
『API Key』を削除し、最適化レベルを変更すると、無料版での圧縮率【20%】に変わった。
『API Key』を削除し、最適化レベルを変更すると、無料版での圧縮率【20%】に変わった
 
「変更を保存」をクリックすると、「元の画像のコピーを30日間安全なサーバーに保存する。※有効な APIキーが必要です。」のメッセージが出るが無視。
「変更を保存」をクリックすると、「元の画像のコピーを30日間安全なサーバーに保存する。※有効な APIキーが必要です。」のメッセージが出る。
 
「一括最適化 」画面に戻り、中断した場所から最適化を行う。
「一括最適化 」画面に戻り、中断した場所から最適化を行う
 
圧縮処理の経過を見ていると、軒並み『節約なし』と表示され、圧縮がなされていない。
圧縮処理の経過を見ていると、軒並み『節約なし』と表示され、圧縮がなされていない
 
無料版の圧縮率【20%】では意味がないと分かり、最適化を中断する。
無料版の圧縮率【20%】では意味がないと分かり、中断する
 
 
 
5. APIキーの購入と EWWW IO Cloud
 

APIキーの購入画面に入り、取り敢えず『3,000 - $9.00』(まだ 4,000枚以上の画像が残っているが。)のAPIクレジットを購入する。
APIキーの購入画面に入り、取り敢えず『3,000 - $9.00』(まだ 4,000枚以上の画像が残っているが。)のAPIクレジットを購入する

カートに入れる。
カートに入れる
 
 
 One-Time クレジットとは
・購入した枚数までの画像が圧縮できる。
・3,000、13,000、33,000と3種類あるが、どれも $0.003/1枚。
・有効期限はない。
・他のWordPressのサイトでも使える。
・無くなれば追加購入すればよい。
・自動購入の設定もできる。
 
 
「PayPal」での支払いにした。日本円で、¥1,028 になった。
「PayPal」での支払いにした
 
購入確認画面が開く。
購入確認画面が開く
 
『API Key』が届く。
『API Key』が届く
 
APIキーを購入したので、「EWWW Image Optimizer Cloud」を使うことにした。
EWWW Image Optimizer Cloud
 
設定画面の【Optimization API Key】に、APIキーを入力すると、圧縮率が【85%】になる。
設定画面の【Optimization API Key】に、APIキーを入力すると、圧縮率が【85%】になる
 
購入したクレジットには「500枚」分のおまけがついてくる。
購入したクレジットには「500枚」分のおまけがついてくる
 
中断した場所から再開する。
 
クレジットが無くなったら再購入する。再購入では『API Key』は変わらないので、そのまま継続できる。
 
 
 
6. EWWW Image Optimizer まとめ
 
 
前提条件
WordPressにアップロードしている画像のサイズが、
「800 x 600」程度の大きさの場合。
 
 
EWWW IOによる圧縮率。
無料版(APIキー無し)の場合、圧縮率は ゼロ。
有料版(APIキー有り)の場合、圧縮率は 50%以上。
 
 
EWWW IO Cloudを使用すべし
EWWW Image Optimizer Cloudは、APIキーが必須。
Cloudは、サーバーに負荷がかからない。
APIキーを購入するなら、Cloudを使用すべし。
CloudとEWWW Image Optimizerは、同時には使用出来ない。
 
 
EWWW Image Optimizer の有料版で画像を圧縮しても・・・。
『PageSpeed Insights』での評価スコアは、上がらなかった。
 
 
画像は「ペイント」で「840 x 472」にサイズ変更した後・・・。
アップロードした画像を、EWWW IO で圧縮するのではなく、
「tinyjpg」による圧縮を行ってから、
アップロードするのがベスト。
 
tinyjpg」は、
・画質を下げずに画像サイズを小さくできる。
・無料且つ、利用登録無しで使える。
・画像をドラッグするだけで圧縮できる。
・複数(Max 20)同時に圧縮することもできる。
・画像が多い場合は、数回に分けて圧縮する。
・【5MB】を越える画像は圧縮できない。
複数同時(Max 20)に圧縮することも可能。
 
 
 
 PageSpeed Insights 【Webサイトの高速化】 対策
 
 
以上。
(2019.12.18)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください