ホームページが遅くて悩んでいますか？速度の問題はいくつかの原因で発生する可能性があり、そのうちの1つは大きな画像サイズです。特にコンテンツの多いサイトでは、画像サイズが速度低下の主な原因である可能性があります。したがって、 WordPress サイトで画像を最適化することは、サイトのスピードアップに重要です。
このガイドは Avadaと同様の販売量を記録している人気 WordPress テーマである Diviテーマのブログで提示する内容をまとめたもので WordPress サイトに適した画像サイズを決定するのに役立ちます。画像の最適化により、サイトの速度を向上させることで顧客体験を向上させ、生産性を向上させることができます。
WordPress 画像サイズを理解する
WordPressでは、画像サイズはピクセル数とファイルサイズ（KBまたはMB）で決まります。画像サイズは審美的な要素を超えて、サイトの速度、ユーザーエクスペリエンス（UX）、検索エンジン最適化（SEO）などに直接影響します。 WordPress大きな画像をアップロードすると、自動的に複数のサイズの画像サイズ（サムネイルサイズ）を作成し、使用場所に応じて適切なサイズの画像を表示してトラフィックを削減します。
SRCSet機能
WordPressに画像をアップロードすると、さまざまなサイズの画像が自動的に作成されます（サムネイル、ミドル、大きな画像など）。 SRCsetプロパティは、ブラウザがデバイスの画面サイズとピクセル密度に合った画像サイズを自動的に選択できるようにします。
たとえば、ユーザーが大きなモニターでサイトにアクセスすると、ブラウザはより大きな画像（1024ピクセルなど）を読み込み、モバイルデバイスを使用してアクセスすると、ブラウザはより小さい画像（300ピクセルなど）を選択してページをすばやくロードします。します。
WordPressで自動的に生成される画像のデフォルトサイズは次のとおりです。
- サムネイル: 150 x 150 ピクセル
- 主：300 x 300ピクセル（設定によって異なる場合があります）
- 大きな画像：1024 x 1024ピクセル（設定によって異なる場合があります）
- フルサイズ: オリジナルサイズ
デフォルトの画像サイズの変更は WordPress 管理者ページ » 設定 » メディアで可能です。
WordPressに使用する画像サイズ
イメージファイルのサイズは200 KBを超えてはいけません。理想的なサイズは50KBから100KBの間です。画像サイズとともに、画像解像度も一緒に考慮する必要があります。
- ブログ投稿画像：1200 x 630ピクセル
- 主な画像（ブログ投稿サムネイル）：1200 x 800ピクセル
- ヘッダー画像/ヒーロー画像：1600 x 900ピクセルまたは1920 x 1080ピクセル
- 背景画像：1920 x 1080ピクセル
- スライダーとバナー：1200 x 600ピクセルまたは1920 x 800ピクセル
- 商品画像（WooCommerce）：800×800ピクセルまたは1000×1000ピクセル
- ロゴ画像：200 x 100ピクセルまたは250 x 100ピクセル
特に理由がない場合は、5000ピクセルのサイズに5 MBの容量の画像をアップロードしないことをお勧めします。 WordPressはWebフレンドリーなバージョンを生成しますが、元の状態の画像サイズを表示すると、ページの読み込みが遅くなる可能性があります。
WordPressに画像を正しくアップロードすることは、ウェブサイトのパフォーマンスを最適化し、すべてのデバイスで画像が鮮明に表示されるようにするために重要です。理想的な画像サイズは、投稿、サムネイル、スライダーなどの使用環境によって異なります。レスポンシブ、ファイルサイズ、画像品質などを一緒に検討する必要があります。
WordPress 画像サイズに関する考慮事項
WordPressで使用する画像を選択または作成するときは、速度（パフォーマンス）とデザインの最適化のためにいくつかの重要な点を考慮する必要があります。考慮すべき主な要素は、画像サイズ、ファイル形式、容量などです。
画像サイズ
画像サイズは、サイトのさまざまな部分で表示される方法に直接影響します。大きな画像を使用すると、読み込み時間が遅くなり、ユーザーエクスペリエンス（UX）とSEOに悪影響を及ぼす可能性があります。一方、小さすぎる画像は画像がぼやけて全体的な視覚的クオリティが低下する可能性があります。
画像サイズは WordPress テーマによって決まる場合が多いので、ヘッダー、ブログ投稿、ギャラリーなど各セクションに適したサイズをご確認ください。テーマのドキュメントを参照して推奨サイズを確認してください。
ファイルサイズ(容量)
大容量のファイルサイズを使用すると、ページの読み込み時間が遅くなり、ユーザーエクスペリエンス、特にモバイル環境に悪影響を及ぼします。サイトの読み込み時間が長くなると、ユーザーの直帰率が増加し、訪問者がページが完全に読み込まれる前に去る可能性が高まります。
適切な画像ファイルサイズは500 KB以下ですが、鮮明に表示したい場合は最大1 MBまで許可できます。 TinyPNGJPEG-Optimizerなどのツールを使用できます。画像を圧縮した後 GoogleのリソースPageSpeed私はGTmetrixでページロード時間をチェックしてください。読み込み時間が遅い場合は、画像サイズをさらに小さくしてください。
형식
さまざまなファイル形式（PNG、JPG、GIFなど）があり、用途に応じてファイル形式を選択する必要があります。正しい形式を使用すると、画像のクオリティとサイトの速度のバランスをとることができます。一方、間違ったファイル形式を選択すると、ファイルサイズが不必要に大きくなったり、画質が低下したりする可能性があります。
JPEG（JPG）は、写真や色の多い画像を圧縮するのに適しています。損失圧縮を使用して（一部の詳細を放棄しますが）、ファイルサイズを効果的に減らすことができます。一方、PNGはロゴ、アイコン、透明な画像に適しており、ロスレス圧縮を提供します。 PNGファイルのサイズが比較的大きいです。
アスペクト比(縦横比)
アスペクト比を一貫して維持すると、画像はさまざまなデバイスや画面サイズでも正しく表示されます。ただし、アスペクト比が合わないと、画像が切り取られたり歪んだりすることがあります。
固定レイアウトの画像（スライダー、バナーなど）は、テーマやプラグイン文書で推奨されるアスペクト比に従う必要があります。たとえば、バナーは16：9の比率が一般的です。ギャラリーやグリッドの場合は、4：3または正方形のサムネイル（1：1）のように単一のアスペクト比を選択して、すべての画像をその割合で切り取ってください。レスポンシブ画像を設定するときは、さまざまなデバイスと画面サイズでアスペクト比が正しく機能していることをテストする必要があります。
WordPress 画像サイズのベストプラクティス
ホームページの速度はユーザーエクスペリエンスとSEOに大きな影響を与えます。大きすぎる画像は WordPress サイトを遅くすることができるので、画像サイズを最適化して読み込み速度をすばやく維持しながら画質を放棄しないことが重要です。
適切なサイズに画像をサイズ変更する
サイトのニーズに合ったサイズの画像をアップロードします。 WordPressから大きな画像をアップロードすると自動的にサイズが変更されますが、このプロセスではWebスペースとトラフィックが不必要に消費されます。画像をアップロードする前に、テーマのレイアウトに応じて必要な最大サイズを確認してください。たとえば、コンテンツ領域が800ピクセルの場合、それより大きい画像は正しく表示されず、ページ速度が低下する可能性があります。
画像圧縮ツールの使用
前述のように、画像を圧縮するとファイルサイズを縮小できます。 Adobe PhotoshopやMicrosoft Photosなどの編集ソフトウェアを使用できます。
そのようなツールの代替として TinyPNGなどのオンラインツールを活用しても、効果的に画像サイズを縮小できます。
最大ファイルアップロード制限サイズを変更する
WordPressには最大ファイルアップロードサイズが設定されており、このサイズ制限はホスティングプロバイダの設定によって異なります。そのサイトでアップロード可能な最大ファイルサイズを確認するには WordPress お知らせ»メディア»新しいメディアファイルを追加するに移動します。これにより、アップロード可能な最大ファイルサイズが表示されます。
通常、このページに表示されるアップロードファイルの最大サイズより大きいファイルをアップロードする必要がない限り、この設定を調整する必要はありません。ただし、多数の作成者が参加しているブログを運営している場合は、不必要に大きな画像がアップロードされる予期しない状況を防ぐために、最大ファイルアップロードサイズ設定を下げることを検討してください。
最大アップロードサイズを変更するには、ホスティングプロバイダにお問い合わせください。 クラウドウェイズを利用する場合 Settings & Packages セクションで変更できます。
レイジローディング（Lazy Loading; 遅延ローディング）の使用
レイジローディングは、画像を必要なときにのみロードできるようにするスピードアップ技術です。ページにアクセスしたときにすべての画像をすぐに読み込むのではなく、ユーザーがスクロールして画像が画面に表示されたときに読み込みます。これにより、初期ページの読み込み時間を短縮し、トラフィック（帯域幅）を削減し、ユーザーエクスペリエンスを向上させることができます。
ほとんどの WordPress テーマとプラグインはレイジーローディングをデフォルトでサポートしています。 WordPressはバージョン5.5以降のネイティブレイジローディング機能を提供し、WP Rocket、Lazy Load by WP Rocket、a3 Lazy Loadなどのプラグインは、イメージレイジローディングプロセスを細かく制御してカスタマイズするオプションを提供します。これらのツールは、専門知識がなくても簡単に適用できるようにします。
画像サイズを効果的に減らし、サイト速度を向上させるベストプラクティス（Best Practice)の詳細については、 Diviブログ記事の "Best Practices for WordPress 画像サイズ「部分を参照してください。
最後に、
プライベートブログを運営している場合は、画像をwebpファイルに変換し、オンライン画像圧縮サイトを使用してさらに圧縮すると、画像サイズを大幅に削減できます。私はcompressor.ioというオンライン画像圧縮サイトでほとんどの画像を圧縮した後 WordPressにアップロードします。ほとんどのファイルサイズが50KB以下になります。 Cafe24 など国内ホスティングを利用する場合、Web容量が不足することがあります。そのような場合は、この方法で画像サイズを最小限に抑えることができます。
WordPressから画像をアップロードすると、同じ名前の複数のバージョンのサムネイルが作成されます。 Web容量が少ないと、すぐにディスク容量がなくなる可能性があります。そのような場合は、ホスティング商品をアップグレードするか、 ファーストコメットやケミクラウドなどの海外ホスティングを考えてみましょう。ケミクラウドは特にソウルサーバーを追加し、韓国でもスピードが速い方です。
別の方法でテーマやプラグインで生成されるサムネイルのサイズを確認して、不要なサムネイルを生成しないようにしてから、サムネイルを再生成することも検討できます。まずはバックアップを徹底した後に進むのが安全です。
使用するWebホスティングWeb容量が十分な場合は、画像をWEBP形式に変換するConverter for Mediaプラグインを使用することを検討してください。
コメントを残す