ウェブサイトでさまざまな画像サイズを管理する方法

Question

私は何千もの画像をホストするウェブサイトを持っています。それだけでなく、各画像のサイズはウェブページの場所によって異なります。リストページでは、画像は350x200の長方形で表示され、サイドバーの画像は100x100などです。

したがって、ユーザーが私はオリジナルを保持し、サイズごとに4つのサイズ変更されたコピーを作成します。 100人のユーザーが画像をアップロードすると、結果は500画像になります。さまざまなモバイルデバイスのさまざまなサイズで何が起こるかを考えることはできません...

私はCloudFrontを使用して速度を最適化しました。また、ユーザーが画像をアップロードすると、元のサイズの画像とサイズ変更された画像がAmazon S3バケットにアップロードされます。 明日、別のサイズを追加するか、既存のサイズを変更する場合は、古いサイズのイメージを削除し、新しくサイズの変更したイメージをアップロードするスクリプトを実行する必要があります。つまり、「S3から元のサイズに戻し、新しいサイズ "。それは全く実用的ではありません。ウェブサイトを完全に再設計してイメージのサイズが完全に変わったとしたら、各イメージを新しい要件に変更し、古いイメージを削除するスクリプトを実行する必要があります。

それを達成するためのより現実的な方法はありますか？

私は次のシナリオacheiveしたい：ユーザーが画像をアップロードすると

• を、私はそれのサイズを変更し、S3
にアップロードし
• CloudFrontは、私に直接
• をリサイズしている画像を撮影します別のサイズを追加すると、CloudFrontはこのサイズがS3にないことを確認し、私のウェブサイトから原点からそれを引き出すようにします。

私はこれを実装する方法を考えることはできません。どのような助けやベストプラクティスの共有も可能です。

Answer 1

ではなく、すべてこれをやって自分で、次のような画像リサイズサービス使用することができます彼らは、オンザフライので、画像のサイズを変更することができ

• Cloudinary
• Imgix

を自分で作成して保存する必要はありません。彼らは、オンザフライで画像を操作（回転、透かし、色付け）することもできます。ビデオも！

このようなサービスを使用しない場合は、独自の仮想サイズ変更サービスを作成することができます。 （

• リサイズオンザフライ（キャッシュにCloudFrontのを用いるがリサイズ画像の任意のストレージを必要としない）、又は
• は、要求に応じてサイズを変更し、将来のアクセスのために結果を格納：主要な選択肢にするかどうかであります少ない処理コストが、ストレージ・コストを伴う）

CloudFrontのが、「このサイズはS3に欠落していることを確認し、私のウェブサイトから、原点からそれを引く」持っている可能ではありません。 （あなたは404ページで飾ることができるかもしれませんが、努力する価値はありません。）