完璧なブログ記事を作成するのに何時間も費やしたのに、美しく高解像度の画像がサイトを非常に遅くしていることに気づいたことはありませんか？私も経験がありますが、読み込み時間が遅いと、訪問者がコンテンツを見る前に離れてしまう可能性があることを知るのはイライラします。
特に大規模なメディアライブラリを持つ確立されたウェブサイトでは、すべての画像を個別にリサイズするのは非常に時間がかかります。幸いなことに、WordPress内で数百の画像をわずか数回のクリックで直接リサイズでき、これは私のプロジェクトで非常に役立ちました。
このガイドでは、人気の無料プラグインを使用して画像をバルク最適化およびリサイズする正確な手順を説明します。サイトをより速く実行し、訪問者のエクスペリエンスを向上させます。特別な技術スキルは必要ありません。
TL;DR: 本題に入る前に、舞台裏で何が起こっているのかを簡単に説明しましょう。私たちは2つの主要なことを行います。
- 画像を適切な寸法にリサイズすること（大きな写真をブログの幅に合わせるなど）と
- 品質を損なうことなくファイルサイズを縮小するために画像を最適化することです。
スーツケースをより効率的に詰めるようなものだと考えてください。同じ素晴らしいものをより小さなスペースに収めることができます。今日使用するプラグインは、これらすべてを自動的に処理してくれます。👍
WordPressで画像をバルク最適化およびリサイズする理由
大きく最適化されていない画像は美しく見えるかもしれませんが、ウェブサイトを密かに遅くする可能性があります。これは、誰かがあなたのサイトを訪れるたびに、ブラウザがこれらの大きなファイルをダウンロードする必要があり、時間がかかり、ページの読み込みが遅くなる可能性があるためです。
サイトの表示速度が遅いと、訪問者のフラストレーション、検索順位の低下、さらにはオーディエンスを拡大する機会の損失につながることがよくあります。
大量の大きな画像をリサイズおよび最適化することで、ウェブサイトを高速化し、SEOを改善し、訪問者にとってよりスムーズな体験を作り出すことができます。これは大きな違いを生む簡単なステップです。
WPBeginnerでは、アップロードする大きな画像はすべてリサイズするようにしています。また、投稿全体で画像の一貫性と統一性を保つために、特定の寸法に準拠しています。
チーム全体の手順がすでに確立されているため、WPBeginner では通常、画像をまとめてリサイズする必要はありませんが、他のウェブサイトで作業していた際には間違いなく行う必要がありました。
大規模な画像のサイズ変更は、あらゆる種類のウェブサイトにとって不可欠ですが、特に画像が多いサイトに強くお勧めします。これには、写真やポートフォリオサイト、豊富な商品カタログを持つeコマースプラットフォーム、アートやデザインサイトなどが含まれます。
さて、WordPressで大きな画像を一括リサイズする方法を学ぶ準備はできましたか？今日説明する手順は以下の通りです。
- ステップ1：EWWW Image Optimizerプラグインをインストールして有効化する
- ステップ2：基本的なプラグイン設定を行う
- ステップ3：既存の画像をまとめて最適化する
- ステップ4：画像をテストして確認する
- FAQs About Resizing Images in WordPress
🚨重要なお知らせ: 画像をリサイズすると、この操作は元に戻せません。そのため、画像をまとめてリサイズする前に、WordPressサイトをバックアップすることをお勧めします。これにより、問題が発生した場合に画像を以前のバージョンにすばやく戻すことができます。
さあ、始めましょう！
ステップ1：EWWW Image Optimizerプラグインをインストールして有効化する
まず、適切なツールを入手する必要があります。ここでは無料のEWWW Image Optimizer（EWWW IO）プラグインを使用します。私の意見では、WordPressで画像をバルクリサイズするための最良の無料オプションです。
画像は自動的に圧縮、リサイズ、WebPなどの形式に変換されるため、サイトを高速化できます。
多数の画像ファイルを持つ大規模サイトでは、一括最適化機能が特に役立つことがわかりました。これにより、多くの時間を節約し、すべての画像が効率的に最適化されることを保証できます。
その機能についてさらに詳しく知りたい場合は、EWWW IOの完全レビューをご覧ください。
さて、EWWW IOをインストールしましょう。WordPressダッシュボードで、プラグイン » 新規追加に移動し、「EWWW Image Optimizer」を検索します。
表示されたら、「今すぐインストール」をクリックし、次に「有効化」をクリックします。
これを行う方法を再確認する必要がありますか？WordPressプラグインのインストール方法に関するガイドをご覧ください。
ステップ2：基本的なプラグイン設定を行う
画像のサイズを変更する前に、EWWW IOの基本設定を構成することが重要です。
これを行うには、設定 » EWWW Image Optimizer に移動する必要があります。
これにより、プラグインのセットアップウィザードが自動的に開きます。
最初の画面で、目標について質問されます。サイトを高速化したいですか、それともストレージ容量を節約したいですか？
あなたに最もよく当てはまるオプションを選択してください。プレミアムプラグインを購入したくない場合は、「無料モードで続行」も選択する必要があります。準備ができたら「次へ」をクリックします。
次のページでは、チェックする3つのボックスが表示されます。それぞれの意味を一つずつ説明します。
まず、「メタデータの削除」があります。このオプションは、カメラの設定や位置情報などの不要なデータを画像から削除し、画像をさらに軽量化するため、このボックスをチェックすることをお勧めします。
次に「遅延読み込み」です。このオプションを有効にすると、ユーザーがスクロールして画像に到達したときにのみ画像が読み込まれるため、ページの読み込みが速くなります。
一般的には遅延読み込みをお勧めしますが、パフォーマンスプラグインが既に提供している場合は、ここで有効にする必要がないかもしれません。
次に、「WebP変換」オプションがあります。WebPはGoogleが作成した最新の画像フォーマットであり、従来のJPEGやPNGと比較してファイルサイズが大幅に小さいにもかかわらず、優れた画質を提供します。
画像をWebP画像に変換することは、サイトの速度を大幅に向上させる最も簡単な方法の1つであるため、これを有効にすることを強くお勧めします。
一部の訪問者が古いブラウザを使用している場合でも心配ありません。EWWW IOはそれらに適切な画像形式を自動的に提供します。
その下で、画像の「最大幅」と「最大高さ」を設定できます。
⚠️ 専門家のアドバイス: 最適な画像の寸法を理解することは、品質を犠牲にすることなくサイトの速度を維持するための鍵です。ほとんどのブログ投稿画像では、最大幅を1200ピクセルに設定することをお勧めします。このサイズは、デスクトップからモバイルフォンまで、ほとんどの画面でシャープでクリアに見え、大きすぎません。
これらの設定の決定に役立つ情報が必要な場合は、WordPressの画像サイズに関する初心者向けガイドをご覧ください。
最後に、画像バックアップソースを選択します。これらの変更を行った後、下部にある「設定を保存」ボタンをクリックします。
その後、EWWW IOが、設定した最大幅と高さを使用して、アップロードする新しい画像を自動的にリサイズするというメッセージが表示されます。
ただし、既存の画像をバルクでリサイズする必要があります。これは次のステップで説明します。続行するには「完了」をクリックするだけです。
ステップ3：既存の画像をまとめて最適化する
大量の大きな画像を一度に最適化およびリサイズする準備はできましたか？
WordPressダッシュボードから、メディア » 一括最適化に移動します。ここで、「最適化されていない画像をスキャン」というボタンが表示されます。
ボタンをクリックすると、プラグインはメディアライブラリを検索し、最適化またはリサイズできるすべての画像を見つけます。
スキャンが完了すると、最適化する画像の合計数が表示されます。
「X個の画像を最適化」というボタンをクリックして、プロセスを開始します。
画像の数によっては時間がかかる場合がありますが、便利なプログレスバーで進捗状況を監視できます。
これが完了すると、画像は以前に設定した設定に従ってリサイズされ、サイトに新鮮で高速なエッジが与えられます！
ステップ4：画像をテストして確認する
リサイズが完了したら、すべてが期待どおりに機能しており、画像が正しく表示されていることを確認する時期です。
ウェブサイトにアクセスし、いくつかのページを閲覧してください。画像が表示され、素早く読み込まれることを確認してください。これはユーザーエクスペリエンスに影響します。
次に、メディアライブラリに移動して、画像の寸法を確認します。これらがプラグインの設定で以前に設定した値と一致しているか確認してください。
これを行うには、WordPressダッシュボードの メディア » ライブラリ に移動します。次に、画像のいずれかを選択します。
私の例では、画像の寸法は1200ピクセル×807ピクセルであり、これは私が以前に選択した最大幅を正しく反映しています。
すべてがうまくいっているなら、おめでとうございます。WordPressの大きな画像をまとめてリサイズし、今後のアップロードのためにサイトを設定しました。
⚠️ トラブルシューティングのヒント: 画像のサイズ変更は常にスムーズとは限りません。サイズ変更後に画像がぼやけて見えることがあります。これは、最適化中に設定された寸法が小さすぎる場合に発生することがよくあります。常に設定を再確認し、さまざまなサイズを自由に試してください。これも、サイズ変更を開始する前に画像のバックアップを作成することが非常に重要である理由です。
WordPressで画像をリサイズすることに関するFAQ
WordPressで大きな画像を一括リサイズする方法がわかった今でも、いくつかの質問があるかもしれません。いくつか一般的な質問を取り上げて、お手伝いします。
WordPressの画像を一度に複数リサイズするにはどうすればよいですか？
WordPressで複数の画像を一度にリサイズおよび最適化するには、EWWW Image Optimizerのようなプラグインを使用できます。このガイドで示した設定を構成したら、WordPressダッシュボードのメディア » 一括最適化に移動します。
そこから、「最適化されていない画像の検索」ボタンをクリックします。プラグインは、リサイズまたは圧縮が必要なメディアライブラリ内のすべての画像を自動的に検出します。スキャンが完了したら、ワンクリックで1つのバッチですべてを最適化できます。
WordPressで画像を自動的にリサイズするにはどうすればよいですか？
画像を自動的にリサイズするために、EWWW Image Optimizerのようなプラグインを使用することをお勧めします。プラグインをインストールして有効化したら、ダッシュボードのプラグインの設定 » EWWW Image Optimizerに移動します。
次に、画像の希望する寸法を設定します。これらの設定により、アップロードする新しい画像はすべて、指定した寸法に合わせて自動的にリサイズされます。
WordPressでの画像最適化に関する追加リソース
サイトの画像を次のレベルに引き上げたい場合は、これらのガイドも役立つかもしれません。
- WebP vs. PNG vs. JPEG：WordPressに最適な画像フォーマット
- 品質を損なわずにWebパフォーマンスのために画像を最適化する方法
- WordPressはサイト上の画像をどこに保存しますか？
- ブログ記事用の画像をより良く作成するためのツール
- 画像 SEO の初心者ガイド – 検索エンジンのための画像を最適化する
- WordPressメディアライブラリにGoogleドライブを接続する方法
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
ハーブ・ボールドウィン
Imsanityプラグインは、ブログにアップロードする際にピクセルを自動的にリサイズしますか？それとも、大きなファイルをリサイズするためにプラグインを定期的に「実行」する必要がありますか？
WPBeginnerサポート
プラグインは現在、画像を自動的にリサイズします。
管理者
Chris
このプラグインはアスペクト比を維持しますか？
私がしたいのは、幅が800pxより大きい画像を、歪ませることなく幅800pxにリサイズすることだけです。例えば、2400×1200pxの画像は800×400pxにリサイズされ、1600x900pxは800x450pxにリサイズされるべきです。
お手伝いいただけると幸いです。よろしくお願いします。
ブレンダ・マウラー
残念ながら、このプラグインは私がリサイズしたい一部の画像では機能しません。
リサ・ウィスト
残念ながら、このプラグインはWPの現在のリリース（4.5.2）では動作しません。このプラグインのサポートタブを確認すると、バージョン4.5以降動作しなくなったと報告している人が複数いることがわかります。代替の推奨事項はありますか？
WPBeginnerサポート
WordPress 4.5.2でプラグインをテストしました。期待どおりに動作しました。プラグインでどのような問題が発生していますか？
管理者
shade
こんにちは。サイトにinsanityプラグインをインストールしたばかりで、設定に進んだところ、ページ/投稿内に読み込まれた画像が幅/高さ2048×2048ピクセルであることがわかりました。投稿やページの画像ではなく、すべてのフィーチャー動画画像のみを標準サイズにリサイズしたいです。どうすればよいかわかりません。警告に注意したいので、誰か助けてもらえませんか。
ありがとう
Roger
数百ものブログ投稿を持つ多くの画像があるサイトに取り組んでいます。作者はオリジナルの写真をアップロードし、WPエディタを使用してトリミングおよび「リサイズ」していたようです。これはオリジナルのアップロードされたファイルをそのまま残していると確信しており、サイトは非常に肥大化し、ほとんど管理不能になっています。このプラグインは、大きなオリジナル画像を後から削除しますか？
事前に感謝します！
カーリー
私もこの答えを知りたいです！
Diederik
もう一つの可能性ですが、ソースはウェブサイトのアドレスにできますか？画像ではなく、サイトのホームページで、例えばjpgを返すような？
Daz Owens
これまで使用したことがあり、素晴らしいプラグインです。何千もの画像を処理する必要がありましたが、うまく機能しました！
Cameron Archibald
素晴らしい記事です。優れたプラグインのようですね。CDNについても読み、多くのことを学びました。どうもありがとうございました。
Travis Pflanz
すべてのプロジェクトでImsanityを使用しています。
この記事では、このプラグインの最高の機能さえカバーしていません。Imsanityは、アップロード時に大きな画像を自動的にリサイズし、大きすぎる画像を破棄して、リサイズされた画像を「オリジナル」として保存します。
例：5メガピクセルの画像で、幅が5000ピクセル以上あるとします。ウェブサイトでこれほど幅の広い画像は必要ありません。
画像をアップロードするだけで、Imsanityは画像を（トリミングせずに）リサイズし、リサイズされた画像をサーバーとメディアライブラリに保存します。
これは、テーマが貧弱にコーディングされており、ウェブサイトに表示するために元の画像サイズを使用している場合にも役立ちます。ウェブサイトでの非常に遅い画像読み込みは、誰もが経験したことがあるでしょう。
私のおすすめ:
ページ/投稿にアップロードされた画像をコンテンツコンテナのサイズに設定します。サイドバーのあるページとないページを使用する場合は、サイドバーのないページの幅を使用するようにしてください。変更
「メディアライブラリにアップロード済み」と「他の場所にアップロード済み」を無制限に設定します。これにより、必要に応じて大きな画像を簡単に保存できるようになり、スライドショー、背景、ヘッダーなどに大きな画像を使用できるようになります。