Categories: WP プラグイン

画像を最適化するプラグイン Smushの設定と使い方

Smush Image Compression and Optimization の役割

画像を最適化することによって、ページロードが速くなり、サイト訪問者がより快適にサイトを閲覧できるようになります。SEO的にも画像の最適化は必要です。

画像を最適化するプラグイン「Smush Image Compression and Optimization」について記載します。(以降Smushと記載)

アップロードしている画像と新しくアップロードする画像を圧縮・最適化します。

Smush の圧縮制限

画像の圧縮の一日や一月の枚数制限はありませんが、一回に圧縮できるファイルサイズは最大5MBです。また一括に最適化できるのは50枚までです。

  • 1回のファイルサイズは最大5MB
  • 一括最適化は50枚まで

Smush をインストール

  1. プラグインの新規追加で Smush Image Compression and Optimization を検索
  2. インストールする
  3. 有効化する

プラグインのインストール前には、もしものためにバックアップを取っておきます。

Smush の設定

  1. 左側の項目よりSmushをクリック
smush 最適化

Image Sizes(画像のサイズ)の設定

WordPress は画像をアップロードすると同時に、様々なサイズの画像を自動生成します。

最適化する画像のサイズをImage Sizes で選ぶことができます。

  • All(すべてを最適化する)
  • Custom(最適化する画像のサイズを選ぶ)

次の画像のように、様々なサイズの画像が生成されています。最適化する画像のサイズにチェックを入れます。

smushの最適化 設定

メディア設定で指定したサイズやテーマやプラグインで利用されるサイズの画像が生成されます。

(参考)

メディアの設定 サイズ

詳しくは下記リンクをご参考ください。

WordPress 画像のアップロードで複数生成される理由と確認項目 - WordPress
Sponsor 目次 1枚の画像をアップ...

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」で圧縮する画像のサイズを選ぶことができます。

既存の画像を一括圧縮

  1. Smush→DASHBODへ
  2. Bulk Smush をクリック
Bulk Smush をクリック

既存の画像を個別に圧縮

  1. メディアライブラリを開く
  2. Smushをクリックする
smushで圧縮

その他の圧縮・設定

DASHBOARDの説明です。

Directory Smush

アップロードディレクトリ以外の画像を圧縮できます。テーマやプラグインなどによってアップロードディレクトリ以外にも画像が保存されています。そのフォルダを選び圧縮できます。

手順

  1. Choose Directoryをクリックする
  2. ディレクトリが表示される
  3. 圧縮したいフォルダを選択する
  4. Smushをクリック

Gutenberg Support

グーテンベルクのブロックにSmush統計を表示することができます。

smushの設定

Lazy Load(遅延ロード)

ページが読み込まれるまで、スクロールせずに見られる画像の読み込みを遅らせます。サーバーの負荷が軽減され、ページのロード時間が短縮されます。

  1. ACTIVATEをクリックする
  2. 設定する
  3. 設定を保存する

設定の内容は以下です。

Media Types(遅延するメディアタイプ)を選択する

jpeg、PNG、gif、svgより選びチェックを入れます。

Output Locations(遅延ロードするロケーション)を選択する

コンテンツ、ウィジェット、サムネイル、Gravatar より選びチェックを入れます。

Display & Animation

フェードイン遅延画像をフェードインで表示させる
スピナー画像読み込み中にスピナーを表示する(独自のGIFのアップロードも可能)
プレイスフォルダー読み込み中に表示させる画像(独自の画像をアップロード可能)
smushの設定 スピナーの表示

Include/Exclude

  • 遅延ロードさせる投稿タイプを選ぶ
  • 遅延ロードを無効にするURL等を入力する
  • 遅延ロードを無効にするID等を指定する

画像を遅延ロードさせる投稿タイプはトップページ、ホーム、固定ページ、投稿ページ、アーカイブ、カテゴリー。タグから選べます。

Scripts

スプリストは、デフォルトではフッターにロードしますが、ヘッダーに変更可能です。

ゆきを