ウェブサイトの画像を最適化してすべてのデバイスで機能させる方法(モバイル、デスクトップ、タブレットのレスポンシブ画像)

なぜわざわざ画像を最適化するのですか?これをお聞きします。画像のないウェブサイトを最後に見たのはいつですか? "決して" 正解です。 ��‍♂️画像は非常に重要です。そして、これはあなたに沿って行くためのその不気味な価値のあるストックフォトについてさえではありません "オンラインマーケティングの10のヒント" 役職。画像は複数の目的に役立ちます。レイアウト、デザイン要素、ロゴ、プロフィール写真、そしてもちろん、ブログの画像も考えてください.


率直に言って、2020年には少なくとも数枚の画像を使用せずにWebサイトを作成することはできません。そうは言っても、画像はウェブサイトの所有者が理解するのが簡単ではありません。どの画像をどこで使用するかという課題を別にしても、純粋に技術的な観点からそれらの画像を表示するという問題もあります。

  • 複数のデバイスに応答画像を配信する方法?
  • それらすべてのデバイスで見栄えを良くする方法?
  • そして、最も重要なのは、適切な時間に確実にロードされるようにする方法?

これらは私たちが今日答えている質問です。これが究極のガイドです ウェブサイト用に画像を最適化し、すべてのデバイスで見栄えを良くする方法:

ウェブサイト用に画像を最適化し、すべてのデバイスで機能させる方法

��なぜ私たちの言うことに耳を傾けるのか?

画像は最近私たちにとって重要なトピックとなっていますが、それは私たちの家族の新しいツールの1つが原因です– Optimole.

Optimoleは、設定してすぐに使用できる画像最適化サービスです & ツール。私たちはそれがウェブ上で最高のそのようなソリューションであると考えています、そしてそれを証明することができます!しかし、それはまた別の話です。いずれにせよ、長年にわたって、画像を適切に最適化する方法について多くのことを学びました。今日はその知識の一部を皆さんと共有したいと思います.

��サイトで画像を最適化する理由

画像は、見栄えが良いだけでなく、大量のディスク容量と帯域幅を消費します。より具体的には、画像は標準のWebページのサイズの30%〜85%を占めます.

スピードテスト

これは巨大です–そしてそれは画像の削除がオプションであるようではありません–したがって、代わりに私たちにできる最善のことは、単により少ないディスク容量をとる方法で画像を最適化する方法を学ぶことです.

特に繰り返し画像(個々のWebページごとにロードする必要のある画像)を処理する場合は、大きな効果が得られます。背景、デザイン要素、ロゴ、アイコンなどです。1つの背景画像のみを最適化すると、ページサイズが70%削減される場合があります。+.

次の例をご覧ください。

画像を最適化する前と後のページサイズの比較

しかし、待ってください、それは悪化します!一般的な画像パフォーマンスの問題が十分でなかった場合、モバイルの領域も存在します��。これは、まったく新しい一連の課題をもたらします。

まず、デスクトップのビジターとモバイルのビジターに同じ画像セットを表示しないでください。コンテキストは大きく異なります。これには、画面サイズ、向き(通常は縦向き)、さらには読む人の考え方さえ含まれます.

しかも, データが示唆する 画像の少ないモバイルデザインは、コンバージョンの点でパフォーマンスが高い傾向にある.

すべてをまとめると、複数のデバイスに応答画像を配信するときに注意する必要があることがいくつかあります。

  • まず、その特定のデバイス用に画像を最適化します
  • 最速の読み込み時間を保証するために、画像が最大許容レベルに圧縮されていることを確認してください
  • デバイスと画面を考慮して最適な数の画像を表示する

��‍♂️画像を最適化してすべてのデバイスタイプに配信する方法

画像を最適に処理し、ビジターにできるだけ早く配信するには、いくつかのコンポーネントがあります。このガイドでは、それらすべてについて説明します。

the正しい形式を選ぶ

昔からの質問から始めましょう。 PNGまたはJPG?

ほとんどの人が言う "JPG常時!" しかし、それは実際には正しくありません。

PNG対JPG

はい、ほとんどの場合、または少なくとも画像が必要になる可能性のある最も一般的なシナリオでは、JPGはディスク容量が少なくて済むため、帯域幅も少なくなります。.

しかし、ここでのキーワードは "最も一般的なシナリオ." 実際、もしあなたが持っているものが、多くの色と色の変化(別名。 "色情報")、JPGの方が確かに優れています。標準的な写真を考えてください。それらはJPGとしてよりよく機能します.

ただし、少しシンプルな画像を使用している場合は、PNGが常に優先されます.

次の例を考えてみましょう。以下は4つの画像です。

画像-1-a画像1-a:JPG

画像-1-b画像1-b:PNG

画像-2-a画像2-a:JPG

画像-2-b画像2-b:PNG

  • 画像1-aは312 KB
  • 画像2-aは196 KB

他の2つの画像のサイズを推測してみてください…

あなたの答え:

違う!

  • 画像1-bは1.3 MBです(これはおそらく推測したものです)
  • 画像2-bは106 KBです(待って、何を!?)

ご覧のように、PNGはシンプルで色数の少ない画像に適しています.

インターフェースのスクリーンショット、簡単なイラストなどを考えてください.

�� レッスン1:

常にJPGを使用する必要はありません。コンテンツに基づいて画像の大きさを予測し、正しい画像タイプを使用する.

次に、もう少しタイムリーな質問をします。 SVG? WebP?

SVGとWebP

SVGとWebPはWebでは一般的ではない画像タイプですが、使用する必要があるので使用している限り、どちらも優れています。明確にしましょう:

  • SVGはXMLベースのベクター画像形式です。画像のコンテンツは、シンプルなXMLファイルで定義できます。これは、他の基本的なデータ処理目的で使用するのと同じXMLファイルです。シンプルなベクター画像を扱っている限り、これはSVGを適切なフォーマットにします。.
  • WebPはGoogleによる新しいフォーマットです. 彼らは、WebPのサイズが同等のJPEGより25〜34%小さく、同等のPNGより26%小さいことを自慢しています。.

では、何が問題なのでしょうか。すべてをSVGとWebPに変換して画像を最適化できますか?

最初, SVG. 基本的に、SVGを使用するのは、 (a) 画像を効率的にSVGとして保存できます。 (b) そのSVGを受け取って変更することを気にしないなら.

先ほど述べたように、SVGはXMLベースです。つまり、SVGグラフィックの変更は非常に簡単です。これは必ずしも必要なことではありません。特に、ブランドのロゴやその他の重要なグラフィックを扱う場合はそうです。.

ほとんどのシナリオでは、SVGは頻繁に使用する形式ではありません.

今、に WebP. このフォーマットはすばらしいものであり、ほとんどの場合、約束どおり、多くのディスク容量を節約できます。次の2つのサンプル画像をご覧ください。

jpg画像の例

webp画像の例

  • 元のJPGバージョンは204 KB
  • WebPは58 KB

トリックは、すべてのブラウザがWebPをサポートしているわけではないということです。実際、上記で使用したWebP画像も表示されない場合があります。執筆時点では、WebPはGoogle Chrome、Firefox、Edge、Operaで動作します。もちろん、古いバージョンはフォーマットをサポートしていません.

これが実際に意味することは、WebP画像の追加は、JPGまたはPNGの追加ほど簡単ではないということです。.

つまり、技術的には次のようなコードを使用できます。

…しかし、ユーザーのブラウザがこの形式をサポートしていない場合は、代わりに見慣れた壊れた画像のアイコンが表示されます.

WebPを効果的に使用するには、代替画像を提供する必要があります。例えば:

これは多くの作業を意味します。ブログの投稿またはページにWebP画像を追加するたびに、そのようなタグを作成する必要があることを想像してみてください。 WordPressはWebPをネイティブでサポートしていないので、手動で行う必要があります。.

それでも、サイト内の複数のページに表示される画像、またはサイズが非常に大きい画像を処理していて、何らかの方法でそのサイズを縮小する必要があるすべてのツールが必要な場合は、この複雑な手動のWebPルートを使用することをお勧めします.

Photoshopで画像をWebPとして保存するか、次のようなツールを使用できます。 XnConvert (自由).

�� レッスン#2:

画像をすばやく最適化したい場合は、SVGをまったく使用しないでください。それらを作成するのに無駄に費やす時間は報われません(反対することを自由に感じてください;ここに良いです 代替テイク)。 PNGは使用がはるかに速くなり、ディスク容量の消費の点でそれほど悪くはなりません.

複数のページに表示される画像や十分に大きい画像を処理する場合は、WebPを使用します。これは、いくつかの追加ツールで実行できるWebP処理を自動的に処理できない限りです。そのような場合は、どこでもWebPを使用してください。これについては後で説明します.

��️画像を圧縮する

画像圧縮は魔法のようなものです。披露させて:

これは同じJPG画像であり、異なる圧縮レベル(多くの場合、品質レベルと呼ばれます)でのみ保存されます。

あらいぐま100%100%の品質

あらいぐま95%95%の品質

あらいぐま85%85%の品質

あらいぐま-50%50%の品質

ほとんどの人と同じように、最初の3つは同じように見えます。 4番目のものは探し始めます "少し悪い." (右クリックして "新しいタブで画像を開く")

これらの各画像に必要なディスク容量は次のとおりです。

  • 100%品質:969 KB
  • 95%:439 KB
  • 85%:186 KB
  • 50%:102 KB

でしょ?圧縮率を100%から95%に変更するだけで、品質を著しく低下させることなく、1MBから500KBまで変更できます。.

このJPG圧縮は、さまざまなツールでかなり自動的に処理できるため、朗報です。ただし、すべての画像が同じように作成されるわけではないため、同じ圧縮プロセスを実行しても、見栄えの悪い画像の隣に見栄えの良い画像が表示される場合があります.

全体として、ここで飛躍し、JPGの品質をかなり大幅にダウンスケールできます。問題の真実はあなたのサイトの訪問者がどこでも鮮明な画像を気にしないということです.

わかりました。はい、何かを見せたいとき-たとえば、商品の画像、ホテルの部屋の写真など、コンテンツの鍵となる画像のように-確かに、それらは鮮明であるべきです.

しかし、他の分野では、もう少しリラックスできます。たとえば、背景は100%鮮明である必要はありません。一般に、訪問者が直接関与していないすべての画像の品質が低下する可能性があります.

ここで役立つ2つのお気に入りのツールは次のとおりです。

ImageOptim Macのデスクトップ圧縮用。デスクトップから画像を取得し、ImageOptimにドラッグアンドドロップするだけで、ツールがマジックを実行し、完了時にソース画像を上書きします.

次に、その画像を取得して通常どおりサイトにアップロードできます.

ImageOptim-デスクトップ上の画像を最適化する優れたツール

2番目のツールは Optimole. このツールは、Webサイトでの画像の処理方法を大幅に再定義します。このディスカッションでは、メディアライブラリにある画像を最適化する場合に非常に効果的であるとしましょう。.

optimole-クラウド内の画像を最適化する優れたツール

次にPNGに移ります。 JPGと同様に、PNGも圧縮できます。しかし今回は、品質の低下という欠点はありません。ロスレスアルゴリズムを使用してPNGを効果的に圧縮できます.

つまり、常にPNGを圧縮します!

次の3つの画像を確認してください。

kwf-1
kwf-2

kwf-3

彼らは同じように見えますが、実際に取り上げます:

  • 346 KB
  • 215 KB
  • 100 KB

どちらであるかを推測してみてください.

画像を圧縮して小さくする3つのツール:

  • ImageOptim 再び。しかし、これはPNGの処理に時間がかかるため、処理するPNGがたくさんある場合は、ツールが機能している間に自分でコーヒーを作りたいと思うかもしれません。.
  • ImageAlpha. ImageOptimより​​もはるかに高速です。これは私のPNG向けの主要なデスクトップソリューションです.
  • Optimole. 当然のことながら、OptimoleはPNG圧縮も処理します。すべては自動操縦で起こります.

�� レッスン#3:

JPGを圧縮して、許容可能なレベルの品質とディスク容量を達成します。.

常にPNGを圧縮する.

correct正しいサイズの画像を提供する

これはおそらく全体の最も重要な側面です "レスポンシブ画像" 謎。ご存知のように、数百とは言わないまでも数十の異なる画面サイズがあり、私たちは何とかしてすべての画像が見栄えよく見えるようにする必要があります.

簡単な解決策は?大きな画像を提供する…いつでも縮小できますよね?まあ、技術的には正しいですが、実際には、これは多くの帯域幅を浪費し、ほとんどのデバイスでサイトのロードが非常に遅くなります.

より良い解決策は、すべての画像を最も一般的なデバイスで望ましい適切なサイズにスケーリングし、それに応じて提供することです.

予想通り、これを実現するには同じイメージの異なるバージョンが必要です.

これに対処する方法の1つは、デザインのベース幅と使用できる最大の画像サイズから始めて、いくつかの一般的なデバイスとブレークポイントについてそこから縮小することです。.

たとえば、ほとんどのWebサイトはコンテンツブロックの幅が1100ピクセルのマークを超えていないため、その場合に表示できる最大の画像も1100ピクセルの幅であると想定できます。.

次に、800ピクセルと550ピクセル(一般的な値)のブレークポイントを作成して、タブレットとモバイルのシナリオをカバーできます。これにより、すべてのデバイスで100%完璧な結果が得られるわけではありませんが、少なくとも妥当な範囲で最適化し、画像を制御下に維持します.

これを背景にして、サイトで使用する各イメージのいくつかの異なるバージョンを作成する必要があります.

実際の表示コードを処理する方法の例を次に示します。

srcset属性の魔法は、ブラウザがその内容を確認し、使用されているデバイスに基づいて最適な画像を選択することです.

上記で確認できるもう1つのカスタマイズは、sizes属性です。これは、特定の画面での画像の動作をブラウザに指示します。このシナリオでは、画像が1100ピクセルより大きいビューポートで表示されると1100ピクセルになりますが、小さいデバイスではビューポート全体を占めます。.

この種のソリューションは、画像が3840px幅の4K画面全体を占めないようにします。ただし、モバイルで表示すると、画面全体に表示されます.

このsizes属性の効果的な使用は、画像を本当にレスポンシブにする方法です.

⭐プロのトリック:必要なサイズよりも10%小さい画像を探し、ブラウザで拡大します。これにより、追加のスペースと帯域幅が節約されます。たとえば、500×500ピクセルの画像が必要な場合は、画像を450×450ピクセルに拡大し、ブラウザで500に拡大できます。これは画像によって異なりますが、ほとんどの場合、ユーザーは気づかない.

�� レッスン#4:

デザインに適した画像サイズを使用してください.

ブレークポイントを作成する.

ブレークポイントをカバーするために、同じ画像の複数のバージョンを作成します.

画像を表示するときにsrcset属性とサイズ属性を使用する.

Re RetinaおよびHiDPI画面用に画像を最適化

画像次元スペクトルのもう一方の端は、HiDPIフレンドリーな画像についてです.

ストーリーは、デスクトップ画面がどんどん大きくなり、ピクセルがどんどん密に詰め込まれ続けるというものです。最近では珍しいことではありません 4K スクリーンは15インチのラップトップに詰め込まれています。 4K解像度は3840×2160 pxなので、これらの各ピクセルは本当に小さい必要があります.

これはウェブサイトに問題を引き起こします。基本的に、サイトが1100ピクセル幅として定義されている場合、通常の条件下では、4K画面の利用可能な画面領域の約25%しか占めません。これは最適ではありません。幸いなことに、物事はそのように機能しません.

問題を回避するために、これらの高解像度画面は半分のサイズであるかのように機能します(私は単純化していますが、私に聞いてください)。したがって、1100ピクセル幅のWebサイトがHiDPI画面のごく一部を占める代わりに、2倍に拡大され、2200ピクセルを占め、画面をよりよく満たします。.

このプロセスにより、プロセス内のすべてが小さく見えることなく、画面がますますシャープになることができます.

ただし、この方法には欠点がないわけではありません。主に、あなたの画像は大ヒットします。テキストは品質を損なうことなく簡単に拡大できます。フォントはスケーリングの影響を受けません。画像は違います。直接的な結果として、HiDPI画面の準備ができていないすべての画像は、大きくぼやけて見えます!

これを修正するには、ズーム率ごとにスケーリングされた画像を提供する必要があります。これが簡単なコードです。

(ブラウザーがsrcsetをサポートしていない場合は、標準のsrcが使用されます。)

今、私が言うとき "スケーリングされた画像," 私は実際には反対側から始めるべきだという意味です。巨大な画像(3倍のラベル)から始め、次に縮小して(2倍に)小さくし、最後に1倍にし、それをデフォルトの画像として使用します。.

�� レッスン#5:

ロゴ、ブランドイメージ、および投稿とページで使用されるすべてのイメージがHiDPI画面に対応していることを確認してください.

image画像の読み込みを延期する

これは原則として簡単です。スクロールせずに見える範囲にあるすべての画像をすぐにロードする必要があります(ページのロード時)。他のすべては後で延期することができ、さらに "遅延読み込み."

遅延読み込みはオンデマンドの画像読み込みです。つまり、ユーザーが画像を必要とする前に、画像が一瞬だけ読み込まれます。そして、 "早くも遅くもない" ここで重要なのは.

理想的なシナリオでは、画像はビューポートにスクロールされる直前に読み込まれるべきです。つまり、ユーザーは画像が表示される前にプレースホルダーを見る必要はありません。それが発生した場合、時間内に読み込まれずに画像をスクロールして渡す可能性があります。画像を最適化する優れた方法ではありません.

そうは言っても、遅延読み込みはWordPressサイトで簡単に実行できるものです。 JavaScript / jQueryを使用して遅延読み込みを行うことができ、必要に応じてそのコードを自分で作成することもできます。または、次のようなプラグインを取得できます a3遅延ロード, またはあなたが使うことができます Optimole, 遅延読み込みモジュールが含まれています.

�� レッスン#6:

スクロールせずに見える画像の遅延読み込み.

CD CDN経由で画像を配信する

コンテンツ配信ネットワークは、サイトの速度を向上させるためのチートコードのようなものです。他の誰かに負荷をかけてサイトのデータを訪問者に配信するように指示しているのと同じくらい、サイトを高速化しているわけではないため、不正行為をしている.

CDここでCDNについて詳しく説明しました。確認してください.

TL; DRは、CDNがサーバーのネットワークを利用してすべてのサイトのコピーを保持し、利用可能な最も近い場所からビジターに配信するというものです。これは常にメインサーバーから配信するよりも速くなります.

画像CDNはほとんど同じように機能しますが、画像CDNのみに焦点を当てています。.

ほとんどの場合、操作はユーザーの観点からはシームレスです。サイト上のすべての画像がCDNでホストされているバージョンに置き換えられます(つまり、画像のURLが変更されます).

  • ジェットパック 人気の画像CDNが組み込まれています。無料で使用できます。主な制限は、投稿、ページ、注目画像の画像でのみ機能することです。デザイン(テーマの一部、レイアウトなど)を構成する画像には機能しません。これらは実際に一部のCDN処理を使用できる画像です.
  • Optimole メインの画像最適化機能の一部としてCDNが組み込まれています。これはあなたの投稿とページだけに限定されません.

�� レッスン#7:

サイトをイメージCDN(JetpackまたはOptimole)または一般的なCDN(MaxCDN / StackPath).

slow低速の接続でユーザーに小さい画像を提供する

ユーザーに表示する画像の種類を決定する際には、画面サイズだけでなく、さらに重要なことは、低速のインターネット接続を使用している場合、画像が読み込まれるまで10秒間待たないことです。.

これらのシナリオでは、読み込み時間と引き換えに画像の品質を下げることをお勧めします。遅い接続のユーザーは、画像をまったく見ることができることを高く評価します.

これは、ネットワーク情報APIを利用して実現できます。. ここにクールなチュートリアルがあります 手作業で実装したい場合の動作.

自動操縦で処理したい場合は、もう一度, Optimole!

�� レッスン#8:

低速のインターネット接続を使用しているユーザーに、より小さくより圧縮された画像を提供する.

��ツールツールツール!

途中で、サイトの画像配信をより効果的にするために使用できるいくつかのツールについて説明しました。これらの概要は次のとおりです。

  • Optimole –画像を自動的に最適化し、圧縮し、訪問者のビューポートに適した画像サイズを選択し、CDNを介して画像を提供し、画像を遅延読み込みし、より遅い接続速度で動作します.
  • ImageOptim そして ImageAlpha – Macでデスクトップ画像圧縮を処理します。使用できます TinyPNG 勝利。サイトに画像をアップロードする前に行ってください.
  • XnConvert –画像をWebPに変換できます.
  • a3遅延ロード プラグイン–すべての画像の遅延読み込み.
  • ジェットパック プラグイン–無料の画像CDNが付属.
  • MaxCDN / StackPath –画像だけでなく、サイト全体を管理する一般的なCDN.

画像を最適化するツール

�� 参考文献:

  • 想像してくださいvs WP Smush vs ShortPixel vs Optimole:WordPress画像の最適化に最適ですか?直接比較
  • ブログの無料画像–入​​手方法 & それらを効果的に使用する(警告!明白ではないアドバイス、データに基づく)
  • WordPressのパフォーマンスをスピードアップする11の方法
  • ウェブサイトの速度の最適化:2019年にそれを行う方法
  • 最速のWordPressホスティング–初心者向けのガイド

��‍♂️ TL; DR:

以下は、上記で共有されたすべての個々のレッスンの要約です。

レッスン1:

常にJPGを使用する必要はありません。コンテンツに基づいて画像の大きさを予測し、正しい画像タイプを使用する.

レッスン#2:

画像をすばやく最適化したい場合は、SVGをまったく使用しないでください。それらを作成するのに無駄に費やす時間は報われません(ただし、反対することもできます)。 PNGは使用がはるかに速くなり、ディスク容量の消費の点でそれほど悪くはなりません.

複数のページに表示される画像や十分に大きい画像を処理する場合は、WebPを使用します。これは、いくつかの追加ツールで実行できるWebP処理を自動的に処理できない限りです。そのような場合は、どこでもWebPを使用してください。これについては後で説明します.

レッスン#3:

JPGを圧縮して、許容可能なレベルの品質とディスク容量を達成します。.

常にPNGを圧縮する.

レッスン#4:

デザインに適した画像サイズを使用してください.

ブレークポイントを作成する.

ブレークポイントをカバーするために、同じ画像の複数のバージョンを作成します.

画像を表示するときにsrcset属性とサイズ属性を使用する.

レッスン#5:

ロゴ、ブランドイメージ、および投稿とページで使用されているすべてのイメージがHiDPI画面に対応できるように準備します。.

レッスン#6:

スクロールせずに見える画像の遅延読み込み.

レッスン#7:

サイトをイメージCDN(JetpackまたはOptimole)または一般的なCDN(MaxCDN / StackPath).

レッスン#8:

低速のインターネット接続を使用しているユーザーに、より小さく、より圧縮された画像を提供する.

画像を可能な限りウェブ用に最適化するための課題全体についてどう思われるか教えてください。また、画像の読み込みを速くするために画像をどのように処理していますか?コメントで共有.

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Karol Kによるレイアウト、プレゼンテーション、編集.

*この投稿にはアフィリエイトリンクが含まれています。つまり、製品リンクの1つをクリックしてから製品を購入すると、少額の手数料が発生します。心配はいりません、それでもあなたは標準額を支払うでしょう、それであなたの側で費用はありません.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map