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

公開: 2021-05-18

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

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

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

画像を最適化する。

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

この画像最適化のステップバイステップガイドでは、以下について説明します。

画像最適化とは何ですか？
画像の最適化が重要なのはなぜですか？
Web用に画像を最適化する7つの方法

画像最適化とは何ですか？

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

画像の最適化が重要なのはなぜですか？

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

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

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

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

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

画像の最適化がいかに重要であるかがわかったところで、それを行う方法について話しましょう！このステップバイステップガイドでは、Photoshopのヒントから開発方法まですべてをカバーします。

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

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

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

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

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

画像を最適化するためにこのすべての作業を行う前に、サイトで速度テストを実行することから始めてください。最後に、自分がもたらした影響を確認できるようになります（さらに、チームや上司と共有して、賞賛を得ることができます）。

Flywheelのサポートチームの一員として、私はかなりの数の速度テストに精通していますが、これら5つが私のお気に入りです。

Google PageSpeed Insights
Pingdomツール
GTMetrix
WebPageTest
FlywheelのPerformanceInsightsアドオン

最初の4つのブラウザベースのツールは、互いに非常によく似ています。リンクを開き、URLを入力して、サイトの速度とパフォーマンスに関するクイックレポートを表示します。

Flywheel Performance Insightsは、実用的な洞察を提供します

FlywheelのホスティングプラットフォームへのアドオンであるPerformanceInsightsは、基本を超えて、ホストだけが提供できる洞察を含む、サイトの実用的な推奨事項を提供します。

さらに、ダッシュボードで時間の経過とともに指標を追跡できるため、画像の最適化などを行っているときに変更の影響を簡単に確認できます。詳細については、こちらをご覧ください。

これらのツールは、サイトの速度とパフォーマンスを向上させるために実行できるいくつかの手順を推奨しますが、このチュートリアルでは、ここではスコアに焦点を当てます。これにより、優れたベンチマークが得られるため、どこから始めているかがわかります。

2.最適な画像ファイルタイプを選択する方法を知っている

画像の作成（カメラからの保存またはPhotoshopなどのツールからのエクスポート）が完了したら、ファイルタイプを指定するオプションがあります。 Webで使用する最も一般的なファイルの種類は、JPEG、PNG、およびGIFです。そして、あなたが推測できると確信しているように、あなたのウェブサイトに配置されたとき、それらはすべて独自の長所、短所、およびベストプラクティスを持っています。

JPEG

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

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

非プログレッシブ画像がどのように読み込まれるかについてのアイデアは次のとおりです。

プログレッシブ画像の読み込み方法は次のとおりです。

Flywheelの共同創設者（Dusty、Tony、Rick）は、5年のマイルストーンを祝っています！

Photoshopで作業している場合は、「Web用に保存」としてエクスポートするとこの設定が表示されます。

PNG

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

GIF

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

Webサイト用にGIFを最適化するには、GIFの長さ、ループする必要があるかどうか、特定のページまたはサイトで実際に必要な数について批判的に考えてください。

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

Web用に画像を最適化する最も簡単な方法の1つは、サイトにアップロードする前に画像のサイズを変更することです。特にデジタル一眼レフカメラからの生の画像を使用している場合、寸法は実際に必要なものよりもはるかに大きくなることがよくあります。

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

アップロードする前に画像を切り抜くことで、ファイルサイズを小さくすることができます。これにより、サイトの読み込みが少し速くなり、さらに多くの画像のためにディスク容量を節約できます。

画像のサイズを変更するには、選択した画像編集ソフトウェアを開きます。 Photoshopは適切に機能します。または、プレビュー（Macの場合）、ペイント（Windowsの場合）、Canva（ブラウザーツール）などのより単純なツールを使用することもできます。

プロのヒント：使用するサイズや解像度が正確にわからない場合は、社内の写真家であるキンバリーベイリーは、ウェブ解像度として幅2048ピクセル、240DPIで画像をエクスポートすることを推奨しています。

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

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

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

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

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

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

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

TinyPNG

このブラウザベースのツールは、スマート非可逆圧縮を使用して画像を最適化し、使用する色の数を減らすことでファイルサイズを縮小します。（しかし、心配しないでください、気付かないでしょう！）PNGとJPEGに無料ですばやく使用できます。

ImageOptim

これは、可能な限り多くの画質を維持しながら、不要な膨張を除去することによって画像を圧縮する無料のMacアプリです。

JPEGmini

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

暴動

ラジカル画像最適化ツール（RIOT）は、画像ファイルのサイズを縮小するための無料のWindowsアプリです。並べて表示できるので、圧縮前後の画質を比較できます。

Image Optimizer、ローカル用の無料アドオン

ローカル開発環境としてローカルを使用している場合は、Image Optimizerアドオンを使用して、画像をオフラインで自動的に圧縮できます。それはあなたのサイトをスキャンしてすべての画像ファイルを探し、それらを個別に圧縮する時間を節約し、その過程であなたのサイトをスピードアップします。

5.WordPressプラグインを使用して画像の最適化を自動化する

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

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

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

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

EWWWイメージオプティマイザークラウド
JPEGおよびPNG画像を圧縮する
Kracken.io
想像する

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

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

JPEGおよびPNG画像を圧縮する

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

Kracken.io

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

想像する

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

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

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

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

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

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

これを行うための一般的な方法は、「ぼかし」手法です。これは、CSS-Tricksのこのチュートリアルで実装する方法を学ぶことができます。

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

「ぼかし」手法と同様に、読み込みが速い画像の外観を与えるのに役立つもう1つのトリックがあります。遅延読み込みです。

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

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

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

最適化されたワークフローと適切な画像最適化ツールの間で、最適化された画像からすぐにサイトのパフォーマンスを向上させることができます。

画像を超えて：高速パフォーマンスを実現するためにサイトの速度を向上させる方法を学ぶ

FlywheelのマネージドWordPressホスティングプラットフォームは、WordPressサイトを高速化するために最適化されていますが、サーバーはパズルの一部にすぎません。 Performance Insightsアドオンを使用すると、サイトのパフォーマンスを詳細に確認できると同時に、時間の経過とともにメトリックを追跡して、いつ、どのように、どのように改善するかを確認できます。物事は変わります。

もっと詳しく知る

このガイドは、Flywheelの幸福エンジニアであるTylerStokesによって書かれました。 クリエイティブがウェブサイトを最適化して、超高速のパフォーマンスを実現できるように支援します。

FlywheelのマネージドWordPressホスティングプラットフォームの詳細については、ここをクリックしてください。