はじめに
今日は、Imagifyプラグインについて紹介します。
この記事を読むと次の疑問について知ることができます。
♠Imagifyの日本語表示はどうするの?
♠Imagifyの無料版と有料版の違いは?
♠Imagifyのインストールと有効化はどうするの?
♠Imagifyのアカウントの作成とAPIキーの取得と入力はどうするの?
♠Imagifyの設定と使い方はどうするの?
・一般設定(General Settings)
・最適化設定(Optimization)
♠テストでImagifyプラグインの設定の確認したらどうだった?
OS、機種などで説明の仕方が変わってくることがありますので、私の使用しているパソコン環境やスマホについて載せておきます。
パソコンOS : Windows10 Pro
Windowsバージョン : 20H2
iphoneのスマホの機種 : iphone11(iOSバージョン:14.5.1)
Androidのスマホの機種 : Xiaomi Redmi Note 10 Pro(Androidバージョン:MIUI 12(Android 11準拠))
Imagifyプラグインとは?
Imagifyプラグインは、EWWW Image Optimizerプラグインと同様にJPEG、PNG、GIFの静止画をWordoPressのブログ内で記事内に利用している際に、自動でリサイズ、自動圧縮などして、画像の最適化をしてくれるプラグインなんです。
また、最近になって色々なOSやブラウザーでも対応するようになった次世代画像フォーマットであるWebPにも自動で変換しくれます。
WebPを利用することにより、あなたのブログの読み込み速度を速めることができ、結果的に画像を含んだページの表示速度を上げる効果があります。
したがって、私などもそうですが、WordPressのサイトをPageSpeed Insightsで表示スピードを計測した際に悪いスコアーを出すサイトは、一番の解決策は画像容量を小さくすることがPageSpeed Insightsで表示スピードのスコアーを上げるために、最初に取り組む解決策でしょう。
そうすることにより、あなたのブログの表示スピードが速ければ、ブログを訪れてくれる方にも喜んでもらえ、強いては、あなたのブログの評価を上げる結果にもつながります。
Imagifyプラグインは、現時点(2021年5月17日)でのバージョンが1.9.14です。
このプラグインの「詳細表示」を見ると、有効インストール数500,000+となっており、50万以上の方がインストールして活用し、レビュー993件、評価が
となっており、大変人気のWordPressプラグインの一つと言えるでしょう。このプラグインの使う上での利用条件は次の通り。
Imagifyの日本語表示
Google ChromeやMicrosft Edgeの場合ですと翻訳機能が付いているので、英語のページなどを日本語に翻訳してくれます。
Imagifyで英語表示されているところがあった際には、そのページの翻訳したい英語の表示部分で右クリックして表示されるメニューで「日本語に翻訳」を選択すれば、日本語に翻訳して表示してくれます。
例えば、 Imagifyプラグイン画面で「詳細を表示」で現れるImagifyの説明は英語で書かれていますが、この英語の部分で右クリックしてでるメニューで「日本語に翻訳」をクリックすれば、日本語に翻訳して表示してくれます。
この機能は、Imagifyのページに限らず、他の英語表記の部分でもできますので、試しにやってみて下さい。
Imagifyの無料版と有料版の違いは?
Imagifyは、毎月20MBの画像を無料で最適化できますが、さらに多くの画像を最適化したい場合には有料版にする必要があります。
有料版には2つのプランが用意されており、それらの違いは次の通りです。(ImagifyのホームのGoogle翻訳による)
有料プラン | STARTER | GROWTH | INFINITE |
月額価格(年額) | 0ドル | 4.99ドル(49.9ドル) | 9.99ドル(99.9ドル) |
処理画像容量 | 20MB/月 | 500MB/月 | 無制限/月 |
画像処理容量追加料金 | 8ドル/GB | 5ドル/GB | - |
Imagifyのインストールと有効化
WordPressのダッシュボードより、「プラグイン」⇒「新規追加」と順にクリックします。
上部右の方にあるキーワードプラグインの検索欄に「Imagify」と記入して検索すると、でてくる「Imagify – Optimize your Images & Convert WebP」の右上にある「今すぐインストール」をクリックします。
その後に出る「有効化」をクリックすると、プラグイン画面の上部に「プラグインを有効化しました」と表示され、プラグイン画面の最上部にImagifyのWelcomeメッセージがあり、その後の手続き方法が記されてます。
これであなたのWordPrssでImagifyを使える準備ができたことになります。
Imagifyのアカウントの作成とAPIキーの取得と入力
Google Chrome、Microsoft Edgeを利用しているのであれば、プラグインの画面のどこでも良いので右クリックして、でてくるメニューで「日本語に翻訳」をクリックすると、英語表記の部分が日本語に翻訳されます。
最上部のImajifyの「1.Create an Account(アカウントを作成する)」で「SIGN UP, IT'S FREE!(サインアップ、それは無料です!)」をクリックします。
「Let's get you started!(始めましょう!)」ウインドウが表れ、「Enter your email to get an API key:(メールアドレスを入力してAPIキーを取得します。)」と書かれた下にあなたのメールアドレスを記入して、「SIGN UP(サインアップ)」をクリックします。
「Congratulations!(おめでとうございます!)」ウインドウが表れ、「Your account has been successfully created. Please check your mailbox, you are going to receive an email with API key.(アカウントが正常に作成されました。メールボックスを確認してください。APIキーが記載されたメールが届きます。)」と書かれた下の「OK」をクリックします。
あなたが登録した際に記入したメールアドレス宛にメールが届いているはずですので、そのメールを見て、そこに書かれたAPIキーをコピーします。
次に、WordPressのブラグイン画面に戻り、Imagifyの「2.Enter your API Key(APIキーを入力してください)」で「I HAVE MY API KEY.(APIキーを持っています)」をクリックします。
「Connect to Imagify!(Imagifyに接続してください!)」ウインドウが表れ、「Paste your API key below:(以下にAPIキーを貼り付けます。)」とあるので、APIキー入力欄にメールで届いたAPIキーをコピー&ペーストして、「CONNECT ME(私を接続します)」をクリックします。
また、チェックマークの付いた「Congratulations!(おめでとう!)」ウインドウが表れ、「Your API key is valid. You can now configure the Imagify settings to optimize your images.(APIキーは有効です。これで、画像を最適化するためにImagify設定を構成できます。)」と書かれた下の「OK」をクリックします。
「3.Configure it」(構成する)」で「GO TO SETTINGS(設定に移動)」をクリックすると、Imagifyの設定画面になります。
Imagifyプラグインの設定と使い方
Google Chrome、Microsoft Edgeを利用しているのであれば、プラグインの画面のどこでも良いので右クリックして、でてくるメニューで「日本語に翻訳」をクリックすると、英語表記の部分が日本語に翻訳されます。
一般設定(General Settings)
一般設定では、4つの設定する部分があり、基本はデフォルトのままでOKです。
1つ目は、画像の最適化レベルの設定(OPTIMIZATION LEVEL)で、NORMAL、AGGRESSIVE、ULTRAがありますが、デフォルトのAGGRESSIVEをクリック。
二つ目が、画像をアップロードした際に自動で画像を最適化するかどうかで、これもデフォルト通りで、チェックを入れます。(☑Auto-Optimize images on upload)
三つ目が、元画像を取っておくかどうかで、これもデフォルト通りで、チェックを入れます。(☑Backup original images)
4つ目が、画像の EXIF dataを除かずにとっておくかどうかで、これもデフォルト通りで、チェックを外します。(□Keep all EXIF data from your images)
最適化設定(Optimization)
この設定では、WebPの設定、メディアライブラリーの最大画像の設定、ファイルの最適化設定があります。
【WebPの設定(WEBP FORMAT)】
WebP形式の画像を作成するかどうか、WebPの画像がある場合、WebPでディスプレイに表示するかどうか、その表示する方法としてどの方法をとるかを設定します。
☑Create webp versions of images にチェックを入れる。
☑Display images in webp format on the site にチェックを入れる。
●Use <picture> tags (preferred) にチェックを入れる。
【メディアライブラリーの設定(MEDIA LIBRARY)】
☑Resize larger images にチェックを入れる。
to maximum 2048 pixels width に設定(これ以下に設定できない)
【カスタムホルダー(CUSTOM FOLDERS)】
あなたが利用しているテーマを最適化するかどうか、その他に最適化するフォルダーを追加することが可能。
これについては、あなた自身で決めてください。
【ファイルの最適化(Files optimization)】
デフォルトのままで、すべての画像スタイルにチェックあり。
表示オプション(Display Options)の設定
このでは、ツールバーメニューにImagifyの設定を表示させるかどうかを設定できます。
これも、特に問題ないのでデフォアルトのままで良いと思います。
☑I want this awesome quick access menu on my Toolbar. にチェックを入れる。
すべての設定を終了したら、「変更を保存」をクリックしてください。
テストでImagifyプラグインの設定の確認
テスト(Imagify)と言うタイトルの記事を新規作成し、そこに1024×768ピクセルの画像ファイル(PNGの2.03MB)を挿入してしてみました。
その結果、挿入された画像ファイルは、圧縮されずに画像サイス1024 x 756ピクセルの容量2MBのPNGファイルであり、変化がありませんでした。
実際に、WebPファイルも作成されてるかどうかを見るために、CoreserverのV2サーバーのファイルマネージャーで調べたらWebPファイルは作成されたおらず、作成されていたのは、各種サイズのPNGファイルのみでした。
以上の結果からいえることは、私の環境がこのフラグインを利用する条件に適合していなかったためと結論できます。
つまり、Imagifyが対応するWordPressの最新バージョン5.6.4となっており、私の使用しているWordPresバージョン5.7.2であることが、正常に動作しなかった原因であろうと思われます。
おわりに
如何だったでしょうか?
Imagifyプラグインとはどのようなもの?、Imagifyの日本語表示はどうするの?、Imagifyの無料版と有料版の違いは?、Imagifyのインストールと有効化はどうするの?、Imagifyのアカウントの作成とAPIキーの取得と入力はどうするの?、Imagifyの設定と使い方はどうするの?、一般設定(General Settings)、最適化設定(Optimization)、テストでImagifyプラグインの設定の確認したらどうだった?などについて解説してきました。
この記事が少しでもあなたのお役に立てれば、これほど嬉しいことはありません。
以上です。
コメント