データベースに画像を保存するサーバー対Fileserverとサーバー上のZipファイル

Question

私は、ユーザーが小さな画像を見ることができるシンプルなシステムを作成しています。その画像の名前を検索ボックスに入力します。最も効率的な方法で画像を保存する方法を決定するのに問題があります。私は3つの解決策を考えている、と私は、この問題に対する最善の解決策である1疑問に思って：

1. データベース内の塊やbase64文字列として画像を保存するとしてユーザの入力に基づいて画像をロード簡単なクエリ。このようにすると、データベースの負荷が増加し、ロード時間が長くなります。

2. イメージをファイルサーバーに別々のファイルとして保存する。そして、それを読み込むには、ユーザー入力に基づいてimage.src属性を割り当てます。image.src = "./server/images/" + userInput;しかし、このようにすると、サーバー上のファイル要求の数が増えるため、より高価になります。

3. 最後に、イメージをファイルサーバー上の1つのzipファイルに保存することができました。プログラムの開始時にすべてを一度にダウンロードしてください。これの利点は、ページをロードするときに1つのリクエストのみが存在することです。ただし、すべてのファイルをロードするのに時間がかかります。

各画像のサイズは約1〜3KBです。また、すべてのイメージは手動でserver/dbに置かれます。さらに、最大約100-200の画像が表示されます。だからこれらのすべての考慮事項はあまり重要ではないかもしれません。しかし、私はこれを行うための推奨される方法が何であるか知りたい。

注：私が実行しているサーバはAWSサーバです。要求が多すぎるとサーバのコストが高くなることがわかりました。これが私がアプローチnrに懐疑的である理由です。 2

Answer 1

私も、保存された画像を管理し、AWS、EC2から取得します。私のソリューションとあなたへの提案は、オプション2と似ていますが、サーバー要求を減らす方法としてキャッシュを追加しています。

イメージをフォルダ内に保存するか、S3ストレージで保存し、のURL（）を保持するデータベースクエリかイメージ名のみから名前を呼び出します。それをHTMLのプレースホルダの中に置きます。

Select url from img.images where image_name='blue_ocean' 

はその後、私は、私が Service Workers画像をキャッシュすることを可能にする強力なWEBAPIの使用を示唆して、あなたが画像をキャッシュすることができ、HTMLサーバーに多くのリクエストについて

<img src="/images/< blue_ocean>.jpg alt=""> 

でプレースホルダにバインドしたがって、提供されるデータの量を減らすことができます。

別のアプローチは、それがX、Yだ構文解析することにより、それぞれ必要な画像をつかむ、ただ一つの要求なので、代わりに多くの要求を、要求されたすべての画像が含まれている一つのファイルや画像シートであるSpritesを、使用することです座標。この方法は非常に効率的であり、ゲームで使用され、複数の画像を要求する際のオーバーヘッドを短時間で複数回に削減するために使用されます。