オンザフライの画像処理が手動およびバックエンド処理に勝る理由

画像は Web ページやモバイル アプリに命を吹き込みます。効果的な画像処理は、必要な効果を達成し、最適な Web パフォーマンスを得るために不可欠です。ただし、すべての画像処理技術が簡単で信頼性が高く、リアルタイムで実行できるわけではありません。

このブログ投稿では、3 種類の画像処理 (手動、バックエンド、オンザフライの画像処理) について簡単に説明します。次に、オンザフライの画像処理が優れた結果をもたらす理由を説明します。

手動画像処理: レスポンシブ画像のオリジナル ソリューション

より応答性の高い Web ページに対するユーザーの期待に応えるために、多くのデザイナーや開発者は、同じ画像の複数のバージョンを手動で作成し、さまざまな画面サイズ、デバイスの解像度、およびページ レイアウトに合わせて調整しています。

このアプローチには多くの問題があります。

• それは労働集約的です。
• 特に作業量が増えると、人的ミスが発生しやすくなります。
• 新しいデバイスやあまり使用されていないデバイスとブラウザの組み合わせの多くに対応するには、バージョンが十分ではありません。
• 画像を変更したいときはいつでも、すべてのバリアントを変更する必要があります。
• これにより、ストレージ コストが増加します。

バックエンド画像処理の台頭

バックエンドの画像処理により、ソフトウェアは元の画像のいくつかのバージョンを自動的に生成し、さまざまなデバイスやブラウザーに対応します。バックエンドの画像処理ソフトウェアは、将来の使用に備えて、レンダリングされたすべての画像をローカルまたはクラウドに保存します。この方法により、デザインと Web 開発の時間を大幅に節約でき、手動プロセスで見つかった多くのエラーを排除できます。

バックエンド処理は、多くの場合、1 回限りのソリューションとして社内で作成されたソフトウェアを使用して行われます。 ImageMagick や Thumbor などの既製のツールも人気のあるオプションです。

バックエンドの画像処理が不十分な場合

バックエンドの画像処理に切り替えた場合でも、手動の画像処理で発生したのと同じ問題の多くが引き続き発生します。すべてのイメージ バージョンを保存する必要があり、費用がかかります。大量の画像を含む大規模なサイトや、ユーザーが作成したコンテンツを含むサイトの場合、コストは相当なものになります。

これは、通常、多くのユーザーにとって、最も見栄えの良い画像を最小のファイル サイズで提供できないことを意味します。これらの最適化されていないファイルは、ダウンロードにも時間がかかり、ユーザー エクスペリエンスがさらに損なわれます。

バックエンドの画像処理に関する問題の概要は次のとおりです。

• すべての環境に最適化されているわけではありません。バックエンド処理では、すべてのブラウザーとデバイスに対して最適な最適圧縮画像が生成されるわけではありません。
• ユーザー生成コンテンツのサポートが不十分。バックエンド処理では、標準化された元の画像をトリミングおよびサイズ変更できますが、さまざまなサイズ、縦横比、および品質レベルの画像を処理するための高度な変換テクノロジはありません。
• 保管コスト。保管および保守するイメージ・コピーが多数あります。 WebP や AVIF などの新しいデバイスや新しい画像形式では、画像ごとにますます多くのコピーを保存する必要があり、コストが膨れ上がります。
• 帯域幅コスト。バックエンド処理では、画像ごとに比較的小さなオプション セットを生成しています。つまり、必要以上に大きな画像や圧縮率の低い画像を送信することがよくあります。
• ページの読み込み時間が遅く、ユーザー エクスペリエンスが悪い。最適に圧縮されていない画像は、ダウンロードに時間がかかり、ユーザーの認識が損なわれ、コンバージョンが減少します。

オンザフライ画像処理とその利点

オンザフライの画像処理は、より新しく高度なテクノロジであり、バックエンドの画像処理に取って代わりつつあります。

その場で画像を処理するために、ソフトウェアは、事前に一連のレンダリングを生成するのではなく、ユーザーが必要とするときに最適な画像バージョンをリアルタイムでレンダリングします。画像がレンダリングされると、元のストレージではなくキャッシュに保存されます。

各ユーザーは、最も魅力的な画像を、最小のファイル サイズで、可能な限り高速な読み込み時間で取得します。

• 毎回最適な画像が提供されます。ほぼ無限のレンダリングの可能性がありますが、すべてのデバイスとブラウザーの組み合わせで正確に適切な画像が得られます。
• ストレージの大幅な節約。レンダリングされた画像はオリジンではなくキャッシュに保存されるため、ストレージ コストが増加することはありません。
• より速いロード時間。画像が最適なレベルで圧縮されているため、ページの読み込み時間が大幅に短縮されます。
• 将来性のある画像配信。新しい画像フォーマット、新しいデバイス、新しい画像処理技術が出現すると、オンザフライ処理が対応し、追加の労力は必要ありません。

オンザフライの画像処理により、ほとんどの作業と費用が不要になり、真に最適化された結果が得られます。

この表は、手動の画像処理、バックエンドの画像処理、およびオンザフライの画像処理を比較しています。ただし、この表では、新しいテクノロジがどれほど簡単で優れているかを完全に説明することはできません。古いアプローチに苦労してきた人にとって、オンザフライの画像処理は少し魔法のように感じます。作業とコストが大幅に削減され、ユーザー エクスペリエンスが大幅に向上します。これらすべてが、より優れたビジネス成果をもたらします。

オンザフライの画像処理を実現する方法

オンザフライの画像処理では、元の画像を作成し、いくつかのルールを設定します。さまざまなパラメータに使用する値を指定するか、ソフトウェアに画像や圧縮などを最適化させることができます。

ビジュアル メディアの一般的な目標の 1 つは、特にユーザーが生成した画像で、画像の色を自動的に強調することです。 imgix は、カラー エンハンスメント オプションの完全なセットを提供します。

オンザフライの画像処理によって達成されるもう 1 つの一般的な目標は、ブラウザーに選択可能ないくつかの異なる画像を提供する HTML コードであるsrcsetsの自動生成です。自動 srcset 生成を使用して、さまざまなデバイスの解像度を考慮することができます。このトピックと関連トピックに関する新しいビデオで、これがどのように機能するかのデモを見ることができます。

結論

コスト、使いやすさ、およびエンド ユーザー エクスペリエンスの面で多くの利点があるオンザフライ画像処理は、画像を大量に使用し、トラフィックの多い Web サイトのバックエンド処理よりも優れたオプションです。

imgixは、オンザフライの画像処理のリーダーであり、堅牢な変換、シンプルな展開、およびグローバルな画像 CDN による迅速な配信を提供します。画像の最適化または imgix についてご質問がある場合は、[email protected] までお問い合わせいただくか、無料アカウントにサインアップしてください。