画像最適化サービスのセルフサービス機能を公開

Principal Global Architect, Fastly

2022年12月06日

長く待ち望まれていた、Fastly の画像最適化サービスのセルフサービス機能が公開されました。こちらのサービスを利用すると、ユーザーは各 Fastly サービスの設定機能で画像最適化を手動で有効化または無効化できるようになります。このようなサポートを、世界最速のエッジネットワークで提供できることを大変嬉しく思います。この新たにリリースされたセルフサービス機能により、バックエンドのワークフローを自動化してコストを削減できるだけでなく、画像のリクエストや変換、パフォーマンスに関する可観測性が向上し、より詳細なデータに基づいたビジネス決定が可能になります。

画像最適化とは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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