• ホームページ
  • 記事
  • ガイド
  • Web 用に画像を最適化する方法: サイトのパフォーマンスを向上させるためのステップバイステップ ガイド

Web 用に画像を最適化する方法: サイトのパフォーマンスを向上させるためのステップバイステップ ガイド

公開: 2023-02-12

画像がワールド ワイド ウェブにとってかけがえのない資産であることは間違いありません。 データの視覚化からテキストの段落の分割、ポートフォリオ作品の披露まで、写真とグラフィックはほとんどの Web サイト デザインの重要な部分であり、ユーザーが優れたオンライン エクスペリエンスを得るのに役立ちます。

ただし、優れたビジュアルを使用すると、Web サイトに負担がかかる可能性があります。 解像度が高くなると、ファイル サイズが大きくなり、読み込み時間が遅くなります。 別名、画像は多くの場合、サイトのパフォーマンス低下の原因です。 また、ウェブサイトに画像を追加する目的は、ユーザー エクスペリエンスを向上させることです (または、売り上げとコンバージョンを増やすこともできます!)。これは、遅いサイトでは難しいことです。

では、サイトのパフォーマンスとビジュアル デザインのバランスをどのように取っているのでしょうか?

画像を最適化する。

特にウェブサイトを念頭に置いて、ファイルサイズを最適化するために画像作成プロセス全体でできることはたくさんあります。

この画像最適化の段階的なガイドでは、次のことを説明します。

  • 画像最適化とは？
  • 画像の最適化が重要な理由
  • Web 用に画像を最適化する 7 つの方法

画像最適化とは？

一般的に言えば、画像の最適化とは、品質を損なうことなくファイル サイズを縮小することです。 作成段階で (Photoshop の適切な「エクスポート」オプションを使用して)、または Web サイトで (遅延ロードを使用してサイトにメディアを表示することで) 画像を最適化できます。 目標は、ユーザーがダウンロードしなければならないデータ量を減らして、品質を犠牲にすることなく探しているコンテンツをより速く取得できるようにすることです。

画像の最適化が重要な理由

人々が Web に注目する時間は短いため、Web サイトの読み込みを 2 秒以内にすることが重要です。 サイトを遅くする最も一般的な要因の 1 つは画像です。 (管理された WordPress ホストのように、ウェブサイトが最高のサーバーで実行されている場合でも、画像によってパフォーマンスが低下する可能性があります。)

画像最適化のベスト プラクティスを活用することで、ファイル サイズを小さくし、読み込み時間を高速に保ち、サイト訪問者のエクスペリエンスを向上させることができます。

画像の最適化が重要な理由は他にもありますが、それはビジネスの収益に直結するものです。 ウェブサイトの速度を低下させるだけでなく、画像はサイトを動かしているサーバーのディスク容量を占有します。 ほとんどのホスティング プロバイダーは、プランごとに帯域幅の制限を課しています。つまり、リソースが無制限というわけではなく、画像がすぐにそのスペースを占有してしまいます。

その制限を超えても世界の終わりではありませんが、超過料金が請求されるか、さらに悪いことに、Web サイトが閉鎖される可能性があります。

画像を最適化することで、サイトのストレージを最大限に活用し、帯域幅の制限を回避できます。

画像の最適化がいかに重要かがわかったので、次はその方法について説明しましょう。 この段階的なガイドでは、Photoshop のヒントから開発の実践まで、すべてをカバーしています。

Web 用に画像を最適化する方法

このステップバイステップ ガイドでは、Photoshop からサイトまで、画像を最適化するためにできるすべてのことを説明します。

サイトのパフォーマンスを向上させるために画像を最適化するには、次の手順に従います。

  1. 現在のサイト速度をベンチマークします。
  2. 最適な画像ファイルの種類を選択する方法を知っています。
  3. エクスポートする前に画像のサイズを変更してください。
  4. 画像を圧縮してファイル サイズを小さくします。
  5. WordPress プラグインで画像の最適化を自動化します。
  6. 「ぼかし」テクニックを使用して、低品質の画像を最初に読み込みます。
  7. 遅延読み込みを使用します。

1.現在のサイトの速度をベンチマークする

画像を最適化するためにこのすべての作業を行う前に、サイトで速度テストを実行することから始めてください! 最終的には、自分がどのような影響を与えたかを確認できます (さらに、それをチームや上司と共有して、さらなる賞賛を得ることができます)。 いくつかの一般的な速度テスト ツールは次のとおりです。

  • Google PageSpeed インサイト
  • Pingdom ツール
  • GTMetrix
  • WebPageTest

これらのブラウザー ベースのツールはすべて、互いによく似た機能を備えています。リンクを開いて URL を入力すると、サイトの速度とパフォーマンスに関する簡単なレポートが表示されます。

2. 最適な画像ファイルの種類を選択する方法を知る

画像の作成 (カメラからの保存または Photoshop などのツールからのエクスポート) が完了すると、ファイルの種類を指定するオプションが表示されます。 Web で使用される最も一般的なファイル形式は、JPEG、PNG、および GIF です。 そして、ご想像のとおり、ウェブサイトに配置する際には、それぞれに長所、短所、およびベスト プラクティスがあります。

JPEG

JPEG 画像は、小さいファイル サイズで高品質の画像を使用できるため、サイトで複雑なカラー写真を表示するのに最適です。 このファイル タイプは、サイトで使用するほとんどの画像で機能しますが、大きな例外が 1 つあります。それは、背景が透明な画像です。 (それらについては、PNG に関する次のセクションを参照してください!)

Web サイトに JPEG 画像を使用する場合は、「プログレッシブ」としてエクスポートすることを検討してください。 これにより、ブラウザーはサイトにフル解像度を完全にロードする前に、単純なバージョンの画像を即座にロードできます。

Photoshop で作業している場合は、「Web 用に保存」として書き出すときにこの設定が表示されます。

PNG

画像に大量の色が含まれていない場合 (フラットなイラストやアイコンなど)、または背景を透明にしたい場合は、PNG としてエクスポートすることをお勧めします。 画像のサイズが適切であることを確認し、PNG-24 (品質の低下がない場合は 8) として保存するオプションを探します。

GIF

Web で 3 番目に一般的な画像形式は GIF です。 256 色しかサポートしていないため、このファイル タイプを選択する必要があります。

Web サイト用に GIF を最適化するには、GIF がどれくらい持続するか、ループする必要があるかどうか、および特定のページまたはサイトで実際に必要な数について慎重に検討してください。

3. アップロードする前に画像のサイズを変更する

Web 用に画像を最適化する最も簡単な方法の 1 つは、画像をサイトにアップロードする前にサイズを変更することです。 特に、DSLR カメラからの生の画像を扱う場合、サイズは実際に必要なサイズよりもはるかに大きくなることがよくあります。

たとえば、サイトのブログ記事に画像を追加するとします。 WordPress テーマが 500 x 500 で画像を表示し、解像度が 1024 x 1024 の画像をアップロードしている場合、これらの余分なピクセルはすべてファイル サイズを増やし、サイトの速度を低下させるだけであり、実際のメリットはありません。

アップロードする前に画像をトリミングまたはサイズ変更すると、ファイル サイズが小さくなり、サイトの読み込みが少し速くなり、ディスク容量を節約してより多くの画像を保存できます。

画像のサイズを変更するには、選択した画像編集ソフトウェアを開くだけです。 Photoshop は問題なく動作しますが、Preview (Mac の場合)、Paint (Windows の場合)、Canva (ブラウザー ツール) などの簡単なツールを使用することもできます。

4.画像を圧縮してファイルサイズを縮小する

最終的な画像を適切な形式で保存し、適切なサイズにトリミングしたら、サイトにアップロードする前に最適化するためのもう 1 つの手順があります。それは圧縮です。

このプロセスは、顕著な画質を損なうことなくファイル サイズを小さくするのに役立ちます。 圧縮には、非可逆圧縮と可逆圧縮の 2 つの主なタイプがあります。

無損失圧縮は、圧縮の前後で同じレベルの品質を維持します。 非可逆圧縮では、写真の一部の要素が破棄されますが、通常は人間の目には気付かない程度です。 これらの圧縮タイプの詳細については、Imagify のこのガイドをお勧めします。

サイトの読み込みで特定の画像が表示され、ゆっくりと表示される場合は、圧縮、サイズ変更、またはその両方が必要であることを示している可能性があります。

画像を圧縮するために必要なのは、画像圧縮ツールだけです。 私のお気に入りは次のとおりです。

  • TinyPNG: PNG および JPEG 画像を圧縮するための無料のブラウザベースのツール。
  • ImageOptim: 画像を圧縮するための無料のオープンソース アプリ。
  • JPEGmini: Mac および Windows 用の写真再圧縮アプリ。
  • RIOT: 画像を最適化するための無料の Windows アプリ。
  • Image Optimizer: Local 用の無料のアドオン。

TinyPNG

画像圧縮ツール TinyPNG のスクリーンショット

このブラウザベースのツールは、スマートな非可逆圧縮を使用して画像を最適化し、使用する色の数を減らすことでファイル サイズを縮小します。 (しかし、心配する必要はありません。気にする必要はありません!) PNG と JPEG には無料ですぐに使用できます。

画像最適化

画像圧縮ツール ImageOptim のスクリーンショット

これは、できるだけ多くの画質を維持しながら、不要な肥大化を取り除いて画像を圧縮する無料の Mac アプリです。

JPEGミニ

画像圧縮ツールJPEGminiのスクリーンショット

JPEGmini は、品質と形式の両方を維持しながらファイル サイズを縮小するのに役立つ強力な有料オプションです。 無料トライアルがあるので、購入前に試してみることができます。

暴動

Radical Image Optimization Tool である RIOT のスクリーンショット

Radical Image Optimization Tool (RIOT) は、画像ファイルのサイズを縮小するための無料の Windows アプリです。 並べて表示できるので、圧縮前と圧縮後の画質を比較できます。

Image Optimizer、Local の無料アドオン

Local の無料アドオンである Image Optimizer のスクリーンショット: 世界で最も人気のあるローカル開発ツール

Local をローカル開発環境として使用している場合は、Image Optimizer Add-on を使用して、画像をオフラインで自動的に圧縮できます。 サイトをスキャンしてすべての画像ファイルを探し、それらを個別に圧縮する時間を節約し、その過程でサイトを高速化します.

5. WordPress プラグインで画像の最適化を自動化する

この時点で、画像の最適化は大変な作業だと思い始めているかもしれません。 しかし、これらの手順のいくつかを簡素化する簡単な方法もあります。それは、WordPress サイトに画像最適化プラグインをインストールすることです。

いくつかの推奨事項がありますが、それぞれに独自の機能があります。 ただし、通常、画像最適化プラグインは、WordPress サイトにアップロードするときに画像を圧縮してサイズを変更します。 つまり、これらの手順を手動で行う代わりにスキップできるため、時間を大幅に節約できます。

この方法は、クライアント向けのサイトを構築している場合にも適しています。 エンドユーザーとコンテンツ作成者にとって、画像最適化プロセスのすべてのステップを覚えておくことは大きなプレッシャーです。 彼らのためにほとんどの作業を行うプラグインをインストールすることで、構築したサイトの速度とパフォーマンスを確保するのに役立ちます。

WordPress サイトの画像を最適化するには、次のプラグインをお勧めします。

  • EWWW イメージ オプティマイザー クラウド
  • TinyPNG
  • Kracken.io
  • 想像する

EWWW イメージ オプティマイザー クラウド

Ewww 画像オプティマイザは画像を自動的に最適化します

この WordPress プラグインは、サイトに画像をアップロードするときに自動的に画像を最適化したり、過去にアップロードした画像を最適化したりすることもできます. 最適化されていない画像を含む既存のサイトで作業している場合、これは非常に有益です。

TinyPNG

TinyPNG による JPEG & PNG 画像圧縮プラグイン

TinyPNG チームによるこの WordPress プラグインは、アップロード時に JPEG および PNG 画像を最適化できます。 ブラウザベースのツールのファンなら、無料のプラグインでプロセスを合理化してください!

Kracken.io

Kraken.io プラグインは、新規および既存の画像を最適化できます

Kracken.io プラグインは、WordPress サイトの新しい画像と既存の画像の両方を最適化できます。 また、可逆圧縮モードと非可逆圧縮モードの両方をサポートしているため、最終結果を細かく制御できます.

想像する

Imagify プラグインは、品質を損なうことなく画像を最適化するのに役立ちます

この WordPress プラグインは、品質を損なうことなく画像を最適化するのに役立ちます。 これらのプラグインを使用している場合は、WooCommerce および NextGen ギャラリーとも互換性があります。

注:プラグインを選択する前に、その動作を確認してください。 サイトに問題を引き起こす可能性のあるサーバーに負担をかける操作を使用するものもあれば、FTP オプションを使用して Web サーバーの負荷を軽減するものもあります。

6.「ぼかし」テクニックを使用して、低品質の画像を最初に読み込みます

これまでの最適化手順をすべて行った後でも、ページ上で大きなファイル サイズや大量の画像を処理しているため、サイトの速度が低下している場合があります。 そのような場合、画像を最適化するだけでなく、ロード エクスペリエンスを最適化して、メディア ファイルが実際よりも速くロードされているとサイト訪問者に思わせることが役立つ場合があります。

それが、次の 2 つのステップのすべてです。画像の読み込みが高速に見えるようにすることで、ファイルの読み込み中にユーザーが空白のページを見つめることがなくなります。

これを行う 1 つの方法は、最初に低品質のイメージ (LQI) をロードすることです。 フルサイズをロードする前に画像の小さいバージョンをロードすることで、ユーザーがすべての詳細を待っている間に何かを見ることができます。 これにより、技術的にはすべてが同じ速度でロードされている場合でも、ロード時間がより速く感じられます。

これを行う一般的な方法は「ぼかし」テクニックで、CSS トリックに関するこのチュートリアルで実装方法を学ぶことができます。

7.サイトの画像を遅延読み込みする

「ぼかし」テクニックと同様に、画像の読み込みを高速に見せるためのもう 1 つのトリックがあります。遅延読み込みです。

誰かがあなたのサイトにたどり着くと、ページの上部から始まります。 ページ全体をスクロールするのにおそらく少し時間がかかるでしょう。 一度にすべての画像を読み込もうとするのではなく、遅延読み込みは、ユーザーが表示できるコンテンツを最も気にかけているという仮定の下で機能します。 そのため、ユーザーがページのそのセクションにスクロールするまで、ブラウザー ビュー内の画像が最初に完全に読み込まれ、他の画像は最初にプレースホルダーが読み込まれます。

遅延読み込みはそれ自体が優れた手法であり、これらの画像最適化のヒントと組み合わせるとさらに強力になります! また、Smush プラグインのおかげで、WordPress サイトでの作業は非常に簡単です。

これで、画像を最適化してサイトのパフォーマンスを向上させるためのステップバイステップ ガイドを終了します。 これがサイトに与えた影響を確認するには、別の速度テストを実行してください。 どうだった？

適切な画像最適化ツールを使用すると、サイトの速度とパフォーマンスがすぐに向上します!