ベストプラクティス-ウェブサイト上の画像の処理

古いeコマースサイトをMVC 3に移植していますが、デザインの改善を活用したいと考えています。このサイトには現在、商品画像が3つのサイズで保存されています：サムネイル、中（リストに表示）、拡大して拡大表示。現在、正確なサイズの3つの個別の画像をアップロードする必要があり、サイトが期待するものと一致する3つの異なる名前を提供する必要があります。

サイズの大きいファイルを1つだけアップロードし、サイトで必要なサイズに縮小して、ユーザーの好み、フォームファクター（モバイル、iPadなど）に応じてサムネイルとリストのサイズを柔軟に変更したい、デスクトップなど）なので、同じ画像の多くのコピーが必要になる場合があります。私の質問は、画像を縮小してアップロード時に数回保存する必要があるかどうかです。その場合、適切なストレージ/命名規則は何ですか？

もう1つのアイデアは、単一の画像のみを保存し、クライアントに提供する前にプログラムでサイズを変更することです。誰かがこれを行ったことがありますか、さらにいくつかのマシンサイクル以外のトレードオフは何ですか？メモリ内の一時イメージをクライアントに渡すにはどうすればよいですか（URLはありません）。

私は、英国を拠点とする旅行会社の主任開発者です。私が実装したプロジェクトの1つは、私たちのサイトに写真を提供するために自動的に照会できる画像ライブラリのWebバージョンでした。約15万枚の画像が含まれ、そのうち約60〜7万枚がWebサイトで利用できます（最高評価）。

まず、約5つのサイズを定義し、これらのサイズのバージョンをオンザフライで作成して、Amazon S3に保存しました。価格は最小限でしたが、Amazonは適切に機能しないように構築されているため、画像が欠落していることがよくあります。私たちのサイトを開発すればするほど、利用できる画像のサイズが5つしかないのが嫌いになりました。

任意の画像のURIに幅や高さのパラメーターを追加して、その場でそのサイズでレンダリングさせることができるという点で、動的サイズ変更モデルに移動しました。サイズ変更された画像をキャッシュします（要求URIのMD5ハッシュをファイル名として使用）。

幅200、jpg品質80％で画像＃12345（画像はdb経由でフェッチされますが、これをファイルパスに置き換えることができます）を取得するには、URI形式は次のようになります。

http://images.domain.com/?imageid=12345&w=200&q=80

このソリューションは簡単に実装でき、シームレスに機能します。20〜30枚の画像があるページでも、Webサイトの訪問者に認識できる遅延はありません。

これはすべて.netで行っていますが、同じことを行うPHP画像サイズ変更スクリプトも作成しました。

それが役に立てば幸い、アダム

ImageProcessor

Imageprocessorは、C＃で記述された軽量で拡張可能なライブラリで、.NETを使用してオンザフライで画像を操作できます。

その場でサイズ変更：

<!--Automatic height based on width-->
http://your-image?width=600
<!--Automatic width based on height-->
http://your-image?height=250
<!--Both dimensions specified-->
http://your-image?width=600&height=250
<!--Both dimensions specified with the image anchored to the top-->
http://your-image?width=600&height=250&anchor=top
<!--Height ratio passed for automatic scaling-->
http://your-image?width=600&heightratio=0.416
<!--Width ratio passed for automatic scaling-->
http://your-image?widthratio=2.4&height=250
<!--Background color added to padded image-->
http://your-image?width=600&height=250&bgcolor=fff  

ImageProcessor.Webには、標準でキャッシングが付属しています。処理された画像は、ブラウザとサーバーの両方で、選択した期間、非同期的にキャッシュされます。サーバーキャッシュは何百万もの画像をインテリジェントに保存し、元の画像が変更されたり、キャッシュの有効期限が切れた場合は自動的に更新されます。

サムネイルが単にメイン画像のサイズ変更されたバージョンであると仮定すると、アップロード時に実行する必要があると思いますが、他のプロセスに影響を及ぼさないようにバックグラウンドジョブとしてスケジュールされる可能性があります。その場でサイズを変更する場合は、画像をキャッシュしてください。

これらすべての問題点は、一部の画像に最適なサムネイルはマスターの単純なサイズ変更ではないということです。人間が操作する方法でズームとトリミングが必要になる場合があります。自動サイズ変更をしたいかもしれませんが、これらの特定のケースでオーバーライドを許可するメカニズムがあります。

アダムが言ったことのわずかなバリエーション：

（1）カスタムエラーページを作成する（画像のルール）

（2）画像ファイル名の構造は次のようになります。

ImageId_Width_Height_Quality

唯一の例外は元の画像であり、次の名前を付ける必要があります。

ImageId_Original

（3）ファイルのアップロード時（例：1245_Original-> 1245_ *のファイルはすべて削除する必要があります）

（4）カスタムエラーページ（1245_Original Existsが存在すると想定）は、要求された画像ファイルを動的に作成する必要があります。例：

1245_250_400_80.jpg

初回もサーブします。

実際、新しい画像をアップロードすると、キャッシュが削除されます。