如何管理網站上的不同圖像大小

我有一個網站將要承載數千個圖像。不僅如此，每張圖片都有不同的尺寸，具體取決於您在網頁中的位置 - 在列表頁面上，圖片顯示爲350x200的矩形，側邊欄圖片爲100x100等。如何管理網站上的不同圖像大小

因此，當用戶上傳圖片到網站，我保留原件併爲每個尺寸製作4個尺寸調整的副本。所以如果有100個用戶上傳圖片，結果將會是500張圖片。我無法想象不同大小的不同移動設備會發生什麼......

我開始使用CloudFront優化速度。當用戶上傳圖片時，我會將原始副本和調整大小的副本上傳到Amazon S3存儲桶。但是，如果明天我決定添加另一個尺寸或更改現有尺寸，我必須運行腳本來刪除舊尺寸的圖像並上傳新尺寸的圖像，這意味着「從S3獲取原始圖像，調整其大小，上傳新尺寸「。這根本不實用。想象一下，當我對網站進行完全重新設計並且圖像大小完全改變時，我將不得不運行一個腳本，將每個圖像的大小調整爲新的要求並刪除舊圖像。

有沒有更實際的方法來達到這個目標？

我想acheive以下情形：

當用戶上傳的圖像，我調整它，並把它上傳到S3
CloudFront的將被直接調整
圖像。當我添加另一個尺寸，我希望CloudFront在S3上看到此尺寸缺失，並將其從我的網站的原點中拉出。

我想不出一種方法來實現這一點。任何幫助或分享最佳實踐都會令人滿意。

來源

2017-10-19 Nikolay Traykov

一個選項可能只是存儲最高分辨率的圖像，然後動態生成其他大小*「即時」*。我做了一個小小的PHP腳本，它顯示了一些事情，除了將圖像文件名以及寬度和高度作爲參數傳遞並調用PHP的'imagecopyresampled（）'方法之一https://stackoverflow.com/a/25835507/ 2836621。另一個例子https://stackoverflow.com/a/30573825/2836621 –

謝謝你的建議。我忘了提及我完全是這樣做的（請參閱我對約翰羅森斯坦答案的評論）。如果這是唯一的好解決方案，那麼我會保持原樣。我只是覺得有些東西是我想不到的。 –

而不是自己做這一切，你可以使用一個圖像縮放服務如：

他們可以調整圖像的即時如此你不必自己創建和存儲它們。他們還可以即時處理它們（旋轉，水印，着色）圖像。影片也是！

如果您選擇不使用這樣的服務，您可以創建自己的虛擬尺寸調整服務。主要的選擇是，是否：

調整大小的即時（使用CloudFront的緩存，但不要求縮放後的圖像的任何存儲）根據要求，或
調整大小和保存以供將來訪問的結果（更少的處理費用，但涉及存儲成本）

這是不可能有CloudFront的「看到這個尺寸上缺少S3和從我的網站原點把它」。（你可以用404頁面做一些花哨的東西，但這不值得付出。）

來源

2017-10-19 23:47:33

感謝您的回覆！我已經做的是使用我的服務器來源而不是S3。我不會將所有尺寸上傳到S3，只是原件。然後，當CloudFront沒有圖像時，它會從我的服務器請求它。根據CloudFront的需求，我從S3獲取原始文件，調整原始大小，就是這樣。我不喜歡這種方法，因爲當我第一次嘗試打開圖像時，會有一些延遲。之後，CloudFront直接返回它們，一切都非常快。只是第一次讓我煩惱，但也許這是唯一的解決方案。 –

否則，我做了大量研究，發現你在亞馬遜之前所列的東西，但它很昂貴，有時甚至在你不使用時付費。 –

如何管理網站上的不同圖像大小

回答

相關問題