携帯電話のウェブサイトの速度に最適な画像サイズを確保する方法

あなたはあなたの携帯電話にあり、あなたが注目しているその製品を購入する準備ができています、そして、ウェブサイトはただ….loads。突然、あなたはあなたのインターネットが壊れているのか、サイトが呪われているのか疑問に思って、イライラしてタップしています。そして、正直に言って、あなたはおそらくただ跳ね返るでしょう。あなたは一人ではありません。

モバイルユーザーの53％がロードに3秒以上かかる場合、ページを放棄することをご存知ですか？今、あなたのウェブサイトに関するそれについて考えてください。それは、潜在的な顧客が消えてしまうことはありません。積み込み時間の遅い時間は、訪問者にとってイライラするだけではありません。彼らはあなたの収益を傷つけます。それらはあなたの検索エンジンのランキング（SERP）に影響を与え、そもそもあなたを見つけるのをより困難にします。この投稿では、これらの画像が多いページを制御し、携帯電話のウェブサイトの速度に最適な画像サイズを確保する方法を紹介します。また、Diviのようないくつかの優れたツールを紹介します。これは、画像を反応的に紹介するのに役立ちます。

なぜモバイル速度が重要なのですか？

遅いウェブサイトの影響は、迷惑であるだけではありません。ユーザーエクスペリエンス（UX）、検索エンジン最適化（SEO）、および収益に影響を与える可能性があります。

新しい夏のドレスや最もホットな新しいイヤホンを閲覧していると想像してください。ウェブサイトをタップすると、塗料が乾燥しているのを見ているように感じます。フラストレーションが始まり、サイトがより速い別の小売業者を見つけるために保釈するでしょう。これはバウンスと呼ばれ、オンラインビジネスにとっては悪いニュースです。 DataBoxによると、平均直帰率は約44％です。それよりも高いものは、収益の損失と関与の欠如につながり、オンラインビジネスを殺す可能性があります。

モバイルSEOを忘れないでください。 Googleは、高速負荷のモバイルサイトの優先順位付けなど、可能な限り最高のユーザーエクスペリエンスを提供することです。彼らはモバイルファーストインデックスを使用しています。つまり、検索ランキングを決定する際に、主にサイトのモバイルバージョンを見ることができます。

ただし、モバイル速度の低下の影響は、イライラしたユーザーやランキングの低下を超えています。それはあなたの収益を打つことができ、そしてそれを打つでしょう。 WordPressで構築されたゆっくりとした電子商取引Webサイトを想像してください。これらの余分な秒（1-2以上が長すぎます）は、売り上げを犠牲にする可能性があります。モバイルデバイスでサイトを迅速に実行することは収益に不可欠であるため、ウェブサイトがロードに時間がかかりすぎているため、顧客を失わないようにすることが重要です。

サイトをスピードアップするには多くの方法がありますが、低いフルーツは携帯電話のウェブサイトの速度に最適な画像サイズを決定しています。

WordPressの画像最適化の基本

あなたのウェブサイトを見栄えを良くし、ユーザーを引き付けるためには、画像が重要です。大きすぎる画像は、ウェブサイトを本当に遅くすることができます。私たちが学んだように、研究は、ほとんどの人が永遠に待つつもりはないことを示しています。それでは、速度を犠牲にすることなく画像を見栄えを良くするにはどうすればよいですか？サイトを迅速かつスムーズに走らせるためのいくつかの基本を探りましょう。

1.適切な画像形式を選択します

JPG、PNG、WebPなど、WordPress Webサイトでいくつかの画像タイプを使用できます。どちらを使用するのが最適ですか？各画像タイプとそれらを使用するのに最適な状況をより深く掘り下げましょう。

• JPG：これらはあなたの日常の写真のようなものです。それらは、風景やポートレートなど、幅広い色のバリエーションと滑らかな移行を備えた画像に最適です。ヒーローの背景、チームの写真、ブログ投稿の画像など、ほとんどの状況に適しています。JPGは不適切にサイズになり、ファイルサイズが大きくなる可能性があります。
• PNG： PNGは、ロゴやテキスト付きのグラフィックなど、鋭いエッジのある画像に最適です。また、色がサクサクしてきれいに保つため、ソリッドカラーの大きな画像の画像にも最適です。ただし、PNGのファイルサイズが大きい傾向があるため、設計の小さな領域にPNGファイルを使用してサイズを縮小します。
• Webp： GoogleのBrainchild、Webpは、多くの場合、最高の圧縮を提供するため、大きな画像を使用している場合でも、ファイルサイズがはるかに小さくなります（例：1920px x 1080px）。画質はJPGほど良くありませんが、2つのサイズの違いは重要です。

2。画像のサイズを変更します

画像サイズが重要です。サイズを抑えるには、ウェブサイトで必要なだけ大きい画像をアップロードします。巨大な画像をアップロードして縮小する必要はありません。それはあなたのために余分な作業を作成し、あなたのウェブサイトを遅くします。

1つのサイズが画像に関してすべてに適合しないことを覚えておくことが重要です。スマートフォンの訪問者は、より大きなデスクトップ画面用に設計された巨大な画像が必要ですか？彼らはしません。可能であれば、レスポンシブ画像を使用して、すべての画面サイズに完全にサイズの画像を提供します。これを後で説明しますが、WordPressに対して画像が応答することを保証する最良の方法の1つは、DiviのようなWordPressテーマを使用することです。これにより、ブラウザのブレークポイントごとに画像をアップロードしてファイルサイズを抑えることができます。

3。不必要なものを絞り出します

画像サイズに関しては、小さい方が良いです。 WordPressで画像を使用する場合、品質を犠牲にすることなく、画像をできるだけ小さくしたいと考えています。画像最適化プラグインなどの圧縮ツールを使用して、重い持ち上げを行うことができます。 EWWW Image Optimizerのようなツールは優れていますが、この投稿の後半でツールをさらに深く掘り下げます。

多くのWordPressプラグインとオンライン画像サイズ変更ツールは、損失またはロスレス圧縮を使用して画像のサイズを削減します。ロスレス圧縮は、紙を注意深く折りたたむようなものです。必要に応じて、完全に展開し、元の元を取り戻すことができます。鋭いエッジのある画像には最適ですが、常に最大のファイルサイズの削減につながるとは限りません。

一方、ロスレス圧縮はもう少し攻撃的です。同じ紙をくしゃくしゃにするようなものです。少し詳細を失う可能性がありますが、ファイルサイズがはるかに小さくなります。

4。見られる準備ができたら画像をロードします

あなたが取ることができるもう1つのステップは、WordPressの怠zyなロード画像です。長いページをスクロールすることを想像してみてください。すべての写真を一度にロードする必要がありますか？おそらくそうではありません。レイジーロードは、ページを表示するのに必要な画像のみを読み込み、ページに到達したらロードを待っているページをさらに下に置きます。 WPロケットのようなプラグインは、WordPress Webサイトに怠zyなロードを簡単に追加できます。初期のページの読み込み時間をスピードアップします。これは、訪問者を幸せにし、ページのサイズを下げるために不可欠です。

画像ディメンションのベストプラクティス

画像の寸法に関しては、ウェブサイトが迅速にロードされ、すべてのデバイスで見栄えが良いことを確認するために留意すべきいくつかの重要なプラクティスがあります。

レスポンシブ画像サイズを使用します

デバイスが異なると、画面サイズと解像度が異なるため、万能のアプローチは機能しません。たとえば、デスクトップでは幅1920pxの画像サイズが必要になる場合がありますが、モバイルデバイスの幅は600pxしか必要ありません。応答性のある画像を使用して、各デバイスに適切なサイズを提供できます。 HTMLのSecret属性やレスポンシブWordPressテーマなどのツールは、ユーザーのデバイスに基づいて適切な画像サイズを配信するために、DIV内に写真を含むことができます。

アスペクト比が重要です

画像全体に一貫した側面の裏切り者を維持することは、歪みや奇妙な収穫を避けるのに役立ちます。たとえば、デスクトップ画像に16：9のアスペクト比がある場合、モバイルバージョンは、たとえ小さい画像であっても同じ比率を維持する必要があります。これにより、画像がすべての画面サイズにわたって比例してプロフェッショナルに見えるようになります。

大きすぎることは避けてください

必要な画像よりも大きくアップロードすることは、ウェブサイトを遅くする可能性のある一般的な間違いです。たとえば、Webサイトのコンテンツエリアが幅1080pxしかない場合、幅2000pxの画像をアップロードするのは不要です。特大の画像は帯域幅とストレージを消費し、ページの読み込み時間が遅くなります。サイトに表示される最大寸法に一致するように、常に画像をサイズ変更します。

デバイス全体でテストします

適切な寸法があっても、画像はさまざまなデバイスやブラウザで異なる動作をすることができます。デスクトップ、タブレット、スマートフォン（デスクトップ、タブレット、スマートフォン）で画像を必ずテストして、鋭くて読み込むようにしてください。 Googleのモバイルフレンドリーなテストやブラウザの開発者ツールなどのツールは、すべての画面サイズの画像の問題を見つけて修正するのに役立ちます。

画像圧縮を検討してください

正しい寸法であっても、画像が大きすぎる可能性があります。圧縮ツールは、品質を犠牲にすることなくファイルサイズを削減できます。たとえば、高品質のJPGまたはWebPイメージを圧縮して、見栄えが良くなりながらより速くロードすることができます。適切な寸法と圧縮を組み合わせることで、画像が見栄えを良くし、ページサイズを最小限に抑えます。

WordPressのサイジング画像に最適なツールは何ですか？

WordPressの画像を簡単にサイズ変更する方法はいくつかあります。プラグイン、Diviなどのプレミアムテーマの組み込み機能、またはDivi AIを使用します。これらをもっと探索して、彼らが何をしているのかをよりよく理解しましょう。

1。WordPressプラグイン

画像最適化プラグインを使用することは、画像を変更する最良の方法の1つです。通常、WordPressメディアギャラリーにアップロードされるときに、画像のかさばら感やサイズの画像などのアクションを実行できます。また、多くは、WebP変換、怠zyなロード、さまざまなレベルの画像圧縮などの高度な機能も提供しています。

• EWWW Image Optimizer：バルク最適化、バックグラウンド最適化、WebP形式への変換などの機能を備えた堅牢なオプション。 EWWW Image Optimizerは、使用法が限られている無料プランと、月額8ドルからの有料プランを提供しています。
• ショートピクセル：優れた圧縮アルゴリズムと、品質を維持しながら画像ファイルサイズを大幅に削減する能力で知られています。 ShortPixelは、毎月9.99ドルから始まる限られた使用法と毎月のプランを備えた無料プランを提供します。
• Optimole：速度とパフォーマンスを強調します。画像の最適化と配信にクラウドベースのシステムを使用します。 Optimoleは、毎月22.99ドルからの使用法と有料プランが限られた無料プランを提供します。
• WP Smush ：人気のある高評価のオプション。 Smushは、自動最適化、損失/ロスレス圧縮、怠zyなロード、WebP変換などの機能を備えた無料および有料プラン（月額3ドルから）を提供します。
• Imagify：最小限の損失で高品質の圧縮に焦点を当てたAI駆動のプラグイン。 Imagifyは、月額11.99ドルからの使用法と有料プランが限られた無料プランを提供します。

2。Divi（WordPressテーマとページビルダー）

Diviは単なるWordPressテーマではありません。これは、レスポンシブWebサイトを構築するための完全なフレームワークです。携帯電話のウェブサイト速度に最適な画像サイズを使用できるレスポンシブコントロールを備えた堅牢なフロントエンドビジュアルビルダーを提供します。

Diviは、レスポンシブな編集システムと設計設定を介してモバイルイメージのサイズを処理します。 Diviに画像を追加すると、デスクトップ、タブレット、モバイルビューにさまざまな画像を設定できます。これは、DIVIのレスポンシブデザイン機能の一部であり、各デバイスタイプの画像を最適化できます。サイズ、位置、水平オフセットなど、モバイルデバイス向けに設定を調整し、すべての画面サイズで画像が完璧に見えるようにすることができます。

小さな画面の画像を変更します

画像を含む任意の設計モジュール内で、DIVIのレスポンシブコントロールを使用すると、デスクトップに1つの背景画像を表示することができ、タブレットとモバイルデバイスには別のものが表示されます。たとえば、DIVI Webサイトでヒーローセクションを編集しているときに、 1920px x 1080pxの背景画像を追加できます。これは、大きな画面に最適なサイズです。モバイルデバイスで同じ画像を表示すると、使用される画像に応じて見た目が良くない場合があります。したがって、DIVIには設定が含まれているため、小さな画面に小さな背景画像（または完全に異なる画像）を追加できます。

バックグラウンドポジショニング

Diviを使用すると、バックグラウンド画像がさまざまな画面サイズに配置される方法を制御できます。すべてのモジュール、列、行、およびセクションにはこれらのコントロールがあり、訪問者がどのデバイスを使用していても、画像が見栄えが良いことを簡単に確認できます。

たとえば、デスクトップを中心とした背景画像を設定できますが、モバイルデバイスの上または下部に再配置できます。これにより、画面のサイズに関係なく、画像の最も重要な部分が常に表示されます。これは、1つの画像を利用してページサイズを最小限に抑えるのに最適な方法です。

Diviには怠zyなロードが組み込まれています

DIVIを使用して画像または背景を追加すると、テーマは怠zyなロードを自動的に適用することにより、重い持ち上げを処理します。ユーザーがそのセクションにスクロールするまで画像はロードされず、ページがきびきびとした応答性を保ちます。 Diviは、最新のブラウザーでサポートされているHTML属性を活用し、最小限の処理オーバーヘッドで画像を延期するようにします。その結果、ページの速度が高くなり、ユーザーエクスペリエンスがスムーズになります。前向きにロードされた画像の数を減らすことにより、DIVIは最大のコンテンツペイント（LCP）などの主要なメトリックを改善し、コアWebバイタルパフォーマンスを向上させます。

DIVI内の画像の使用の詳細については、DIVI内の画像を使用するための究極のガイドをご覧ください。

Diviを取得します

3。DiviAI

Diviを使用して携帯電話のWebサイト速度に最適な画像サイズを確保することができる別の方法は、Divi AIを使用して完全にサイズの画像を生成することです。 Divi AIは、ウェブサイトの個人的なデザインアシスタントのようなものです。テキストプロンプトは、テキスト、コード、Webページ、完全なWebサイト、Pixel-Fect-Fect写真を生成できます。

たとえば、スノーボードレンタルビジネスのために、雄大な雪に覆われた山脈の画像が必要です。ロイヤリティのないストックイメージサイトを精査しましたが、必要なものが見つかりません。 Divi AIは、指定したサイズでその画像を生成できます。

また、Diviのレスポンシブコントロールのおかげで、Divi AIを使用して小さな画面用の画像を生成することもできます。

Divi aiは美しい画像を作成するだけではありません。スマート画像を作成します。必要なサイズを正確に伝えることができます。

Divi aiを取得します

Diviは、モバイルWebサイトの画像のサイズを簡単にします

携帯電話のウェブサイトの速度に最適な画像サイズを見つけることは、挑戦する必要はありません。 DIVIを使用してWebサイトを作成することを選択した場合は、ゆっくりと搭載された画像に取り組むのに適した設備を整えます。 Diviの組み込みの画像最適化機能は、レスポンシブなサイズ変更や怠zyなロードを含む、舞台裏で作業して、画像が画面サイズに完全に表示されるようにします。しかし、Diviの利点はそこで止まりません。 Divi AIを使用すると、必要な正確な寸法で高品質の画像を生成し、かさばる、ゆっくりとロードするWebページを排除できます。

さらに制御するには、EWWW Image Optimizerなどのプラグインのパワーを活用して、画像をさらに圧縮し、Webサイトの速度を微調整します。 Diviの強みを強力なツールと組み合わせることで、驚くほど速く搭載されているウェブサイトを作成でき、訪問者を幸せにし、ビジネスを繁栄させます。

あなたのウェブサイトのスピードを上げることについてもっと知りたいですか？私たちのブログからこれらの投稿をチェックしてください：

• WordPressのGoogle PagesPeed Insightsスコアを高める方法
• 12ベストワードプレス速度最適化プラグイン（ランク付け）
• Divi速度の最適化：究極のガイド
• 5つの最速のWordPressホスティング会社（テスト済み）