ワードプレス(WordPress)の投稿記事内の画像ファイルを最適化して圧縮するプラグイン Smush – Lazy Load Images, Optimize & Compress Images を解説します。
- Smush – Lazy Load Images, Optimize & Compress Images の使い方と詳細な設定方法がわかります
Smush – Lazy Load Images, Optimize & Compress Images で実現できること
WordPressのプラグイン Smushを導入するとの投稿記事内の画像ファイルを最適化して圧縮したり、読み込みを遅延させて記事ページの表示速度を向上させることができます。
- 画質に影響を与えることなく画像ファイルを圧縮します
- 画像ファイルの遅延読み込み
- Webサイトを速度低下させている画像ファイルを検出します
- 自動最適化：
- バルクスマッシュ：ワンクリックで最大50枚の既存の画像ファイルを最適化し圧縮します
Smush – Lazy Load Images, Optimize & Compress Images のインストール方法
Smush – Lazy Load Images, Optimize & Compress Images プラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”Smush – Lazy Load Images, Optimize & Compress Images ”と入力すると下に検索結果が表示されます
- ”Smush – Lazy Load Images, Optimize & Compress Images ”の「今すぐインストール」ボタンをクリックします
“Smush – Lazy Load Images, Optimize & Compress Images ”のインストール完了画面↑Smush – Lazy Load Images, Optimize & Compress Images のインストールが完了すると有効化ボタンが表示されるのでクリックします。
“Smush – Lazy Load Images, Optimize & Compress Images “を有効化すると表示される画面これでSmush – Lazy Load Images, Optimize & Compress Images のインストールと有効化は完了です。
Smush – Lazy Load Images, Optimize & Compress Images の設定と使い方
Smush – Lazy Load Images, Optimize & Compress Imagesプラグインをインストールして有効化した時点で画像ファイルの遅延読み込みと、以降の画像ファイルの最適化機能は有効になっています。
なので基本的には設定変更は不要です。
Smush – Lazy Load Images, Optimize & Compress Imagesの設定
Smushプラグインを有効化するとダッシュボード(管理画面)に「Smush」が表示されます。
WordPressのダッシュボード(管理画面)Smushの項目は下記の11項目あります。
沢山ありますが半数以上は有料化しないと機能しない項目です。
- ダッシュボード
- Bulk Smush
- Directory Smush
- Lazy Load
- CDN
- Local WebP
- Integrations
- ツール
- 設定
- Tutorials
- Smush Pro
以降の画面写真は日本語に翻訳しています。
ダッシュボード
Smushプラグインのダッシュボード画面ダッシュボード画面では前項目の設定状況を1画面で確認できます。
各項目に移動することも可能です。
Bulk Smush
SmushプラグインのBulk Smush画面 その1↑この画面から既存の画像ファイルを最適化して圧縮することができます。
しかし一度に50枚までしか実施できません。
つま、り既存の画像ファイルが1000枚ある場合は20回同じ作業を繰り返す必要があります。
SmushプラグインのBulk Smush画面 その2 設定項目設定項目と意味は下記のとおりです。
- 画像サイズ
項目名の表示だけで設定変更はできません - 自動圧縮
画像ファイルアップロードするときに自動的に圧縮するか否か - メタデータ
画像ファイルに含まれた日付や時刻などのExifデータを削除するか否か - 画像のサイズ変更
アップロードした画像ファイルのサイズを任意のサイズに変更する - アップロードされた画像
アップロードされた画像を圧縮するか否かと、復元用の画像ファイルを保存するか否か
Directory Smush
SmushプラグインのDirectory Smush画面↑画像ファイルをアップロードするまえにディレクトリ毎に圧縮するとことができます。
SmushプラグインのDirectory Smushのディレクトリ選択画面↑この画面で圧縮したい画像ファイルの保存ディレクトリを指定します。
このDirectory Smush機能は実質意味をなさないので設定は不要です
Lazy Load
SmushプラグインのLazy Load画面 その1↑設定項目と意味は下記のとおりです。
- メディアタイプ
遅延読み込みする画像ファイルの種類を選択できます - 出力場所
遅延読み込みを特定のメディア(画像設置場所)だけに限定することができます - ディスプレイとアニメーション
遅延読み込み時の演出を設定できます
SmushプラグインのLazy Load画面 その2↑設定項目と意味は下記のとおりです。
- 含める/除外する
遅延読み込みをしない記事タイプを選択できます
初期設定ではすべての記事タイプで遅延読み込みは有効になっています
SmushプラグインのLazy Load画面 その3↑設定項目と意味は下記のとおりです。
- スクリプト
遅延読み込みに必要なスクリプトの記載先をWordPressテーマPHPファイルのフッターかヘッダーを選択できます - ネイティブの遅延読み込み
ネイティブブラウザでも遅延読み込みを有効にするか否か - Noscriptを無効にする
遅延読み込みが有効になっている間、Noscriptを無効にできます - 無効化
遅延読み込みを無効化します
CDN
SmushプラグインのCDN画面↑無料版の場合はCDN機能は利用できません。
Local WebP
SmushプラグインのLocal WebP画面↑無料版の場合はWebP変換機能は利用できません。
Integrations
SmushプラグインのIntegrations画面↑無料版の場合はすべての項目は設定変更できません。
ツール
Smushプラグインのツール画面↑設定項目と意味は下記のとおりです。
- 画像サイズ変更の検出
大きなサイズの画像ファイルを検出する機能を有効化できます - 一括復元
アップロードして圧縮されたサムネイル用画像ファイルを圧縮前の状態に戻せます
設定
Smushプラグイン 設定の全般的↑設定項目と意味は下記のとおりです。
- 翻訳
アクティブな翻訳欄には日本語となっていますが、Smushプラグインの画面は日本語になっていません。今後のアップデートで改善される可能性があります - 使用状況の追跡
Smushプラグインの利用状況を開発元に送信するか否か
Smushプラグイン 設定の構成↑設定項目と意味は下記のとおりです。
プリセット構成を利用するとSmushプラグインの設定を他のWordpressにインポートできます。
Smushプラグイン 設定のデータと設定↑この設定画面ではSmushプラグインを削除したときに設定データを残すか削除するかを選択できます。
Smushプラグイン 設定のアクセシビリティ↑ハイコントラストモードを有効にすることができます。
Tutorials
SmushプラグインのTutorials画面↑Smushプラグインの使い方の説明を閲覧できます。
Smush Pro
有料版Smushプラグインの案内です。
Smush – Lazy Load Images, Optimize & Compress Imagesの使い方
ここからはSmushプラグインの使い方を解説します。
とはいえ、最初から各機能は有効化されているので、既存の画像ファイルを圧縮する方法を書きます。
SmushプラグインのBulk Smush画面 その1↑この画面のバルクスラッシュ今(Bulk slash now)というボタンを押すと既存の画像ファイルを圧縮することができます。
ただしボタン1押しで50枚までしか圧縮されません。
なのでもし、Smushプラグインを有効化する以前に既に存在していた画像ファイルが1000枚ある場合は20回同じ作業を繰り返す必要があります。
SmushプラグインのBulk Smush画面 その1↑無料版の制限でこのように50枚までしか1度で処理してくれません。
WordPressの画像ファイル遅延読み込みを無効
WordPressに標準で搭載されている画像ファイルの遅延読み込み設定を無効化する方法を解説します。
もしSmushプラグインに実装されている遅延読み込み機能を有効化する場合は、同じ機能が競合して不具合や性能がフルに発揮できない可能性があるので、当手順を実施することをおすすめします。
WordPressテーマファイルのfuncitons.phpの <?php の下に下記を追記します。
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
画像ファイルの圧縮状況を確認
Smushプラグインによって圧縮された画像ファイルを確認します。
メディアのライブラリを表示します。
メディアのライブラリ画面↑このようにライブラリ画面の右端に「Smush」欄が表示され、画像ファイルの圧縮率を確認できます。
以上がSmush – Lazy Load Images, Optimize & Compress Imagesの使い方です。
まとめ
Smush – Lazy Load Images, Optimize & Compress Imagesを利用すると画像ファイルの圧縮と遅延読み込みを行いWebサイトやブログの表示速度向上を期待できます。
数多くある画像ファイルの圧縮と遅延読み込みプラグインの中でも人気があって、更新(アップデート)頻度もきちんとされているのでセキュリティ面でも安心して利用できます。
設定の変更は不要で、初期設定のまま利用できるので気軽に導入することができます。
ただし、コードを最適化して高速化するプラグ「Autoptimize」がインストールされていると競合して不具合が発生する可能性があります。
「Autoptimize」以外の最適化プラグインとも競合を起こす可能性もあります。
その場合はWordpressのダッシュボード画面に「複数のWordpress画像最適化プラグインがインストールされており、問題を起こす可能性があります」と表示されます。
最新で軽量な画像ファイル形式のWebPに変換するには有料にする必要がある点が最大のデメリットです。
もしSmushと同様の画像ファイルの圧縮や遅延読み込みに加えて、無料で画像ファイルをWebP形式に変換したい場合は「EWWW Image Optimizer」プラグインをおすすめします。ただし、Smushよりも設定が難しいです。
無料で画像ファイルをWebP形式ができて圧縮と遅延読み込みができる「EWWW Image Optimizer」プラグインの詳細説明記事はこちらです↓
EWWW Image Optimizer 画像ファイルサイズを圧縮して高速化するプラグイン 設定方法と使い方
「EWWW Image Optimizer」プラグインを使て既存の画像ファイルをWebP形式に変換する方法はこちらの記事を参考にしてください↓
EWWW Image Optimizerを使ってブログサイトの画像ファイルをWebPに変換する方法
