ウェブサイトの画像を最適化してパフォーマンスとUXを向上させる方法

公開: 2016-03-25

Webサイト上の画像やビデオの数が増え続けるにつれて、読み込み時間が遅くなり、ユーザーエクスペリエンスが低下するため、どの企業にとっても懸念が高まっています。インターネットデータ測定会社のHTTPArchiveを引用したTheFiscal Timesの記事によると、平均的なWebサイトのサイズは2年前の1.5MBから2.1MBになりました。この成長の主な理由の1つは、サイトへのトラフィックを増やすように設計された、動画や魅力的な画像などのコンテンツの追加です。

コンテンツタイプごとのページあたりの円グラフの平均バイト数
会計時期– Webの減速–チャート

この記事は、画像がコンテンツタイプ別の平均ページのバイトのほぼ63パーセント（合計2,087KBの1,312KB）を占めることを示しています。ビデオは10％（208 KB）で2番目に遠くに来ました。

ウェブサイトへの画像の影響は劇的で、コストのかかる帯域幅を消費し、ウェブサイトの訪問者がページの読み込みを待つ時間を増やす可能性があります。 1秒ごとにウェブサイトの全体的なコンバージョン率が低下し、最終的に収益が低下する場合は、画像とその配信を可能な限り最適化することをお勧めします。

ウェブサイトのパフォーマンスに問題がある場合は、画像で1つまたは複数の重要な間違いを犯している可能性があります。この2部構成のシリーズでは、画像とネットワークの両方を最適化して、最高のユーザーエクスペリエンスを確保し、コストを最小限に抑え、帯域幅とストレージのニーズを最小限に抑える方法を検討します。

画像の管理に関してよくある間違いと、それを回避する方法を以下に示します。

より効率的で最新の画像形式を使用しない

GoogleはChromeブラウザにWebP画像形式のサポートを追加し、MicrosoftはほとんどのInternet ExplorerおよびEdgeブラウザでJPEG-XRに対して同じことを行っていますが、開発者はまだそれらを採用していません。おそらく、これらの形式に気付いていないか、さまざまなブラウザやデバイスにさまざまな画像形式を配信するのが難しすぎるかもしれません。その結果、同じJPG形式とPNG形式に固執し、最新の形式でサイトを最適化する方法を利用していない可能性があります。

修正方法：画像をWebPおよびJPEG-XRの最新の形式に変換すると同時に、形式間のバランスをとるために圧縮品質を調整します。また、各画像にアクセスする特定のブラウザを検出し、それぞれのブラウザに異なるバージョンの画像を配信することで、視覚的な品質とファイルサイズの最適化の観点から、ユーザーが可能な限り最高の画像を受け取るようにすることができます。


16.9KB JPG	6.9KB WebP

GIF形式を使用した短いビデオクリップの埋め込み

ニュースサイト、メディアサイト、ソーシャル共有サイトで短いビデオクリップを表示するには、GIF画像形式を使用できます。 GIF形式は、単純なHTML画像タグを使用してビデオクリップを埋め込むのに簡単に使用できますが、特にモバイルデバイスではファイルが巨大で読み込みが遅く、帯域幅のコストが高く、CPU使用率が高いため、キャプチャされた映画には効率的ではありません。。

修正方法： Chromeブラウザユーザー向けのアニメーションWebPなど、最新のファイル形式を使用して同じクリップとアニメーションを配信および埋め込む方法はいくつかあります。もう1つのアプローチは、GIFファイルの不可逆圧縮を適用することです。これにより、視覚的な品質はわずかに低下しますが、ファイルサイズは大幅に減少します。

GIFファイルは、画像タグの代わりにクリップとHTML5ビデオタグを埋め込んで、MP4またはWebMビデオ形式に変換することもできます。最近のほとんどのブラウザでは、これはスムーズに機能し、サイトはまったく同じように見えますが、読み込みがはるかに高速です。これらの手順のいずれかを実行することで、ファイルサイズを大幅に削減し、ページの読み込み時間を節約し、ユーザーエクスペリエンスを向上させ、帯域幅のコストを削減できます。


6.3MB GIF	311KB MP4

すべてのユーザーに2X（Retinaディスプレイ）画像を配信

最新のモバイルデバイスとラップトップは、デバイスのピクセル比（DPR）が高くなっています。これらのデバイスでサイトの見栄えを良くしたいので、倍解像度の画像を埋め込んでいる可能性があります。これは良い習慣ですが、多くの開発者はすべてのユーザーに同じサイズの画像を配信する傾向があります。その結果、通常のディスプレイ（Retina以外のディスプレイなど）を使用しているユーザーは、高解像度の画像をダウンロードする必要がありますが、ディスプレイの解像度は半分になります。これにより、ページがロードされるのを待つ時間が無駄になり、帯域幅のコストが不必要に増加します。

修正方法： DPR値ごとに異なる解像度（通常の画像と2倍の解像度の画像など）を作成し、現在のユーザーのブラウザーでWebページのDPR値を自動的に検出します。これにより、通常のディスプレイを使用するユーザーに通常の画像を配信し、Retinaディスプレイデバイスを使用するユーザーに2倍の解像度の画像を配信できるようになります。


DPR 1.0 –100×100– 4.6KB	DPR 2.0 –200×200– 12.1KB

無駄なブラウザ側のサイズ変更

開発者が使用する一般的なショートカットの1つは、サーバー側で画像のサイズを変更する代わりに、ブラウザー側の画像のサイズ変更を使用することです。最近のブラウザでは、最終結果はまったく同じように見えますが、帯域幅に関しては話がまったく異なります。 Webサイトの訪問者は、不必要に大きな画像をダウンロードするために貴重な時間を浪費し、あなたはそれを彼らに配信するために帯域幅を浪費します。古いブラウザの場合、サイズ変更アルゴリズムは通常標準以下であるため、問題はさらに顕著になります。

修正方法：配信する画像が、必要なWebサイトのサイズに完全に適合していることを確認してください。同じ画像を異なるページに合わせて異なるサイズのサムネイルにする必要がある場合でも、大きな画像を配信してブラウザに依存してサイズを変更するのではなく、異なるサムネイルを作成する価値があります。

無駄なブラウザ側のサイズ変更の例

不必要に高品質のJPEG

JPEGは本当にウェブに革命をもたらしました。長年にわたり、この不可逆形式により、Web開発者は、競合する画像形式に必要な帯域幅の一部を使用して、高解像度の画像を非常に詳細に描写することができました。しかし、多くの開発者やグラフィックデザイナーは、JPEG圧縮を実験していません。これにより、表示品質を大幅に低下させることなく、ファイルサイズを大幅に削減できます。

85％のJPEG品質が一般的であるように見えますが、95％の品質が一般的である多くのウェブサイトを見てきましたが、はるかに低い品質では、全体的なエクスペリエンスを損なうことなくファイルサイズが大幅に削減されます。その結果、帯域幅の消費量が増え、訪問者のエクスペリエンスが低下します。

修正方法：より低いJPEG品質レベルで実験することを恐れないでください。特定のWebサイトでは、50％のJPEG品質を使用すると非常に妥当な結果が得られ、コストをはるかに上回るメリットが得られました。高品質のJPEGは常に見栄えが良くなりますが、品質の向上は必ずしも追加の帯域幅と待機時間の価値があるとは限りません。


95％JPEG – 34KB	80％JPEG – 17KB

正しくない画像ファイルタイプ

JPEG、PNG、GIFは、今日Webサイトで使用される最も一般的なファイル形式ですが、それぞれの役割が大きく異なるため、間違った形式を使用すると、訪問者の時間とお金を無駄にすることになります。

よくある間違いは、PNGを使用して写真を配信することです。 PNGは、ロスレス形式であるため、写真を可能な限り最高の状態で再現できるという一般的な誤解があります。これは一般的に当てはまりますが、これもまったく不要な最適化です。比較的高品質のJPEGは、PNGのファイルサイズの何分の1かで同等の品質の写真を返します。

修正方法：表示されるコンテンツに使用する画像形式を常に念頭に置いてください。 PNGは、コンピューターで生成された画像（チャート、ロゴなど）、または画像に透明性が必要な場合（画像オーバーレイ）に使用する必要があります。キャプチャした写真を表示する場合は、JPEGを使用する必要があります。アニメーションが必要な場合（Ajax読み込みアニメーションなど）にGIFを使用する必要があります。


PNG – 110KB	JPEG – 15KB

最適化されていない画像の配信

PNGはロスレス形式ですが、無料で入手できる圧縮ツールを使用して圧縮できます。これにより、PNGを最大50％削減しながら、まったく同じ画像を提供できます。残念ながら、多くの開発者やWebデザイナーはこの手順をスキップして、最適化されていない画像を配信します。

修正方法： PNGCrushとOptiPNGは2つのオープンソースの画像最適化ライブラリです。これらをまだ使用していない場合は、ぜひチェックしてください。最適化プロセスを自動化する必要がない場合は、Yahooのオンラインsmush.itサービスにアクセスして、PNGを手動でさらに圧縮することができます。

動作中のYahoosmush.itの例

画像メタデータを削除するのを忘れる

多くの最新のWebサイトでは、訪問者が写真をアップロードできます。ユーザーのプロフィール写真であろうと最近の旅行の共有写真であろうと、これらは元々、写真に多くのメタデータを導入した最新のカメラを使用して撮影されたものです。ほとんどの場合、このメタデータを取り除くのは良い考えですが、開発者がそうするのに時間がかかることはめったにありません。その結果、画像を配信するためにより多くの帯域幅が必要になり、ユーザーのブラウジングエクスペリエンスが遅くなります。

修正方法：画像とユーザーがアップロードした写真からメタデータを削除してください。この情報が必要な場合は、画像の一部としてではなく、どこかで利用できるようにしておくことができます。ウェブサイトに画像のメタデータが必要ない場合でも、ウェブサイトに写真を正しく表示するために実際に重要な情報のスニペットが1つあります。これは、画像の元の撮影方向です。 Exif情報を削除するときは、この情報を失う前に、Exifデータに基づいて画像を正しい方向に回転させてください。

終了した！

この記事は、包括的なものではありませんが、簡単かつ費用効果の高い方法で修正できる最も一般的な画像関連の問題の概要を説明し、過度の帯域幅の使用を排除し、Webサイトの訪問者により良いエクスペリエンスを提供します。このシリーズの最後のパートでは、画像を配信するときにネットワークを最適化するためのヒントについて説明します。