imgix transforms, optimizes, and delivers your visual media for faster pages, higher engagement, and a simpler workflow.
画像は Web ページやモバイル アプリに命を吹き込みます。効果的な画像処理は、必要な効果を達成し、最適な Web パフォーマンスを得るために不可欠です。ただし、すべての画像処理技術が簡単で信頼性が高く、リアルタイムで実行できるわけではありません。
このブログ投稿では、3 種類の画像処理 (手動、バックエンド、オンザフライの画像処理) について簡単に説明します。次に、オンザフライの画像処理が優れた結果をもたらす理由を説明します。
より応答性の高い Web ページに対するユーザーの期待に応えるために、多くのデザイナーや開発者は、同じ画像の複数のバージョンを手動で作成し、さまざまな画面サイズ、デバイスの解像度、およびページ レイアウトに合わせて調整しています。
このアプローチには多くの問題があります。
バックエンドの画像処理により、ソフトウェアは元の画像のいくつかのバージョンを自動的に生成し、さまざまなデバイスやブラウザーに対応します。バックエンドの画像処理ソフトウェアは、将来の使用に備えて、レンダリングされたすべての画像をローカルまたはクラウドに保存します。この方法により、デザインと Web 開発の時間を大幅に節約でき、手動プロセスで見つかった多くのエラーを排除できます。
バックエンド処理は、多くの場合、1 回限りのソリューションとして社内で作成されたソフトウェアを使用して行われます。 ImageMagick や Thumbor などの既製のツールも人気のあるオプションです。
バックエンドの画像処理に切り替えた場合でも、手動の画像処理で発生したのと同じ問題の多くが引き続き発生します。すべてのイメージ バージョンを保存する必要があり、費用がかかります。大量の画像を含む大規模なサイトや、ユーザーが作成したコンテンツを含むサイトの場合、コストは相当なものになります。
これは、通常、多くのユーザーにとって、最も見栄えの良い画像を最小のファイル サイズで提供できないことを意味します。これらの最適化されていないファイルは、ダウンロードにも時間がかかり、ユーザー エクスペリエンスがさらに損なわれます。
バックエンドの画像処理に関する問題の概要は次のとおりです。
オンザフライの画像処理は、より新しく高度なテクノロジであり、バックエンドの画像処理に取って代わりつつあります。
その場で画像を処理するために、ソフトウェアは、事前に一連のレンダリングを生成するのではなく、ユーザーが必要とするときに最適な画像バージョンをリアルタイムでレンダリングします。画像がレンダリングされると、元のストレージではなくキャッシュに保存されます。
各ユーザーは、最も魅力的な画像を、最小のファイル サイズで、可能な限り高速な読み込み時間で取得します。
オンザフライの画像処理により、ほとんどの作業と費用が不要になり、真に最適化された結果が得られます。
この表は、手動の画像処理、バックエンドの画像処理、およびオンザフライの画像処理を比較しています。ただし、この表では、新しいテクノロジがどれほど簡単で優れているかを完全に説明することはできません。古いアプローチに苦労してきた人にとって、オンザフライの画像処理は少し魔法のように感じます。作業とコストが大幅に削減され、ユーザー エクスペリエンスが大幅に向上します。これらすべてが、より優れたビジネス成果をもたらします。
画像処理 | マニュアル | バックエンド | 急いで |
---|---|---|---|
最適な圧縮の使用 | いいえ | いいえ | はい |
追加のストレージ コスト | 高い | 高い | なし |
帯域幅コスト | 高い | 高い | 低い |
画像の読み込み時間 | 遅い | 遅い | 速い |
ユーザー体験 | 貧しい | 貧しい | 素晴らしい |
ユーザー生成の画像の正規化 | 貧しい | 貧しい | 素晴らしい |
オンザフライの画像処理では、元の画像を作成し、いくつかのルールを設定します。さまざまなパラメータに使用する値を指定するか、ソフトウェアに画像や圧縮などを最適化させることができます。
ビジュアル メディアの一般的な目標の 1 つは、特にユーザーが生成した画像で、画像の色を自動的に強調することです。 imgix は、カラー エンハンスメント オプションの完全なセットを提供します。
オンザフライの画像処理によって達成されるもう 1 つの一般的な目標は、ブラウザーに選択可能ないくつかの異なる画像を提供する HTML コードであるsrcsetsの自動生成です。自動 srcset 生成を使用して、さまざまなデバイスの解像度を考慮することができます。このトピックと関連トピックに関する新しいビデオで、これがどのように機能するかのデモを見ることができます。
コスト、使いやすさ、およびエンド ユーザー エクスペリエンスの面で多くの利点があるオンザフライ画像処理は、画像を大量に使用し、トラフィックの多い Web サイトのバックエンド処理よりも優れたオプションです。
imgixは、オンザフライの画像処理のリーダーであり、堅牢な変換、シンプルな展開、およびグローバルな画像 CDN による迅速な配信を提供します。画像の最適化または imgix についてご質問がある場合は、support@imgix.com までお問い合わせいただくか、無料アカウントにサインアップしてください。
ここにも掲載されています。
オンザフライの画像処理が手動およびバックエンド処理に勝る理由 | HackerNoon