ー記事レベルー
- 初心者
- 重要度
- 難易度
「WordPressの表示速度、まだ遅いままですか?」
WordPressサイトの表示速度が遅いと、訪問者の離脱率が高まり、SEOにも悪影響を及ぼします。そのため、画像の最適化はサイト速度向上において非常に重要です。
Smushは無料で使える画像圧縮ツールです。この記事では、Smushの基本から使い方、有料版のメリットまで徹底解説します。
こんにちはryoです!
助手だよ!
※「Smush」は無料で使用できます。しかし、一部の機能は有料版でのみ利用可能です。
Smushってなに?これだけで画像最適化がカンタンに!
Smushは、WordPressの画像最適化プラグインとして、サイトの表示速度を向上させるツールです。画像を圧縮し、サイズを最適化することでサイトの読み込み速度を大幅に向上させることができます。
画像を最適化することでサイトの読み込み速度が向上します。そのため、UX(ユーザーエクスペリエンス)の向上が期待できます。
- 画像の圧縮方法:Smushはロスレス圧縮(画質を損なわずに圧縮)やロッシー圧縮(若干画質を落とすことで圧縮率を高める)に対応しており、用途に応じて選択できます。
- 自動化機能:画像をアップロードする際に自動で圧縮する機能があり、手間をかけずに最適化できます。
UXにに関しての記事がありますので、UXがわからない方はよろしければ確認にどうぞ!
smushを実際に無料版で試してみた所、驚くほどサイトのスピードが改善しました
幾つか時間が書いていると思いますが、画像の項目は上から
・ページの読み込みにかかる時間
・ページ上の要素がどれだけ安定しているか
・ページが読み込まれてから何かをクリックするまでにユーザーが待たなければならなかった時間
これらはどれもSEOやUX(ユーザーエクスペリエンス)に直結してきますのでサイト運営で欠かせないものです。
これは試してみる価値ありだね!
有料版(Pro版)のメリット
CDN機能
- SmushのCDNを使用すると、画像が複数のサーバーから配信されるため、グローバルにアクセスするユーザーでも高速に画像が読み込まれます。
- これにより、特にサイトが多国籍ユーザーに向けて提供されている場合、非常に役立ちます。
WebP対応
- 次世代フォーマットWebPへの変換により、画像の圧縮率が高まり、サイトの読み込み速度が向上します。これがGoogle PageSpeed Insightsの「画像サイズを適切に設定」などの評価を改善します。
速度向上
- CDNとWebP変換を組み合わせることで、画像の読み込み時間が劇的に短縮され、ページの表示速度が向上します。ページが高速に表示されることで、ユーザーの滞在時間が長くなり、SEOにも有利に働きます。
効率的な帯域幅使用
- 圧縮された画像を配信することで、帯域幅の使用を最適化し、サーバーの負荷を軽減できます。特に個人で運営している場合、サーバーの負荷軽減は重要です。
項目 | 無料版 | 有料版(Pro) |
CDN機能 | ❌ 使えない | ✅ 使える |
WebP対応 | ❌ 使えない | ✅ 使える |
画像圧縮の枚数制限 | 50枚ごと | 無制限 |
バックアップ機能 | ❌ なし | ✅ あり |
どんな場合に有料が特に有効?
1.大量の画像を使用している場合
商品サイト、ポートフォリオサイト、ブログなど、画像が多く、ページ速度が重要な場合。
2.SEOを重視している場合
サイトの読み込み速度はSEOに大きな影響を与えます。高速化により、検索エンジンでのランキングが向上する可能性があります。
3.グローバルにユーザーがいる場合
CDNを使うことで、国際的にアクセスするユーザーにも高速で画像を配信できます。
個人サイトでも、サイトのパフォーマンス向上やSEO効果を最大化したいのであれば、Smushの有料版は非常におすすめです。特に、ページの読み込み速度が重要なサイトであれば、投資する価値があります。
下記の画像は作成者が投稿している「WPMU DEV 」にて調べられた結果となります。
SuperとUltra(Pro)ではこれほどの違いがあります。
ただ、無料でsmushを使ってみて便利だと感じたら有料版も検討した方が良さそうだね
Smush Proは、特に画像が多くページ速度やSEOを重視するサイト、グローバルにアクセスのあるサイトに最適です。
画像の圧縮と最適化を自動化し、CDN機能やWebP変換を活用することで、サイトのパフォーマンスを劇的に向上させることができます。
Smushのインストールと設定方法
Smushのインストール
- WordPressダッシュボードにログインします。
- 「プラグイン」→「新規追加」で「Smush」と検索。
- 「Smush Image Optimization – Optimize Images | Compress & Lazy Load Images | Convert WebP | Image CDN」をインストールし、有効化します。
基本設定の確認
- Smushの設定画面にアクセスすると、簡単な初期設定があります。ここでは、画像の圧縮方法やサイズ制限などを設定できます。
Bulk Smush
Bulk Smushを使うことで、すでにアップロードされている画像を一括で圧縮し、サイトのパフォーマンスを劇的に向上させることができます。ここでは、Bulk Smushの設定方法を順を追って解説します。
実際の圧縮中の画面はこんな感じです↓
結果は…
無料版だと50枚の段階でストップするから少し手間だね
Bulk Smushの設定方法
1.Smush Mode
2.画像サイズの選択
3.自動圧縮の有効化
4.メタデータの削除
5.Image Resizing
6.Original Images
7.Email Notification(※有料版のみ)
8.一括復元
1.Smush Mode
Bulk Smushでは、画像の圧縮レベルを「Basic」「Super」「Ultra」の3つから選択できます。それぞれの圧縮レベルについて詳しく見ていきましょう。
- Basic:基本的な圧縮を行い、画質にほとんど影響を与えません。ファイルサイズは適度に圧縮され、画質を維持したい方におすすめです。
- Super:ロッシー圧縮を使用してファイルサイズを大幅に削減します。画像の画質に少し影響がありますが、大きなファイルサイズを削減したい場合に最適です。
- Ultra:最高の圧縮率を提供し、サイトの表示速度を大幅に向上させます。画質は多少落ちますが、最も効果的な圧縮を実現します。
試しに使ってみたい場合は、「Super」がおすすめだね
個人運営の設定
- ページ表示速度や画像品質を最優先にする場合、「Super」か「Ultra」を選ぶと良いでしょう。特に「Ultra」は、サイトの速度改善に大きな影響を与えます。
複数運営の設定
- 複数サイトを運営している場合、全体的なパフォーマンス向上を狙い、「Ultra」を使用するのが理想的です。複数のサイトで一括圧縮する際に、圧縮レベルを統一しておくことで、全サイトのパフォーマンスが均一になります。
2.画像サイズの選択
WordPressは、アップロードした画像に対して複数のサムネイル(サムネ画像)を生成します。Bulk Smushでは、これらのサムネイルサイズに対して圧縮を適用するか選べます。
- すべて:すべてのサムネイルサイズに圧縮を適用します。
- カスタム:特定のサムネイルサイズのみを圧縮します。
3.自動圧縮の有効化
自動圧縮オプションを有効にすると、新しい画像をアップロードするたびに自動的に圧縮が適用されます。この設定をオンにすることで、手動で圧縮作業をする必要がなくなり、効率的に画像を最適化できます。
- 自動圧縮を有効にする:アップロードした画像を自動的に圧縮します。
4.メタデータ
画像にはEXIFデータ(撮影日時、カメラ情報、位置情報など)が含まれていることがあります。
これらのメタデータを削除することで、画像ファイルのサイズを削減することができます。Smushでは、EXIFデータを削除するオプションがありますが、SEOに関連するメタデータは削除されません。
- メタデータを削除する:画像からEXIFデータを削除します。
5.Image Resizing
Image Resizingは、アップロードされた画像を自動的にリサイズして、最大幅や高さを指定することができます。
この機能は、WordPressが作成する複数のサムネイル画像が適切なサイズになるよう調整するため、サイトのパフォーマンスを向上させます。
元の画像のサイズを変更する
これをオンにすると、アップロードされる画像の最大サイズを指定できます。デフォルトでは、WordPressは画像が2560x2560pxを超える場合、画像を自動的に縮小します。設定を変更して、さらに小さいサイズにリサイズすることも可能です。
スケーリングを無効にする
この設定をオンにすると、指定されたサイズを超える画像の自動リサイズを無効化します。リサイズを行わずに、元の画像サイズをそのまま保持することができます。注意点として、PNG画像にはこの設定は適用されません。
6.Original Images
Original Imagesは、アップロードされた元の画像に対してどのように最適化を行うかを決めるオプションです。この設定を活用することで、元の画像を無駄なく最適化し、サイトのパフォーマンスを向上させることができます。
- 元の画像を最適化: 「Optimize original images」を有効にすることで、元画像も最適化対象にします。これにより、すべての画像が圧縮され、サイトの読み込み速度が向上します。
- 元の画像をバックアップ: 「Backup original images」を有効にすることで、最適化前の元画像をバックアップします。ただし、バックアップを保存すると、ディスク容量を消費する点を考慮する必要があります。
7.Email Notification(※有料版のみ)
Email Notificationを使用すると、Bulk Smushがバックグラウンドで画像の最適化を実行している最中でも、処理が完了したことを通知するメールを受け取ることができます。
これにより、画像最適化の進捗状況をリアルタイムで確認でき、作業が終了したタイミングで次のステップに進むことが可能です。
使うべき場合 | 使う価値があるかどうかの判断基準 |
---|---|
2.複数サイトを運営している 3.最適化作業を自動化したい 4.作業が長時間に及ぶ場合 | 1.画像最適化を頻繁に行う場合1.作業量が多い場合 2.効率化したい場合 3.予算に余裕がある場合 |
8.一括復元
一括復元機能は、Smushの設定で最適化した画像を元に戻す機能です。もし最適化がうまくいかなかった場合や、元の画像品質が必要な場合に使用できます。
具体的には、最適化を行った画像のサムネイル(サムネイル画像)を元の状態に戻すことができます。
一括復元機能を有効にする
Smushで一度画像を最適化した後、最適化によって画像の品質が低下してしまった、または何らかの理由で元のサムネイル画像を復元したい場合に使用します。
この設定を有効にすると、最適化されたサムネイル画像をオリジナルの状態に戻せます。
設定手順:
- 「Restore Thumbnails」をクリックすることで、一括復元が開始されます。
復元の流れ 一括復元を行うと、Smushが最適化を行う前のオリジナルの画像サムネイルを再生成し、元に戻します。
ただし、復元後の画像品質は、元のオリジナル画像に依存するため、最適化を有効にしていた場合は品質が変化することがあります。
Directory Smush
Directory Smushは、WordPressサイトのメディアライブラリ外に保存されている画像ファイルを最適化するためのツールです。
例えば、テーマやプラグインフォルダ、あるいはカスタムディレクトリ内に画像が保存されている場合、これらの画像を一括で最適化できます。
1. メディアライブラリ以外の画像を圧縮したいとき
2. サーバーのストレージ容量を節約したいとき
3. 画像の読み込み速度を向上させたいとき
4. 画像圧縮の手間を減らしたいとき
5. サブディレクトリ内の画像を一括圧縮したいとき
選べないディレクトリについて
- wp-admin と wp-includes は、WordPressのコアファイルが含まれているため、選択できません。
- これらはWordPressのシステムファイルであり、画像の圧縮を行う必要がないため、Smushでは圧縮対象として選べません。
選べるディレクトリ
wp-content
ここにはテーマ、プラグイン、アップロードされたメディアファイルなどが格納されています。ここに保存された画像を圧縮することができます。
wp-content/uploads
このフォルダにはユーザーがアップロードした画像やメディアファイルが保存されます。
Bulk Smushで自動的に処理されるため、このディレクトリは選択できませんが、他のディレクトリ(例:テーマフォルダやプラグインフォルダ内の画像など)は手動で選んで圧縮できます。
選択できる画像ファイル
default_page.pngのような画像ファイルも表示されている場合、それはあなたが圧縮対象にしたい画像ファイルです。これらを選択することで、その画像を最適化することができます。
ディレクトリを選択
- 最後に「Choose directory」をクリックして、最適化したいディレクトリを選びます。
一括で最適化できる: 複数のサイトを運営している場合、それぞれのサイトのメディアライブラリ外の画像を一度に圧縮できるため、運営負担が軽減されます。
効率化: 同じサーバーで複数のWordPressサイトを運営している場合、共通の画像ディレクトリを選んで圧縮することで、すべてのサイトで画像の最適化を効率的に行えます。
パフォーマンス向上: サイト数が多い場合、各サイトの画像を圧縮することで、全体のサイトパフォーマンスが向上し、より多くの訪問者を受け入れられるようになります。
おすすめの使用シーン
- サイトのテーマやプラグインをカスタマイズしている場合、追加した画像ファイルを一括圧縮したいとき。
- 自分でデザインした画像やアイコンをアップロードしている場合、それらも含めて圧縮したいとき。
一括で最適化できる: 複数のサイトを運営している場合、それぞれのサイトのメディアライブラリ外の画像を一度に圧縮できるため、運営負担が軽減されます。
効率化: 同じサーバーで複数のWordPressサイトを運営している場合、共通の画像ディレクトリを選んで圧縮することで、すべてのサイトで画像の最適化を効率的に行えます。
パフォーマンス向上: サイト数が多い場合、各サイトの画像を圧縮することで、全体のサイトパフォーマンスが向上し、より多くの訪問者を受け入れられるようになります。
おすすめの使用シーン
- 複数のサイトで共通の画像フォルダを使用している場合。
- 各サイトに異なるテーマやプラグインがインストールされており、それぞれにアップロードされた画像を効率よく圧縮したいとき。
Directory Smushは、WordPressのメディアライブラリ以外に保存されている画像も圧縮できる便利な機能です。
初心者でも、サイトのパフォーマンス向上やサーバー容量の節約を簡単に行うことができます。特に、サイトの画像が多くなりがちな場合に非常に役立ちます。
Lazy Load
Lazy Loadは、ウェブサイトにおいて画像や動画などのメディアを、ユーザーがスクロールしてそのコンテンツが画面に表示される直前に読み込む技術です。
これにより、ページの初回読み込み速度が向上し、ユーザー体験を改善することができます。
ページを開いたときに、見えていない部分の画像や動画は後から読み込む仕組みのことだよ
Lazy Loadの設定手順
1.メディアタイプ
2.Output Locations
3.Display & Animation
4.Include/Exclude
5.スクリプト
6.Native lazy load
7.Disable Noscript
8.無効化
メディアタイプ
説明
どのメディアタイプにLazy Loadを適用するかを選択できます。
たとえば、画像、動画、iframeなどのメディアファイルに対してLazy Loadを有効にできます。通常は画像に適用することが多いですが、必要に応じて動画やその他のメディアにも適用できます。
Output Locations
説明
Lazy Loadを適用する場所を絞り込む設定です。
デフォルトでは、すべての画像にLazy Loadが適用されますが、特定のメディア出力場所を指定することで、より細かく制御できます。
Display & Animation
説明
画像が遅延読み込みされる前に表示されるプレースホルダーを選択できます。
- フェードイン: 画像が読み込まれるときにフェードインして表示されます。
- スピナー: 画像の読み込み中に回転するスピナーを表示します。
- プレースホルダー: 画像の代わりにプレースホルダー画像が表示されます。
- なし: 画像が読み込まれるまで何も表示しません。
アニメーション
説明
画像が表示されたときのアニメーションの効果を設定できます。
遅延時間(画像が表示されるまでの時間)や、アニメーションの期間(画像が表示されるスピード)を調整できます。デフォルトでは400msでフェードインする設定ですが、必要に応じて調整できます。
Include/Exclude
説明
特定のページや投稿、画像のクラスに対してLazy Loadを適用しない設定をすることができます。
特定のURLや画像クラス、IDを指定して、Lazy Loadを除外することができます。
投稿タイプ
説明
Lazy Loadを適用する投稿タイプを選択できます。
たとえば、「フロントページ」「ブログ」「固定ページ」「投稿」など、どのタイプの投稿にLazy Loadを適用するかを選べます。
投稿、固定ページ、URL
説明
Lazy Loadを除外する投稿や固定ページのURLを手動で指定できます。
特定のページやURLでLazy Loadを無効にしたい場合に使用します。例えば、「/example-page」など、URLを一行ずつ入力します。
Keywords
説明
特定の画像やiframeをLazy Loadの対象外にするために、画像のクラスやID、ファイル名、ソースURLなどを指定できます。これを使うことで、特定の画像やコンテンツにLazy Loadを適用しないことができます。
スクリプト
説明
Lazy Loadに必要なスクリプトをフッターまたはヘッダーに読み込むかを選択します。
通常はパフォーマンス向上のためにフッターに読み込む設定になっていますが、何か問題が発生した場合にはヘッダーに移動することもできます。
Native Lazy Load
説明:
ネイティブのブラウザのLazy Load機能を有効にするオプションです。
ブラウザによっては、ネイティブのLazy Loadを使用することができ、これを有効にすると、よりパフォーマンスが向上する場合があります。
7.Disable Noscript
説明
Lazy Loadを有効にしているときに、NoScriptが無効になるオプションです。
NoScriptは、JavaScriptを無効にしているユーザー向けにコンテンツを表示するための設定ですが、Lazy Loadを有効にしている場合はこれを無効にすることができます。
8.無効化
説明
Lazy Loadをすぐに無効にするオプションです。このボタンをクリックすることで、Lazy Loadの機能を停止できます。
設定方法の例
画像のLazy Loadを有効にする
画像メディアタイプに「Lazy Load」を適用する設定を選び、アニメーションを「フェードイン」に設定すると、ページをスクロールする際に画像がスムーズに表示されるようになります。
特定の投稿やページでLazy Loadを除外
「投稿タイプ」設定で「固定ページ」「ブログ」など、特定の投稿タイプを選び、「URL」設定で除外したいページ(例えば、特定のランディングページ)を指定することで、そのページではLazy Loadが無効になります。
パフォーマンスの最適化
スクリプトを「フッター」に設定して、ページ読み込みの最適化を図ります。また、Native Lazy Loadを有効にすると、ブラウザ側のパフォーマンス向上にもつながります。
Lazy Loadは、画像や動画などのメディアが多く、読み込み速度が重要なサイトにとって非常に有効です。
補足すると例えば、ブログの一番下にある画像は、スクロールするまで読み込まないってことだね
特に、ユーザーの初回ページ読み込み速度を速くしたい場合や、モバイルユーザーをターゲットにした場合に大きなメリットがあります。また、サーバーの負荷軽減にもつながるため、高トラフィックなサイトにも最適です。
CDN(※有料版のみ)
CDN(Content Delivery Network)は、インターネット上の複数のサーバーを利用して、ユーザーにコンテンツを高速に配信する技術です。
特に画像や動画などのメディアファイルを分散型のサーバーから直接配信することで、サイトの読み込み速度を大幅に向上させることができます。
サイトのデータを世界中のサーバーに分散して、ユーザーの近くから素早く配信する仕組みのことだね
1. 画像が多いサイト
2. SEO対策を強化したいサイト
3. グローバルにユーザーがいるサイト
4. サイトのパフォーマンス向上
5. 帯域幅やサーバー負荷の軽減
6. 次世代画像フォーマットを使用したいサイト
※有料版の為、筆者の都合上実践できておらず
CDNを使用するメリット
高速化
世界中に分散されたサーバーから画像を配信することで、ユーザーがどの地域からアクセスしても素早くコンテンツが届きます。
帯域幅の節約
最適化された画像を提供することで、サーバーへの負担を減らし、ウェブサイトのパフォーマンスが向上します。
SEOに優しい
ページの読み込み速度を改善することで、GoogleのSEO評価が上がります。
「世界中の人がアクセスするサイト」とかだと必須かもしれないね
Local WebP(※有料版のみ)
Local WebP機能は、WebP形式で画像を提供することで、GoogleのPageSpeed Insightsで「Serve images in next-gen format」という推奨を満たすための機能です。
WebPは、同じ画質でより小さいファイルサイズを提供する次世代の画像フォーマットであり、サイトのパフォーマンス向上に非常に効果的です。
サーバー内で画像をWebP形式に変換して表示する機能のことだよ
1. サイトのページ速度を改善したいとき
2. SEO対策を強化したいとき
3. モバイルユーザー向けの最適化
4. 画像が多く、ディスプレイ環境が多様なサイト
5. WebPを使いたいがCDNを利用しない場合
6. リソースが限られている小規模サイトや個人サイト
7. 大量の画像を使うブログやオンラインショップ
Local WebPの主な特徴と活用方法
WebP画像の提供
Google PageSpeedの推奨に対応
「Serve images in next-gen format」とは、ページで使用している画像をWebPのような次世代フォーマットで提供し、ページの読み込み速度を改善するというGoogleの推奨です。
SmushのLocal WebP機能を使うことで、この推奨に簡単に対応できます。
2. サーバー上で直接WebP画像を配信
Local WebPは、CDN(Content Delivery Network)を使用せずに、WebP画像を直接自分のサーバーから配信することができます。
これにより、WebP対応のブラウザにはWebP画像を提供し、対応していないブラウザには元のJPEGやPNG画像を自動的に表示します。
3. 簡単な設定
- Smush ProのLocal WebP機能を有効にするために、特別なサーバー設定やCDNの導入は必要ありません。設定は「1クリック」で有効化でき、すぐにWebP形式をサポートするブラウザ向けに画像を提供することができます。
画像が多いブログなどで使うといいよ!
SmushのLocal WebP機能は、画像を多く使うサイトやページの読み込み速度を改善したいとき、SEO対策を強化したいとき、モバイル向けに最適化を進めたい場合などに特に役立ちます。
また、簡単に設定できるため、専門的な技術知識がなくてもすぐに導入でき、サイトのパフォーマンスを改善することができます。
Integrations
Integrations(統合機能)は、特定のプラグインやサービスとの連携を可能にし、画像の最適化をさらに便利にします。ここでは、Smushが対応しているIntegrationsについて詳しく説明します。
バラバラのツールをつなげて一緒に動かす仕組みって言うとわかりやすいかな?
Integrations設定手順
1.Gutenbergサポート
2.Gravity Forms
3.WPBakery Page Builder
4.Amazon S3 (Pro)
5.NextGen Gallery (Pro)
1.Gutenbergサポート
Gutenbergブロックエディターを使っている場合、画像圧縮状況を直接ブロック内で確認・管理できます。
設定方法:Gutenberg Supportを有効にすると、Gutenbergブロック内で統計や「手動で圧縮」ボタンが表示されます。これにより、画像を直接編集して圧縮状況を確認し、必要に応じて手動で圧縮を行えます。
2.Gravity Forms:
Gravity Formsで画像をアップロードするフォームを使っている場合、自動的に画像を圧縮し、フォームのパフォーマンス向上が図れます。
設定方法: Gravity Formsプラグインをインストールし、Smush設定内で「Gravity Forms Integration」を有効にします。これで、Gravity Formsを使用してアップロードされた画像が自動的に圧縮されるようになります。
特に「フォームの画像を圧縮する必要がない」のであれば、Gravity Formsは基本的には不要だよ!
3.WPBakery Page Builder
WPBakery Page Builderを使用して画像を編集・リサイズしている場合、Smushが自動で圧縮し、ページ表示速度が向上します。
設定方法: WPBakery Page Builderをインストールし、Smush設定内で「WPBakery Page Builder Integration」を有効にします。この設定により、WPBakery内でリサイズされた画像もSmushで圧縮されるようになります。
WPBakery Page BuilderはWebサイトのレイアウトをビジュアルで簡単に作成できるツールです。
Elementorの無料版で十分対応できますよ!
4.Amazon S3 (Pro)
活用場面: 画像をAmazon S3に保存している場合、Smushがその画像も圧縮し、S3上の最適化を維持できます
設定方法: WP Offload MediaとAmazon S3の設定を完了し、Smush設定内で「Amazon S3 Support」を有効にします。これで、S3に保存された画像が自動的に圧縮されるようになります(Pro版が必要)。
5.NextGen Gallery (Pro)
活用場面: NextGen Galleryを使ってギャラリー内の画像を管理している場合、自動的に圧縮してパフォーマンス向上に役立ちます。
設定方法: NextGen Galleryをインストールし、Smush設定内で「NextGen Gallery Integration」を有効にします。これで、NextGen Galleryで使用している画像がSmushによって圧縮されるようになります(Pro版が必要)。
要するに、特定のプラグインやサービスを使用している場合に、Smushの統合機能を使うことで画像の圧縮と最適化が効率的に行え、サイトのパフォーマンスを向上させることができます。
Google AnalyticsやSearch ConsoleとWordPressを連携したい方には効果ありだね
設定
設定を適切に調整することで、Smushを最大限に活用し、効率的に画像圧縮やパフォーマンス向上を図ることができます。
1.General
2.Configs
3.Data & Settings
4.Accessibility
1.General (一般設定)
General はSmushの基本的な動作を決める場所ですね
Image Resize Detection (画像サイズ検出)
この設定を有効にすると、コンテナに対して大きすぎるまたは小さすぎる画像をハイライト表示できます。ただし、このハイライトは管理者だけが見ることができ、訪問者には表示されません。
翻訳 (Translation)
Smushは、WordPressの管理画面で設定されている言語を基に自動的に翻訳を適用します。日本語もサポートされています。
使用状況の追跡 (Usage Tracking)
Smushの使用状況データを匿名で送信し、プラグインの改善に役立てます。どの機能が使われているかを追跡します。
2.Configs (プリセット設定)
カスタマイズした設定を保存して、使い回せるようにする機能のことだね
保存した設定をアップロードして、他のサイトに一度に適用することができます。
設定を一括削除するオプションもあります。
プリセットの設定を名前付きで保存し、適用可能です。
3.Data & Settings (データと設定)
プラグインのデータの取り扱い方法を設定できます。これには圧縮結果、統計情報などが含まれます。
プラグインをアンインストールする際に、設定を保存するか、完全に削除するかを選択できます。
設定をデフォルトの状態に戻すオプションです。
プロ機能を有効にする際に問題が発生した場合、APIのステータスを更新できます。
Smushの内部データやデフォルト設定の管理画面のことだよ!
4.Accessibility (アクセシビリティ)
要素やコンポーネントの可視性を高め、WCAG AAA基準に準拠した表示を提供します。
高コントラストモードを有効にすることで、視覚的にアクセシビリティを向上させます。
アクセシビリティ(使いやすさ)を向上させる機能が設定できるよ!
まとめ:Smushで画像最適化を始めよう!
以上が、Smushを活用した画像最適化の手順でした。
smushは簡潔に伝えると画像を圧縮・最適化して、サイトの表示速度を速くするプラグイン
このプラグインを使うことで、サイトの速度を大幅に改善し、SEO対策にも効果的です。最初は設定や使い方に戸惑うかもしれませんが、一つひとつ試していくうちにきっと使いこなせるようになります。
いかがでしたでしょうか?Smushを使えば、サイトの表示速度が速くなり、SEO効果もバッチリです。
画像圧縮をまだ行っていないなら、まずはSmushを無料で導入してみましょう!
ぜひこの記事を参考に、サイトをさらに快適にしてみてください!