画像最適化サービスのセルフサービス機能を限定公開 (LA)

画像最適化とは

画像最適化 (IO) とは、アクセスするデバイスの種類を問わず、高品質の画像を適切な形式、サイズ、解像度で作成して配信することを意味します。常にこれらの画像のファイルサイズを最小に維持しつつ、画質が損なわれないことを理想としています。このようにWebサイトの画像を最適化することで、クライアントのブラウザでの読み込み時間が短縮され、Webサイトが高速化し、パフォーマンスが向上します。 

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

画像は、現在もインターネット上のコンテンツの主要な形式です。大半のページでは、モバイルの場合は70%、デスクトップの場合は80%の画像が最適化可能で、ページの重さに最も大きな影響を与えるリソースです。そのため、画像の処理速度やサイズ、または配信方法を改善すると、パフォーマンスに大きく影響します。少なくとも、すべてのデバイスで適切に表示されるように画像をフォーマットする必要があります。また、画像の解像度とエンコーディングに対する検討も必要です。これらはどちらも、画質と画像サイズに影響します。画像変換以外にも、検索エンジン最適化 (SEO) を強化するために、ファイル名、ALT タグ、画像メタデータを考慮することも重要です。コンテンツ配信ネットワーク (CDN) と組み合わせると、最適化された画像をキャッシュし、配信速度を上げることもできます。

画像最適化は Web アプリケーションのパフォーマンスに影響を与えるか？

Webサイトの読み込みの遅延は、誰もが経験したことがあるはずです。一般的に、Web ページで画像が適切に最適化されていないと、Webサイトとのインタラクションに悪影響が生じます。例えば、ブラウザがページのレンダリングを試行する際に、ページ上の画像が素早く読み込まれなかったり、レイアウトシフトが発生したりすることがあります。Web アプリケーションの設計全体において、これらの重大な問題を考慮する必要があります。パフォーマンスの問題の結果として、少なくともユーザーの苛立ちや、カート離脱率と直帰率の増加を引き起こします。直帰率とは、ページをすぐに離脱する Webサイトのビジターの割合です。eコマースサイトの場合、直帰率は収益に直接影響を及ぼします。しかも、eコマース業界では非常に多くの画像が使われる傾向があります。最悪の場合、これらの障害が検索エンジンのランキングに悪影響を及ぼす可能性があります。画像最適化は、チームの手作業の増加や、高額な専用ソリューションへの投資を必ずしも意味するわけではありません。

Fastly の画像最適化機能のメリット

エンドユーザーの期待がますます高まる中、私たちは Fastly の IO 機能をシンプルかつ使いやすく、プラットフォームに完全に統合できるようにすることに取り組んできました。そして、この機能をよりコントロールしやすくするために、お客様がセルフサービスでこの機能を有効化できるようにし、より合理的で安全性の高い画像配信ワークフローの実現をサポートしています。 

1. 画像の素早い変換と配信 : 画像変換を Fastly のパワフルなエッジクラウドプラットフォームにオフロードできます。画像がリクエストされると、必要に応じて画像のサイズ変更、画質調整、クロップやトリミング、方向転換、形式の変換などを行います。これにより、レイテンシを排除できるほか、ページの読み込み時間を短縮してサイトの SEO パフォーマンスを改善できます。

「私たちは Fastly を使用してすべての画像を配信しており、150万件の新規画像も含め、毎日およそ20億件の画像を配信しています。実に大量の画像配信です。Fastly を採用した結果、オリジンへのリクエストが劇的に減少し、コスト削減を実現できました」

2. インフラストラクチャコストの削減 : 高価な画像変換用アプリケーションやサーバーをオリジンで使用する必要がなくなります。また、ソースファイルを1つのみ保存し、オンデマンドで各プロファイルに最適な画像をエッジで生成することで、ストレージコストを節約できます。さらに、エッジでより多くのデータをキャッシュし、データ送信コストの削減も実現できます。

「自社製のアーキテクチャから画像最適化プロセスの負担を無くすことができ、肩の荷が下りました。Fastly のおかげで、複雑なプロセスを大幅に簡素化できました。画像最適化を完全に Fastly に任せているので、今ではその存在を忘れてしまっているほどです」

3. ユーザーエクスペリエンスの向上 : Fastly のイメージオプティマイザーを利用すると、サイトの読み込み時間が短縮され、より快適なユーザーエクスペリエンスを実現できると同時に、開発チームはより重要な作業に専念できるようになります。

「Fastly のおかげで、自社のすべてのコンテンツに、ウォーターマークを瞬時に適用できます。以前は、ウォーターマークを適用するためにコンテンツを再処理する必要がありました。私たちのクライアントには数百万ものアセットがあるため、Fastly による瞬時のコントロールは、お客様と一緒にスケールアップするのを可能にする大きな変革をもたらしました」

Fastly の IO を使用すると、上記のメリットだけでなく、Fastly の最先端の CDN ネットワークとの完全な統合を実現できます。IO は、お客様のチームに負担をかけることなく、ページの読み込み時間を短縮し、ビジターの滞在時間を延ばし、検索エンジンのランキングを向上させます。

Fastly の IO は、リアルタイムの画像変換および最適化サービスです。リクエストされた画像をオリジンサーバーから取得し、ピクセルが最適化されたデータ転送効率の高い画像に変換してキャッシュし、配信します。IO は、Fastly ネットワーク内を通過する画像を操作および変換し、最適化されたバージョンの画像をキャッシュします。また、さまざまな入出力画像の形式をサポートしています。IO は、オリジンサーバーからソース画像ファイルを取得し、指定されたパラメーターを使用して変換します。Fastly IO による画像変換は、エッジにてサーバーとクライアント間で行われるため、画像配信の高速化が可能になります。また Fastly IO は、オリジンシールドと連携して機能します。オリジンシールドは、単一の配信拠点 (POP) を指定して、オリジンサーバーからコンテンツを取得してその他のキャッシュサーバーに分散します。画像の変換処理が行われた後、元の画像と変換された画像の両方がシールド POP にキャッシュされます。キャッシュされていない画像がリクエストされた場合は、リクエストはシールド POP に転送され、そこで変換が行われます。この方法により、画像をフェッチするのに要する時間が短縮され、オリジンサーバーにリクエストが送信されるのを回避しながら Fastly ネットワーク全体においてこの画像が POP で使用できるようになり、キャッシュからより多くの画像を配信できます。以下に IO のワークフローを示します。

イメージオプティマイザーをぜひお試しください

イメージオプティマイザーは、Fastly のサービスを少なくとも1つご利用いただいている Fastly のお客様のみを対象としています。同サービスは、「エッセンシャル」、「プロフェッショナル」、「エンタープライズ」の各エッジクラウドパッケージに含まれているほか、Fastly のコントロールパネルでご購入いただくことも可能です。このサービスを有効化するには、担当のアカウントマネージャーまたは japan@fastly.com までお問い合わせください。IO が有効化されると、すぐにお客様のアカウントのすべてのサービスで IO をご利用いただけます。

まとめ

Fastly のイメージオプティマイザーを使用して画像を変換およびキャッシュする方法については、こちらの包括的なチュートリアルをご覧ください。 

変換クラスを使用して、1つのクエリで複数のパラメーターを自動的に定義できます。Fastly エッジで画像最適化機能を有効にした場合に期待できるパフォーマンスの向上を確認するには、Fastly の画像最適化機能を体験できるインタラクティブなサンドボックスをお試しください。 

画像配信ソリューションの設計と設定でお困りのことがありましたら、Fastly のエキスパートにご相談ください。 

ぜひ今すぐ Fastly の無料トライアルをお試しください！