Sponsor

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

smush 最適化 WP プラグイン
smush 最適化
Sponsor

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 最適化
smush 最適化

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

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

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

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

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

smushの最適化
smushの最適化 設定

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

(参考)

メディアの設定
メディアの設定 サイズ

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

WordPress 画像のアップロードで複数生成される理由と確認項目 - WordPressをもっと簡単に/ゆきを
Sponsor 目次 1枚の画像をアップロードすると複数枚保存される画像最適化プラグインで生成される画像のサイズを確認生成される画像のサイズをFTPで確認メディアが保存されているディレクトリメディアライブラリで確認Wor

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 をクリック
smush 最適化
Bulk Smush をクリック

既存の画像を個別に圧縮

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

その他の圧縮・設定

DASHBOARDの説明です。

Directory Smush

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

手順

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

Gutenberg Support

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

smushの設定
smushの設定

Lazy Load(遅延ロード)

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

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

設定の内容は以下です。

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

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

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

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

Display & Animation

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

Include/Exclude

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

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

Scripts

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