Smush：全ての画像の圧縮＆最適化と遅延ロードができる
全ての画像の圧縮＆最適化と遅延ロードができる WordPress 用プラグインの紹介です。
それは「Smush」です。
その導入手順から日本語化・使い方と設定などを解説していきます。
Smush
Smush は、全ての画像（PNG、JPEG、GIFファイル）の圧縮＆最適化と遅延ロードができます。
画像の圧縮＆最適化には、無償の WordPress Smush API を使って処理しています。
最大 5 MB の全ての画像を毎日、毎月、または年間の上限なしで最適化できます。
メディアライブラリ以外のサーバーにある画像も圧縮＆最適化できます。
画像のアップロード時にも自動圧縮＆最適化を実行してくれます。
Gutenberg エディターの画像ブロックで指定した画像の Smush 統計も直接表示可。
ワンクリックで最大 50 個の画像を一括圧縮＆最適化も可能。
※別のプラグイン「Disable Bulk Smush Limit of WP Smushit – WordPress.org」をインストールすると、50 個の制限を解除できます。
また、画像の最大の幅と高さを設定すると、それよりも大きな画像を自動リサイズできます。
下記などのメディアライブラリプラグインとの互換性もあります。
- WP All Import
- WP Offload Media
- WP Media Folder
- WP Retina 2x
- NextGen Gallery
- WPML
- WPML Media Translation Add-on
- Styles
記事を作成もしくは更新時点でのバージョン：3.3.2
マルチサイトでの利用:可
追記事項
下記の機能が 3.4.0 から追加されました。
- Smushing の画像を無視する項目追加
- ピクチャエレメントの CDN サポート
- iframeの 遅延ロード
- Block Gallery と CoBlocks プラグインの遅延ロードの互換性
- CDN のカスタムアップロードディレクトリで使用する smush_cdn_custom_uploads_dir フィルター追加
- データ元の属性の画像の CDN のサポート
Gutenberg エディターでの動作
Gutenberg エディターに専用機能が追加されます。
インストール手順
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Smush – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Smush」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Smush は、日本語化対応がされているので、有効化するだけで日本語化されます。
日本語化されない場合には、日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
有効化すると
簡単なセットアップウィザードが表示されます。
後から設定画面でも変更できるので、スキップしても大丈夫です。
サイトに画像をアップロードすると、
Smush で自動的に画像を圧縮＆最適化するかどうかを選択できます。
画像ファイル内に保存されているデータ（焦点距離、日付、時刻、場所）などをに削除するかどうか。
画像の遅延ロードを行うかどうかを選択できます。
プラグインの使用状況を匿名で提供するかどうかを選択できます。
「FINISH SETUP WIZARD」をクリックするとセットウィザードは終了します。
圧縮が必要な画像を確認するためのチェックを行っています。
チェックが完了するまでしばらく待ちましょう。
チェックが完了したら設定画面から必要な設定変更を行いましょう。
専用メニュー
ダッシュボードの「設定」メニューの下に追加されています。
使い方
まずは、メディアライブラリー内の画像を一括圧縮＆最適化を実行してみましょう。
Smush のダッシュボードを開きます。
使い方は簡単です。
「BULK SUMUSH NOW」をクリックするだけで一括処理してくれます。
一括処理処理中の画面です。
通常は最大 50 個のまでしか一括処理できませんが、
Disable Bulk Smush Limit of WP Smushit (https://wordpress.org/plugins/wp-nonstop-smushit/)」をインストールしていると無制限で一括処理できます。
上記の画像のようなメッセージが表示されると一括処理完了です。
一括処理の次は画像ファイルをアップロードしてみましょう。
アップロード後にメディアライブラリを確認すると圧縮されているのが分かります。
最後にメディアライブラリー内の画像を個別圧縮してみましょう。
ダッシュボード（Dashboard）
一括処理（Bulk Smush）
Image Sizes:
一括処理時に処理対象とするサムネイルサイズを選択します。
Automatic compression:
アップロード時に画像を自動的に圧縮するかを選択します。
上記で選択した画像サイズのみを自動的に圧縮します。
Metadata:
画像内の焦点距離、日付、時刻、場所などのメタデータを削除するかどうか。
Image Resizing:
フルサイズの画像でサイズの大きいファイルをリサイズするかどうか。
リサイズを有効にした場合、
ここで設定した値よりも大きな画像は、アップロード時にリサイズされます。
フルサイズの画像のサイズを変更する
※WordPress 5.3 以降、2,560 px より大きい画像は自動的にリサイズされるようになりました。
それよりも大きなサイズの画像が必要な場合は、ここで設定を上書きできます。
※アニメーション GIF はアニメーションを失うため、サイズ変更されません。
ディレクトリ処理（Directory Smush）
どのフォルダーを対象にするかを選択します。
選択したフォルダーのサブフォルダー内の画像を自動的に処理対象に含まれます。
統合（Integrations）
Gutenberg Support:
Gutenberg エディターの画像ブロックに圧縮統計と手動スマッシュボタンを追加するかどうか選択します。
※Classic Editor が有効になっていると、この設定は有効にできません。
その他の統合をサポートしているプラグイン一覧。
画像遅延ロード（Lazy Load）
Media Types:
遅延ロードを行う画像のファイルタイプを選択します。
Output Locations:
デフォルトでは、全ての画像を遅延読み込みしますが、
特定のコンテンツのみに絞りたい時に選択します。
Display & Animation:
プリロード画像の表示方法とアニメーションを表示する方法を選択できます。
Display
読み込まれていない画像の表示方法を選択します。
Fade In:
フェードインのアニメーションの効果の効果時間を指定します。
Spinner:
画像の遅延読み込み中に表示するスピナー画像を選択します。
定義済みのスピナー画像を選択するか、独自の GIF ファイルをアップロードできます。
Placeholder:
遅延読み込み中に実際の画像の代わりに表示するプレースホルダー画像を選択します。
定義済みの画像を選択するか、独自の画像をアップロードできます。
None:
画像は、表示が可能になると即時表示されます。
Include/Exclude:
遅延読み込みを適用したいコンテンツのチェックを付けます。
Post, Pages & URLs:
遅延読み込みを無効にする投稿やページを URL で指定できます。
URL は、 1 行に 1 つずつ相対形式で指定します。
Classes & IDs:
クラスまたは ID を指定して、遅延読み込みを無効にできます。
プレフィックスを含めて、1 行に 1 つのクラスまたは ID を追加します。
例）＃image-id または .image-class
Scripts:
デフォルトでは、パフォーマンスを最大限に高めるために必要なスクリプトをフッターでロードしています。
これをヘッダーに切り替えることができます。
Deactivate:
遅延ロード機能を無効化できます。
CDN（CDN）
Pro 版のみの機能です。
ツール（Tools）
Image Resize Detection:
誤ったサイズの画像を検出して強調表示するかどうか。
強調表示は管理者にのみ表示されます。
Bulk Restore:
画像のサムネイルを元の状態に復元します。
※元の画像のアップロードを使用してサムネイルを再生成します。
「Smush my original images」を有効にしている場合でも、サムネイルを復元できますが、
圧縮された元の画像の品質が反映されます。
設定（Settings）
Translations:
デフォルトでは、WordPress の管理設定と一致する翻訳が利用可能な場合、
Smushは WordPress の管理設定で設定した言語を使用します。
Color Accessibility:
WCAG AAA 要件を満たすために要素とコンポーネントの可視性とアクセシビリティを向上させるかどうか。
プラグインの使用状況を匿名でプラグインの作者に提供してもいいかどうかを選択します。
Data:
プラグインデータの処理方法を選択します。
Uninstallation –
プラグインをアンインストールするとき、プラグインの設定をどうするかを選択します。
Keep – 保持
Delete – 削除
Reset Factory Settings –
デフォルト設定に戻す必要がある場合、
ボタンをクリックすると設定をデフォルトにリセットできます。
API Status:
Pro 版を使用してる場合にのみ使用します。