Smush Image Compression and Optimization の役割
画像を最適化することによって、ページロードが速くなり、サイト訪問者がより快適にサイトを閲覧できるようになります。SEO的にも画像の最適化は必要です。
画像を最適化するプラグイン「Smush Image Compression and Optimization」について記載します。(以降Smushと記載)
アップロードしている画像と新しくアップロードする画像を圧縮・最適化します。
Smush の圧縮制限
画像の圧縮の一日や一月の枚数制限はありませんが、一回に圧縮できるファイルサイズは最大5MBです。また一括に最適化できるのは50枚までです。
- 1回のファイルサイズは最大5MB
- 一括最適化は50枚まで
Smush をインストール
- プラグインの新規追加で Smush Image Compression and Optimization を検索
- インストールする
- 有効化する
プラグインのインストール前には、もしものためにバックアップを取っておきます。
Smush の設定
- 左側の項目よりSmushをクリック
Image Sizes(画像のサイズ)の設定
WordPress は画像をアップロードすると同時に、様々なサイズの画像を自動生成します。
最適化する画像のサイズをImage Sizes で選ぶことができます。
- All(すべてを最適化する)
- Custom(最適化する画像のサイズを選ぶ)
次の画像のように、様々なサイズの画像が生成されています。最適化する画像のサイズにチェックを入れます。
メディア設定で指定したサイズやテーマやプラグインで利用されるサイズの画像が生成されます。
(参考)
詳しくは下記リンクをご参考ください。
Automatic compression(自動圧縮)
上記でAllにした場合はすべて、カスタムにした場合は指定した画像のサイズのみを圧縮します。
- Automatically smush my images on upload(自動圧縮) をオンにする
Metadata(メタデータの削除)
メタデータを削除する場合はオンにします。メタデータは画像の撮影日時や位置、カメラなどの情報です。
- Strip my image metadata をオンにする
Image Resizing(画像のサイズを変えて更に軽量化)
サイトにアップロードされるすべての画像の最大の高さと幅を設定でき、更に軽量化できます。デフォルトではオフで、最大幅9999px、高さ675pxです。
- Resize my full size images
オンにした場合、最大幅と最大の高さの入力欄が表示されます。
Smush の使い方
Smush は次の3通りのリサイズ・圧縮の仕方があります。
- 画像をアップロードと同時に圧縮
- 既存の画像を一括圧縮
- 既存の画像を個別に圧縮
画像アップロード時に自動的に圧縮
上記の「Automatically smush my images on upload (自動圧縮)」をオンに設定すると、画像のアップロード時に自動的に最適化されます。
上記の「Image Sizes」で圧縮する画像のサイズを選ぶことができます。
既存の画像を一括圧縮
- Smush→DASHBODへ
- Bulk Smush をクリック
既存の画像を個別に圧縮
- メディアライブラリを開く
- Smushをクリックする
その他の圧縮・設定
DASHBOARDの説明です。
Directory Smush
アップロードディレクトリ以外の画像を圧縮できます。テーマやプラグインなどによってアップロードディレクトリ以外にも画像が保存されています。そのフォルダを選び圧縮できます。
手順
- Choose Directoryをクリックする
- ディレクトリが表示される
- 圧縮したいフォルダを選択する
- Smushをクリック
Gutenberg Support
グーテンベルクのブロックにSmush統計を表示することができます。
Lazy Load(遅延ロード)
ページが読み込まれるまで、スクロールせずに見られる画像の読み込みを遅らせます。サーバーの負荷が軽減され、ページのロード時間が短縮されます。
- ACTIVATEをクリックする
- 設定する
- 設定を保存する
設定の内容は以下です。
Media Types(遅延するメディアタイプ)を選択する
jpeg、PNG、gif、svgより選びチェックを入れます。
Output Locations(遅延ロードするロケーション)を選択する
コンテンツ、ウィジェット、サムネイル、Gravatar より選びチェックを入れます。
Display & Animation
フェードイン | 遅延画像をフェードインで表示させる |
スピナー | 画像読み込み中にスピナーを表示する(独自のGIFのアップロードも可能) |
プレイスフォルダー | 読み込み中に表示させる画像(独自の画像をアップロード可能) |
Include/Exclude
- 遅延ロードさせる投稿タイプを選ぶ
- 遅延ロードを無効にするURL等を入力する
- 遅延ロードを無効にするID等を指定する
画像を遅延ロードさせる投稿タイプはトップページ、ホーム、固定ページ、投稿ページ、アーカイブ、カテゴリー。タグから選べます。
Scripts
スプリストは、デフォルトではフッターにロードしますが、ヘッダーに変更可能です。